I'm curious as to why numerous JS frameworks create DOM structure via string concatenation, or by putting markup in script tags. That's an automatic fail, in my books. No matter how interesting or useful a JS framework looks, I just can't get past the need to mix markup and code.
The script-markup mixture used by DoubleDollar or Backbone is really just a necessary quirk to achieve templating functionality. I haven't seen it done better honestly.
Try it, you're refusal to "get past the need to mix markup and code" is restricting you from some pretty helpful functionality if you build JS heavy web apps!
Thanks. I do build very JS heavy single-page web apps. Where I work we separate markup from code completely, and use MVVM to glue the things together. I've given an example above in reply to another comment.
People who write business code and logic often have little to no concern about tables vs divs, CSS quirks, and markup structure in general. Conversely, our UX people have no concerns whether we use MongoDB or SQL Server to serve records. They shouldn't have to. Our concerns are separated by using proper design and architecture, and we can work on things together while focusing on implementing our particular skillsets.
The script/markup mixture of DD and Backbone is not necessary at all, and it's a quirk because these frameworks (and others) make it one!
Yes, it's faster to create DOM elements in string form rather than one-by-one, attribute-by-attribute.
However, creating DOM structure in code sucks. It's far better (and faster) to create markup and deal with templates by compiling HTML files into strings in JavaScript files and then turn those strings into DOM structure when needed.
Once you create DOM fragments from singular, compiled strings, you can perform data binding.
So, instead of this (from your benchmark):
var $dropdown = $('<select class="s">');
$u.find('a').each(function() {
var $a = $(this);
$('<option>').html($a.text()).attr('value', $a.attr('href')).appendTo($dropdown);
});