HTMLBars vs. Handlebars compiled output comparison

[atsjj]

I ran a quick comparison (maybe it's not fair) between Handlebars and HTMLBars production output in Ember CLI. It is looking at the default application template between Ember 1.9.1 and 1.10.0:

The numbers represent the packed, minified size and the beautified lines of code, so you can get a rough idea of size if you don't like using bytes as a measurement.

Ember 1.9.1 (Handlebars)
481 bytes, ≈ 15 LOC (beautified)

define("trill/templates/application", ["exports", "ember"], function(e, t) {
  "use strict";
  e["default"] = t["default"].Handlebars.template(function(e, i, r, n, l) {
    this.compilerInfo = [4, ">= 1.0.0"], r = this.merge(r, t["default"].Handlebars.helpers), l = l || {};
    var a, o = "";
    return l.buffer.push('<h2 id="title">Welcome to Ember.js</h2>\n\n'), a = r._triageMustache.call(i, "outlet", {
      hash: {},
      hashTypes: {},
      hashContexts: {},
      contexts: [i],
      types: ["ID"],
      data: l
    }), (a || 0 === a) && l.buffer.push(a), l.buffer.push("\n"), o
  })
})

Ember 1.10.0 (HTMLBars)
854 bytes, ≈ 32 LOC (beautified)

define("trill/templates/application", ["exports"], function(e) {
  "use strict";
  e["default"] = Ember.HTMLBars.template(function() {
    return {
      isHTMLBars: !0,
      blockParams: 0,
      cachedFragment: null,
      hasRendered: !1,
      build: function(e) {
        var t = e.createDocumentFragment(),
          i = e.createElement("h2");
        e.setAttribute(i, "id", "title");
        var r = e.createTextNode("Welcome to Ember.js");
        e.appendChild(i, r), e.appendChild(t, i);
        var i = e.createTextNode("\n\n");
        e.appendChild(t, i);
        var i = e.createTextNode("\n");
        return e.appendChild(t, i), t
      },
      render: function(e, t, i) {
        var r = t.dom,
          n = t.hooks,
          a = n.content;
        r.detectNamespace(i);
        var l;
        t.useFragmentCache && r.canClone ? (null === this.cachedFragment && (l = this.build(r), this.hasRendered ? this.cachedFragment = l : this.hasRendered = !0), this.cachedFragment && (l = r.cloneNode(this.cachedFragment, !0))) : l = this.build(r);
        var o = r.createMorphAt(l, 1, 2, i);
        return a(t, o, e, "outlet"), l
      }
    }
  }())
})

This comparison shows a ±56% (in bytes) between the two standards.

Originally posted on http://discuss.emberjs.com/t/compiled-htmlbars-a-lot-bigger-than-handlebars

[mixonic]

@atsjj thanks for the comparison! The discussion about template output should probably be done in HTMLBars though:

https://github.com/tildeio/htmlbars

I can say there are some very big changes to the compiled template output coming in tildeio/htmlbars#282, and they do make the templates much smaller, even than Handlebars templates.

I'm going to close this issue, as I already consider work to address this to be well under way. Please re-open if I've missed something!

[atsjj]

I've been watching the hell out of that issue; going to be awesome when it lands.

Thanks for taking a look at this issue!

[mmun]

They're smaller but not completely minimal. We'll still include the fragment building portion inline.

@atsjj You should compare gzipped file sizes as well. The local repetition of createDocumentFragment, createTextNode, etc. should compress very well.

[atsjj]

@mmun that's a great point!

Ember 1.9.1 (Handlebars)
360 bytes, compressed, gzip

Ember 1.10.0 (HTMLBars)
479 bytes, compressed, gzip