Page MenuHomePhabricator

Precompile templates to JS functions
Closed, DeclinedPublic5 Estimated Story Points

Description

Because of Page-Previews the mustache compiler is going to be sent to the desktop site by default.

Mustache templates in Page-Previews should be precompiled to JS and included in the asset bundle in development so that we don't have to send the mustache compiler to the client.

We also should be able to quantify the changes in size of assets sent to the client and performance of using pre-compiled templates for future decisions.

Approach

  1. Add mustache loaders to webpack config and require template files from src/ sources where used
  2. Measure and document pre and post change size and performance
  3. Document on wiki and ADR

AC

  • Mustache templates are required by the JS files that use them
  • Mustache templates and the mustache compiler are not sent by the ResourceLoader and do not show up in extension.json
  • We have documentation and metrics pre and post this patch regarding size of assets sent to client and JS performance impact
  • If worth it after analysis, write an ADR documenting the change and decision, and merge patches for production.

Research, POC and proposal to decline this task: T160058#3167873

Details

Event Timeline

Jdlrobson moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog-Archived board.
Jdlrobson subscribed.

This is well defined so I've moved its column. I've suggested as high as this helps us make decisions about the future of MobileFrontend. I suggest we work on this sooner rather than later. Feel free to argue in a future prioritisation meeting.

Jdlrobson set the point value for this task to 5.

I've been researching mustache.js (canonical impl) and hogan.js (twitter's impl) and this is what I've found out:

  • Mustache.js doesn't precompile templates.
    • It can precompile a token tree which is bigger than the source but there is no public API for consuming it.
    • You need the library both at precompilation and runtime (which we already ship).
  • Hogan.js does precompile templates.
    • We use it in mobile, but not desktop (which already ships mustache).
    • The precompiled templates require of the library runtime
    • Patch: WIP: Precompile mustache templates to JS
      • It would add the Hogan.js runtime to the compiled assets
        • Seems wasteful given mustache is in core and this hogan compiler would end up duplicated with mustache or other parts of the system using hogan
      • The mustache templates can indeed be precompiled to JS
        • Difference in size doesn't seem to be big
        • The string is already parsed. Could be a perf improvement for mobile, doubt it will make a difference on desktop. Specially in this particular instance
        • The full hogan.js is included by mustache-loader, it could probably be tweaked to only include the hogan.js/lib/template.js for a smaller bundle size since templates are precompiled.

Because of this ⬆️,

  • I don't think we should bundle the templates into the compilation step right now, in Page-Previews.
  • This seems like it could be an improvement for a project like MobileFrontend where hogan is already used extensively.
  • After review/discussion we should decline this task.

Moving to review.


Links:

Change 347341 had a related patch set uploaded (by Jhernandez):
[mediawiki/extensions/Popups@master] WIP: Precompile mustache templates to JS

https://gerrit.wikimedia.org/r/347341

Change 347341 abandoned by Jhernandez:
WIP: Precompile mustache templates to JS

Reason:
Not following through with this. See T160058

https://gerrit.wikimedia.org/r/347341

Thanks for the write up. Seems we learned a bunch. Declining is fine with me.
How do we want to go ahead with this for MobileFrontend? We have a lot of templates there so it would be good to get a sense of what the blockers are and how we envision that happening.

@Jdlrobson As it is right now, I don't have any doubts that precompiling in MobileFrontend will be a benefit. Hogan supports it, and if our tooling does, then we'll be sending smaller templates and doing less work in mobile devices. All pluses.