Optimize Fragments

[thheller]

Currently fragments emit code to directly construct DOM nodes resulting in a lot of generated code for complex HTML structures.

https://github.com/thheller/js-framework-shadow-grove/blob/85d2ae390b331e6b39982f33d36a5942069b2eab/src/main/bench/full.cljs#L40-L89

results in (:advanced output)

function (a, b, c) {
        var d = c(fi),
          e = c(fi),
          f = c(fi),
          h = c(fi),
          k = c(fj),
          l = document.createTextNode("shadow-grove"),
          m = c(fi),
          p = c(fi),
          r = c(fi),
          v = c(nh),
          A = document.createTextNode("Create 1,000 rows"),
          M = c(fi),
          O = c(nh),
          S = document.createTextNode("Create 10,000 rows"),
          Y = c(fi),
          da = c(nh),
          qa = document.createTextNode("Append 1,000 rows"),
          ya = c(fi),
          W = c(nh),
          n = document.createTextNode("Update every 10th row"),
          q = c(fi),
          t = c(nh),
          u = document.createTextNode("Clear"),
          w = c(fi),
          x = c(nh),
          z = document.createTextNode("Swap rows"),
          B = c(jh),
          D = c(th);
        b = Wj(b[0], a);
        c = c(xi);
        ik(a, d, Ni, null, "container");
        d.appendChild(e);
        ik(a, e, Ni, null, "jumbotron");
        e.appendChild(f);
        ik(a, f, Ni, null, "row");
        f.appendChild(h);
        ik(a, h, Ni, null, "col-md-6");
        h.appendChild(k);
        k.appendChild(l);
        f.appendChild(m);
        ik(a, m, Ni, null, "col-md-6");
        m.appendChild(p);
        ik(a, p, Ni, null, "row");
        p.appendChild(r);
        ik(a, r, Ni, null, "col-sm-6 smallpad");
        r.appendChild(v);
        ik(a, v, ri, null, "button");
        ik(a, v, Gj, null, "run");
        ik(a, v, Eh, null, new K(null, 1, [Zh, Lj], null));
        ik(a, v, Ni, null, "btn btn-primary btn-block");
        v.appendChild(A);
        p.appendChild(M);
        ik(a, M, Ni, null, "col-sm-6 smallpad");
        M.appendChild(O);
        ik(a, O, ri, null, "button");
        ik(a, O, Gj, null, "runlots");
        ik(a, O, Eh, null, new K(null, 1, [Zh, rh], null));
        ik(a, O, Ni, null, "btn btn-primary btn-block");
        O.appendChild(S);
        p.appendChild(Y);
        ik(a, Y, Ni, null, "col-sm-6 smallpad");
        Y.appendChild(da);
        ik(a, da, ri, null, "button");
        ik(a, da, Gj, null, "add");
        ik(a, da, Eh, null, new K(null, 1, [Zh, ni], null));
        ik(a, da, Ni, null, "btn btn-primary btn-block");
        da.appendChild(qa);
        p.appendChild(ya);
        ik(a, ya, Ni, null, "col-sm-6 smallpad");
        ya.appendChild(W);
        ik(a, W, ri, null, "button");
        ik(a, W, Gj, null, "update");
        ik(a, W, Eh, null, new K(null, 1, [Zh, qh], null));
        ik(a, W, Ni, null, "btn btn-primary btn-block");
        W.appendChild(n);
        p.appendChild(q);
        ik(a, q, Ni, null, "col-sm-6 smallpad");
        q.appendChild(t);
        ik(a, t, ri, null, "button");
        ik(a, t, Gj, null, "clear");
        ik(a, t, Eh, null, new K(null, 1, [Zh, Wi], null));
        ik(a, t, Ni, null, "btn btn-primary btn-block");
        t.appendChild(u);
        p.appendChild(w);
        ik(a, w, Ni, null, "col-sm-6 smallpad");
        w.appendChild(x);
        ik(a, x, ri, null, "button");
        ik(a, x, Gj, null, "swaprows");
        ik(a, x, Eh, null, new K(null, 1, [Zh, Kj], null));
        ik(a, x, Ni, null, "btn btn-primary btn-block");
        x.appendChild(z);
        d.appendChild(B);
        ik(a, B, Ni, null, "table table-hover table-striped test-data");
        B.appendChild(D);
        ok(D, b);
        d.appendChild(c);
        ik(a, c, Ri, null, "true");
        ik(a, c, Ni, null, "preloadicon glyphicon glyphicon-remove");
        return [d, b];
      }

While this isn't terrible and performs quite well it might benefit from generating a HTML template string instead and using cloneNode(true) to create the nodes later. This should make the code smaller and might even perform better. Many other JS frameworks nowadays use this strategy so it might be worth doing too.