Handlebars vs Pug (Jade)

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: