Building an ember-cli addon using TDD

11 September 2014

Here’s a video I recorded whilst extracting an ember cli addon from Intercom.

Extracting a simple RubyGem from scratch

15 November 2013

Here’s a video I recorded whilst extracting a simple gem modularize from RestPack:

Building a tag editor with Ember.js

16 October 2013

tl;dr: Ember.js components are amazing

For the past while I’ve been helping songspace.com build an ambitious web application with Ember.js. This is the fifth significant Ember application that I’ve worked on, and I’m often still amazed at just how well Ember deals with complexity.

Just replaced a 200 line jQuery tag editor plugin with a 20 line #EmberJS component. Amazing.
— Gavin Joyce (@gavinjoyce) September 11, 2013

Ember Components are one of many reasons for this, they very neatly allow us to create decoupled views which can be reused throughout our application. Below tag editor component which consists of 30 lines of clean JavaScript. (view the source on jsbin)

Live demo:

JS Bin on jsbin.com

30 lines of simple, focused JavaScript:

App.TagEditorComponent = Ember.Component.extend({
  keyDown: function(e) {
    if(e.which === 13) { this.send('add'); }
  },
  focus: function() {
    this.$('input').focus();
  }.on('didInsertElement'),
  actions: {
    add: function() {
      var newTags = this.get('newTags');
      if(newTags) {
        var tags = this.get('tags');
        newTags = newTags.split(',').map($.trim);

        newTags.forEach(function(tag) {
          if(tag.length > 0 && !tags.contains(tag)) {
            tags.pushObject(tag);
          }
        });
        this.set('newTags', '');
        this.focus();
      }
    },
    remove: function(tag) {
      var tags = this.get('tags'),
          index = tags.indexOf(tag);
      tags.removeAt(index);
      this.focus();
    }
  }
});