Overview of EJS templating engine

Go to the tutorial below to see the comparison of all the JavaScript based templating engines

EJS is a popular javascript templating engine. The E in EJS stands for "Embedded" and JS is "JavaScript". So its an embedded javascript templating engine. It means that it uses plain javascript to generate the template. It does not have any "special" syntax of adding conditions inside the template or to loop through the array and display in the template.

• Short Learning Curve You dont need to learn new syntax for conditions and looping logic etc
• CLI Support EJS comes with robust and full featured CLI that provides all the features available in EJS library
• Debugging Debugging in EJS is as easy and similar as debugging a JavaScript app
• Performance EJS caches the templates and functions for faster rendering

Short learning curve

As mentioned above, the syntax of EJS is javascript itself. So you do not need to learn any "ejs" specific syntax to apply conditions or looping in your template.

For example, below is the ejs tempate which uses condition inside the template. If the variable "sales" is greater than 80, it prints out profit, and if it is less than "80", then it prints out loss.

<%
var sales = 95;
if(sales > 90){
%>
    <h2>Profit</h2>
<%
}else{
%>
    <h2>Loss</h2>
<% 
}
%>

The above template, when rendered, will output

<h2>Profilt</h2>

which will render as header tag in the html. There is no special syntax required to add the condition, you use the javascript syntax itself.

The same logic with different JavaScript based templating engine called handlebars will be as follows

{{#if sales > 90}}
  <h2>Profit</h2>
{{else}}
  <h2>Loss</h2>
{{/if}}

For handlebar templating engine, you will need to learn new syntax to implement the same features.

That is why development time will be faster for a new developer using EJS compared to handlebars (or custom templating syntax), as they dont have to spend time to look through the documentation and synatx of handlebarrs (or custom templating syntax).And that is why the learning curve is less for EJS.

CLI Support

EJS comes with robust and full featured cli which has the same options as the javascipt code

First install the ejs package

npm install ejs --global

To output a new html from template file by passing data

// template.ejs
My name is <%= name %>

> ejs ./path/to/template.ejs name=test
> My name is test

You can also output it to a file

> ejs ./path/to/template.ejs. name=test --output-file template.html

It will create a new file called template.html with content My name is test.

You can also pass the data separately, but the data should be JSON-formatted. Use parsed input from FILE as data for rendering.

// data.json
{
  "name": "test"
}

> ejs ./path/to/template.ejs. --data-file=./path/to/data.json --output-file template.html

To display the version

ejs --version

Debugging in EJS

Because we are using javascript everywhere, the debugging is simpler and familiar too. The errors output from ejs are plain JavaScript exceptions, with template line-numbers included.

For example, below if an ejs template which displays the variable test

<%= test %>

When rendering, we do not pass any data to the template

ejs template.ejs

So it will throw the javascript exception which can be tracked by line number

ReferenceError: ejs:1
 >> 1| <%= test %>
    2| 

test is not defined...

Performance

EJS caches the template files and immediate functions for faster rendering.

EJS ships with a basic in-process cache for caching the intermediate JavaScript functions used to render templates. It's easy to plug in LRU caching using Node's `lru-cache` library:

let ejs = require('ejs'),
    LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit

If you want to clear the EJS cache, call ejs.clearCache. If you're using the LRU cache and need a different limit, simple reset `ejs.cache` to a new instance of the LRU.