The easiest way to understand the Node js View Engine 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:

What is the view of setting up the Node js View Engine?

  • 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…


Embedded JavaScript Template

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.

sudo npm install express-generator -g
express --view=ejs Demo_EJS

When running the command to create the project with the Node js View Engine, ejs we have the project with the following directory structure:

Node js Project File List

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:

From development to deployment part 1: Backend, NodeJS, API

// ...
// 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:

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:

      This is header
      List of programming languages
      This is footer


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:

      List of programming languages


Pug – Node js View Engine

Node js View Engine Pug

Pug – formerly known as Jade, is also a popular Node js View Engine project. To use it make the view engine set up as follows:

// 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:

// file layout.pug
doctype html
    title= title
    link(rel='stylesheet', href="")
    include header
    block content
    include footer

// file index.pug
extends layout
block content
  h1= title
  | List of programming languages
    each item in list

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. Create API server on Node.js with Express and MongoDB (part 2)

Hbs (Handlebars.js)

Node js View Engine Hbs Handlebars

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:

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:

// file layout.hbs

    { { title } }
    { { > header } }
    { { { body } } }
    { { > footer } }

// file /views/partials/header.hbs
This is header
 // file /views/partials/footer.hbs 
  This   is   footer  
 // file index.hbs 
  { { title } }  
 List   of   programming   languages 
   { { #each list}} 
      { { name } }  
   { { / each   } } 


So I have tried to use a few popular view engines in Nodejs project. If you choose to develop a product, you choose Pug because it is very simple and easy to understand.


Source link