Angular Vs REACT

Benchmark created by Daniel on

Preparation HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.js"></script>
<script src="https://rawgit.com/davidchang/ngReact/master/ngReact.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>

<body ng-app="app" ng-controller="mainCtrl">
    <repeater data="data"/>

</body>

Setup

var app = angular.module('app', ['react']);
    
    app.controller('mainCtrl', function ($scope) {
    
        $scope.data= [];
        
        for(var i = 0; i < 200 ; i++){
            $scope.data.push({name:'test'+i,value:i});
        }
    
    $scope.START = function(){
      setInterval(function () {
            for (var i = 0; i < $scope.data.length; i++) {
                $scope.data[i].name = $scope.data[i].name + '1';
            }
             $scope.$apply();
        }, 3000);
    };
    
    });
    
    app.value("Repeater", React.createClass({
        propTypes: {
            data: React.PropTypes.array.isRequired
        },
    
        render: function () {
            return (
            React.DOM.table(null, React.DOM.tbody(null,
            _.map(this.props.data, function (row) {
                return (
                React.DOM.tr(null,
                _.map(row, function (cell) {
                    return React.DOM.td(null, cell);
                })));
            }))));
        }
    }));
    
    app.directive('repeater', function (reactDirective) {
        return reactDirective('Repeater');
    });

Test runner

Ready to run.

Testing in
TestOps/sec
REACT1
START();
ready
React
START();
ready

Revisions

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

  • Revision 1: published by Daniel on