When Ember.js framework was being built, the team did not just pick up mustache templates (found at http://mustache.github.io/) and integrate with Ember.js. Mustache is logic-less templating library whose implementation is available in over 37 different languages, including JavaScript. Handlebars.js was built from scratch to support data binding and other Ember.js features. Handlebars.js has been improving since then and has been quite stable over the years. But recently in 2014, Yahuda Katz and the team wanted to improve Handlebars.js even further. These improvements changed the way Handlebars.js was being used inside Ember.js. So, instead of releasing the next version of Handlebars.js, the team decided to release a completely new project called as HTMLBars.

HTMLBars is the new templating library and will be enabled by default starting Ember.js 1.10 and Ember.js 1.11 beta. It is built on top of Handlebars.js and is backward compatible with its syntax. HTMLBars' biggest difference with Handlebars.js is that it builds DOM elements instead of string and hence it is said to be at least 30% faster than Handlebars.js.

The following image explains how does the Handlebars.js template system works:

The Handlebars.js working flow

The following image explains how HTMLBars simplifies things by directly emitting DOM elements instead strings:

The HTMLBars working flow

To easily upgrade to Ember.js 1.10 and HTMLBars, the Ember CLI users should update the Ember CLI to version 0.1.12 or later.

It is very important to note here that whatever syntax we will discuss in this chapter will be applicable to both Handlebars.js as well as HTMLBars.js and should work in both the cases.