Mustache JS engine rumble: Mustache.js vs Handlebars.js vs Hogan.js (v37)

Revision 37 of this benchmark created on

Description

Compared Mustache.js, Handlebars.js, Hogan.js

Preparation HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.0/hogan.js"></script>

Setup

var tests = [{
      template: "<p>My name is {{name}}!</p>",
      variables: {
        name: "Paul Engel"
      }
    }, {
      template: "<p>My name is {{name}}!{{!name}}</p>",
      variables: {
        name: "Paul Engel"
      }
    }, {
      template: "<p>{{html}} {{&html}}</p>",
      variables: {
        html: "<strong>Paul Engel</strong>"
      }
    }, {
      template: "<p>{{html}} {{html}}</p>",
      variables: {
        html: "<strong>Paul Engel</strong>"
      }
    }, {
      template: "<p>This is shown!{{#show}} Psst, this is never shown{{/show}}</p>",
      variables: {}
    }, {
      template: "<p>This is shown!{{#show}} Psst, this is never shown{{/show}}</p>",
      variables: {
        show: false
      }
    }, {
      template: "<p>This is shown!{{#shown}} And, this is also shown{{/shown}}</p>",
      variables: {
        shown: true
      }
    }, {
      template: "<p>My name is {{person.first_name}} {{person.last_name}}!</p>",
      variables: {
        person: {
          first_name: "Paul",
          last_name: "Engel"
        }
      }
    }, {
      template: "{{name}}<ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>{{^names}}Sorry, no people to list!{{/names}}",
      variables: {
        names: []
      }
    }, {
      template: "<p>{{name}}</p><ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>{{^names}}Sorry, no people to list!{{/names}}<p>{{name}}</p>",
      variables: {
        name: "Chunk Norris",
        names: [{
          name: "Paul"
        }, {
          name: "Engel"
        }]
      }
    }, {
      template: "<ul>{{#names}}<li>{{.}}{{foo}}</li>{{/names}}</ul>",
      variables: {
        names: ["Paul", "Engel"]
      }
    }, {
      template: "<ul>{{#names}}<li>{{fullName}}</li>{{/names}}</ul>",
      variables: {
        names: [{
          firstName: "Paul",
          lastName: "Engel"
        }, {
          firstName: "Chunk",
          lastName: "Norris"
        }]
        // remove lambdas for LT don't support yet(stringify function can consume lots)
      }
    }];
    var compiled = {
      "Mustache.js": [],
      "Handlebars.js": [],
      "Hogan.js": [],
    };
    for (var i = 0; i < tests.length; i++) {
      var template = tests[i].template;
      compiled["Mustache.js"].push(Mustache.compile(template.replace(/\.\.\//g, "")));
      var HandlebarsT = Handlebars.compile(template);
      HandlebarsT({}); //disable Handlebars' lazy-compile
      compiled["Handlebars.js"].push(HandlebarsT);
      compiled["Hogan.js"].push(Hogan.compile(template.replace(/\.\.\//g, "")));
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache.js
for (var i = 0; i < tests.length; i++) {
  compiled["Mustache.js"][i](tests[i].variables);
}
ready
Handlebars.js
for (var i = 0; i < tests.length; i++) {
  compiled["Handlebars.js"][i](tests[i].variables);
}
ready
Hogan.js
for (var i = 0; i < tests.length; i++) {
  compiled["Hogan.js"][i].render(tests[i].variables);
}
ready

Revisions

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