Benchmarks

[james2doyle]

Hey there,

this looks like a cool project. I was wondering if there was a plan to compare this to some other template libraries?

Some of the top of my head would mustache and dust. Although dust might be a little heavier in that it has if/else and block/partials.

[phpnode]

@james2doyle yes that would be interesting. I'm 100% sure it will be beaten if compilation time is taken into account, but assuming it isn't then the compiled JS should be pretty competitive.

[james2doyle]

You never know though. Maybe htmling beats one of them on large objects. Or maybe it handles nesting better. Something to consider.

[phpnode]

others to consider: Jade and Handlebars

[james2doyle]

Yeah thats true. But I left them out because there is a lot of logic in those templates, typically

[phpnode]

@james2doyle HTMLing supports just as much logic as those, I probably need to add some more examples, but essentially all of polymer's template syntax is supported, so you can do this:

<div>
  <template if="{{a > b && day === 'Monday'}}">
     <p>It's a Monday, and {{a}} is bigger than {{b}}!</p>
  </template>
  <template bind="{{users[0] as firstUser}}">
   <p>{{firstUser.name}}'s name as an MD5 is {{firstUser.name | md5}}.</p>
  </template>
  <content>This is some fallback content which will be rendered unless some other content is specified</content>
</div>

and then after compilation you could do this:

template.md5 = require('some-md5-lib');
console.log(template.render({
  a: 1,
  b: 0,
  day: 'Monday',
  users: [
    {name: 'James'}, {name: 'Charles'}
  ]
}, "Some Content");

which would give you:

<div>
  <p>It's a Monday, and 1 is bigger than 0!</p>

   <p>James's name as an MD5 is d52e32f3a96a64786814ae9b5279fbe5.</p>

   Some Content
 </div>

[james2doyle]

Oh sweet ok. Thats awesome!

[vinayraghu]

I came in to open a new issue with just that in mind. I can do if constructs in node using htmling right? Perfect.. thanks!

[phpnode]

@rvinay88 yes 😄 the full syntax is supported

[phpnode]

I'm going to make a new repo with a full benchmark suite to compare different implementations, from my initial investigations HTMLing is pretty competitive:

Note: all these are in precompiled mode.

  basic
    ✓  HTMLing x 6,653,278 ops/sec ±1.92% (84 runs sampled)
    ✓  Hogan x 5,761,315 ops/sec ±1.85% (86 runs sampled)
    ✓  Handlebars x 4,449,910 ops/sec ±1.53% (89 runs sampled)
    ✓  Mustache x 1,291,642 ops/sec ±1.81% (85 runs sampled)
    ✓  Jade x 398,578 ops/sec ±1.44% (95 runs sampled)

    Result: HTMLing is 1569.25% faster than Jade.

  nothing
    ✓  HTMLing x 28,529,702 ops/sec ±1.81% (84 runs sampled)
    ✓  Hogan x 14,263,618 ops/sec ±2.57% (81 runs sampled)
    ✓  Handlebars x 8,178,755 ops/sec ±1.74% (92 runs sampled)
    ✓  Mustache x 4,625,682 ops/sec ±1.91% (87 runs sampled)
    ✓  Jade x 503,464 ops/sec ±2.10% (81 runs sampled)

    Result: HTMLing is 5566.69% faster than Jade.

  partial
    ✓  HTMLing x 117,231 ops/sec ±2.17% (85 runs sampled)
    ✓  Hogan x 50,561 ops/sec ±1.61% (93 runs sampled)
    ✓  Handlebars x 180,685 ops/sec ±1.85% (85 runs sampled)
    ✓  Mustache x 17,889 ops/sec ±1.95% (88 runs sampled)
    ✓  Jade x 16,427 ops/sec ±1.66% (93 runs sampled)

    Result: Handlebars is 999.96% faster than Jade.

Handlebars is better at simple partials than us, I think it's because they can get away with doing a simple key lookup in an object when finding the correct partial, whereas we must resolve the partial's path and this is showing up in these naive benchmarks. There'll be a way to cache that I think.

[phpnode]

@james2doyle @rvinay88 I added HTMLing to an existing set of benchmarks here, it performs pretty well:

    Gaikan               (  934ms) - fastest
    ECT                  ( 1017ms) - 9% slower
    HTMLing              ( 1096ms) - 17% slower
    doT                  ( 1431ms) - 53% slower
    Dust                 ( 1437ms) - 54% slower
    Fest                 ( 1564ms) - 67% slower
    Hogan.js             ( 1835ms) - 96% slower
    Jade without `with`  ( 2211ms) - 137% slower
    EJS without `with`   ( 2266ms) - 143% slower
    Underscore           ( 2545ms) - 172% slower
    Handlebars.js        ( 2706ms) - 190% slower
    Swig                 ( 2991ms) - 220% slower
    Eco                  ( 3262ms) - 249% slower
    EJS                  ( 4032ms) - 332% slower
    CoffeeKup            ( 7599ms) - 714% slower
    Jade                 ( 9458ms) - 913% slower

[vinayraghu]

Definitely a reason to pick this over handlebars! Thanks a lot for the update.