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)

Installation


Handlebars is a template engine not a specific tool, so there are multiple ways you can use and install it. Handlebars templates can either be pre-compiled to improve performance, or you can compile them on the client side and have more flexibility with manipulating the templates themselves.

In this chapter we will take a look at downloading and setting up the necessary components to implement both of these methods.

Downloading the Handlebars library

Handlebars is easy to install as a js library since it has no other dependencies. To download the library, just go to http://handlebarsjs.com/ and click on the big download button, this should take you to the script, which you can save on your computer as handlebars.js:

Installing this file is as simple as adding a script tag to your DOM with the path to this file:

<script src="handlebars.js"></script>

Precompiling templates

Compiling templates can be an expensive process. If you have a complex template, or even nested templates, it can slow down your production code. The solution to this is compiling the templates ahead of time. Then you will be left with pure JavaScript, which will make your overall page load much faster.

The first thing you will need to pre-compile your templates is node.js, which you can download and set up from http://nodejs.org/download/:

The setup wizard will install both node.js and the node package manager (NPM). With that ready, we can install the Handlebars CLI by running the following command in your terminal:

npm install -g handlebars

You don't have to worry too much about this if you are new to node.js. Basically this will download and place the Handlebars.js app into your path, so that you can use the handlebars command from your terminal.