Angular VS Knockout VS Ember vs CanJS (v116)

Revision 116 of this benchmark created by Sebastian on

Preparation HTML

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js">
</script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js">
</script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.min.js">
</script>
<!-- Angular -->
<div ng-app="ANGAPP" id="angapp" ng-controller="Ctrl">
  <span ng-repeat="item in data">{{item}}</span>
</div>
<!-- Knockout -->
<div id="koapp">
  <span data-bind="foreach: data">
        <span data-bind="text: $data"></span>
  </span>
</div>
<!-- Ember -->
<div id="emapp">
  <script type="text/x-handlebars">
    <span>{{#each EMAPP.data}}<span>{{this}}< /span>{{/each}}</span>
  </script>
</div>

Setup

// Angular
    angular.module('ANGAPP')
        .controller('Ctrl', function($scope) {
        $scope.data = [];
        });
    
    angular.element(document).ready(function() {
      var ang_scope = $('#angapp').scope();
      console.log(ang_scope);
    
      window.ANG = {
        clear: function() {
          ang_scope.data.splice(0);
          ang_scope.$digest();
        },
        push: function(data) {
          ang_scope.data.push(data);
          ang_scope.$digest();
        }
      };
    });
    
    // KO
    var ko_data = ko.observableArray();
    var ko_viewmodel = {
      data: ko_data
    };
    
    ko.applyBindings(ko_viewmodel, document.getElementById('koapp'));
    
    window.KO = {
      clear: function() {
        ko_data.splice(0);
      },
      push: function(data) {
        ko_data.push(data);
      }
    }
    
    //Ember
    window.EMAPP = Ember.Application.create({
      rootElement: $('#emapp')
    });
    EMAPP.data = Ember.A();
    
    window.EM = {
      clear: function() {
        EMAPP.data.clear();
      },
      push: function(data) {
        EMAPP.data.pushObject(data);
      }
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Angular
ANG.clear();
for (var i = 0; i < 50; i++) {
        ANG.push("ngitem");
}
ready
Knockout
KO.clear();
for (var i = 0; i < 50; i++) {
  KO.push("koitem");
}
ready
Ember
EM.clear();
for (var i = 0; i < 50; i++) {
  EM.push("emitem");
}
ready

Revisions

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