Angular VS Backbone (v144)

Revision 144 of this benchmark created on

Preparation HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js">
</script>
<script src="https://rawgithub.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js">
</script>
<!-- Angular -->
<div ng-app="ANGAPP" id="angapp" ng-controller="Ctrl">
  <h3>
    Angular
  </h3>
  <span id="items" ng-repeat="item in items">
    {{item}}
  </span>
</div>
<!-- Backbone -->
<div id="backboneapp">
  <h3>
    Backbone
  </h3>
  <span class="backbone-items">
  </span>
</div>
<script>
  // Angular
  angular.module('ANGAPP', []).controller('Ctrl', function($scope) {
    $scope.items = [];
    $scope.clear = function() {
        $scope.items.splice(0);
        //$scope.$digest();
    };
    $scope.push = function(item) {
        $scope.items.push(item);
        //$scope.$digest();
    };
  });

  window.ANG = {
    clear: angular.element(document.getElementById("angapp")).scope().$apply(function () { angular.element(document.getElementById("angapp")).scope().clear()}),
    push: angular.element(document.getElementById("angapp")).scope().$apply(function () { angular.element(document.getElementById("angapp")).scope().push()})
};

  // Backbone.js
  var backboneView = Backbone.View.extend({
    template: Handlebars.compile("{{#each items}}{{x}} {{/each}}"),
    initialize: function() {
      this.collection = new Backbone.Collection();
      this.collection.on('add', this.render.bind(this));
      _.bindAll(this);
    },
    render: function() {
      this.$el.html(this.template({
        items: _.pluck(this.collection.models, 'attributes')
      }));
    },
    push: function(i) {
      this.collection.add({
        x: i
      });
    },
    clear: function() {
      this.collection.reset();
    }

  });

  window.BB = new backboneView({
    el: "#backboneapp .backbone-items"
  });

  console.log(window.BB);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 10
ANG.clear();
for (var i = 0; i < 10; i++) {
  ANG.push(i);
}
ready
Backbone 10
BB.clear()
for (var i = 0; i < 10; i++) {
  BB.push(i)
}
ready
Angular 50
ANG.clear();
for (var i = 0; i < 50; i++) {
  ANG.push(i);
}
ready
Backbone 50
BB.clear()
for (var i = 0; i < 50; i++) {
  BB.push(i)
}
ready
Angular 100
ANG.clear();
for (var i = 0; i < 100; i++) {
  ANG.push(i);
}
ready
Backbone 100
BB.clear()
for (var i = 0; i < 100; i++) {
  BB.push(i)
}
ready

Revisions

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