Welding together website content without micro-templates; the Node.js weld module

Date: Sat Apr 26 2014 JSDOM »»»» DOM »»»» Server side DOM »»»» NodeJitSu
What's a micro-template?  If you're like me you've used micro-templates without knowing what they were properly called.  I even developed a web page templating system for TCL back in 1997 that had an ingenious form of micro-templating, better than what we're stuck with today, and I didn't know that "micro-template" is the proper name for this sort of thing:


    {%for d.length}
  • {%end for}

While this is flexible and all of the web publishing or web app development systems have templating support like this, it's really sub-optimal.  It's not standards compliant which means that real HTML editors don't deal with it properly, unless they've been coded to understand the extended syntax.

In browser applications, front-end-engineers have had great power in using the DOM to manipulate the web page after it's loaded into the browser.  For example with jQuery you can do something like


And it blamo's the #myId element.  Wouldn't it be cool to have this on the server side as well?


In any case that's what the nodejitsu guys want us to believe, and before them there was Dav Glass (a YUI engineer who works for Yahoo) who gave a very excited presentation about how game changing it would be to have a DOM on server side and use a library like YUI on the server side DOM.

The nodejitsu guys have developed a Node module, weld, that runs on JSDOM, that does the following server side DOM processing.

With data like this:

var data = [
name: 'Paulo',
title: 'code exploder'
name: 'Elijah',
title: 'code pimp'

And an invocation like this:

weld('.contact', data, { 
bind: {
'name': '.firstAndLast',
'title': '.title'

Takes this:

  • "contact"> "name">Hello my name is "firstAndLast">My Name</span>span>

    "title">Leet Developer

And produces this:

  • 'contact'> 'name'>Hello my name is 'firstAndLast'>hij1nx</span>span>

    'title'>code slayer

  • 'contact'> 'name'>Hello my name is 'firstAndLast'>tmpvar</span>span>

    'title'>code pimp