Templates or similar for JavaScript programs in the browser

Question

I've done a lot of server-side HTML programming and used a number of different template languages for producing (X)HTML. This part is very clear to me.

But what I'm wondering a bit about is how do people use this in client-side JavaScript programs? I mean, obviously there can be template languages written for JavaScript that work inside the browser - but is that how people normally do it? Or do people just manipulate the DOM directly? Or are there some nice helper libraries most people use?

As an example - let's say I want a JavaScript application that fetches a list of contact cards from the remote server, returned as a JSON object. Then I want to show this contact cards on the browser side using certain predefined HTML markup, to which I fill in the required fields. How is this normally done?

Answer 1

You're right. There are template libraries for JavaScript. If it's simple enough, the HTML can just be created as a string and added to the DOM, at which point the browser will display it.

Here's John Resig's micro templating library: http://ejohn.org/blog/javascript-micro-templating/

Answer 2

There are a variety of ways people normally do this:

• Storing the html in a file fetched from the server when you do your ajax call and just inserting it into the DOM
• Getting the dynamic bits of content you want and then assembling all the HTML back on the client side and inserting it into the DOM (this is probably the most common and the one I'd recommend the least)
  • Using a javascript templating language (I'm fairly partial to jquery's tempest plugin)

There are other solutions too, such as hiding the content to be teplated in a textarea or in html script tags, but I'm not a fan of them as they tend to produce incorrect/invalid markup.

Answer 3

The task you describe could be accomplished by a templating system or by manual DOM manipulation, just as doing it on the server side could be accomplished with a templating system or by a series of string concatenations. Personally, if I have to ask this question, I generally go with a templating system. (In fact, if you consider the printf-style formatting available in most languages to be a template system, I hardly ever manipulate strings without using templates.)

A couple of JavaScript template languages I am aware of include:

• jugl: http://dev.libjs.net/jugl/
• ExtJS Templates: http://www.extjs.com/deploy/dev/docs/?class=Ext.Template
• Closure templates: http://code.google.com/closure/templates/

Closure templates are interesting in that there is a server-side renderer for them available as well, so you can share templates between the server-side code and the JavaScript. jugl is pretty similar to TAL so you may be able to do this with jugl as well.

Answer 4

I suggest ExtJS XTemplates. Simple, powerful, self-contained, nice. -j

Answer 5

I went over the solutions proposed here, and was not entirely satisfied. What I learned was:

• Most people just piece together strings and assign them to elem.innerHTML. This is too ugly for me.
• Some people build DOM with Builder objects, so in fact they are writing HTML with JavaScript for the dynamic content. This is what I'd use if the content was 100% dynamic, but in this case I'd rather have templates that are actually html that I can customize.
• Some people use actual templating languages on the client-side JavaScript. That is, there is all sorts of if-constructs and while-constructs and string replacements and all that. This would be, kind-of, what I was looking for when writing the question. Just that, it seems wholly inefficient to parse a text markup client-side when you've got the whole DOM engine at your feet.

But, what I found out to really want myself is for a programmatic way to piece together HTML from DOM snippets, and filling in the required data in the middle. I found two solutions for this:

• PURE: http://beebole.com/pure/
• Easy Javascript Templates using cloneNode: http://amitkumar.com/2009/08/10/easy-javascript-templates-using-clonenode/

Of these, I picked PURE for my needs.

Thank you for all the answers.

Answer 6

If you are using Script# you may want to consider SharpTemplate, a strongly typed, super efficient HTML templating engine.