where's the templating

2012-01-09

A good friend has said to me again and again over the years. “I don’t see why I can’t just serve up an entire web application right from the database using SQL.” Granted not everyone loves T-SQL as much as he does.

We’ve all been been pushing more and more of the development process into the browser. I’ve talked about this in terms of interactivity and putting the end user experience in the hands of front-end developers. Lately it strikes me that at bottom what we are doing is pushing the templating process into the client (and by templating I mean merging dynamic data with HTML markup).

The more projects I do this way the more I realize that there doesn’t currently seem to be any standard or even really good way of doing client side templating. Recently I was doing a quick and dirty project that served up an html web page from inside of the CouchDB. Specifically I was doing this on the Cloudant hosted service, essentially giving my client a free place to run an application. I wound up using icanhazjs with a template embedded in a script tag like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="_mcePaste"><script id="loans" type="text/html"></div>
<div id="_mcePaste"><table id="template" bgcolor="gray" class="couch-grid"></div>
<div id="_mcePaste"><tbody></div>
<div id="_mcePaste">{{#rows}}</div>
<div id="_mcePaste"><tr  bgcolor="white" class="data-row"></div>
<div id="_mcePaste"><td>{{state}}</td></div>
<div id="_mcePaste"><td>{{college}}</td></div>
<div id="_mcePaste">.</div>
<div id="_mcePaste">.</div>
<div id="_mcePaste"> <span></span> {{/rows}}</div>
<div id="_mcePaste"></tbody></div>
<div id="_mcePaste"></table></div>
<div id="_mcePaste"></script></div>

Then using the document.ready function to retrieve the data and merge the template.

$(document).ready(function(){  

var $db = $.couch.db("loans_private");  
var res = $db.view("app/by_state",{ success: function(data) {  
var rows = [];  
$.each(data.rows, function(i,o) {rows.push(o.value)} );  
var html = ich.loans( {"rows": rows});  
$('.container').html(html);  
}, descending:true});  
});

This all seems rather ass-backwards to me, especially having to wrap the template markup in a script tag. One can put the templates into external files, but either you wind up a big template for every html page, or you wind up with many small templates referenced from inside your HTMl page. javascript mvc works like this too, as does jquery templates which is no longer actively being developed. It seems to me that this breaks with the notion of the document which is still a guiding metaphor for the web. pure gets around this by working with existing markup and using jquery like DOM selectors to do the templating. It strikes me that there will be problems with naming conventions in the markup as designers and front end developers my have different ideas on how to use ids and classes. Plus we reproduce the Babel that we had on the server side with dozens or even hundreds of templating languages with huge or minor differences among them.

When I finally had a chance to look over the HTML 5 spec, I was keen to see what the authoritative solution would be. While I found many very good things in the spec: local storage, cross-domain messaging, “background threads”; I was very surprised to see no simple and universal way to handle templating. Did anyone else have the same experience? I for one would like to see a uniform templating language that worked naturally in the browser as soon as possible.