JavaScript template language shootoff (v808)

Revision 808 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.

Since the purpose is to generate HTML for the DOM, the tests now include DOM node creation.

(JUP templates were removed, because they produced incorrect output and are incapable of producing the desired output from a template and the given data.)

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://leonidas.github.com/transparency/js/transparency.min.js"></script>


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

<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>

<script src="https://github.com/downloads/paul/handlebars.js/handlebars.js"></script>

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

<script src="http://github.com/creationix/haml-js/raw/master/lib/haml.js"></script>

<script src="http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js"></script>

<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script src="http://sstephenson.github.com/eco/dist/eco.js"></script>

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

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

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

<script src="http://github.com/aefxx/jQote2/raw/69b2053a13f5f180e696de9b3dba856a3c00678c/jquery.jqote2.js"></script>

<script src="https://raw.github.com/relativityboy/Orange-J/master/jquery.orange.js"></script>

<script type='text/javascript'>
  // hogan looks for exports and smashes it's contents :(
if(typeof exports !== "undefined"){
  var oldExports = exports;
  exports = undefined;
}
</script>
<script src="https://twitter.github.com/hogan.js/builds/1.0.5/hogan-1.0.5.js"></script>
<script type='text/javascript'>
  exports = oldExports;
</script>

<div id="transparency_template">
  <h1 class='header'></h1>
  <h2 class='header2'></h2>
  <h3 class='header3'></h3>
  <h4 class='header4'></h4>
  <h5 class='header5'></h5>
  <h6 class='header6'></h6>
  <ul class='list'>
    <li class='item'></li>
  </ul>
</div>

<script>
  window.transparencyTemplate = document.getElementById("transparency_template")

  transparencyTemplate.parentNode.removeChild(transparencyTemplate);

  window.mustacheTemplate = "<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><ul class='list'>{{#list}}<li class='item'>{{.}}</li>{{/list}}</ul></div>";
  
  window.handlebarsTemplate = Handlebars.compile("<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><ul class='list'>{{#list}}<li class='item'>{{this}}</li>{{/list}}</ul></div>");
  
  window.micro = "<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><ul class='list'><% for (var i = 0, l = list.length; i < l; i++) { %><li class='item'><%= list[i] %></li><% } %></ul></div>";
  
  window.underscoreTemplate = _.template(micro);
  
  window.resigTemplate = tmpl(micro);
  
  window.sharedVariables = {
   header: "Header",
   header2: "Header2",
   header3: "Header3",
   header4: "Header4",
   header5: "Header5",
   header6: "Header6",
   list: ['10000000', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };
  
  window.jadeTemplate = "div\n  h1.header!= header\n  h2.header2!= header2\n  h3.header3!= header3\n  h4.header4!= header4\n  h5.header5!= header5\n  h6.header6!= header6\n  ul.list\n    - each item in list\n      li.item!= item";
  
  window.hamlTemplate = Haml("%div\n  %h1.header= header\n  %h2.header2= header2\n  %h3.header3= header3\n  %h4.header4= header4\n  %h5.header5= header5\n  %h6.header6= header6\n  %ul.list\n    :each item in list\n      %li.item= item");
  
  window.ecoTemplate = eco("<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><ul class='list'><% for item in @list: %><li class='item'><%- item %></li><% end %></ul></div>");
  
  window.jQueryTemplate = $.template(null, "<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><ul class='list'>{{each list}}<li class='item'>${$value}</li>{{/each}}</ul></div>");
  
  window.doTtemplate = 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><ul class='list'>{{ for (var i = 0, l = it.list.length; i < l; i++) { }}<li class='item'>{{= it.list[i] }}</li>{{ } }}</ul></div>");
  
  window.doUtemplate = doU.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><ul class='list'>{{ for (var i = 0, l = it.list.length; i < l; i++) { }}<li class='item'>{{= it.list[i] }}</li>{{ } }}</ul></div>");
  
  window.jqote_tmpl = "<div><h1 class='header'><%= this.header %></h1><h2 class='header2'><%= this.header2 %></h2><h3 class='header3'><%= this.header3 %></h3><h4 class='header4'><%= this.header4 %></h4><h5 class='header5'><%= this.header5 %></h5><h6 class='header6'><%= this.header6 %></h6><ul class='list'><% for (var n = 0, l = this.list.length; n < l; n++) { %><li class='item'><%= this.list[n] %></li><% } %></ul></div>";
  
  window.jqote2 = $.jqotec(jqote_tmpl);

  $.addSnippet("test1", "<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><ul class='list'>{list[]}<li class='item'>{val}</li>{[]list}</ul></div>");

  window.hoganTemplate = Hogan.compile("<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><ul class='list'>{{#list}}<li class='item'>{{.}}</li>{{/list}}</ul></div>");

window._createElement = function(type, properties, content) {
                        var element = document.createElement(type),
                                property, 
                                attrNode;
                        
                        if(properties){
                                for(property in properties){
                                        //Internet Explorer doesn't accept the class property.
                                        //So we must create a attribute node and append to the element.
                                        if(property === "class") {
                                                attrNode = document.createAttribute(property);
                                                attrNode.value = properties[property];
                                                element.setAttributeNode(attrNode);
                                        } 
                                        else {
                                                element.setAttribute(property, properties[property]);
                                        }
                                }
                        } 
                         
      if(content){
          element.appendChild(document.createTextNode(content));
      }

                        return element;
                };
window.createDOM = function(data){
     var c = _createElement,
         root = c("div"),
         ul = c("ul", {"class": "list"}),
         i,
         l;
   
     root.appendChild(c("h1", {"class": "header"}, data.header));
     root.appendChild(c("h2", {"class": "header2"}, data.header2));
     root.appendChild(c("h3", {"class": "header3"}, data.header3));
     root.appendChild(c("h4", {"class": "header4"}, data.header4));
     root.appendChild(c("h5", {"class": "header5"}, data.header5));
     root.appendChild(c("h6", {"class": "header6"}, data.header6));
  
     root.appendChild(ul);

     for(i=0, l=data.list.length; i<l; i++){
          ul.appendChild(c("li", {"class": "item"}, data.list[i]));
     }

     document.body.appendChild(root);
};
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache.js Template
$(Mustache.to_html(mustacheTemplate, sharedVariables));
++sharedVariables.list[0];
 
ready
Resig Micro-Templating.
$(resigTemplate(sharedVariables));
++sharedVariables.list[0];
 
ready
Creationix's Haml-js Template
$(hamlTemplate(sharedVariables));
++sharedVariables.list[0];
 
ready
Jade Template
$(jade.render(jadeTemplate, {
 locals: sharedVariables,
 filename: 'test.js',
 cache: true
}));
++sharedVariables.list[0];
 
ready
Underscore.js Template
$(underscoreTemplate(sharedVariables));
++sharedVariables.list[0];
 
ready
Eco Template
$(ecoTemplate(sharedVariables));
++sharedVariables.list[0];
 
ready
jQuery Templates
$.tmpl(jQueryTemplate, sharedVariables);
++sharedVariables.list[0];
 
ready
Handlebars.js
$(handlebarsTemplate(sharedVariables));
++sharedVariables.list[0];
 
ready
doT.js
$(doTtemplate(sharedVariables));
++sharedVariables.list[0];
 
ready
doU.js
$(doUtemplate(sharedVariables));
++sharedVariables.list[0];
 
ready
jQote2 direct
$(jqote2.call(sharedVariables, 0, 0, [sharedVariables], jqote2));
++sharedVariables.list[0];
 
ready
Orange-J
$($.snippet("test1", sharedVariables));
++sharedVariables.list[0];
 
ready
Twitter's Hogan.js
$(hoganTemplate.render(sharedVariables));
++sharedVariables.list[0];
 
ready
Transparency
Transparency.render(transparencyTemplate, sharedVariables)
++sharedVariables.list[0];
ready
DOM
createDOM(sharedVariables);
++sharedVariables.list[0];
ready

Revisions

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