Backbone, Ember et Angular sont dans un bateau...
English content

Loïc Frering

Backbone, Ember et Angular sont dans un bateau...

Tasks

Backbone

Jeremy Ashkenas
DocumentCloud
jQuery/Zepto & Underscore.js
1.0.0
october 2010
58 kb dev / 6,3 kb prod
MIT

Backbone.js gives structure to web applications

Ember

Yehuda Katz & Tom Dale
Tilde Inc.
jQuery & Handlebars
1.0.0-rc.4
december 2011
810 kb dev / 55 kb prod
MIT

A framework for creating ambitious web applications

Angular

Miško Hevery, Igor Minár & Vojta Jína
Google
1.0.7
2009
482 kb dev / 32 kb prod
MIT

HTML enhanced for web apps!

Object Model

Used internally
Based on _.extend
Brings inheritance

var HandlebarsView = Backbone.View.extend({
  render: function() {
    if (!_.isFunction(this.template)) {
      this.tmpl = Handlebars.compile(this.tmpl);
    }
    this.$el.html(this.tmpl(this.model || this.collection || {}));
    return this;
  }
});

var TaskView = HandlebarsView.extend({
  render: function() {
    console.log('Rendering...');
    TaskView.__super__.render.apply(this);
  }
});

Object Model

Exposed to the user
Classes & Inheritance
Reopening classes
Computed properties
Observers & Bindings

var Task = Ember.Object.extend({
  done: false,
  init: function() {
    this.createdAt = new Date();
  },
  createdSince: function() {
    return moment(this.get('createdAt')).fromNow();
  }.property('createdAt')
});

var User = Ember.Object.extend({
  remainingTasks: function() {
    return this.get('tasks').filterProperty('done', false)
                            .get('length');
  }.property('tasks.@each.done')
});

var task1 = Task.create({title: 'Go to Mix-IT'});
task1.set('done', true);
console.log(task1.get('summary'));

var task2 = Task.create({title: 'Enjoy the party!'});
console.log(task2.get('summary'));

var user = User.create();
user.set('tasks', [task1, task2]);
console.log('Remaining: ' + user.get('remainingTasks'));

Services & Dependency Injection

OMG!! Dependency Injection!!!
Separation of Concerns
Testability


module.factory('Task', ['$resource', function($resource) {
  return $resource('http://localhost\\:3000/tasks/:id', {}, {
    query: {method: 'GET', isArray: false}
  });
}]);

var TasksCtrl = ['$scope', 'Task', function($scope, Task) {
  Task.query({}, function(response) {
    $scope.tasks = response.tasks;
  });
}];

Object Model

Simple inheritance
A powerful Object Model
Works with plain old JavaScript

MVwhatever

Model
View
- Controller
- ViewModel
- Delegate
- ...

Model

Mutators
Events
Sync
Validation?!

var Task  = Backbone.Model.extend({
  defaults: {
    title: 'New Task'
  }
});

View

A portion of DOM
Event delegation
Manage a model or collection
```
render: function() {
  return this;
}
```

var HandlebarsView = Backbone.View.extend({
  render: function() {
    if (!_.isFunction(this.template)) {
      this.tmpl = Handlebars.compile(this.tmpl);
    }
    this.$el.html(this.tmpl(this.model||this.collection||{}));
    return this;
  }
});

Controller

No explicit controller
Route actions & views do the job

var TaskFormView = HandlebarsView.extend({
  template: $('#task-form-template').html(),
  events: {
    'submit form': 'save'
  },
  save: function() {
    this.model.save({
      title: this.$('#title').val(),
      description: this.$('#description').val()
    }, {
      success: _.bind(function() {
        Backbone.history.navigate("#task/" +
          this.model.get('id'), true);
      }, this)
    });
    return false;
  }
});

Model

Features of Ember.Object
ActiveRecord like with ember-data

View

String based templating with Handlebars
Handle user interactions
Event delegation
Default implementation


<ul>
  {{#each task in model}}
    <li {{bindAttr class="task.active:active"}}>
      <h1>
        {{#linkTo "tasks.show" task}}{{task.title}}{{/linkTo}}
      </h1>
    </li>
  {{/each}}
  <li>{{#linkTo "tasks.new"}}New task...{{/linkTo}}</li>
</ul>

Controller

Decorate the model with display logic
Templates are connected to controllers
Default implementation

Model

Plain JavaScript Objects
ActiveRecord like with $resource

Scope

Glue between controller and view
Refers to the model
Responsible for two-way data binding

View

DOM templating
Transparent for the user
Automatically compiled
May seem a bit more rigid

<ul>
  <li ng-repeat="task in tasks"
      ng-class="{active: task.active}">
    <h1><a href="#/tasks/{{task.id}}">{{task.title}}</a></h1>
  </li>
  <li><a href="#/tasks/new">New task...</a></li>
</ul>

Controller

Written in JavaScript!
Dependency Injection
Application behavior
Populates the scope

var TaskDetailsCtrl = ['$scope', '$routeParams', 'Task',
  function($scope, $routeParams, Task) {
    var task = Task.get({id: $routeParams.taskId},
      function(response) {
        $scope.task = response.task;
        Task.active($scope.task);
      }
    );
  }
];

<h1>{{task.title}}</h1>
<p>{{task.description}}</p>

MV*

A basic structure
A full MVC with string based templates
Concisely embracing HTML & DI

Binding

Connecting object properties
Data synchronization between data and view

Hello !

Binding

No automatic binding
Manual wiring through events

Model Events

change
change:[attribute]
destroy
sync

Collection Events

add
remove
reset
sync

var PromptView = Backbone.View.extend({
  events: { keyup: 'change' },
  render: function() {
    this.$el.html('<input id="name" type="text" />');
    return this;
  },
  change: function() {
    this.model.set('name', this.$('#name').val());
  }
});

var HelloView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
  },
  render: function() {
    this.$el.html('Hello ' + (this.model.get('name') || ''));
    return this;
  }
});

Binding

Two way data-binding
Built in the core of Ember.Object
Handlebars + Metamorph

<ul>
  <script id="metamorph-0-start"></script>
  <script id="metamorph-2-start"></script>
  <li class="active" data-bindattr-1="1">
    <h1>
      <a id="ember378" class="active" href="#/tasks/1">
        <script id="metamorph-4-start"></script>
        Task1
        <script id="metamorph-4-end"></script>
      </a>
    </h1>
  </li>
  <script id="metamorph-2-end"></script>
  <script id="metamorph-3-start"></script>
  <li class="" data-bindattr-2="2">...</li>
  <script id="metamorph-3-end"></script>
  <script id="metamorph-0-end"></script>
  <li>...</li>
</ul>

var AppView = Ember.View.extend({
  template: $('#ember-binding-template').html()
});

<div>{{input value="name"}}</div>
<div>Hello {{name}}!</div>

Binding

Two way data-binding
Managed by the Scope
Working on plain JavaScript objects

Dirty Checking

Angular execution context
Entering digest loop after execution
Search for modifications in scopes
Precisely update the DOM accordingly

<div ng-app>
  <div><input type="text" ng-model="name" /></div>
  <div>Hello {{name}}!</div>
</div>

Binding

Fine grained control with manual wiring
Metamorph can be disturbing
Cost of Dirty Checking

Routing

Routing & Deep Linking

Associate an URL to a particular application state
Managing Single Page Application layouts?

http://example.com/#/tasks/1: See details of the task with id 1

Routing

Backbone.Router & Backbone.History
Simple pushState support
A route A callback
Manual layout and memory management

var TasksRouter = Backbone.Router.extend({
  routes: {
    '':                'index',
    'tasks':           'list',
    'task/new':        'create',
    'task/:id':        'show',
    'task/:id/edit':   'edit',
    'task/:id/remove': 'remove'
  },

  // ....
});

show: function(id) {
  this.current(TaskDetailsView, id);
}

current: function(viewClass, task) {
  if (!(task instanceof Task)) {
    var id = task;
    task = this.tasks.get(id);
    if (!task) {
      alert('The task with id ' + id + ' does not exist.');
      return this.navigate('#tasks', true);
    }
  }

  this.list();
  this.active(task);

  this.currentView = new viewClass({model: task});
  $('.task').html(this.currentView.render().el);
}

list: function() {
  if (!this.tasksView||this.tasksView.$el.parent().size()===0) {
    this.tasksView = new TasksView({collection: this.tasks});
    $('#app').html(this.tasksView.render().el);
  }

  if (this.currentView) {
    this.currentView.remove();
  }

  this.active();
}

Routing

Router is first class citizen
Router as a finite state machine
Convention over Configuration

Tasks.Router.map(function() {
  this.resource('tasks', function() {
    this.route('new', { path: '/new' });
    this.route('show', { path: '/:task_id' });
    this.route('edit', { path: '/:task_id/edit' });
    this.route('remove', { path: '/:task_id/remove' });
  });
});

<div class="tasks">
  <ul>
    {{#each task in model}}
      <li {{bindAttr class="task.active:active"}}>
        <h1>
          {{#linkTo "tasks.show" task}}
            {{task.title}}
          {{/linkTo}}
        </h1>
      </li>
    {{/each}}
    <li>{{#linkTo "tasks.new"}}New task...{{/linkTo}}</li>
  </ul>
</div>
{{outlet}}

Tasks.TasksNewRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('tasks/form');
  },
  model: function() {
    return Tasks.Task.createRecord({
      title: 'New Task',
      description: 'Desc'
    });
  },
  setupController: function(controller, task) {
    Tasks.Task.active(task);
    controller.set('content', task);
  },
  events: {
    save: function(task) {
      task.one('didCreate', this, function() {
        this.transitionTo('tasks.show', task);
      });
      this.get('store').commit();
    }
  }
});

Routing

Router looks to be second class citizen
$router service to declare routes
$routeParams service to get route parameters
One directive: ng-view

$routeProvider.
when('/tasks', {
  templateUrl: 'partials/tasks.html',
  controller: TasksCtrl
}).
when('/tasks/:taskId', {
  templateUrl: 'partials/tasks.html',
  controller: TasksCtrl,
  nested: {
    templateUrl: 'partials/task-details.html',
    controller: TaskDetailsCtrl
  }
}).
// ...
otherwise({redirectTo: '/tasks'});

Routing

Everything is possible but manual
Care must be given to memory management!
A smart routing system for SPA
The router needs improvements

Server API

RESTful API
Flexibility
Ease of implementation

Backbone Sync

Based on $.ajax
Sane defaults for a RESTful API
Easily customizable

var Tasks = Backbone.Collection.extend({
  model: Task,
  url:   'http://localhost:3000/tasks',
  parse: function(response) {
    return response.tasks;
  }
});

save: function() {
  this.model.save({
    title: this.$('#title').val(),
    description: this.$('#description').val()
  }, {
    success: _.bind(function() {
      Backbone.history.navigate("#task/" + this.model.get('id'), true);
    }, this)
  });
  return false;
}

Ember Data

ActiveRecord like
Mapping, Relationships & Transactions!
Different adapters
Lifecycle events
Still in active development

save: function(task) {
  task.one('didCreate', this, function() {
    this.transitionTo('tasks.show', task);
  });
  this.get('store').commit();
}

$http & $resource

$http for low level sync
$resource for high level sync
Testability: benefits from DI
Communication with the API is customizable
Custom response parsing needs little tricks

module.factory('Task', ['$resource', function($resource) {
  var resource = $resource('http://localhost\\:3000/tasks/:id', {}, {
    query: {method: 'GET', isArray: false}
  });
]);

var TaskNewCtrl = ['$scope', '$location', 'Task',
  function($scope, $location, Task) {
    var task = new Task({
      title: 'New Task',
      description: 'Desc'
    });
    $scope.task = task;

    $scope.save = function() {
      this.task.$save(function(t) {
        $location.path('/tasks/' + t.id);
      });
    };
  }
];

Server API

Easily customizable
Powerful but not yet mature (promises)
Testability: takes advantage of DI

Components

Writing reusable components
Included components

Components

No explicit notion of component
Expose Backbone Views
Manage their attachment to the DOM manually

Components

Components are just views
Nesting via the view helper
Built-in components
Dedicated handlebars plugins


<form {{action save model on="submit"}}>
  <div>
    {{input value="title" placeholder="Title"}}
  </div>
  <div>
    {{textarea value="description" placeholder="Description"}}
  </div>
  ...
</form>

Directives

Custom HTML elements!
Powerful but complex notions:
- Scope: @ = &
- Require: ? ^
- Restrict: E A C M
- Transclude
Lot of included directives
Enhancing standard HTML elements

Components

Components can just be custom views
Nested view helper and Handlebars plugins
Directives: a way to teach HTML new tricks

Testability

Everything is explicit
Control helps testability
Lot of manual code => lot of tests

Testability

Good design encourages testability
But testing is not yet highlighted
Conventions can make it difficult to Unit Test

Testability

Testing is highly encouraged and promoted
Tests are everywhere in the documentation
Unit Tests & End-to-End tests
Angular Scenario Runner & Karma

Ecosystem

Easy to learn
Easy to get familiar with its codebase
The most widespread
More than one way to do things

A backbone

Spine
Thorax
Marionette.js
RESThub Backbone

Ecosystem

Nice API documentation and guides
Great Stack Overflow community
Ember Chrome Extension
Lack of full tutorials
Some outdated resources

Ecosystem

Powered (and controlled?) by Google
Rich documentation, guides and tutorials
Batarang: Angular extension for Chrome
AngularUI

Conclusion

Backbone

Great foundation
Control everything

Few features
A lot of manual work to take care of

Ember

Very ambitious: lot of features
A router suited to SPA

A long journey to the stable release
Too ambitious?

Angular

Embracing HTML and the future of the Web
Great documentation and focus on testing

A limited Router
Some advanced concepts

Thanks! Questions?

@loicfrering
Powered by Ruban

Backbone, Ember et Angular sont dans un bateau... English content

Loïc Frering

Backbone, Ember et Angular sont dans un bateau...

Tasks

Backbone

Backbone.js gives structure to web applications

Ember

A framework for creating ambitious web applications

Angular

HTML enhanced for web apps!

Object Model

Object Model

Object Model

Services & Dependency Injection

Object Model

MVwhatever

MVwhatever

Model

View

Controller

Model

View

Controller

Model

Scope

View

Controller

MV*

Binding

Binding

Binding

Model Events

Collection Events

Binding

Binding

Dirty Checking

Binding

Routing

Routing & Deep Linking

Routing

Routing

Routing

Routing

Server API

Server API

Backbone Sync

Ember Data

$http & $resource

Server API

Components

Components

Components

Components

Directives

Components

Testability

Testability

Testability

Testability

Ecosystem

Ecosystem

A backbone

Ecosystem

Ecosystem

Conclusion

Backbone

Ember

Angular

Thanks! Questions?

Backbone, Ember et Angular sont dans un bateau...
English content