The most popular Node.js view engines

Author: Alex Ronin

Translator: Crazy Technology House

Original: https://frontnet.eu/node-js-v...

Reproduction is strictly prohibited without permission

Node js view engine is like Blade in Laravel. The most basic definition is that the view engine is a tool that helps us write HTML code and reuse it in a shorter and simpler way than usual. In addition, it can import data from the server side and render the final HTML. Some common view engines in Node.js projects are as follows:

What is Nod.js View Engine?

EJS
Pug (Formerly Jade)
Handlebars
Haml.js
Nunjucks
...

Today I will try some of the above templates to see which one is easier to use. Let's get started!

EJS

First of all, to create a demo program for this article, we need to use ExpressJS Create a project. This project can be created quickly with express-generator.

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

When running the above command to create a project with Node.js ejs view engine, our project has the following directory structure:

With the above command, we created an Express project using the EJS view engine. The view engine is set in the app.js file as follows:

//...
//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
 
//...

Next, I'll show you how to use it. I'll create the basic layout of the website and render the data from the server. First, the data is rendered from the server.

Edit routes/index.js file:

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;

index.ejs file content:

<!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>

We have implemented rendering of views on the server. In addition, we can split the header and footer by adding the header.ejs file, and then include the following footnotes:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <header>
      <% include header %>
    </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 Node.js view engine project. To use it, set the view engine as follows:

//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

Using the example above, we created a pug file with the following contents:

//file layout.pug
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    include header
    block content
    include footer
//file index.pug
extends layout
 
block content
  h1= title
  | List of programming languages
  ul
    each item in list
      li= item.name

We can see that in the same content, Pug's code is so clear, concise and easy to understand. Pug works in much the same way as Python, even with indentation or spaces.

Hbs (Handlebars.js)

To use this template, you need to set the engine view to hbs. At the same time, blocks (called partial in handlebarjs) must be registered as follows:

var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

To address the above problems, we will also create hbs files with the following contents:

// file layout.hbs
<!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">
 
// file /views/partials/header.hbs
<h3>This is header</h3>
 
 //file /views/partials/footer.hbs 
 <h3> This   is   footer </h3> 
 
 //file index.hbs 
 <h1> {{title}} </h1> 
 List of programming languages 
 <ul> 
   {{#each list}} 
     <li> {{name}} </li> 
   {{/each }} 
 </ul>

conclusion

I tested some popular view engines in the Nodejs project. You can choose Pug in your development work because it's very simple and easy to understand.

Wechat Public Number: Front-end Pioneer

Welcome to scan the two-dimensional code, pay attention to the public number, and push you fresh front-end technical articles every day.

Welcome to continue reading other highly praised articles in this column:

More articles...

Keywords: Javascript Programming Handlebars Python

Added by NeilB on Fri, 09 Aug 2019 05:10:20 +0300

Programming VIP