What are template engines?

Introduction

Template engines are used when you want to rapidly build web applications that are split into different components. Templates also enable fast rendering of the server-side data that needs to be passed to the application.

For example, you might want to have components such as body, navigation, footer, dashboard, etc.

Popular template engines

Template engines are mostly used for server-side applications that are run on only one server and are not built as APIs. The popular ones include Ejs, Jade, Pug, Mustache, HandlebarsJS, Jinja2Django Template Engine, and BladeLaravel Template Engine.

How template engines work

When you build a server-side application with a template engine, the template engine replaces the variables in a template file with actual values, and displays this value to the client. This makes it easier to quickly build our application.

Example with expressJS and ejs template engine

For a server-side application written with NodeJS runtime, you can use a template engine.

The following steps demonstrate how template engines work using expressJs and the ejs template engine. The example given below renders a user’s data on the web page.

Step 1: Installing express and the ejs template engine

The following command installs the ejs template engine and the express framework:

npm install express ejs

Step 2: Setting up the view engine

const express = require("express")
const app = express();
// Set the View Engine or Template Engine
app.set('view engine', 'ejs');
app.listen(3000)

In the code above, we created our express application. The application listens on port 3000.

This line of code: app.set('view engine', 'ejs'), tells our express application that we want to use EJS as our template engine.

Step 3: Setting up the view folder

Create a folder called “view”. The view folder should contain our templates. One of these templates is index.ejs, which will generate our front page. The second template is user.ejs, which will be used to pass user data from the server-side to be immediately rendered on the webpage.

index.js
>view
   index.ejs
   user.ejs

Step 4: Setting up the routes

Let’s create the routesA URL that takes us to a page in a website for our homepage and user page.

Please note the res.render() method below. This is how you render a template in expressJS.

app.get('/', function (req, res) {
res.render("index");
})
app.get("/user", function(req,res){
const user = {
name: "Theodore Kelechukwu O.",
stack: "MERN",
email: "theodoreonyejiaku@gmail.com",
hubby: ["singing", "playing guitar", "reading", "philosoph"]
}
res.render("user", {user});
})

As we have seen, the default route “\”, when accessed, displays or renders the index.ejs page. Meanwhile, the “\user” renders the user.ejs page.

We passed the user object to the render object so as to pass the user properties to the web page and render it.

Step 5: Templating our view files

Now that we have passed user data from server-side, we need to display it right away on our frontend or webpage.

index.ejs
user.ejs
<html>
<head>
<title>This is the title</title>
</head>
<body>
<h1>Welcome to User Details</h1>
<p><b>Name:</b> <%= user.name %></p>
<p><b>Email:</b> <%= user.email %></p>
<p><b>Stack:</b> <%= user.stack %></p>
<u><b>Hubbies</b></u>
<% user.hubby.forEach(hubby =>{ %>
<li><%= hubby %></li>
<% })%>
</body>
</html>

Note the <%= variable %> pattern of displaying values. That is the way it is used in ejs. Also notice the user.forEach(); this is to show how powerful template engines can be.

Live code

Conclusion

Thanks for reading. I hope you now have a better understanding of template engines. Personally, I have used Express Handlebars and EJS, but I prefer EJS.