Angular VS ExtJS VS KendoUI (v49)

Revision 49 of this benchmark created by Brian McBrayer on

Preparation HTML

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

<!-- ANGULAR -->
<script src="http://code.angularjs.org/1.1.5/angular.min.js" ng:autobind></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  src="http://docs.sencha.com/extjs/4.2.1/extjs/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);
}

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 KE50ID=[];
for (var i=0; i<50;i++){
KE50ID.push({name:'ITEM'});
};


var ANG100ID=[];
for (var i=0; i<100;i++){
ANG100ID.push('ITEM');
};
var EXT100ID=[];
for (var i=0; i<100;i++){
EXT100ID.push({name:'ITEM'});
};
var KE100ID=[];
for (var i=0; i<100;i++){
KE100ID.push({name:'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 KE1000ID=[];
for (var i=0; i<1000;i++){
KE1000ID.push({name:'ITEM'});
};
</script>

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"</script>
  
<ul data-template="ul-template" data-bind="source: products" style="display:none">
</ul>
<script id="ul-template" type="text/x-kendo-template">
    <li data-bind="text: this"></li>
</script>
<script>

var viewModel = kendo.observable({
    products: []
});

kendo.bind($("ul"), viewModel);
function SetKE(data)  {   
  viewModel.set('products',data);
};
</script>

Setup

kendo.Template.useWithBlock = false;
    
    SetANG([]);
    SetEXT([]);
    SetKE([]);
    
    //SetANGUpdate(ANG100ID);

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 0-50 Items
SetANG(ANG50ID);
ready
ExtJS 0-50 Items
SetEXT(EXT50ID);
ready
Angular 0-100 Items
SetANG(ANG100ID);
ready
ExtJS 0-100 Items
SetEXT(EXT100ID);
ready
Angular 0-1000 Items
SetANG(ANG1000ID);
ready
ExtJS 0-1000 Items
SetEXT(EXT1000ID);
ready
KendoUI 0-50 Items (no with block)
SetKE(KE50ID);
ready
KendoUI 0-100 Items (no with block)
SetKE(KE100ID);
ready
KendoUI 0-1000 Items (no with block)
SetKE(KE1000ID);
ready

Revisions

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