Björn
Björn

Reputation: 13207

Building html markup with pure jquery VS underscore template method

i am weighing the pros and cons of building a certain markup via two methods. Lets say I want to create this simple html markup with javascript:

<li><img data-id="a" src="/src"></li>
<li><img data-id="b" src="/src"></li>
<li><img data-id="c" src="/src"></li>
<li><img data-id="d" src="/src"></li>
<li><img data-id="e" src="/src"></li>

Would you rather be doing it with pure jQuery like so:

$.each(obj, function(key, value) {
    $("<li/>")
    .attr({"data-id":key})
    .append(
        $("<img/>", {
            src: value.pic
        })
    ).addClass("selected")
    .appendTo("document");
})

or would you prefer making a template for example with underscore.js template method like so:

var listObj = '<% $.each(obj, \
    function(key, value) { %> \
        <li class="selected" data-id= <%= key %> ><img src= <%= value.pic %> ></li> \
    <% }); %>';

$("document")append( _.template(listObj, {obj: obj}) );

Also any idea what is faster in cases with more markup and code? (Also notice the missing syntax highlighting in the template string listObj, that bothers me a little, because also my code editor textmate doesnt highlight the syntax because it thinks its a string)

Upvotes: 2

Views: 1579

Answers (2)

Sergey
Sergey

Reputation: 12417

I would strongly argue in favor of using a template.

In terms of performance - if you consider the code samples provided, I would say the template approach may easily turn out to be faster than multiple small DOM manupulations in a loop. Assigning a large block of text at once, as the template approach does, is much more efficient - see jquery docs.

Also, some templating engines are able to compile a template into plain JavaScript, so there is no parsing overhead (jqote can do this, not sure about underscore)

You can code a template in a separate file - which solves your problem with syntax highlighting and is totally justified once your templates become more complex than a single listbox. It may also decrease the amount of JS you need to load for each page.

I also feel that the JQuery approach is much less maintainable for anything but trivial pages - if some changes in page layout are required it may be very difficult to figure out how the html is generated.

Upvotes: 3

tskuzzy
tskuzzy

Reputation: 36476

I would think that jQuery would be faster than a templating script if everything is properly optimized. jQuery doesn't have that much overhead for making/appending DOM objects. However with a template, the template must be completely parsed.

However templates might be quicker to code and more readable than having lot's of $.each() calls and .append()s. That's the whole point of templates in the first place. The flip side is that not many people are familiar with underscore.js whereas there are thousands developers using jQuery. In that sense, jQuery might be more accessible.

Upvotes: 1

Related Questions