EmberScript

Ember.js is an impressive piece of work. It can also be painfully verbose. A little syntactic sugar would make that go down easier. EmberScript is CoffeeScript with fine-tuning specifically for Ember.js. Fine-tuning includes bits like replacing class and extends with Ember.class and Ember.extends.

The simple example from the documentation:

class PostsController extends Ember.ArrayController
  trimmedPosts: ~>
    @content.slice(0, 3)

would expand out to

var PostsController;
var get$ = Ember.get;
PostsController = Ember.ArrayController.extend({
  trimmedPosts: Ember.computed(function () {
    return get$(this, 'content').slice(0, 3);
  }).property('content.@each')
});

Even if your team is using RequireJS, it should look better than the vanilla JavaScript.

require [
  "lodash"
  "cs!models/PostModel"
], (_, PostModel) ->
  class PostsController extends Ember.ArrayController
    trimmedPosts: ~>
      # ...
      @content.slice(0, 3)
  return PostsController

The challenge is that in order to simplify the code we write, we’ve added layers between us and the code that the browser actually sees. CoffeeScript could interact weirdly with our dependencies, and EmberScript will undoubtedly have its own issues. Automated tests become even more important.

I need to think on this some more.

Added to vault 2024-01-15. Updated on 2024-01-26