When to use JavaScript template engines?

Question

Here is an example of JavaScript template from Ben Nadel's demo single page long-lived AJAX application taken from: [source]

<script id="contact-list-item-template" type="application/template">

    <li class="contact clear-fix">

            <div class="summary">
                    <a class="name">${name}</a>
            </div>

            <div class="actions">
                    <a href="javascript:void( 0 )" class="more">more</a> &nbsp;|&nbsp;
                    <a href="#/contacts/edit/${id}" class="edit">edit</a> &nbsp;|&nbsp;
                    <a href="#/contacts/delete/${id}" class="delete">delete</a>
            </div>

            <dl class="details clear-fix">
                    <dt>
                            name:
                    </dt>
                    <dd>
                            ${name}
                    </dd>
                    <dt>
                            phone:
                    </dt>
                    <dd>
                            ${phone}
                    </dd>
                    <dt>
                            email:
                    </dt>
                    <dd>
                            ${email}
                    </dd>
            </dl>

    </li>

I want to ask what is the purpose of using a JavaScript template engines like that? Is it for save of the bandwidth? Is it just a matter of Separation of concerns? Will it help in fighting the browser memory leaks problems?

When should I use template engine and when it is easier to go with raw HTML AJAX responses?

Related discussion:

JQuery templating engines

Nb

I would like to know this too: when do we use client side templating? – Amatory

@Jr: Please refer to my answer. – Durr

Answer 1

Templating is a good solution in a few scenarios:

• Loading all data from the server especially in rich list displays
• Adding or updating new items in lists
• Anywhere you need to add new complex content to the page
• Anything that requires client side HTML rendering

Source : http://www.west-wind.com/Weblog/posts/509108.aspx

Durr

"Anything that requires client side HTML rendering". Doesn't (virtually) all HTML require rendering? Or do you mean when javascript is used to dynamically render stuff? – Martinsen

Answer 2

A template engine enables us to use static template files in our application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

However, We have pros and cons

Pros:

• Encourages good code organization (data generation is separate from presentation code).
• Output generation is more expressive (template syntax doesn't require a sea of string concatenation)
• Better productivity (common problems such as output encoding, iterating, conditionals, etc. have been handled).
• Generally requires less code overall (jade in particular has a very terse syntax)

Cons:

• Some performance overhead i.e. you can dynamically generate HTML thats faster then a templating engine.
• Yet another thing to learn

Undermost