Emblem 0.5.0

Emblem is an alternative Ember.js template syntax created by Alex Matchneer @machty. Due to some internal compiling to the Handlebars AST (abstract syntax tree), keeping Emblem up to date and backward compatible has been difficult. When Emblem was initially authored, the Handlebars AST was pitched as a stable API to write other applications against. This has not held up over time.

There is another path. With sponsorship from our friends at Vestorly and guidance from Alex, 201 Created set aside a few days to rewrite Emblem as a template printer. As a “printer”, Emblem no longer outputs compiled and executable templates. Instead, it generates Ember template strings. Since Ember template syntax is protected by semantic versioning, Emblem is now compatible with many versions of Ember regardless of the template engine (Handlebars 1.3, Handlebars 2.0, HTMLBars).

For example, an Emblem template used with Ember 1.10 will be built in these steps. First, the template:

/ app/templates/index.emblem
h1 Howdy Friend!

div
  marquee-banner | Emblem makes life easy!

Is compiled into an Ember template:

{{! app/templates/index.hbs }}
<h1>Howdy Friend!</h1><div>{{#marquee-banner}}Emblem makes life easy!{{/marquee-banner}}</div>

This raw template is compiled by the build pipeline into an executable template. The printing step isolates Emblem from the Ember template compile step, allowing that to be based on whatever version of Ember the application uses.

We also gain a great new feature from this conversion: Developers considering Emblem, but intimidated by the risk of “lock-in” can rest easy. With a little bit of additional work into pretty-printing Emblem should soon have an easy off ramp for those wanting to return to a more traditional syntax: Just save the Ember templates!

Several issues remain open after this spike. We’ve opened a 0.5.1 Milestone to track them.

We’ve had a fascinating time implementing the new printer and we’re looking forward to sharing more details in a forthcoming blog post.

Upgrading to Emblem 0.5.0 with Ember-CLI

If you currently use Emblem and want to upgrade (say, for 1.10 support and HTMLBars? ;-), follow these steps:

• Uninstall the broccoli-emblem-compiler or any other Emblem compiler you may be using.
• Install the ember-cli-emblem-hbs-printer.

You can quickly install the printer with:

ember install:addon ember-cli-emblem-hbs-printer

That’s it! Your Emblem templates will be compiled like any other .hbs file in your codebase.

A demo application can be found at 201-created/ember-cli-emblem-example.

Many thanks to Vestorly for their sponsorship of 201 Created’s time on Emblem. If you’re a frontend developer looking for a new opportunity, Vestorly is tackling new and interesting Ember.js challenges every day. Check them out.