[this is a placeholder and prone to change - please ask questions in comments]
The MobileFrontend View class encourages the overriding of a template partials by exposing a templatePartials attribute. Now the extension is mature, this seems to actually make things more difficult. Rather than having generic reusable templates we end up with many near identical templates. This is most notably observed in the classes which extend Overlays - overlays often have to replace entire template partials for headers which contain very similar HTML. It also encourages inconsistent mark up and class names.
Another sign this is a bad approach is the inconsistent use of toHtmlString and iconOptions / buttonOptions. On many occasions, specifically with Button and Icon classes - we want to include them inside a template partial. This is usually done by one of these two methods - the template for Button is used as a partial or we render a class with a template and then extract the outputted HTML. As Timo pointed out in T129943 this is very wasteful and potentially a performance problem (full text below).
If you look at OOjs UI it handles this by appending elements where needed. We could replicate such an approach by using the following kind of pattern:
var btn = new Button(); this.$( '.btn-holder' ).append( btn.$el );
We could also make many of our templates - in particular overlay headers more generic so that it is easier to create new overlays (see T139798). This work would benefit the work Joaquin and Sam have been doing with turning this code into a reusable library mfui.
Proposal
- Migrate to composition approach rather than combining template partials
- Generalise all main template files so inheriting classes do not need to override them
- Remove the templatePartials property from View class
Sign off steps
- A grep for >anchor returns 0 results in MobileFrontend and Minerva
- A grep for >button returns 0 results in MobileFrontend and Minerva
- A grep for >icon returns 0 results in MobileFrontend and Minerva
- A github search for code using "Icon.prototype.template" shows no results
- A github search for code using "Anchor.prototype.template" shows no results
- [] A github search for code using "Button.prototype.template" shows no results