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.
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.
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
// 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
ejs --version
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...
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.