Readers/Web/Dev notes/Mustache and Vue.js and composition

The web team uses Mustache. At some future point we want to switch to using Vue templates.

Recommendations

• 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

• 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

February 8th

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

Pseudo-composition for components which wrap other components

	{{#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}}