Templating: Kendo vs jQuery vs Sencha

Benchmark created by Erik on

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>

<div id="result" style="height:100px;overflow:hidden;"></div>

Setup

window.tpl = {};
    tpl.data = [
              { "Name": "The Red Violin", ReleaseYear: "1998" },
              { "Name": "Eyes Wide Shut", ReleaseYear: "1999" },
              { "Name": "The Red Violin", ReleaseYear: "1998" },
              { "Name": "Eyes Wide Shut", ReleaseYear: "1999" },
              { "Name": "The Red Violin", ReleaseYear: "1998" },
              { "Name": "Eyes Wide Shut", ReleaseYear: "1999" },
              { "Name": "The Red Violin", ReleaseYear: "1998" },
              { "Name": "Eyes Wide Shut", ReleaseYear: "1999" },
              { "Name": "The Red Violin", ReleaseYear: "1998" },
              { "Name": "Eyes Wide Shut", ReleaseYear: "1999" },
              { "Name": "The Red Violin", ReleaseYear: "1998" },
              { "Name": "Eyes Wide Shut", ReleaseYear: "1999" },
              { "Name": "The Red Violin", ReleaseYear: "1998" },
              { "Name": "Eyes Wide Shut", ReleaseYear: "1999" },
              { "Name": "The Red Violin", ReleaseYear: "1998" },
              { "Name": "Eyes Wide Shut", ReleaseYear: "1999" },
              { "Name": "The Inheritance", ReleaseYear: "1976"}
          ];
    
    tpl.kendo = kendo.template('<li><b>${Name}</b> (${ReleaseYear})</li>');
    tpl.jquery = $.template('<li><b>${Name}</b> (${ReleaseYear})</li>');
    tpl.sencha = new Ext.XTemplate('<li><b>{Name}</b> ({ReleaseYear})</li>').compile();

Test runner

Ready to run.

Testing in
TestOps/sec
Kendo
$('#result').html(kendo.render(tpl.kendo, tpl.data));
ready
jQuery
$.tmpl(tpl.jquery, tpl.data).appendTo( "#result");
ready
Sencha
tpl.sencha.append(Ext.get("result"), tpl.data);
ready

Revisions

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