Yesterday, jQuery announced the official adoption of the Microsoft-proposed templating library into their core set of supported and endorsed plugins. I've looked at the proposed template plugin in the past; however, now that it is officially endorsed by jQuery, I figured it was time to dig a little deeper and see what I can learn from it. And, perhaps to see what kind of goodness I might be able to bring over into my own jQuery Template Markup Language (JTML) plugin.
I haven't yet reviewed the entire set of features provided by the jQuery Templates plugin; but, even at a cursory glance, it is clearly a very robust and well thought out library. With a good mix of caching and just-in-time compiling, the jQuery Templates plugin provides a good deal of flexibility to suite a wide range of needs.
That said, I'm curios to see a little side-by-side comparison as to how the two templating libraries work. In the following demo, I have borrowed an example from Rey Bango's blog and augmented it with a JTML portion.
As you can see above, we have a clients collection with three clients, each of which is defined by an id, name, age, and set of phone numbers. This client list is then rendered as HTML using the jQuery Templates plugin followed by the jQuery Template Markup Langauge (JTML) plugin. When we run the above code, we get the following output:
Clearly, both templating plugins are capable of producing the same output (at least in this example); however, the underlying markup is quite different. The jQuery Templates plugin allows for very terse markup and provides a number of defaulted values. JTML, on the other hand, is notably more verbose and provides no defaulting whatsoever (well, technically it does provide defaults, but not in any documented way).
jQuery Templates also makes some assumptions about the kind of data being passed-in and about how that data is going to be treated. That's because jQuery Templates is very much optimized for implicit action. JTML, on the other hand, makes no assumptions about the data being passed-in and requires explicit actions to be taken on all data points; JTML's initial concern is only with setting up a context for execution, but takes no steps towards making any particular actions happen.
NOTE: As an aside, neither of these demos actually needs two tempaltes; both jQuery Templates and JTML are both capable of performing deep nesting within a single template.
I am sure many people will look at the JTML and shutter at its tag-based implementation; however, coming from a ColdFusion background, this style of templating feels much more natural than a mixture of scripts and tags. I wouldn't say that one style is better than the other - this is simply what I am used to after 10 years of CFML usage.
Want to use code from this post? Check out the license.