Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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!


Plates has separated markup and function very well, IMHO https://github.com/flatiron/plates


>I'm curious as to why numerous JS frameworks create DOM structure via string concatenation,

Probably because of this: http://jsperf.com/string-concatenation-vs-the-dom


Nice benchmark, but it misses the point.

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);
  });
think of this:

  <select class="s" data-binding="{@source: aElements}">
    <option data-binding="{@template-for: aElements}{value: href}{@text: aText}">
  </select>
Consider "aElements" to be the collection of anchors, and "aText" to be an attribute of each anchors. These would be members in a model.

Writing markup to represent the presentation of data, and code to represent the logic of business is far superior to writing code that does both!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: