Book Image

Instant Handlebars.js

By : Gabriel Manricks
Book Image

Instant Handlebars.js

By: Gabriel Manricks

Overview of this book

Handlebars is one of the leading JavaScript templating engines and is quickly gaining widespread adoption by developers, as well as with frameworks like Ember.js and Meteor. "Instant Handlebars.js" is a complete guide to the Handlebars library filled with internal concepts and practical examples that will help illustrate what's going on and take you from a complete beginner to a Handlebars expert. "Instant Handlebars.js" begins with the very basics, requiring no previous knowledge about templating engines. Throughout the course of this book, you get a thorough tour of all the features available in Handlebars.js and you will learn how to organize your websites for both development and production. In this book, we will cover how to create templates with both placeholders and helpers. We will then go into organizing your projects for rapid -development using Require.js and how to optimize and compile your projects for production. To finish off, you will learn how to annotate your code and leave debug points so that you can easily maintain and troubleshoot your code in the future. Handlebars is a small library;, it is meant to fill a specific need and it does this well. "Instant Handlebars.js" takes a very methodical approach to cover every aspect of this amazing library with practical examples provided every step of the way.
Table of Contents (7 chapters)

So, what is Handlebars?

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.

The syntax

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:

    <h1>Hello {{name}}</h1>


Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit 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.