JavaScript Template Engine: Nunjucks

Templating engines in the development of web applications is the best way to organize and manipulate HTML content intuitively and dynamically.

The Nunjucks (.njk extension) open-source project under the BSD license 2-clause “Simplified” License, is a template engine for JavaScript inspired Jinja2 (Python). It is very familiar to those you use already like Express (.ejs) or Jade (.pug), but it is much more sophisticated and powerful.

In addition to having all the flow control, loops and variables (which other template engines have), it supports advanced page layout elements, such as:

It implements a complete lexer and parser that generates an AST and a compiler that compiles raw JavaScript, making the templates much faster, with rendering time in the millisecond range, and even allowing them to be precompiled.

Additionally, the technology supports client-side rendering, allowing you to fill complex pages and using the same templates to change the page when the application receives new data. To do this, you need to precompile the templates for production, and then you only need an 8k JavaScript file to run them. It’s easy, right?

Let’s take a look at some of its features.

Key Features

Template inheritance: Facilitates the reuse of templates, that is, when writing a template it is possible to define “blocks” that child models can replace. Thus, the child model can inherit the characteristics of the parent model.

Import and macros: Allows you to load a template and access the variables and macros defined in it.

Includes: Serves to include a template within another template, it is the opposite of the extends.

If / for / while: Logic to test conditions.

How to start using it

The installation is very simple, we can execute it through npm:

npm install nunjucks --save

Once installed, insert it into the project using require ('nunjucks') and configure it. You can perform the configuration through the configure () method, which receives a literal object with the desired settings and the path of the folder where the .njk files are located. Typically, we pass the autoescape to true. The full list of available parameters is here.

In a Node.js application using Express, it would look something like this:

var app = express();

nunjucks.configure('views', {
    autoescape: true,
    express: app
});

app.get('/', function(req, res) {
    res.render('index.html');
});

In our views directory, we can create our njk:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>

  

</body>

</html>

The features of the code above are the data that is passed by the rendering function to be displayed in the final HTML, as shown below:

nunjucks.render(
  'index.njk', {
    page_title: "Templates engine characteristics",
    features: [
      {
        name: "Express",
        description: "fast"
      },
      {
        name: "Gulp",
        description: "clear"
      },
      {
        name: "Nunjucks",
        description: "better"
      }
    ]
  }
);

When interpreted, the following code generates the following HTML:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Templates engine characteristics</title>
 </head>
 <body>
   <div class="module">
     <h3>Express</h3>
     <p>fast</p>
   </div>
   <div class="module">
     <h3>Gulp</h3>
     <p>clear</p>
   </div>
   <div class="module">
     <h3>Nunjucks</h3>
     <p>better</p>
   </div>
 </body>
</html>

With this simple example, you can see how Nunjucks works and how it can help you in creating your projects. Check out the Nunjucks repository on GitHub and start using this powerful template engine!

😎🔥🚀