Angular VS Knockout VS ExtJS (v15)

Revision 15 of this benchmark created by Dipesh Hirani on

Description

Designed to test binding to rendering performance of these frontend frameworks.

Backbone.js was removed due to implementation possibilities

Using more recent version of ExtJS with putative grid performance improvements.

Preparation HTML

<!-- JQURY -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<!-- ANGULAR -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
</script>
<script>
  var Ctrl = function($scope) {
      $scope.data = [];
      }
</script>
<div ng:app>
  <ul ng-controller="Ctrl" id="angList">
    <li ng-repeat="item in data">
      {{item}}
    </li>
  </ul>
  <script>
    var SetANG = function(data) {
        $('#angList').scope().data = data;
        $('#angList').scope().$apply(function() {});
        };
  </script>
  <!-- ANGULAR Update -->
  <script>
    var CtrlUpdate = function($scope) {
        $scope.data = [];
        }
  </script>
  <ul ng-controller="CtrlUpdate" id="angListUpdate">
    <li ng-repeat="item in data">
      {{item}}
    </li>
  </ul>
</div>
</div>
<script>
  var SetANGUpdate = function(data) {
      $('#angListUpdate').scope().data = data;
      $('#angListUpdate').scope().$apply(function() {});
      };
</script>
<!-- EXT -->
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.com/ext/beta/4.2.0.265/ext-all.js">
</script>
<div id="extme">
</div>
<script>
  var EXTData = [];
  var store = Ext.create('Ext.data.Store', {
    storeId: 'employeeStore',
    fields: ['name'],
    data: EXTData

  });
  Ext.create('Ext.grid.Panel', {
    title: 'Employees',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [{
      dataIndex: 'name'
    }],
    renderTo: Ext.getBody()
  });

  var SetEXT = function(data) {
      store.removeAll();
      store.add(data);
      }
</script>
<!-- KO -->
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js">
</script>
<script>
  var KOData = null;
</script>
KO:
<BR>
<span id="KOTest" data-bind='text: KOData'>
</span>
<BR>
<script>
  KOData = ko.observable([]);
  ko.applyBindings();
  var SetKO = function(data) {
      KOData = ko.observable(data);
      ko.applyBindings();
      }
</script>
<script>
  var ANG50ID = [];
  for (var i = 0; i < 50; i++) {
    ANG50ID.push('ITEM');
  };
  var EXT50ID = [];
  for (var i = 0; i < 50; i++) {
    EXT50ID.push({
      name: 'ITEM'
    });
  };
  var KO50ID = [];
  for (var i = 0; i < 50; i++) {
    KO50ID.push('ITEM');
  };


  var ANG100ID = [];
  for (var i = 0; i < 100; i++) {
    ANG100ID.push('ITEM');
  };
  var ANG100ID2 = [];
  for (var i = 0; i < 100; i++) {
    ANG100ID2.push('ITEM2');
  };
  var EXT100ID = [];
  for (var i = 0; i < 100; i++) {
    EXT100ID.push({
      name: 'ITEM'
    });
  };
  var KO100ID = [];
  for (var i = 0; i < 100; i++) {
    KO100ID.push('ITEM');
  };



  var ANG1000ID = [];
  for (var i = 0; i < 1000; i++) {
    ANG1000ID.push('ITEM');
  };
  var EXT1000ID = [];
  for (var i = 0; i < 1000; i++) {
    EXT1000ID.push({
      name: 'ITEM'
    });
  };
  var KO1000ID = [];
  for (var i = 0; i < 1000; i++) {
    KO1000ID.push('ITEM');
  };
</script>

Setup

SetANG([]);
    SetEXT([]);
    SetKO([]);
    
    SetANGUpdate(ANG100ID);

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 0-50 Items
SetANG(ANG50ID);
ready
Knockout 0-50 Items
SetKO(KO50ID);
ready
ExtJS 0-50 Items
SetEXT(EXT50ID);
ready
Angular 0-100 Items
SetANG(ANG100ID);
ready
Knockout 0-100 Items
SetKO(KO100ID);
ready
ExtJS 0-100 Items
SetEXT(EXT100ID);
ready
Angular 0-1000 Items
SetANG(ANG1000ID);
ready
Knockout 0-1000 Items
SetKO(KO1000ID);
ready
ExtJS 0-1000 Items
SetEXT(EXT1000ID);
ready
Angular Update 100 of 100 Items (new data)
SetANGUpdate(ANG100ID2);
ready

Revisions

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