Angular VS Knockout VS Ember VS Backbone (v747)

Revision 747 of this benchmark created on

Description

Comparison between Angular, Knockout and Ember. Added Backbone. Also with comparison of optimization during object creation.

Newest versions

Preparation HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js">
</script>

<!-------- Angular -------->
<div ng-app="ANGAPP" id="angapp" ng-controller="Ctrl">
        <h3>Angular</h3>
        <span ng-repeat="item in items">{{item}}</span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js">
</script>

<script>
angular.module('ANGAPP', [])
        .controller('Ctrl', function($scope) {
        $scope.items = [];
    $scope.clear = function(){$scope.items = [];};
    $scope.push = function(item){ $scope.items.push(item);};
        window.ANG = {
      $scope : $scope
        };
        });
</script>
<!-------- End Angular -------->

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

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script>
// Backbone.js
var backboneView = Backbone.View.extend({
  push: function(i) {
    this.$el.append(i);
  },
  clear: function() {
    this.$el.html('');
  }
});

window.BB = new backboneView({el: "#backboneapp .backbone-items"});
</script>
<!-------- End Backbone -------->

<!-- Knockout -->
<div id="koapp">
  <p>Knockout:</p>
  <span data-bind="foreach: data"><span data-bind="text: $data"></span></span>
</div>

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>

<script>
  var KOData = ko.observableArray();
  var KOviewmodel = {data: KOData};
  
  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  var KOclear = function (){
    KOData.splice(0, KOData().length);
  };
  var KOpush = function (data){
    KOData.push(data);
  };
  var KOunwrap = function(value){
    // Source: http://jsperf.com/ko-unwrapobservable/2
    return ('function'===typeof(value)) ? value(): value;
  };
</script>

<!-- Ember -->
<div id="emapp">
  <p>Ember:</p>
  <script type="text/x-handlebars">
    <span>
      {{#each EMapp.data}}<span>{{this}}</span>{{/each}}
    </span>
  </script>
</div>

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.runtime-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.4.0/ember.min.js"></script>

<script>
  EMapp = Ember.Application.create({
    rootElement: $('#emapp')
  });
  EMapp.data = Ember.A();
  
  EMclear = function () {
    EMapp.get('data').clear();
  };
  EMreset = function () {
    EMapp.set('data', Ember.A());
  };
  EMpush = function (data) {
    EMapp.get('data').pushObject(data);
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 500
ANG.clear();
for (var i = 0; i < 500; i++)
  ANG.push(i);
ANGA.$scope.$apply();
ready
Ember 500
EMclear();
for (var i = 0; i < 500; i++) {
  EMpush(i);
}
ready
Knockout 500
KOclear();
for (var i = 0; i < 500; i++)
  KOpush(i);
ready
Backbone 500
BB.clear();
for (var i = 0; i < 500; i++) {
  BB.push(i);
}
ready

Revisions

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