When building the original MVP of DADI Web we settled on using Dust.js as the template language. This was because it was the best ‘all rounder’ and in active-development with backing by a large corporation (LinkedIn, surprisingly).
Since then Node.js-powered front-end has matured considerably and we now see not only the number of template languages evolving, but also those wishing to bring their own template language to the DADI platform.
To this end, we abstracted the template engine in Web 3.0, opening the doors for people to hook in any engine they wish.
At time of writing we currently support Dust.js, Mustache.js, Handlebars.js, Pug (formerly ‘Jade’) and ES6 template literals. You can see any more that get added by checking on the NPM keyword ‘dadi-web-engine’.
🔗Getting started
The best way to get stuck in is to check our existing codebases, listed above. We have also created a sample engine that you can use as a starting point.
If you have an existing template engine in mind, think of this as building a wrapper interface between Web and that engine.
🔗Suggested workflow
Step 1: Download & npm install Web from the repo.
Step 2: We include and define Dust.js by default, as seen in index.js. You can change this to the location of your web-sample-engine (or use npm link). e.g.:
require(‘./main’)({
engines: \[require(‘../web-sample-engine’)\]
})
Step 3: Start by defining the default config-block for your engine, which is overridden by your main config file. Note: this needs to follow Mozilla’s Convict format.
For example, see the very simple ES6 template literals config:
const ENGINE = {
config: {
paths: {
doc: 'Paths required by ES6 templates',
format: Object,
default: {
helpers: 'workspace/utils/helpers'
}
}
},
extensions: \['.js'\],
handle: 'es6'
}
Your engine might not require any configuration. Although at the minimum you want to set the files extensions for the template files in your app.
Step 4: Start to hook in the methods .initialise(), .register() and .render() into the engine you want to use.
Step 5: You can either use your template engine locally, or if you’re proud of it enough to publish it to NPM, let us know so we can include it in the list of supported engines (don’t forget to write some tests!).
