Try out some of the popular view engines in Nodejs project
- Tram Ho
What is the view of the engine in Node.js?
The easiest way to understand the view engine in Node.js is like the Blade in Laravel. So the most basic definition, the view engine is the tool that helps us write HTML code in a shorter and simpler way than it normally can and reuse. In addition, it can import data from the server side and render the final HTML. Some common package view engines in the project NodeJS / Express can be listed as follows:
- EJS
- Pug (Formerly Jade)
- Handlebars
- Haml.js
- Nunjucks
- …
Today I will try some of the templates above to see which one is easier to use. Let’s start…
EJS
First to create a demo for this article we need to create a project base with ExpressJS. To create the fastest I use express-generator .
1 2 | sudo npm install express-generator -g express --view = ejs Demo_EJS |
When running the command to create the project with the view engine, ejs we have the project with the following directory structure: 
So with the above command, we have created a Project Express using available EJS view engine. This view engine is setup in the app.js file:
1 2 3 4 5 6 | // ... // view engine setup app.set ('views', path.join (__ dirname, 'views')); app.set ('view engine', 'ejs'); // ... |
Next to illustrate how to use it, I will perform the basic layout of the site and render the data from the server. First we try to render the data from the server.
Edit routes/index.js file routes/index.js :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | var express = require ('express'); var router = express.Router (); / * GET home page. * / router.get ('/', function (req, res, next) { let list = [ {name: 'PHP'}, {name: 'Ruby'}, {name: 'Java'}, {name: 'Python'}, {name: 'dotNet'}, {name: 'C #'}, {name: 'Swift'}, {name: 'Pascal'}, ] res.render ('index', {title: 'Demo Ejs', list: list}); }); module.exports = router; |
File views/index.ejs :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <! DOCTYPE html> <html> <head> <title> <% = title%> </title> <link rel = 'stylesheet' href = '/ stylesheets / style.css' /> </head> <body> <header> <h3> This is header </h3> </header> <main> <h1> <% = title%> </h1> List of programming languages <ul> <% list.forEach (function (item) {%> <li> <% = item.name%> </li> <%}); %> </ul> </main> <footer> <h3> This is footer </h3> </footer> </body> </html> |
So we have implemented data transfer from server to view and rendered. In addition we can split the header, footer by adding header.ejs files, footer.ejs then include as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <! DOCTYPE html> <html> <head> <title> <% = title%> </title> <link rel = 'stylesheet' href = '/ stylesheets / style.css' /> </head> <body> <header> <% header include%> </header> <main> <h1> <% = title%> </h1> List of programming languages <ul> <% list.forEach (function (item) {%> <li> <% = item.name%> </li> <%}); %> </ul> </main> <footer> <% include footer%> </footer> </body> </html> |
Pug
Pug – formerly known as Jade, is also a popular view engine in Nodejs projects. To use it make the view engine set up as follows:
1 2 3 | // view engine setup app.set ('views', path.join (__ dirname, 'views')); app.set ('view engine', 'pug'); |
With the above example, we create pug files with the following content:
1 2 3 4 5 6 7 8 9 10 | // layout.pug file doctype html html head title = title link (rel = 'stylesheet', href = '/ stylesheets / style.css') body Include header block content include footer |
1 2 3 4 5 6 7 8 9 | // file index.pug extends layout block content h1 = title | List of programming languages ul each item in list li = item.name |
So with the same content we see how Pug’s writing is clear, concise and easy to understand. Pug works in much the same way as Python programming language ie using indent or white space. We don’t need to care if the card is open / closed because Pug will replace you.
Hbs (Handlebars.js)
To use this template we set the engine view to hbs . At the same time we have to register the blocks (in handlebarjs called partial) as follows:
1 2 3 4 | var hbs = require ('hbs'); hbs.registerPartials (__ dirname + '/ views / partials'); app.set ('views', path.join (__ dirname, 'views')); app.set ('view engine', 'hbs'); |
With the above problem we will also create hbs files with the following content:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // layout.hbs file <! DOCTYPE html> <html> <head> <title> {{title}} </title> <link rel = 'stylesheet' href = '/ stylesheets / style.css' /> </head> <body> {{> header}} {{{body}}} {{> footer}} </body> </html> <code class="language-javascript"> |
1 2 | // file /views/partials/header.hbs <h3> This is header </h3> |
1 2 | // file /views/partials/footer.hbs <h3> This is footer </h3> |
1 2 3 4 5 6 7 8 | // index.hbs file <h1> {{title}} </h1> List of programming languages <ul> {{#each list}} <li> {{name}} </li> {{/ each}} </ul> |
Conclude
So I have tried to use a few popular view engines in Nodejs project. And if you choose to develop the product, you choose Pug because it is very simple and easy to understand, and you choose the engine view for Nodejs project?
Source : viblo.asia