Templating: Kendo vs jQuery vs Sencha (v7)

Revision 7 of this benchmark created by Erik 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.7.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/2012.2.621/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'
    }];
    
    tpl.jquery = $.template('<li><b style="color:${color}">${name}</b> (${origin})</li>');
    
    tpl.kendo = kendo.template('<li><b style="color:${color}">${name}</b> (${origin})</li>');
    
    tpl.kendo_nUWB = kendo.template('<li><b style="color:${data.color}">${data.name}</b> (${data.origin})</li>', {useWithBlock: false});
    
    tpl.sencha = Ext.create('Ext.XTemplate','<tpl for="."><li><b style="color:{color}">{name}</b> ({origin})</li></tpl>');

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery [pre]
$.tmpl(tpl.jquery, tpl.data);
ready
Kendo UI [pre]
kendo.render(tpl.kendo, tpl.data);
ready
Kendo UI noUseWithBlock [pre]
kendo.render(tpl.kendo_nUWB, tpl.data);
ready
Sencha [pre]
tpl.sencha.apply(tpl.data);
ready

Revisions

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