BT

Ember Update Brings Handelbars 2.0, and HTMLBars, a New Templating Library

| by James Chesters Follow 2 Followers on Dec 23, 2014. Estimated reading time: 2 minutes |

Ember.js has released version 1.9 to the public, bringing with it support for Handlebars 2.0, as well as performance improvements, and the introduction of HTMLBars into the Ember 1.10 beta.

Since the release of Handlebars 2.0 in October of this year, the Ember team have reportedly received "many requests to update Ember to allow the use of the latest version", according to core team member Robert Jackson.

Ember contributor Matthew Beale announced the latest release on the Ember.js blog, in the post Ember.js 1.9 and 1.10 Beta Released, saying that it "adds support for Handlebars 2.0 templates," but does not maintain backwards compatibility to 1.x versions of Handlebars.

Beale notes that this change "does not affect the template syntax or public API of Ember applications."

While at the time of the 1.9 beta release in October it was questioned if Handlebars would break Ember apps, core team member Yehuda Katz reassured those concerned:

It doesn't affect the public Ember templating API. Handlebars 2.0 is largely a reorganization of the public Handlebars API to make it more module-friendly, and since you work through the Ember API, we can shim it.

[Handlebars 2.0] also has some useful bug fixes that will let us improve Ember going forward (notably allowing namespaced components).

Since Handlebars is only an Ember dependency, developers using Ember aren't required to change any of their templates to be compatible.

With the release of Ember 1.9 also comes the beta version of 1.10, and the introduction of HTMLBars into Ember.js. HTMLBars is a new templating library built on top of Handlebars, created by Erik Bryn of the Ember.js core team.

In his presentation at Emberconf entitled "HTMLBars The Next-Generation of Templating in Ember.js", Bryn described HTMLBars as a "chance to fix some of the fundamental performance problems in Ember."

He asks, "What excites people about HTMLBars?" and answers "Syntax."

Bryn elaborates:

This is our ideal, right?
<div class="{{foo}}">{{bar}}</div>

but this is what we have to do in Ember today
<div {{bind-attr class="foo"}}>{{bar}}</div>

With HTMLBars, we get our ideal syntax!
<div class="{{foo}}">{{bar}}</div>

HTMLBars knows when a mustache is being used inside an opening tag, an attribute definition, or within a tag.

<div {{foo}}></div>

<div class="{{bar}} baz"></div>

<div>{{baz}}</div>

Meaning "no more script tags."

Commenting on the HTMLBars announcement, Beale said, "This new rendering pipeline marks a significant milestone for the framework, and by maintaining complete API compatibility it demonstrates our commitment to stability without stagnation."

Also new in Ember.js 1.9 is the addition of streams, replacing bindings at the lowest level of the rendering pipeline. Where previously, data-binding was based on the concept of a key-value observer, streams distinguish change notification from value calculation.

Furthermore, Beale says, "The addition of streams to Ember and their use throughout the view layer improves the performance of rendering, simplifies many helpers, and prepares Ember's codebase for HTMLBars."

Ember.js is released via an MIT licence. InfoQ readers can contribute to Ember.js via its GitHub project

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss
BT