With over 900 responses, I’m very pleased to announce the results of the unofficial Ember.js Community Survey are now available:

We’ve summarized the responses in about ten headlines, but I encourage readers to follow their curiosity with the full data-set linked at the bottom of the results page.

I would like to thank Brian Runnells (@ClimbingNarc) for his effort running this survey and engaging the community. It would not have been possible without his dedication and hard work.

Take a look! And thank you for participating!

This March I was delighted to present at EmberConf 2015, after a great data-layer talk by Dan Gebhardt (@dgeb) and before a heartwarming community talk by Jamie White (@jgwhite).

My own presentation was on web standards- How they are changing, and what it means for Ember.js and Ember applications.

While researching for this talk, I used several excellent resources written and organized by other developers. If you are interested in learning more about ES2015 (ES6) features, the standards process, or JavaScript in general I highly suggest these links:

As with any talk about the current state of the world, parts of it quickly start becoming out of date.

  • I draw a pretty simplistic line between working groups and standards committees in my talk. For the point of narrative and understanding how we (the web) got here it is illustrative, but these are very rapidly changing organizations with intertwined and political relationships. I encourage you to review the meeting notes, charters, and process documents of a group if you want a good understanding of exactly what they bring to our complex, modern web.
  • As of ng-conf, it looks like several decorator/annotation proposals being discussed by TC39 may have been resolved. The syntax would be:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@attr('gearsCount')
@attr('wheelsCount')
class Car {
  constructor(gearsCount) {
    this.gearsCount = gearsCount;
  }

  @dependsOn('gearsCount')
  get isModern() {
    return this.gearsCount > 3;
  }
}

var car = new Car(3);
car.isModern; // false

Decorators before the class apply to the class, and before descriptors (properties) apply to the following property.

Emblem 0.5.0

February 27th, 2015

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:

1
2
3
4
5
/ app/templates/index.emblem
h1 Howdy Friend!

div
  marquee-banner | Emblem makes life easy!

Is compiled into an Ember template:

1
2
{{! 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:

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.


← All Articles