react-vs-vs-angular-js-vs-pure-js (v14)

Revision 14 of this benchmark created on

Preparation HTML

<script src="http://fb.me/react-0.10.0.min.js"></script>
<div id="foo"></div>

<div ng-app="TestApp">
   <div ng-controller="TestCtrl">
     <ul>
       <li class="fooBar" ng-repeat="listItem in data">
          <span><span>bla</span> {{listItem.label}} </span>
       </li>
     </ul>
   </div>
</div>

Setup

< script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js" > < /script>
    
    var total = 8;
    var data = [];
    var ngData = [];
    var foo = document.getElementById("foo");
    
    for (var i = 0; i < total; i++) {
      data.push({
        key: i,
        label: 'label' + i
      });
    }
    
    var Item = React.createClass({
      render: function() {
        return React.DOM.li({
            class: 'fooBar'
          },
          React.DOM.span(
            null, [React.DOM.span(null, 'bla'), this.props.label]
          )
        );
      }
    });
    
    var List = React.createClass({
      render: function() {
        var li = function(item) {
          return Item({
            label: item.label
          });
        };
        return React.DOM.ul(null, this.props.items.map(li));
      }
    });
    
    angular.module('TestApp', [])
      .controller('TestCtrl', ['$scope',
        function($scope) {
          $scope.data = ngData;
        }
      ]);
    
    document.ready = function(){
    
    };

Test runner

Ready to run.

Testing in
TestOps/sec
React
React.renderComponent(List({
  items: data.sort(function() {
    return Math.round(Math.random());
  }, data),
}), foo);
ready
Pure JS
foo.innerHTML = '<ul>' + data.sort(function() {
  return Math.round(Math.random());
}).reduce(function(prev, next) {
  return prev + '<li class="fooBar"><span><span>bla</span>' + next.label + '</span></li>';
}, '') + '</ul>';
ready
AngularJS
ngData = data.sort(function() {
  return Math.round(Math.sort());
})
ready

Revisions

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