Build a template engine for DADI Web

We abstracted the template engine in Web 3.0, opening the doors for people to hook in any engine they wish.

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

  1. Download & npm install Web from the repo.

  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’)]
     })
    
  3. Start by defining the default config-block for your engine, which is overridden by your main config file.

    N.B. 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.

  4. Start to hook in the methods .initialise(), .register() and .render() into the engine you want to use.

  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!).

🔗Conclusion

We are always looking at other parts of the Web experience we can abstract into a plugin-style setup.

We have postProcessors coming up in 5.0 – let us know if there is anything you would like to see?

Related articles

More tutorials articles
Mail icon

Like what you are reading? Want to earn tokens by becoming a DADI Node? Save money on cloud computing services? Build amazing digital product with DADI Web Services? Join our mailing list.

To hear about our news, events and products or services subscribe now. You can also indicate which services you are interested in, which we use for research and to inform the content that we send generally.

* You can unsubscribe at any time by emailing us at data@dadi.cloud or by clicking on the unsubscribe link which can be found in our emails to you. Read our Privacy Policy.