JQuery Blueprint - a js templating framework in just 30 lines of code. (opens in new tab)

Templating systems are pretty useful and used in quite a few frameworks. Alot of the controls in ASP.NET basically work as templates where you define the markup and bind a list of data to the control the markup (template) is repeated for each piece of data. This is relatively easy on the server side, but on the client side it's a bit more difficult.

If you wanted to create a realtime twitter client, for example, done all on the client you'd need to fetch a collection of new tweets periodically and render them in JavaScript. Without a templating framework, you'd have to loop through the new tweets and construct the presentation using something like "innerHTML" or "document.createElement()". A templating system allows you to construct the layout of a single tweet in standard HTML, mix in a bit of the template's JS syntax, and then essentially "bind" the list of new tweets to the template and the markup is repeated for each new tweet.

Given that example, there are plenty of uses that follow the idea of replicating content over and over using the same template: Email clients, chat clients, news readers, blogs, photo galleries, classified listings, etc, etc.

I think the value is in having your templates already loaded client side, then being able to render them as your data comes back from the server in JSON or XML.. It lets you keep the server side controller very simple & generic, possibly just enough to handle authNZ and a model query.

For a real world exemple, check out our app http://beebole-apps.com/?demo, the rendering is entirely built client side with a Javascript templating engine (PURE).

PURE had ~50 lines when starting, but then the real life came with its clunky browsers, various libs and functionality needs.