This is, in my opinion, even worse than writing straight HTML in JavaScript. Before I get into anything, I just want to point out that with jQuery, you can do the same thing:<p>$('<div id="foo"><span>bar</span></div>').appendTo('.baz');<p>I'm not one to condone the over-use of the bloated jQuery, but in this case I sure would.<p>Anyways, my biggest gripe with this whole thing is the fact that writing any markup in your JS, or anywhere other than an HTML file, is just plain ugly. Beyond that, it's a pain to manage, and totally screws up the whole "separation of duties" paradigm that the web community seems to be quickly forgetting as of late.<p>Keep your markup where it should be, in your HTML files, because as we all know, HTML is XML and XML is meant to give semantic meaning to data. JavaScript should be a means of transport for data to its relevant structure, not means of giving visual structure to data. Leave that to the HTML and CSS.<p>Even templating doesn't do it for me 100% of the time and there are better ways. I'm a heavy believer in separation of duties, and any JS programmer should be too. Every time I come across any heavy-handed DOM manipulation in JS I cringe.<p>As for this article, there's 523637483723526334632 other libraries/frameworks/micro-frameworks that do this same thing, and if you're going to do it, just use what you're already probably using: jQuery. You're probably already abusing it anyways.
My browser does 10,000 operations / second with innerHTML, and 15,000 operations / second with DOM. In every ajax application I've ever made, this is negligible, compared to latency, server processing time, and downloading time.<p>I guess this saves you 1ms for every 30 elements you create? I'm sure there are some cases I'm missing where this might make more of an impact, but from my understanding of the article, this looks like a pretty small improvement.
I remember back in the late 90s that generating content on the browser using javascript was the new and greatest thing.<p>Personally it bugs me. But I'm 31, a total fuddy duddy.
I have a problem with this, as it appears to break the separation of concerns.<p>Don't the programing guru's tell us over and over NOT to mix markup into code and vice-versa?
I thought this was going to be about a data binding template system like AngularJS or Knockout. Those are truly "better than templates", whereas this one is questionable.
I have a library for this sort of thing (but without the HAML-style # and . niceties :-/) which can also output DOM Elements or HTML (escaped by default) from the same code by flipping its output mode: <a href="https://github.com/insin/DOMBuilder" rel="nofollow">https://github.com/insin/DOMBuilder</a><p>The output modes are implemented as plugins, so you can also add other sorts of things, like the template mode I'm in the progress of writing, with template inheritance and the like.<p>Bretthopper's comment about the readability is spot on, though - you have to start using comma-first pretty quickly or you will go mad getting commas in the right places, and you're never going to get a designer writing these things.<p>The good thing about it is that since your templates are written in code, it's trivial to share them between client and server - this example app can also be clones and run on Node.js, which uses the same templates to serve full pages when you hit any URL and works as a forms 'n links webapp if you disable JavaScript in your browser: <a href="http://jonathan.buchanan153.users.btopenworld.com/sacrum/fragile/fragile.html" rel="nofollow">http://jonathan.buchanan153.users.btopenworld.com/sacrum/fra...</a>
Hey man I think its pretty cool, I'm using it to replace my default shorthand to document.createElement. Added a handy dandy outputStrings mode so i can run it in node.js without a dom. Check it out $el is it, plus uses $node for the string output mode <a href="https://github.com/andrewluetgers/loot" rel="nofollow">https://github.com/andrewluetgers/loot</a>
The idea that CSS selectors could be used for element creation is awesome. It would be so convenient to write:<p><pre><code> var link = el("a#top.link[src='http://google.com'][data-external='true']")
</code></pre>
Instead of:<p><pre><code> var link = document.createElement('a');
link.setAttribute('id', 'top');
link.setAttribute('class', 'link');
link.setAttribute('src', 'http://google.com');
link.dataset.external = 'true'
</code></pre>
Someone needs to bring it to W3C forums, otherwise we might end up with this <a href="http://lists.w3.org/Archives/Public/www-dom/2011OctDec/0020.html" rel="nofollow">http://lists.w3.org/Archives/Public/www-dom/2011OctDec/0020....</a>
The syntax looks very similar to JSONML, which has its own templating thing JSONML BST:<p><a href="http://jsonml.org/" rel="nofollow">http://jsonml.org/</a> (<a href="http://webcache.googleusercontent.com/search?q=cache:http://jsonml.org/" rel="nofollow">http://webcache.googleusercontent.com/search?q=cache:http://...</a>)<p><a href="http://jsonml.org/bst/" rel="nofollow">http://jsonml.org/bst/</a> (<a href="http://webcache.googleusercontent.com/search?q=cache:http://jsonml.org/BST/" rel="nofollow">http://webcache.googleusercontent.com/search?q=cache:http://...</a>)
This is an interesting approach. One downside is that it's much less readable than the Handlebars template. Using Coffeescript for the "templating" functions would actually clean it up a lot.
What concerns me about generating HTML clientside is the impact on accessibility (WACG and the likes). How would screenreaders handle these techniques?
The DOM is a live object while a string can be sliced and compiled in a function.<p>If you run a template once, either to generate a form or a simple list, the DOM is faster than innerHTML.<p>But if you need to repeat a template(loop), use partials or recurse, interpreted DOM manipulations will become a degree of magnitude slower than a compiled function concatenating strings.<p>Quickly slow enough to loose the snappy effect of client templating.
When I do this, I do it with Kris Zyp's put selector [1]. Creates new elements, modifies existing ones. It's the only DOM manipulation API I like besides jQuery.<p>[1] <a href="https://github.com/kriszyp/put-selector" rel="nofollow">https://github.com/kriszyp/put-selector</a><p>That said, I don't do this very often because the designers I work with prefer templated markup.
This reminds me of HAML. I've never really seen the benefit of adding a layer that doesn't really add much onto something that is well-known and thus easily maintainable.<p>Performance benefits seem mostly irrelevant, as pointed out by others.
It's worth mentioning that CoffeeKup lets you write HTML templates in CoffeeScript: <a href="http://coffeekup.org/" rel="nofollow">http://coffeekup.org/</a>