{
  "$type": "site.standard.document",
  "description": "For the last 3 months I’ve been working on a new web application at work. It’s quite unique in some regards, from the architecture perspective; the biggest difference from other projects that I’ve worked on is that almost entire page is one huge embeddable “widget”. This requires a completely different approach than I usually use:\n\na lot of the code above the model layer is moved to the client side (i.e. JavaScript); this means that controllers and helpers are rather simple, controllers mainly return JSON, and there’s quite a lot of JavaScript to write\nsince a significant part of the system is written in JavaScript, it needs to be unit-tested too\nI have to be very careful not to cause any JS, CSS or DOM id conflicts between the embedding site and the “widget“ (which includes such things as keeping all JS code in a single global namespace, and using jQuery in the “noConflict extreme“ mode through an alias)\n\nAnother thing, which I’d like to write about today, is the way the views were implemented in this project. Since entire GUI is created dynamically by JavaScript, I had basically two options:\n\nrender the views in Rails with ERB and send big chunks of HTML via AJAX to JavaScript;\nor make Rails send only data as JSON, and render the views on the JavaScript side.\n\nFor performance reasons, the second solution is obviously much better. All static content can be cached, and after that we only need to send JSON data, which takes at least an order of magnitude less bandwidth than the rendered HTML. But this meant I needed to find a templating library for JavaScript to replace ERB. I had used the Template class from Prototype before, but that was only useful for one-line templates; I needed something more serious… Besides, I’m using jQuery here.\n\nAnd actually I didn’t want to replace ERB completely. There are some things which shouldn’t be written literally in the template, but which aren’t part of the JSON data - things like constants, global project settings, etc. So I wanted the template files to be hybrid, containing both ERB and JavaScript tags; they would be first preprocessed by ERB (once per release), and JavaScript would fill the rest of the blanks.\n\nSo I fired up Google and started exploring. Here’s what I found:\n\njTemplates\n\n{#foreach $T.records as record}\n  <tr>\n    <td><a href=\"/{$T.record.id}\">{$T.record.name}</a></td>\n    <td>{$T.record.description}</td>\n    {#if $T.record.tags}\n      <td>{$T.record.tags}</td>\n    {#/if}\n  </tr>\n{#/foreach}\n\nThis is the library that I’ve chosen in the end. It’s based on jQuery, syntax looks very clean, and it seems to be actively developed. It has a lot of extra features - for and for-each loops, if/else, includes, and so on; this may not be necessary for one-liners which update a single entry in a list, but it’s extremely important here, where the whole GUI is based on those templates. Also, it has a syntax that’s impossible to confuse with ERB.\n\nI’ve written dozens of templates so far using this library…",
  "path": "/2009/06/15/javascript-template-libraries/",
  "publishedAt": "2009-06-15T19:27:24Z",
  "site": "at://did:plc:oio4hkxaop4ao4wz2pp3f4cr/site.standard.publication/3mn5mackuba26",
  "tags": [
    "JavaScript",
    "Frontend"
  ],
  "textContent": "For the last 3 months I’ve been working on a new web application at work. It’s quite unique in some regards, from the architecture perspective; the biggest difference from other projects that I’ve worked on is that almost entire page is one huge embeddable “widget”. This requires a completely different approach than I usually use:\n\na lot of the code above the model layer is moved to the client side (i.e. JavaScript); this means that controllers and helpers are rather simple, controllers mainly return JSON, and there’s quite a lot of JavaScript to write\nsince a significant part of the system is written in JavaScript, it needs to be unit-tested too\nI have to be very careful not to cause any JS, CSS or DOM id conflicts between the embedding site and the “widget“ (which includes such things as keeping all JS code in a single global namespace, and using jQuery in the “noConflict extreme“ mode through an alias)\n\nAnother thing, which I’d like to write about today, is the way the views were implemented in this project. Since entire GUI is created dynamically by JavaScript, I had basically two options:\n\nrender the views in Rails with ERB and send big chunks of HTML via AJAX to JavaScript;\nor make Rails send only data as JSON, and render the views on the JavaScript side.\n\nFor performance reasons, the second solution is obviously much better. All static content can be cached, and after that we only need to send JSON data, which takes at least an order of magnitude less bandwidth than the rendered HTML. But this meant I needed to find a templating library for JavaScript to replace ERB. I had used the Template class from Prototype before, but that was only useful for one-line templates; I needed something more serious… Besides, I’m using jQuery here.\n\nAnd actually I didn’t want to replace ERB completely. There are some things which shouldn’t be written literally in the template, but which aren’t part of the JSON data - things like constants, global project settings, etc. So I wanted the template files to be hybrid, containing both ERB and JavaScript tags; they would be first preprocessed by ERB (once per release), and JavaScript would fill the rest of the blanks.\n\nSo I fired up Google and started exploring. Here’s what I found:\n\njTemplates\n\n{#foreach $T.records as record}\n  <tr>\n    <td><a href=\"/{$T.record.id}\">{$T.record.name}</a></td>\n    <td>{$T.record.description}</td>\n    {#if $T.record.tags}\n      <td>{$T.record.tags}</td>\n    {#/if}\n  </tr>\n{#/foreach}\n\nThis is the library that I’ve chosen in the end. It’s based on jQuery, syntax looks very clean, and it seems to be actively developed. It has a lot of extra features - for and for-each loops, if/else, includes, and so on; this may not be necessary for one-liners which update a single entry in a list, but it’s extremely important here, where the whole GUI is based on those templates. Also, it has a syntax that’s impossible to confuse with ERB.\n\nI’ve written dozens of templates so far using this library, and I’m really content with it. If you’re using jQuery and you need to create a whole site with JavaScript templates, this one is for you.\n\nJSRepeater\n\n<tr context=\"records\">\n  <td><a href=\"/${id}\">${name}</a></td>\n  <td>${description}</td>\n</tr>\n\nJSRepeater is quite similar to jTemplates; it also uses jQuery, and has a similar syntax. However, it doesn’t have as many control structures as jTemplates, and they’re implemented in a different way. Instead of explicitly writing “foreach“, you add context=“…” attributes to the template HTML. I personally hate adding not existing attributes to HTML elements…\n\nAnother difference is that in jTemplates you can supply the template code in any way (you can just pass it as a string in a parameter to a function call), while JSRepeater expects the template to be already present inside the target container. E.g. you have a <div> which contains a template, you run a function on it and the contents are processed so that it contains a rendered template. This could work in simple cases, but it would be too inconvenient in my project.\n\nPURE\n\n<tr class=\"record\">\n  <td class=\"name\">Name</td>\n  <td class=\"description\">Description</td>\n</tr>\n\nPURE is framework-independent, so it can work with jQuery too. It has some advanced features, like iterating over a list of records, but I didn’t like the idea of marking fields using CSS classes. It seems a bit limiting (for example, I have no idea how to fill a link’s href this way), and it forces you to add a lot of classes to your elements which you otherwise wouldn’t add, which means that it has influence on how the final HTML looks like.\n\nThere’s also another library called NoTemplate, which is only for jQuery and has an almost identical syntax to PURE.\n\nEJS (Embedded JavaScript)\n\n<% for (var i=0; i<records.length; i++) { %>\n  <tr>\n    <td>\n      <a href=\"/<%= records[i].id %>\"><%= records[i].name %></a>\n    </td>\n    <td><%= records[i].description %></td>\n  </tr>\n<% } %>\n\nEJS looks exactly like ERB; and it’s not an accident, it’s actually a port of ERB. It has partials, helpers with names like text_field_tag, and you can write any JS code in <% %> blocks in the same way you write Ruby code in ERB. All of this sounds great, especially in a Rails application, but as I said, I wanted the syntax to be different than ERB’s to be able to use both of them in one file. If you don’t have such requirement, and you’re writing a Rails application, EJS looks like an excellent choice.\n\nTrimpath templates\n\n{for record in records}\n  <tr>\n    <td><a href=\"/${record.id}\">${record.name}</a></td>\n    <td>${record.description}</td>\n  </tr>\n{/for}\n\nSyntax looks nice, it has a lot of features, but the API seems a bit complicated, and it looks like the library hasn’t been updated for ages (specifically, since 2005 :). Also, it expects you to put the template text inside a <textarea> somewhere on the page… which is kind of inconvenient.\n\nOther libraries\n\nI’ve found several other libraries, but they were all either too simple (just variable substitution, without any ifs and fors) or just not suitable for me for some reason. Here are some links in case you’re interested:\n\njQuery Templates - too simple for me\njquery-simple-templates - too simple (as the name suggests… :)\nExtJS framework, contains a template class - not free\nTenjin - seems to be only for the server side\nAjax Pages - ERB-like syntax\nJohn Resig’s micro templating - ERB-like syntax\nTemplate class from Prototype",
  "title": "JavaScript template libraries",
  "updatedAt": "2025-06-30T01:49:16Z"
}