Category Archives: opml

Javascript templating with SXOOP.template

Some random thoughts…

  1. Constructing rich event-driven User Interfaces using Javascript’s DOM is only fun up to a point.
  2. Tim Bray is on to something when he talks about Ajax’s real upside.
  3. You can only get so far by glueing strings together.
  4. DOM manipulation is unwieldy.

You can work around this using Javascript Templates.

My own preference is to use a template system that lets you insert snippets of the host language code. [for the record I’m fully aware that this isn’t considered “best practice”] .

So this post is a roundabout way of launching SXOOP.template.
SXOOP.template is a tiny javascript templating system that lets you mix snippets of javascript code and html.

Example #1 (Introduction)

Example #2 (Poor Man’s Blog)

Writing TinyTemplate in Perl was a breeze and the codebase is tiny. I used a similar approach to writing SXOOP.template which resulted in a tiny codebase for the Javascript version too.

What need for Javascript Templating you ask ?

Well, JSON gives Javascript Templating something to do. More and more webservices are supporting JSON.
What’s more; if you combine SXOOP.template with this brilliant XML javascript library, then suddenly javascript templating becomes 1000 times more useful (most existing WebServices use XML). You can mix and combine XML data sources (like the ubiquitous RSS and less well known formats like OPML) and use them to construct Human-readable web-pages without resorting to XSLT.

[sidenote]I’m going to go out on a limb here and say that if you want to convert XML to HTML, a combination of javascript templating and the aforementioned XML library offers a compelling alternative to XSLT. I’m sure if you use XSLT 40 hours a week, it eventually becomes intuitive but most people don’t and for a technology which only gets used intermittently it has a steep learning curve which I somehow keep running into every time I need to use it. [/sidenote]

A little background on SXOOP.template…

I started out by writing my own template system using DOM manipulation and cloneNode() . The code got HUGE quickly (500+ lines) and because I soon discovered that cloneNode is fundamentally broken in IE (It’s kind of selective about which nodes it clones), I eventually gave up that approach.
Then I discovered TrimPath’s template system which is pretty nifty (and has a small codebase too: less than 400 lines of code !). I used TrimPath for a while but while I was working on the Poor-Man’s Blog example, I ran into a problem – TrimPath doesn’t like XML namespaces. I contacted the TrimPath guys but heard nothing back.
A couple of weeks later I wrote TinyTemplate for perl and a few days after (buoyed by how easy TinyTemplate was – and small too!) I began to wonder if writing a javascript template system would be as simple and could be done using as little code. I ended up writing SXOOP.template in a single evening. I’m quite pleased with the result and it’s size (less than 75 lines of code).

You can view SXOOP.template’s source here.

I’ve tested this on Internet Explorer, Safari and Firefox. YMMV.