Search code examples
javascriptunderscore.jstemplate-enginedot.js

"with" and "no with" in template engines

I am on a search for a javascript template engine that has good performance when used in large js applications and is also very suitable for mobile applications. So I have gone through the various jsPerf-tests for these. There seems to be a lot which show different results and it is confusing to find out which is the standard test.

Can some one guide me a standard jsPerf that I can refer to and that should also include following templates dust, underscore, hogan, mustache, handlebars.

  1. From what I have observed dot.js is a constant performer with good rendering speed, but is it mature enough for larger applications ?

  2. What is "with" and "no with" (specific to underscore.js)that is shown in the jsPerf tests? Can some one explain.

  3. In all the tests I have seen popular templates like mustache, handlebars, dust, hogan,etc seems to be behind performance than other templates, so why people are using them leaving out the top performers,is it because of maturity of these template engines?

Thanks in advance

Solution

  • Can some one guide me a standard jsPerf that I can refer to and that should also include following templates dust, underscore, hogan, mustache, handlebars.

    I know of non off hand. Is that required? Why?

    Underscore

    What is "with" and "no with" (specific to underscore.js) that is shown in the jsPerf tests? Can some one explain.

    With, Convenient, Slower performance

    _.template("<%= myvar %>", { myvar: "foo" });

    Non-with, Inconvenient, Faster performance

    _.template("<%= data.myvar %>", { myvar: "foo" }, { variable: "data" });

    Best of both worlds

    _.extend( _.templateSettings, { variable: "data" } ); // Do this once.
_.template("<%= data.myvar %>", { myvar: "foo" });
_.template("<%= data %>", "foo");
_.template("<%= override.myvar %>", { myvar: "foo" }, { variable: "override" });

    Also note that the template function returns a compiled template if the second argument is null, undefined, or not given. So in the case of the override variable:

    var renderFn = _.template("<%= override.myvar %>", null, { variable: "override" });
renderFn({ myvar: "foo" });

    Performance vs Readability

    In all the tests I have seen popular templates like mustache, handlebars, dust, hogan,etc seems to be behind performance than other templates, so why people are using them leaving out the top performers,is it because of maturity of these template engines?

    Not everything in JavaScript is about performance. There has to be a balance between scalability, maintainability, readability, and convenience. The rule of thumb being code for readability and convenience then only optimize for performance where needed. There is an SO thread that has a good discussion on the topic.

    So to answer, other template methods are often chosen with performance at a lower priority then others.