A template engine allows you to use static template files in your project or application, then replaces variables/instances declared in a template file with actual values at run-time.
For example, a common use is templating elements like headers and footers.
Today, we bring you 2 template engines you must try.
Pug (also known as Jade)
Pug is the middleman, this template engine is designed for Node.js in particular. It lets you embed regular Javascript code directly with template, and as for beginners, Pug makes you write code like paragraphs straight out of a book, this greatly improves code-readability and streamlines projects with multiple developers.
To understand Pug we need to remember that the browser reads HTML and CSS and then displays formatted images and text to the client based on what that HTML and CSS tells it to do.
Important notes
There are no closing tags. This engine makes use of indentation to determine the nesting of tags.Most importantly, as we said before, we can write Javascript that actually (almost/kind of) looks like Javascript within our pug files.White-space matters. The slightest mistake in your formatting/indenting/spacing means big problems for your code.You can’t copy HTML from anywhere, you have to convert everything to Pug before you can use it.
Getting started: https://pugjs.org/api/getting-started.html
You can convert HTML to PUG here: https://html-to-pug.com/
Handlebars
Handlebars is a logic-less templating engine that dynamically generates your HTML page. It’s and extension of mustache with a few additional features. Mustache is fully logic-less but Handlebars adds minimal logic thanks to the use of some helpers (such as if, with, unless, each and more).
PROS
It keeps your HTML page clean and separates the logic-less templates from the business logic in your Javascript files improving the structure, maintainability and scalability of the application.It simplifies the task of manually updating the data on each view.
How does Handlebars work?
1- Handlebars takes a template with the variables and compiles it into a function.
2- This function is then executed by passing a JSON object as an argument. This JSON object is known as context and it contains the values of the variables used in the template.
3- On its execution, the function returns the required HTML after replacing the variables of the template with their corresponding values.
Getting started: https://handlebarsjs.com/
Conclusion – Which is the best one?
I have tried both template engines (both are good) but I can tell you that Handlebars is the best and easier option to go.
Templating with pug is better, I mean, you don’t need to pre-compile before actually see potential changes. But you will have .pug files instead of html and you will need to learn pug syntaxes.
Resources
https://shieldfy.io/blog/template-engines-nodejs-developers/
https://www.sitepoint.com/a-beginners-guide-to-handlebars/
https://handlebarsjs.com/
https://pugjs.org/api/getting-started.html
Oculow 
Leave a Reply