Angular VS React VS BACKBONE (v547)

Revision 547 of this benchmark created by Prateek Khurana on

Description

React vs Angular vs Backbone.

Preparation HTML

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

<!-- Angular -->
<div ng-app>
  Angular:
  <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.2.14/angular.min.js"></script>

<script>
  var Ctrl = function($scope){
    $scope.data = [];
  }

  angular.element(document).ready(function() {
    var ang_scope = $('#angList').scope();

    window.ANGclear = function(){
      ang_scope.data.splice(0, ang_scope.data.length);
      ang_scope.$digest();
    };
    window.ANGpush = function(data){
      ang_scope.data.push(data + ang_scope.data.length);
      ang_scope.$digest();
    };
  });
</script>


<!-- React -->
<script src="http://fb.me/react-0.9.0.min.js"></script>
<div id="react">
  React: <span id="reactMountNode"></span>
  <script>
    var ReactComponent = React.createClass({displayName: 'PerfTest',
      getInitialState: function() {
        return { data: [] };
      },
      render: function() {
        var res = [];
        for(var i = 0; i < this.state.data.length; i++) {
          res.push(React.DOM.span({ key: 'test' + i }, this.state.data[i]));
        }
        return React.DOM.span(null, res);
      }
    });
    var reactComp = ReactComponent();
    React.renderComponent(reactComp, $('#reactMountNode')[0]);

    RClear = function() {
      reactComp.setState({data: []})
    };

    RPush = function(data) {
      var stateData = reactComp.state.data;
      stateData.push(data);
      reactComp.setState({data: stateData});
    }
  </script>
</div>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/thorax/2.2.1/thorax-combined.js"></script>
<script>
// Backbone.js
var backboneView = Thorax.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 -------->

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 10
ANGclear();
for (var i = 0; i < 10; i++)
  ANGpush("ngitem");
ready
Angular 100
ANGclear();
for (var i = 0; i < 100; i++)
  ANGpush("ngitem");
ready
Angular 1000
ANGclear();
for (var i = 0; i < 1000; i++)
  ANGpush("ngitem");
ready
React 10
RClear();
for (var i = 0; i < 10; i++)
  RPush("ritem");
ready
React 100
RClear();
for (var i = 0; i < 100; i++)
  RPush("ritem");
ready
React 1000
RClear();
for (var i = 0; i < 1000; i++)
  RPush("ritem");
ready
Backbone 10
BB.clear();
for (var i = 0; i < 10; i++) {
  BB.push(i);
}
ready
Backbone 100
BB.clear();
for (var i = 0; i < 100; i++) {
  BB.push(i);
}
ready
Backbone 1000
BB.clear();
for (var i = 0; i < 1000; i++) {
  BB.push(i);
}
ready

Revisions

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