JavaScript template language shootoff (v710)

Revision 710 of this benchmark created on

Description

A brief comparison of some JavaScript templating engines on a short template: 6 header tags, and 10 list items.

Note: When adding a new test, please ensure that your test returns the same HTML string (or equivalent DOM fragment) as the others.

Preparation HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>

<script src="http://gist.github.com/raw/550881/29bb186167079c0b33ab6e9d50d779f37860cfa4/micro.js"></script>

<script src="https://github.com/QLeelulu/nTenjin/raw/master/nTenjin.js"></script>

<!--script src="http://gist.github.com/raw/860205/8444586913ab249c619671b8f5054fc92dddf643/micro2.js"></script-->

<!--script src="http://gist.github.com/raw/860240/cd98cacbdeee7eb2cfb2ca3ca76638dae2a5b1af/micro3.js"></script-->

<script src="http://github.com/olado/doT/raw/master/doT.js"></script>

<script src="http://github.com/olado/doT/raw/master/doU.js"></script>
<script>
  (function() {
   var cache = {};
  
   this.utmpl = function tmpl(str, mode, dt) {
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
  
    // Generate a reusable function that will serve as a template
    // generator (and which will be cached).
    new Function("dt", mode ?
    // mode = true: Array Join Microtemplate
    "var p=[]; p.push('" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "',$1,'").split("<%").join("');").split("%>").join("p.push('") + "');return p.join('');" :
    // mode = false: Concatenate Microtemplate
    "var p = ''; p+='" + str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^%]*%>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<%=(.+?)%>/g, "'; p += $1; p += '").split("<%").join("';").split("%>").join("p+='") + "'; return p;");
    // Provide some basic currying to the user
    return dt ? fn(dt) : fn;
   };
  })();

var doT2 = doT;
  
  doT.templateSettings = {
   begin: '<%',
   end: '%>',
   varname: 'dt'
  };

  doT2["append"] = false;
  
  doU.templateSettings = {
   evaluate: /<%([\s\S]+?)%>/g,
   interpolate: /<%=([\s\S]+?)%>/g,
   encode: /<%!([\s\S]+?)%>/g,
   varname: 'dt',
   strip: true
  };
  
  
  window.sharedVariables = {};
  window.sharedVariables.dt = {
   header: "Header",
   header2: "Header2",
   header3: "Header3",
   header4: "Header4",
   header5: "Header5",
   header6: "Header6",
   list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };
  
  window.micro2 = "<div><h1 class='header'><%= dt.header %></h1><h2 class='header2'><%= dt.header2 %></h2><h3 class='header3'><%= dt.header3 %></h3><h4 class='header4'><%= dt.header4 %></h4><h5 class='header5'><%= dt.header5 %></h5><h6 class='header6'><%= dt.header6 %></h6><ul class='list'><% for (var i = 0, l = dt.list.length; i < l; i++) { %><li class='item'><%= dt.list[i] %></li><% } %></ul></div>";
  
  
  window.underscoreTemplate = _.template(micro2);
  
  window.resigTemplate = tmpl(micro2);
  
  window.resigTemplate2 = utmpl(micro2, true);
  
  window.resigTemplate3 = utmpl(micro2, false);
  
  window.doTtemplate = doT.template(micro2);

  window.doT2template = doT2.template(micro2);
  
  window.doUtemplate = doU.template(micro2);

  window.nTenjinTemplate = "<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><ul class='list'><?js for (var i = 0, l = it.list.length; i < l; i++) { ?><li class='item'>#{ it.list[i] }</li><?js } ?></ul></div>";

  
  window.convertednTenjinTemplate = new nTenjin.Template();
  window.convertednTenjinTemplate.convert(nTenjinTemplate);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Underscore.js Template
underscoreTemplate(sharedVariables);
ready
Resig Micro-Templating.
resigTemplate(sharedVariables);
ready
Resig Micro-Templating without with(obj)
resigTemplate2(sharedVariables.dt);
ready
Resig Micro-Templating with += instead of push and join
resigTemplate3(sharedVariables.dt);
ready
doT.js
doTtemplate(sharedVariables.dt);
ready
doU.js
doUtemplate(sharedVariables.dt);
ready
doT.js (append = false)
doT2template(sharedVariables.dt);
ready
nTenjin
convertednTenjinTemplate.render(sharedVariables.dt);
ready

Revisions

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