What are templating engines (pug,hbs,ejs) in Node.js?
Hi Everyone, We are going to discuss Templating engines in node.js in this post. What Templating engines are and why do we need to use them?
So without delay, let\’s start with the question What Templating engines are in node.js
Why do we need Templating Engine in node.js?
To understand Templating engines let\’s start with the main two ways we use to serve our web applications. It can be a big topic if we go deep into the web application serving process, there could be multiple options combined with multiple technologies to serve a web application page, but we will only discuss what is needed to understand Templating engines and their requirement in web Applications.
There are two main types of serving an application. Server side and front end single page applications. In the first option whenever someone requests a page from our website, the request goes to server and we generate HTML as per the request and return the HTML page in response.
But in a Single Page Application, build with any frontend frameworks (Vue.js, Angular, React, etc.) initialy app structure is loaded, and then it sends the request to the server for data. From the server, we return data as per the request in form of JSON. After receiving JSON data, the front-end application renders it in the UI as per the design. This process is also same for the Mobile Applications. Mobile applications also build their own UI and only ask for data from the server.
What is Templating an Engine in Node.js ?
Now let\’s come back to our main topic, Templating Engines. As per our serving process, we need to serve dynamic HTML when we want to build a server-side rendered application. In this process whenever someone requests a page, a new page is served from the server and all frontend data is reloaded.
For example, if we have 4 pages, Home, About, Services, Contact Us. Home will serve home.html, About will serve about.html, and the same for the other pages services.html, and contact.html.
Basic Problems we face with regular HTML.
Now 1st problem is, all these pages will have some common content (Ex. Menubar, Sidebar, Footer, etc.) We need to duplicate this content on all pages. In the future, if we want to add a new menu option then we need to add that in all four pages. But our website may have 20 pages or more.
2nd problem is when we need lots of things in the page dynamic as per the logged-in user. (Ex. their name, profile data, etc.) This thing is not possible with simple static HTML pages.
These are just basic problems, other than these we may face lots of other problems with static HTML pages. To overcome these problems, we use templating engines. These templating engines provide us with some functionalities to overcome these issues.
Benefits of Templating engines.
Above I stated two main problems with static HTML pages. Let\’s see how Templating engines resolve those problems
1st We can keep our header and footer or any other common content in separate files and import it wherever we need. For example, we will create a separate file for the header and then import it into all of our pages. In the future, if we need to add or update anything in the header, we need to make changes only in one file and all of our pages will be updated automatically.
2nd these templating engines provide some special syntax in which we can render dynamic data. We will discuss this further below. Other than these features, there are a lot more things that templating engines provide us like conditional rendering with if/else, and loop options to print dynamic data in arrays and objects.
What templating engines are available to use with Node.js?
Now we understand the basic usage and benefits of templating engines let\’s discuss the options we have for templating engines.
We have three main templating engines. These are widely used and follow different philosophies. The usage of these templating engines may be a little different from each other but in the end all these templating engines serve the same purpose.
Here are the main three templating engines that we have.
- Handlebars (https://handlebarsjs.com/)
- EJS (https://ejs.co/)
- PUG (https://pugjs.org)
You can check this video about Handlebars usage with Node.js
Conclusion
So the conclusion for templating engines is that templating engines will help us render and generate dynamic HTML content. With the help of templating engines, we can render condition-based content and also loop through data in the case of arrays and objects.
