Info

Branch of the shortened Template Shootoff r38, updated with CDNs, DoT & low-scoring tests + list data removed from it.

Please:

• Use CDNs where possible
• Explain your changes in Description or Comments
• Do not link directly to raw.github.com
• Test your modifications in firefox and IE7/8/9 at a minimum before publishing. Links to github raw will fail in one or both of these browsers.
• If you want a mega template battle, please use javascript-templating-shootoff-extended/36 or higher

Libraries (in order of tests):

• doT 0.2.0
• Kendo UI
• Lo-Dash (NOT current CDN version, but J-D's hack which is far faster)
• Underscore

Preparation code

<!-- EXTERNAL LIBRARIES HOSTED BY A CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<script src="http://dl.dropbox.com/u/513327/doT.min.js"></script>
<script src="http://dl.dropbox.com/u/513327/jsconf/2012/documentcloud/underscore.js"></script>
<script src="http://dl.dropbox.com/u/513327/jsconf/2012/mod/lodash_template.js"></script>
<script>var lodash = _.noConflict();</script>


<script>

  /****************************************
   MASTER TEMPLATE DATA
   ****************************************/
  window.tpl = {};
  window.tpl.vars = {
    header: "Header",
    header2: "Header2",
    header3: "Header3",
    header4: "Header4",
    header5: "Header5",
    header6: "Header6",
  };

  /********************************
   PRE-COMPILED TEMPLATES
   ********************************/

  //doT (6/25/2012)
  window.tpl.dot = doT.template("<div><h1 class='header'>{{= it.header }}</h1><h2 class='header2'>{{= it.header2 }}</h2><h3 class='header3'>{{= it.header3 }}</h3><h4 class='header4'>{{= it.header4 }}</h4><h5 class='header5'>{{= it.header5 }}</h5><h6 class='header6'>{{= it.header6 }}</h6></div>");

  // Kendo
  window.tpl.kendoFalseWith = kendo.template("<div><h1 class='header'><#= data.header #></h1><h2 class='header2'><#= data.header2 #></h2><h3 class='header3'><#= data.header3 #></h3><h4 class='header4'><#= data.header4 #></h4><h5 class='header5'><#= data.header5 #></h5><h6 class='header6'><#= data.header6 #></h6></div>", {useWithBlock: false});

// Lo-Dash (7/5/2012)
window.tpl.lodash = lodash.template("<div><h1 class='header'><%= header %></h1><h2 class='header2'><%= header2 %></h2><h3 class='header3'><%= header3 %></h3><h4 class='header4'><%= header4 %></h4><h5 class='header5'><%= header5 %></h5><h6 class='header6'><%= header6 %></h6></div>");

// Lo-Dash - no with
window.tpl.lodashNoWith = lodash.template("<div><h1 class='header'><%= data.header %></h1><h2 class='header2'><%= data.header2 %></h2><h3 class='header3'><%= data.header3 %></h3><h4 class='header4'><%= data.header4 %></h4><h5 class='header5'><%= data.header5 %></h5><h6 class='header6'><%= data.header6 %></h6></div>", null, {variable: 'data'});

// Underscore - no with
window.tpl.underscoreNoWith = _.template("<div><h1 class='header'><%= data.header %></h1><h2 class='header2'><%= data.header2 %></h2><h3 class='header3'><%= data.header3 %></h3><h4 class='header4'><%= data.header4 %></h4><h5 class='header5'><%= data.header5 %></h5><h6 class='header6'><%= data.header6 %></h6></div>", null, {variable: 'data'});

</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

tpl.dot(tpl.vars);

tpl.kendoFalseWith(tpl.vars);

tpl.lodash(tpl.vars);

tpl.lodashNoWith(tpl.vars);

tpl.underscoreNoWith(tpl.vars);

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by tomByrer on 5th July 2012

4 comments