Welcome to Part 4 of this review of the Pluralsight course Building Web Applications with Node.js and Express 4.0 by Jonathan Mills.

Jonathan is a JavaScript and Node.js expert working mostly in the MEAN Stack with individuals and companies to help build their technical skills to cope with the constantly changing landscape of software development.

He is also an ASP.NET insider and an international speaker focusing on JavaScript both in the browser and on the server.

Also in this series:

Part 1 – Getting Started
Part 2 – Setting up Express
Part 3 – Setting Up Gulp
Part 4 – Templating Engines

Jade

Jade is a templating engine that runs through the Jade compiler. This allows us to write HTML code without all the angle brackets and closing tags.

We see that it only takes a couple of lines of Express JS code to use Jade as our view engine.

There’s an official Jade plugin for Brackets which provides syntax highlighting for our Jade template files.

Jonathan creates a very simple Jade file and does npm start. We see that it renders correctly.

This is all very well, but in the real world we need to deal with CSS classes and IDs etc.

Jade and JavaScript

Using CSS classes with Jade is similar to writing JavaScript. To give our body element a class of “MyClass” we do:

body(class=[“MyClass”])

We can also do functions and for loops. To create three list items:

ul
each val in [‘1′,’2′,’3’]
li = val

We can also create variables:

-var list = [‘1′,’2′,’3’]

These are all fancy ways of creating static HTML. But we can also use Jade to create dynamic HTML by passing values into our Jade variables. In our app.js we can add:

res.render(‘index’, {list: [‘a’, ‘b’]});

Now our HTML renders with two list items a and b.

Earlier in the course we used HTML comments to specify where we inject our bower components. We can achieve the same in Jade by using a different type of comment:

//- bower:css

In our gulp file we just change one line of code. We update our gulp.src argument to end with .jade instead of .html, and type gulp inject

Now all of our scripts have been added into our Jade template file.

Handlebars

Handlebars is a minimalist templating engine.

Jonathan says Jade is fairly hefty as we aren’t writing HTML anymore and there’s a lot of extra stuff involved.

If Jade feels like too much for you then you might prefer Handlebars.

It operates as JavaScript and allows variables to be passed like Jade, but at its core you’re still writing HTML.

We can install handlebars with npm:

npm install –save express-handlebars

In our app.js, we change our view engine from ‘jade’ to ‘.hbs’

We also create a reference to our ‘express-handlebars’ module and set the engine. This asks for the .hbs file to be handled by Handlebars.

We see a simple Handlebars file which renders “Hello from handlebars”.

Then we change to render “Hello from render” by passing in a variable. Whenever we want to use variables we use the double curly brackets:

{{title}}

We also see how to do for each to display each item in a list.

Jonathan says Angular likes to use the same curly braces as Handlebars, but for its own purpose, so Handlebars is less suited to Angular developers.

For much more information on Handlebars see Ryan Lewis’s course JavaScript Templating with Handlebars

EJS

EJS is another templating engine, and the one that we’ll use from here until the end of the course.

We update app.js to specify ejs as our view engine.

We see that EJS is pretty similar to Handlebars, but with a different syntax. Instead of the double curly brackets we use % and angular brackets e.g.

<%=title%>

We rename index.html to index.ejs.

Unlike Jade, HTML is valid EJS so it’s super easy to start using EJS with existing HTML.