To answer this properly, we need to first understand what a templating engine is, or better, what it comes to accomplish. Any dynamic site (blog, store, and so on) has parts which remain static, and at least rules on how the dynamic data should be inserted. A templating engine can and should be thought of as a new language in its own right and has a specialized syntax made specifically for rendering views.
Before templating engines you would have some kind of code in your actual DOM pages, through which you would insert the dynamic pieces of data at specific points. This is not great code separation, and it's definitely not a very clean option. A templating engine is meant to augment this step with its specialized syntax made specifically for this purpose; if done right, you should end up with clean and reusable templates, and leave your app clear of any bodge code.
Mustache was a pretty popular templating library for years and has basically been ported to nearly every programming language available. The problem with Mustache is that it is fairly opinionated on how you should write your templates; it follows a strict "View-Controller" separation and is a purely logic-less engine made specifically for replacing expressions with pre-computed data. Handlebars is a superset of the Mustache library, that adds a lot of logic and extensibility, making it a more flexible solution, while still retaining full backward compatibility, so that any Mustache templates can work out of the box. Following are the features of Handlebars:
It has a very simple and easy to write syntax
It allows you to add some logic using helpers but still separates it from the actual template's code to keep them easy to manage
It's very fast and allows you to pre-compile your templates in JavaScript
Because of this, Handlebars has become the premier choice when it comes to frontend templates and is currently being used in many of the popular frameworks such as Meteor and Ember.js.
Not to mention the fact that it was built by the legendary Yehuda Katz, who is a core member on projects such as, jQuery, Ruby on Rails, and the Ember.js framework.
I have been speaking about Handlebars "specialized" syntax for a bit now, and about how it was made specifically for views. Basically, every command or option in Handlebars (besides for comments of course) generates some kind of output to the page, and they were designed to fit in your DOM unobtrusively, while still being visible. For clarity's sake, let's take a look at a very simple template:
<div>
<h1>Hello {{name}}</h1>
</div>Note
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
A template can consist of standard HTML (or plain text) and Handlebars tags. There are multiple kinds of tags as we will see throughout the course of the book, but the simplest ones are placeholders. All you do is wrap two pairs of curly braces around a placeholder key; this placeholder will be replaced with data when the template is processed.
This is much cleaner then the equivalent in PHP:
<h1>Hello <?= $name; ?></h1>
And definitely cleaner then entering the data with standard JavaScript:
elem.innerHTML = "<h1>Hello " + name + "</h1>";
This is just a single line; imagine doing the same thing with an entire page. Ultimately it's about using the right tool for the job, and Handlebars is definitely not the wrong tool.
So without any further delay let's jump straight into installation.