Angular VS Knockout VS Ember VS React VS Vue (v438)

Revision 438 of this benchmark created by Laurent on

Description

Re added Vue Updated to jQuery v1.11.1 Updated to react v0.11.0

Preparation HTML

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

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

<script>
  var app = angular.module("test", []);
  app.controller("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>



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

<script src="http://knockoutjs.com/downloads/knockout-3.1.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);
  };
</script>


<!-- Ember -->

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

<script>
  var ENV = {EXTEND_PROTOTYPES: false};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.8.0/ember.min.js"></script>

<script>
  EMapp = Ember.Application.create({
    rootElement: $('#emapp')
  });
  EMapp.data = Ember.A();

  EMclear = function () {
    EMapp.data.clear();
  };
  EMpush = function (data) {
    EMapp.data.pushObject(data);
  };
</script>


<!-- React -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react.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>

<!-- Vue -->
<div id="vuejs">
  Vuejs: <span id="vuejsMountNode"><span v-repeat="item: data">{{ item }}</span></span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.min.js"></script>

<script>
  var vueInstance = new Vue({
     el: '#vuejsMountNode',
     data: {
      data: []
    }
  });

    window.VueClear = function(){
     vueInstance.data = []
   };

   window.VuePush = function(data){
    vueInstance.data.push(data); 
  };
</script>

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
Ember 10
EMclear();
for (var i = 0; i < 10; i++)
  EMpush("emitem");
ready
Ember 100
EMclear();
for (var i = 0; i < 100; i++)
  EMpush("emitem");
ready
Knockout 10
KOclear();
for (var i = 0; i < 10; i++)
  KOpush("koitem");
ready
Knockout 100
KOclear();
for (var i = 0; i < 100; i++)
  KOpush("koitem");
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
Vue 10
VueClear();
for (var i = 0; i < 10; i++)
  VuePush("vitem");
ready
Vue 100
VueClear();
for (var i = 0; i < 100; i++)
  VuePush("vitem");
ready

Revisions

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