Templating: Kendo vs jQuery vs Sencha (v17)

Revision 17 of this benchmark created on

Description

Since this is my very first test on JSPerf, I'd really appreciate any improvements and critics concerning the code and the concept.

Thx

Preparation HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script src="//extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

Setup

window.tpl = {};
    tpl.data = [{
            color: '#00FF66',
            name: 'Metallica',
            origin: 'California'
        },{
            color:'#0066FF',
            name:'Blumentopf',
            origin:'Germany'
        },{
            color:'#66FF00',
            name:'Alestorm',
            origin:'Scotland'
        },{
            color:'#6600FF',
            name:'Enter Shikari',
            origin:'England'
    },{
            color: '#00FF66',
            name: 'Metallica',
            origin: 'California'
        },{
            color:'#0066FF',
            name:'Blumentopf',
            origin:'Germany'
        },{
            color:'#66FF00',
            name:'Alestorm',
            origin:'Scotland'
        },{
            color:'#6600FF',
            name:'Enter Shikari',
            origin:'England'
    },{
            color: '#00FF66',
            name: 'Metallica',
            origin: 'California'
        },{
            color:'#0066FF',
            name:'Blumentopf',
            origin:'Germany'
        },{
            color:'#66FF00',
            name:'Alestorm',
            origin:'Scotland'
        },{
            color:'#6600FF',
            name:'Enter Shikari',
            origin:'England'
    },{
            color: '#00FF66',
            name: 'Metallica',
            origin: 'California'
        },{
            color:'#0066FF',
            name:'Blumentopf',
            origin:'Germany'
        },{
            color:'#66FF00',
            name:'Alestorm',
            origin:'Scotland'
        },{
            color:'#6600FF',
            name:'Enter Shikari',
            origin:'England'
    },{
            color: '#00FF66',
            name: 'Metallica',
            origin: 'California'
        },{
            color:'#0066FF',
            name:'Blumentopf',
            origin:'Germany'
        },{
            color:'#66FF00',
            name:'Alestorm',
            origin:'Scotland'
        },{
            color:'#6600FF',
            name:'Enter Shikari',
            origin:'England'
    }];
    tpl.length = 80;
    tpl.longtemplate = [];
    var i = 0;
    for (i=0;i<tpl.length;i++) {
     tpl.longtemplate.push('<li><b style="color:${color}">${name}</b> (${origin})</li>');
    }
    tpl.jquery = $.template(tpl.longtemplate.join(''));
    tpl.kendo = kendo.template(tpl.longtemplate.join(''));
    
    tpl.longtemplate = [];
    var i = 0;
    for (i=0;i<tpl.length;i++) {
     tpl.longtemplate.push('<li><b style="color:${data.color}">${data.name}</b> (${data.origin})</li>');
    }
    
    tpl.kendo_noUseWithBlock = kendo.template(tpl.longtemplate.join(''), {useWithBlock: false});
    
    tpl.longtemplate = [];
    tpl.longtemplate.push('<tpl for=".">');
    var i = 0;
    for (i=0;i<tpl.length;i++) {
     tpl.longtemplate.push('<li><b style="color:{color}">{name}</b> ({origin})</li>');
    }
    tpl.longtemplate.push('</tpl>');
    
    tpl.sencha = Ext.create('Ext.XTemplate',tpl.longtemplate.join(''), {compiled: false});

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
$.tmpl(tpl.jquery, tpl.data);
ready
Kendo UI
kendo.render(tpl.kendo, tpl.data);
ready
Kendo UI noUseWithBlock
kendo.render(tpl.kendo_noUseWithBlock, tpl.data);
ready
Sencha
tpl.sencha.apply(tpl.data);
//tpl.test([],tpl.data,{},1,1);
ready

Revisions

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