CODEWITHSUNDEEP
javascripthtmltemplatesmemory-leaksseparation-of-concerns
Nikita Fedyashev
Nikita Fedyashev

Reputation: 19003

When to use JavaScript template engines?

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

Upvotes: 21

Views: 9691

Answers (2)

Muhammad Usama Rabani
Muhammad Usama Rabani

Reputation: 776

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

Upvotes: 0

Tarik
Tarik

Reputation: 81721

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

Upvotes: 41

Related Questions