eSpace Blog RSS
28Apr

JavaScript Templates: A major leap on the way of Web2.0

0

An undisputed fact is that JavaScript acts as a
cornerstone to Web 2.0 application development. Web 2.0 applications
extensively rely on JavaScript logic to manipulate DOM elements on the fly. Let’s
consider a typical example.

A JavaScript function is needed to generate some HTML fragment and insert it
into a placeholder that already exists in the document. Let’s say that the
resulting fragment represents some user’s data and that it is required to look
like this:

Now let’s see how this JavaScript function would look like: (I know it’s not
minimal, but it’s a typical example. Let’s say that it will, at least, look
like this)

Yes, I know, it’s long and ugly. However, this is what I used to do in my
early couple of months in JavaScript. Now let’s formulate the problem that led
to this long and ugly code. The problem is that HTML is a descriptive language
while JavaScript is a procedural one. The anomaly appeared when we tried to
‘describe’ our HTML fragment using JavaScript ‘procedure’, i.e. we tried to override
the descriptive nature of HTML using the procedural nature of JavaScript.

Now let’s be a bit positive. The solution simply exists in a relatively new
open source JavaScript library called JavaScript
Templates (or JST), developed by TrimPath. A JavaScript Template is an HTML
template that is yet to be evaluated using some JavaScript variables. This
principle is so close to all server-side templates like jsp, erb, … etc.

Now, the new steps are: i) write the JST that DESCRIBES your data representation,
and  ii) write the JavaScript function
that EVALUATES that template given some JavaScript variables as data
parameters. Let’s apply this to our example.

Performing step (i), our JST will look like that:

We hold the template code inside a hidden textarea with a known id just to
be able to get the template afterwards at runtime. The evaluation sign ‘${}’
means that what’s inside the curly braces is still to be evaluated afterwards
at runtime.

Now comes the magic in step (ii). Our long and ugly JavaScript function will
be replaced with this one:

We simply called a function that processes the JST contained inside the
textarea with id = ‘jst_user_details’, given one data variable named ‘theUser’
with the same value as the parameter ‘user’. And, ta-da!, we have a pure HTML
fragment that describes a certain user’s details.

JST also supports basic functionality of any server-side template language,
like repetition and conditionals. A JST can typically contain the following
snippet:

To sum it up, what JST does is eliminates the problem
we introduced before. It simply separates HTML description from JavaScript
procedures. In my case, it made me at least four times as productive as I used
to be using traditional DOM manipulations. Moreover, your code becomes neater,
more modular, and more organized. Go ahead and give it a try: http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

Post a Comment

eSpace podcast Prodcast

RSS iTunes

Archive

Latest Comments