JavaScript template language shootoff

JavaScript performance comparison

Revision 906 of this test case created

Info

A Public Appeal for Fair and Equal Testing treatment for this JSPerf!


I'm not the only one to notice very odd updates to the template test over the last few weeks


For example:

  1. Changing some templating engines template implementations to use OLD or DEPRECATED syntax; ones that are extremely slow -- particularly with looping / concat strings (in these tests)

  2. Removing entire template engines from the tests by: faulting it for some intrinsic, catastrophic bugs.

  3. Contrary to this, deeper inspection by multiple developers and contributors have revealed that multiple, invalid syntaxes are being applied to templates; creating new bugs that are actually "user error"

This only hurts the development community on the whole!

Suggestions:

  1. If you are going to remove a template engine due to a perceived bug (which probably seemed to work fine previously); please do the due-diligence to ensure it is truly a template syntax error and then FIX IT.

  2. So .. if you identify a possible bug, but don't know how to fix it:

    • DO NOT: remove it yourself but ask someone else to fix it! Creating a new test with 10 templates removed is not really awesome. :(
    • DO: leave it and:
      • Add a comment to the test page which caveats the results (potential bugs). Give others the opportunity to investigate.
      • Ask a template engine expert (for that library) to fix it.

Goal

Lots of people link to this test and/or generates pretty/extensive charts; they suddenly become either invalid, or outdated.

(less prominent tests - who really cares .. the ton of unnecessary churn on this hurts us all)


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

Preparation code

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

<script src="http://olado.github.io/doT/doT.min.js"></script>

<script src="https://raw.github.com/lodash/lodash/2.4.1/dist/lodash.min.js"></script>


<!--External Template Definitions-->
<script type="text/x-kendo-template" id="kendoUIextTemplate">
<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>
<ul class='list'>
   <# for (var i = 0, l = data.list.length; i < l; i++) { #>
   <li class='item'><#= data.list[i] #></li>
   <# } #>
</ul>
</div>
</script>
<script>
  window.sharedVariables = {
   header: "Header",
   header2: "Header2",
   header3: "Header3",
   header4: "Header4",
   header5: "Header5",
   header6: "Header6",
   list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  };

window.doTTemplate = doT.compile("<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'>{{~it.list :value:index}}<li class='item'>{{=value}}</li>{{~}}</ul></div>", {append:false});

window.doTTemplateA = doT.compile("<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'>{{~it.list :value:index}}<li class='item'>{{=value}}</li>{{~}}</ul></div>", {append:true});

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.lodashTemplate = _.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>
<ul class='list'>
<% _.forEach(list, function(it) { %><li class='item'><%-it%></li><% }); %>
</ul></div>");

Preparation code output