Now there is a new option coming out along with the new Microsoft .NET Framework release.
- Version 4.0 of the Microsoft Ajax Library (aka ASP.NET AJAX) includes a new client side template system using the DataView control which is actually quite good. Frankly, it feels like it was inspired by taking the best of jTemplates and PURE but it is enhanced for ASP.NET developers.
I’ve been playing around with this new system and have been pleasantly surprised. Templates are relatively easy to construct, implementation is straight forward, and it works quite well. There are some pros, and some cons when compared to the other template systems.
Of course there are actually many other template plugins for jQuery, however PURE and jTemplates have the best documentation, best syntax and the most recent updates. Almost all of the other template systems have been abandoned or deprecated by their creators.
|jTemplates||PURE||MS Ajax DataView|
|External Templates||Yes (as js files)||No (but can be done)||No (but can be done)|
|Valid XHTML||Yes (hacky)||Yes||Yes|
The Microsoft Ajax Library has some nifty features for power users but that is something that I will save for another article. Suffice it to say that any template you care to make can be done in any of these systems.
PURE, jTemplates and the DataView control can only understand and parse JSON data.
When I say “in-page templates” I am talking about markup in the HTML document that gets evaluated as the template. It may be far more convenient for you to build your template as part of the page that will be using it (or it may not). All of these systems support in-page templates, but they have different ways of accomplishing this technique.
- jTemplates grabs the template by using the jQuery .html() method to read the contents of a node. Because jTemplates templates are usually not valid markup the common practice is to store them in a
<script type="text/html">tag, which is ignored by browsers. This is actually a fairly dirty work-around when you think about it.
- PURE on the other hand actually uses markup conventions to build templates, so the template itself is simply DOM element on the page. When PURE loads it reads the DOM for the target you specified and attempts to insert data according to their conventions.
- The Microsoft Ajax DataView control also uses templates that do validate as XHTML. So DataView templates are just regular in-page elements that are hidden with CSS. DataView templates can be a little uglier and a bit more intimidating to look at, but they are valid markup.
Of course since the template for PURE and the DataView control are part of the document this also means that crawlers and bad screen readers will see the template as a part of the document.
PURE and the DataView control on the other hand must be passed a DOM reference to the template element in the document, so if you want to keep your template file external you will need to use a workaround solution, namely AJAX. This workaround will always be somewhat hacky but does work.
I’ve already posted an example of this in the external templates for the DataView control article.
All of these template engines will read and produce valid markup. As I said, jTemplates has to keep it’s templates inside a script tag, but this is a valid work around. PURE and DataView templates use standard XML structure and are valid in XHTML.
Template engines are by definition are slower than direct rendering. Both jTemplates and DataView hold true to this, PURE seems to be a bit faster, but not by much. However they are more then snappy enough for the real world. It is just a fact of life that you have to sacrifice some amount of performance to gain greatly enhanced maintainability.
Personally I find the trade off to almost always be worth it. If you want single-digit millisecond page rendering you shouldn’t be using external data on a web page anyway.
MicrosoftAjaxTemplates.js is notably larger than jquery-templates.js or pure.js, five times larger actually. I can understand this because the DataView control does a lot more work, but this is something that you may want to factor into a decision on a high traffic web site.
Both the DataView control and jTemplates are dependent on their parent libraries, MicrosoftAjax and jQuery, respectively. PURE also requires a base library, but it only requires a CSS selector engine so it supports several libraries, including dojo, DOMAssistant, jQuery, Mootools, prototype.js, Sizzle and Sly.
Another point to factor in is the fact that MicrosoftAjax can be served from Microsoft’s CDN. So you don’t have to worry about the bandwidth costs for these libraries. jQuery is also available from Microsoft’s or Google’s CDN, however the PURE and jTemplates files you will have to host yourself.
Updated: Mar 26th, 2010
Thanks for your nice words about PURE.
Just to mention, that the markup conventions you refers to is an option.
There’s a declarative mode that allows you to totally separate the markup(HTML) and the data structure(JSON) using what we call directive.
As described at: http://beebole.com/pure/documentation/rendering-with-directives
Hello, in your article you write that external templates for PURE is not available, but in can be done. Could you show us how to implement external templates? I can’t get it working because DOM elements added live aren’t supported by PURE (or it seems so…).