Angular VS Knockout VS Ember vs CanJS (v197)

Revision 197 of this benchmark created on

Preparation HTML

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<!-- Angular -->
<div ng-app>
  <p>Angular:</p>
  <span ng-controller="Ctrl" id="angList"><span ng-repeat="item in data">{{item}}</span></span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

<script>
  var Ctrl = function($scope){
    $scope.data = [];
  }
  angular.element(document).ready(function() {
    window.ANGAPP = {
      scope: $('#angList').scope(),
      push: function(data){
        this.scope.data.push(data);
      },
      clear: function(){
        this.scope.data = [];
        this.scope.$digest();
      }
    };
  });
</script> 


<!--Backbone-->
<script src="https://underscorejs.org/underscore.js"></script>
<script src="https://backbonejs.org/backbone.js"></script>

<div id="backboneapp">
  <h3>Backbone</h3>
  <span class="backbone-items"></span>
</div>

<script>
var backboneCollection = new Backbone.Collection([]);
var backboneView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.model, 'change', this.render)
  },
  render: function() {
    this.$el.html(this.model.models)
  },
  push: function(i) {
    this.model.push(i);
  },
  clear: function() {
    this.model.reset([]);
  }

});

window.BB = new backboneView({model: backboneCollection, el: "#backboneapp .backbone-items"});
</script>

<!-- CanJS -->
<script src="http://canjs.com/release/1.1.7/can.jquery.js"></script>
<div id="canjsejsapp"></div>

<div id="canjsejsappalt"></div>


<script id='canjsEJSTemplate' type='text/ejs'>
  <h3>CanJS (EJS):</h3>
  <span class="canjs-items"><% items.each(function(item) { %><%= item %><% }) %></span>
</script>


<script id='canjsEJSTemplateAlt' type='text/ejs'>
  <h3>CanJS (Alt):</h3>
  <span class="canjs-items"><% items.each(function(item) { %><%= item %><% }) %></span>
</script>

<script>

var canjsListAlt = new can.Observe.List([]);
var canjsList2 = new can.Observe.List([]);

var canjsControl = can.Control.extend({
  init: function(el, options) {
    this.element.html(can.view(this.options.template, { items: this.options.items }));
  },
  push: function(i) {
    this.options.items.push(i);
  },
  clear: function() {
    this.options.items.splice(0);
  }
});


window.CanJSEJS = new canjsControl('#canjsejsapp', {
    template: 'canjsEJSTemplate',
    items: canjsList2
});



var canjsControlAlt = can.Control.extend({
  defaults : {view: 'canjsEJSTemplateAlt'}
},{
  init: function(element, options){
    this.element.html(this.options.view, {items: this.options.items});
  },
  push: function(i){
    this.options.items.push(i);
  },
  clear: function(){
    this.options.items.splice(0);
  }
});

window.CanJSAlt = new canjsControlAlt('#canjsejsappalt',{
    items: canjsListAlt
});

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Can
CAN.clear();
can.Observe.startBatch();
for (var i = 0; i < 50; i++) {
  CAN.push(i);
}
can.Observe.stopBatch()
ready
Knockout
KO.clear();
for (var i = 0; i < 50; i++) {
  KO.push(i);
}
ready
Ember
EM.clear();
for (var i = 0; i < 50; i++) {
  EM.push(i);
}
ready
Angular
ANG.clear();
for (var i = 0; i < 50; i++) {
        ANG.push(i);
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.