The web team uses Mustache. At some future point we want to switch to using Vue templates.
Recommendations edit
- Make templates reusable where-ever possible - Avoid section tags inside compositions. However, there are exceptions to the rule - for example when using pseudo-composition, it's impossible not to if you want to avoid the data cascade./
- Use pseudo-composition where possible to make it easier for us to switch to Vue.js in future (see #Pseudo-composition for components which wrap other component)
- Don't rely on Mustache data cascade - try to keep flat data as much as possible.
Current challenges edit
- Mustache doesn't support composition in the same way Vue does. We workaround this by creating templates with similar names for opening and closing the template. It's not great but it will do.
- We want Vue.js server side rendering but it's not ready yet.
- Mustache confusingly will check parent object for a key if the key is absent. This can lead to unexpected results.
Timeline edit
February 8th edit
The web team discussed how we use templates and composition
November 22nd
The web team had a poll on Slack "@web-devs quick poll around code style preference:"
Examples edit
Pseudo-composition for components which wrap other components edit
{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Open}}{{/data-page-titlebar-toc-dropdown}}
{{>ComposedComponent}}
{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Close}}{{/data-page-titlebar-toc-dropdown}}