Angular VS Knockout VS Ember VS Ember Multi Property Change (v57)

Revision 57 of this benchmark created on

Description

Using Ember mass property change

This version uses angular 1.3, knockout 2.1.0 and ember-1.0.0-pre.2

Preparation HTML

<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  window.run_number_ng = 0;
  window.run_number_ko = 0;
  window.run_number_em = 0;
</script>
<!-- Angular -->
<div ng-app>
  Angular:
  <span ng-controller="Ctrl" id="angList">
    <span ng-repeat="item in data">
      {{item}}
    </span>
  </span>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/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.$digest();
    };
  });
</script>
<!-- Knockout -->
<div id="koapp">
  Knockout:
  <span data-bind="foreach: data">
    <span data-bind="text: $data">
    </span>
  </span>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js">
</script>
<script>
  var KOData = ko.observableArray();
  var KOviewmodel = {
    data: KOData
  };

  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  var KOclear = function() {
      KOData.removeAll();
      };
  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>
  var ENV = {
    EXTEND_PROTOTYPES: false
  };
</script>
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js">
</script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js">
</script>
<script>
  EMapp = Ember.Application.create({
    rootElement: $('#emapp')
  });
  EMapp.data = Ember.A();

  EMclear = function() {
    EMapp.set("data", Ember.A());
  };

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

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 100
ANGclear();
for (var i = 0; i < 100; i++)
ANGpush("ngitem" + window.run_number_ng);

window.run_number_ng++;
ready
Knockout 100
KOclear();
for (var i = 0; i < 100; i++)
KOpush("koitem" + window.run_number_ko);
KOData.valueHasMutated();

window.run_number_ko++;
ready
Ember 100
EMclear();
Ember.beginPropertyChanges();
for (var i = 0; i < 100; i++) {
  EMpush(" emitem" + window.run_number_em);
}
Ember.endPropertyChanges();
window.run_number_em++;
ready

Revisions

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