CanJS-Angular-ember-backbone

JavaScript performance comparison

Test case created by Sebastian and last updated

Info

A comparison of observable objects for Angular, CanJS, Backbone and Ember

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://canjs.us/release/1.1.4/can.jquery.js">
</script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js">
</script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script>
Benchmark.prototype.setup = function() {
    // Angular
    angular.injector(['ng']).invoke(function($rootScope) {
      $rootScope.count = null;
   
      $rootScope.$watch('count', function(newVal) {
        //console.log(newVal);
        deferred.resolve();
      });
   
      window.ANG = $rootScope;
    });
   
    // Can
    window.CAN = new can.Observe({
      count: null
    })
   
    CAN.bind('count', function(oldVal, newVal) {
      //console.log(newVal);
      deferred.resolve();
    });
   
    // BB
    var BBModel = Backbone.Model.extend({
      count: null
    });
   
    window.BB = new BBModel();
   
    BB.on('change:count', function(model, newVal) {
      //console.log(newVal);
      deferred.resolve();
    });
   
    // Ember
    var EModel = Ember.Object.extend({
      count: null
    });
   
    var EMBER = EModel.create();
   
    EMBER.addObserver('count', function(obj) {
      //console.log(newVal);
      deferred.resolve();
    });
   
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
CanJS
// async test
CAN.attr('count', new Date());
pending…
Backbone
// async test
BB.set('count', new Date());
pending…
Angular
// async test
ANG.count = new Date();
ANG.$digest();
pending…
Ember
// async test
EMBER.set('count', new Date(0));
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment