jQuery Templating in the wild

By On September 30, 2010 · 16 Comments

It seems like longer, but it’s only been 6 months since we announced that Microsoft was going to start contributing to jQuery instead of developing our own JavaScript library.  Today, Scott Guthrie announced that we’ve had our code checked in to the main branch of the jQuery project – you can read more about that on his blog and also check out the Web Camps TV interview I recorded with Stephen Walther on the subject.  John Resig has also confirmed that jQuery Templates will ship as an official plugin in v1.4.3 and then in the core library in v1.5.  (Data-linking will also be shipped the same way).

Check out the Web Camps TV interview with myself and Stephen Walther where we demo some of the new features:

Get Microsoft Silverlight

Holy miracle, Batman!? Microsoft are contributing to open source!

alt

Yes that’s right, Microsoft are contributing to jQuery, which is an open source project.  That means we have real life developers working on shipping code – you can see what they’ve been up to on github.  Boris Moore the lead dev on our contributions has been writing up his thoughts on working at Microsoft on an open source project which make for some interesting reading. He also provides some details on using the templating engine and some of the advanced features that all templating ninjas should know.

Why use jQuery Templates?

There are basically two reasons to use jQuery Templates:

  1. Performance
  2. Maintainability of your code

On Performance. This benefit comes in two flavors, user experience and bandwidth.

First, let’s discuss user experience.  Modern websites are behaving more and more like desktop applications, with data that is constantly being refreshed with no user interaction.  Think about Twitter or Facebook and how they are regularly pulling data from the server to provide a refreshed look automatically.  jQuery Templates make it simple to declare the shape of your HTML and then insert fresh data to them, appending the resultant HTML to the DOM where appropriate.

Secondly, there’s bandwidth to think about.  Chatty applications that send/receive excessive amounts of data are bad for your bandwidth bills and bad for latency.  Instead of refreshing the entire page when just one portion needs updating, we can keep the noise down to a minimum with HTTP calls between JavaScript/jQuery and the server.    jQuery Templating allows you to take that data and then do something useful with it in an easy way. With this approach you are going to be making fewer calls and moving less data to the client.  There’s also the caching to think about as well – templates are cached on the client which will further reduce the data you are moving about.

On Maintainability of your code

Given that you’ve bought into rendering your data on the client-side because of the perf benefits, let’s also assume that your sanity is important too – this is another reason to use jQuery Templates.  It is of course possible do the job of jQuery Templates manually, using string concatenation to build up complex strings of HTML and injecting your data items as you go.  Rinse and repeat for each row of data you have and then have jQuery append it to your DOM.  However, there are more rewarding things in life than doing this, and if you’ve ever tried to match up HTML elements and tried to troubleshoot a complicated nugget of HTML you’ll know it’s pretty painful.  This is where templating helps by allowing you to declare a template inline in a code block so you can see the structure of the template at first glance (see examples below).  It’s also worth calling out that templates make it easy to separate the logic on the client into app, structure and style, i.e. JavaScript, HTML and CSS.  For example, in my applications I like to have all my templates in a JS file called templates which I reference in my app when needed.

Pop quiz: which is easier to understand? This template?

<script id="movieTmpl" type="text/x-jquery-tmpl">    
    <div>        
        <div>
            <img src="${BoxArt.LargeUrl}" />
        </div>        
        <strong>${Name}</strong>        
        <p>{{html Synopsis}}</p>        
        <input type="button" title="Buy tickets for '${Name}'" value="Add to cart…" class="buyButton"/>        
        <br/>    
    </div>
</script>

or this concatenated string?

<script id="movieTmpl" type="text/javascript">    
    var myString = "<div><div><img src=";
    myString += BoxArt.LargeUrl;
    myString += "/></div><strong>";
    myString += Name;
    myString += "</strong><p>";
    myString += Synopsis;
    myString += "</p><input type=\"button\" title=\"Buy tickets for\"";
    myString += Name;
    myString += " value=\"Add to cart…\" class=\"buyButton\"/>;
    myString += "<br/></div>";
</script>

Hopefully the difference is clear Winking smile

Who’s using jQuery Templates?

imageThese bits are pretty fresh so there are only a few examples of websites using them.  One early adopter is hiFi, a website publishing engine.  They take performance seriously which is why they chose to use jQuery Templating engine to render their comments to the client.  The team at hiFi have also written up a really nice post on the subject of jQuery Templates.

To get started with templates I recommend checking out the jQuery API documentation and also the samples that Boris has created on github.com.  Rey Bango also has some great tutorials on the different ways you can declare templates too.

 
If you enjoyed this article, please consider sharing it!
Reddit Facebook Twitter Delicious

  • Pingback: jQuery: » New Official jQuery Plugins Provide Templating, Data Linking and Globalization

  • http://weblogs.asp.net/bleroy Bertrand Le Roy

    For me, the main point of client templates is that they enable you to have the actual data on the client, which opens up lots of scenarios. Render several representations of the same data? Check. Allow users to change the data and have the UI reflect the changes without round-trip to the server? Check. And so on and so forth. Note that in the second scenario, you are not just saving bandwidth but eliminating round-trips altogether.

  • http://www.vilepickle.com David “Vilepickle”

    Looks like a great feature, and much more maintainable. It’s nice to see MS contributing as well.

  • Pingback: jQuery Templates, Data Link, and Globalization Accepted as Official jQuery Plugins - ScottGu's Blog

  • http://www.jamessenior.com James

    That’s a good point Bertrand, I kind of meant the same thing with my statement “Rinse, repeat for each data item” – it’s the repeatability which is so powerful.

  • Pingback: New Official jQuery Plugins Provide Templating, Data Linking and Globalization - Free Web Design Phoenix

  • http://registertrademark.wordpress.com/ Trademark registration

    Really loving the CSS for this blog…nicely done. I’ll have to consider BlogEngine for some new blogs. WP is getting stale.

  • http://www.gethifi.com Joel Sutherland

    James,

    Thanks for the shoutout on HiFi and our use of client-side templating. We looked long and hard for a good jQuery templating solution before deciding on a combination of Resigs and something we rolled ourselves, including some a mini data-binding framework.

    The experience so far has been incredible. We’re able to get great performance while keeping 95% of our markup on one layer. The development pain of dealing with markup existing in more than one place is not something we want to go through again.

    To say that we’re excited about this jQuery/Microsoft is a huge understatement. If it existed six months ago it would have saved us tons of time. Now, we anticipate migrating to it at some point in the future.

    If you or anyone else reading this post has any questions about our experience, feel free to reach out — we’re more than happy to share!

  • Marcus Tucker

    You say “For example, in my applications I like to have all my templates in a JS file called templates which I reference in my app when needed.” but the example shown is a template embedded as a SCRIPT block in an HTML document, not a JS file. So what does your “JS file called templates” look like? Or did you actually mean that it’s a separate HTML file containing multiple SCRIPT blocks (as in your example), each containing a template?

  • Pingback: Templates, Data Link, e Globalization Aceitos como Plugins Oficiais da jQuery - ScottGu's Blog em Português

  • http://www.guideofroulette125.info Guide of Roulette 125

    The clarity in your post is simply spectacular and i can assume you are an expert on this field. Well with your permission allow me to grab your rss feed to keep up to date with incoming post. Thanks a million and please keep up the fabulous work.

  • http://ozymandias.dk Vagn Johansen

    In your code example with the string concatenation you forgot the html quoting! This just another argument for using templates.

    Only the ‘Synopsis’ variable does not need quoting.

  • http://www.performance-education.com/ The Middle Ages Europe

    Hah, I only just decided to start using tmpl yesterday – it must be fate

  • http://directloansservicing.us direct loans servicing

    In the example there, the function is part of the object passed in to the template processor. It seems like the most common scenario would be that the object is json that came in off an ajax request, but of course there’s a different solution for that…

    Correct – for plain incoming JSON you won’t have that advantage – this will mostly be an advantage for when you have objects (possibly instantiated from some base “class”?) floating around that you want to mush into a template.

  • http://www.gethifi.com Joel Sutherland

    Marcus,

    We have a number of files on the server, each containing a single template. A trivial example would be:

    {{title}}

    We then have a server-site script that compiles these into a single JS file that contains each template in a single object. So if the example above was in /templates/page/title, templates.page.title would hold the template.

    We don’t actually use the script blocks as there is no sense sending these back and forth on each page reload when we can client-side cache them in a js include.

  • Pingback: jQuery模板，数据链接及国际化等被吸纳成官方jQuery插件