If you’ve done JavaScript development for any length of time, you’ve run into code similar to the following sample. In it, a collection of data about a comic book series is looped through to build out new content to be appended to the document.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
</head>
<body>
<div id=”main”> </div>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script src=”//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js”>
</script>
<script>
$(function(){
var comics = [
{
imgSrc : “cover1.jpg”,
title : “Captain Templates”,
year : “2010”,
number : “1”
},
{
imgSrc : “cover2.jpg”,
title : “Captain Templates”,
year : “2011”,
number : “2”
},
{
imgSrc : “cover3.jpg”,
title : “Captain Templates”,
year : “2012”,
number : “3”
}
]
for( var i=0; I < comics.length; i++ ){
$( “#main” ).append( ‘<div class=”comic”><img src=’
+ comics[i].imgSrc
+ ‘/><div class=”details”><div class=”title”><h3>’
+ comics[i].title + ‘</h3></div><div class=”year”>’
+ comics[i].year + ‘</div><div class=”number”>’
+ comics[i].number + ‘</div></div></div>’
);
}
}
);
</script>
</body>
</html>
Code snippet is from no-templates.txt
The preceding code takes the comics array, iterates through its members, and builds blocks of HTML to add to the document. This is done by simply concatenating strings of HTML with data references. Although this is a common solution, jQuery Templates improve on the pattern in some important ways.
1. Separation of Content and Behavior
jQuery Templates allow for a further separation of content and behavior.
One of the central tenets of modern web development is the separation of code that describes the structure and content of the page (the HTML) from the code that defines the style (CSS) and code that manages the behavior (JavaScript). Historically, this separation has most often been in the context of moving from style-based HTML elements like font and patterns like table-based layouts to pure CSS layouts. Secondarily, it’s also been seen as a movement away from using inline CSS and JavaScript in HTML files. Though these are positive steps, the trend toward more dynamic sites and applications has introduced a new battlefront. As more and more developers rely on JavaScript to drive sites, more and more style, content, and structure are starting to work their way into JavaScript files.
This is acceptable when you’re working on a small codebase, but once your application gets into the thousands or tens of thousands of lines, and more and more developers are expected to be able to manage them, this can quickly cause issues as the question “Where is this markup coming from?” becomes more frequent.
As you’ll see, the jQuery Template plugin allows for a complete break between structure and program logic. This is a key to writing maintainable code.
2. Code Reuse
With the capability to define templates once and to apply them multiple times, including mixing and matching with other templates, you have many more opportunities to create reusable markup patterns with a template engine.
3. Aesthetics and Clarity
A good template system is simply easier to read. Instead of focusing on balancing quotation marks, plus signs, and data references, the focus with jQuery Templates is once again on creating clean, consistent markup.
4. The Past, Present, and Future of jQuery Templates
Before you get into the nuts and bolts, a little background is in order.
jQuery Templates started out in March 2010, when John Resig posted a prototype. Starting in May 2010, Boris Moore started working on a fork of the plugin. His fork was eventually merged into the main branch and branded a jQuery Official Plugin. Work continued on it, eventually reaching beta stage.
As of April 2011, activity on the jQuery Template plugin stopped, leaving it permanently in that beta state. In the blog post announcing the change (http://blog.jquery.com/2 011/04/16/official-plugins-a-change-in-the-roadmap/), it was noted that development of a new Template plugin was being initiated under the aegis of the jQuery UI project.
4.1. The Future
The driving force behind the original jQuery Template plugin, Boris Moore, has continued working on the problem of templates along with the jQuery UI team. In October 2011, Moore wrote a blog post (http://www.borismoore.eom/2 011/10/jquery-templates-and-jsviews-road:map.html), updating the community on the new plugin’s progress. In it, he stated the solution will eventually be in two parts:
- JsRender templates are described as “Next-generation jQuery Templates, optimized for high-performance pure string-based rendering, without DOM or jQuery dependency.”
- JsViews are described as “Interactive data-driven views, built on top of JsRender templates.”
This new solution promises speed improvements, greater flexibility, and a better separation of presentation and behavior.
4.2. The Present
Although we have confidence in this newer effort, having a sane templating system is vital right now to modern web development. It’s therefore sensible to leverage the existing plugin until the newer effort is mature enough to supplant it.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc