Template engines

Template engines

• Nunjucks
  • Sources
• EJS
  • Sources
• Pug
  • Sources
• Conclusion

Nunjucks

Nunjunks is an open-source template engine developed by Mozilla, the creator of the famous browser Firefox. It is fast, feature-rich, and supports most of the programming logic.

It has additional features, such as:

• template inheritance: this allows the users to reuse templates in other templates. You could, for example, build a generic page as the layout and call components.
• conditions: when rendering a template, it is possible to render a part of the template conditionally. For example, when creating a button component, you could write a condition for displaying an icon based on a parameter.

Nunjunks uses the template tags {{ }} to call variables and {% %} for imports. Components have a similar structure as programming functions allow data to be passed by adding {% macro componentName(data)%} to its header. The component now can be called by including it {% from 'component.html' import componentName %}. The variable componentName is now ready to be called in its respective file using {{ componentName(dataObject) }}.

Sources

Nunjucks. (n.d.). Retrieved May 21, 2020, from https://mozilla.github.io/nunjucks/

EJS

EJS, short for Embedded Javascript templating, is a templating engine that uses plain javascript. That means that, if you wanted, it would be possible to write the template in javascript. Just like most other templating engines, it is possible to render HTML conditionally, allowing the most flexibility for creating templates.

It has additional features, such as:

• template caching: using the caching feature helps to load the template faster.
• layouts: layouts are achieved by including components, or partials, in a template. The components are then rendered in the template.
• extended tags: using more variations for tags allows the users to do more with the tags. The closing _%> tag, for example, removes all whitespace after it

EJS uses the template tags <%= %> to call variables and <%- include %> for imports. EJS allows usage of partials; these are components that are generated dynamically based on the data you pass to it. Partials are usually saved in ./views/partials/. Partials are called by including them: <%- include('partials/button', dataObject)%>.

Sources

EJS. (n.d.). Retrieved May 21, 2020, from https://ejs.co/

Pug

The template engine Pug, formerly known as Jade, is very similar to every other engine; it has features such as conditional rendering but its notation is very different from the others. For example, pug isn't written along HTML elements; it is written as in a different notation that excludes tags and other attributes normally included in HTML files.

* index.pug
nav
  navbar-default  div
    h1 My Website!
  ul
    li
      a Home
    li
      a Page 1
    li
      a Page 2
  input

would render the following HTML:

<nav>
  <div>
    <h1>My Website!</h1>
  </div>
  <ul>
    <li><a>Home</a></li>
    <li><a>Page 1</a></li>
    <li><a>Page 2</a></li>
  </ul>
  <input/>
</nav>

Sources

A Beginner's Guide to Pug — SitePoint. (2019, May 15). Retrieved from https://www.sitepoint.com/a-beginners-guide-to-pug/

Conclusion

I've used and worked with Nunjucks before and have enjoyed its flexibility. It is fast, reliable, and supports blocks, which were very helpful for the projects I was working on at the time. For this project, I'm planning to use EJS for reasons other than the obvious "I want to explore new things" argument. EJS has a very friendly syntax that helps writing EJS at a phase that wouldn't be as easy with Nunjucks.