Client-side templating frameworks to streamline using jQuery with REST/JSON

Question

I'm starting to migrate some html generation tasks from a server-side framework to the client. I'm using jQuery on the client. My goal is to get JSON data via a REST api and use this data to populate HTML into the page.

Right now, when a user on my site clicks a link to My Projects, the server generates HTML like this:

<dl>
    <dt>Clean Toilet</dt>
    <dd>Get off your butt and clean this filth!</dd>

    <dt>Clean Car</dt>
    <dd>I think there's something growing in there...</dd>

    <dt>Replace Puked on Baby Sheets</dt>
</dl>

I'm changing this so that clicking My Projects will now do a GET request that returns something like this:

[
  {
    "name":"Clean Car",
    "description":"I think there's something growing in there..."
  },
  {
    "name":"Clean Toilets",
    "description":"Get off your butt and clean this filth!"
  },
  {
    "name":"Replace Puked on Baby Sheets"
  }
]

I can certainly write custom jQuery code to take that JSON and generate the HTML from it. This is not my question, and I don't need advice on how to do that.

What I'd like to do is completely separate the presentation and layout from the logic (jquery code). I don't want to be creating DL, DT, and DD elements via jQuery code. I'd rather use some sort of HTML templates that I can fill the data in to. These templates could simply be HTML snippets that are hidden in the page that the application was loaded from. Or they could be dynamically loaded from the server (to support user specific layouts, i18n, etc.). They could be displayed a single time, as well as allow looping and repeating. Perhaps it should support sub-templates, if/then/else, and so forth.

I have LOTS of lists and content on my site that are presented in many different ways. I'm looking to create a simple and consistent way to generate and display content without creating custom jQuery code for every different feature on my site. To me, this means I need to find or build a small framework on top of jQuery (probably as a plugin) that meets these requirements.

The only sort of framework that I've found that is anything like this is jTemplates. I don't know how good it is, as I haven't used it yet. At first glance, I'm not thrilled by it's template syntax.

Anyone know of other frameworks or plugins that I should look into? Any blog posts or other resources out there that discuss doing this sort of thing? I just want to make sure that I've surveyed everything out there before building it myself.

Thanks!

Answer 1

I've used jTemplates quite a few times and from my experience it serves its intended purpose.

If we're limiting the discussion to client side then this is my final comment on the matter as it does the job and despite some funky syntax does it well, however on the server side of things I would definitely prefer the scenario where you POST some JSON which is deserialized to an in-memory object and then validated and passed to a server-side template (such as an ASCX in ASP.NET) where you have the full power of that language.

In my opinion, if the client supports JavaScript well enough for you to be considering jTemplates then I would recommend setting yourself up a JavaScript utility method which allows you to send JSON and receive HTML, thereby cutting out the potentially troublesome middle man. Most languages have JSON-parsing ability and jQuery can auto-parse a server response into JSON by specifying the return type as "json".

Even if you don't receive the JSON from the JavaScript, you can still take the JSON that you would have sent back to the browser and just send it through your server-side template instead. In ASP.NET (with MVC for example) you can have strongly-typed template files that do not need to be compiled, making changes a lot easier to implement. Therefore you would still be sending back markup, but it would have been run through a proper template with the full strength of a programming language behind it.

Answer 2

Sounds like you want sammy.js

http://code.quirkey.com/sammy/

The tutorials there demo use of the template engine

Answer 3

Since posting this question, I have found many other templating options. I've listed many of them below. However, there was recently a jQuery templates proposal that may be the most promising solution yet. There is also a discussion about it on the jquery site. Here is the project location:

• http://wiki.github.com/nje/jquery/jquery-templates-proposal

Other solutions I've come across include (in no particular order):

• http://www.west-wind.com/weblog/posts/509108.aspx
• http://ejohn.org/blog/javascript-micro-templating/
• http://beebole.com/pure/
• http://plugins.jquery.com/project/jTemplates
• http://plugins.jquery.com/project/advancedmerge
• http://plugins.jquery.com/project/tempest
• http://plugins.jquery.com/project/jBind
• http://plugins.jquery.com/project/cliche
• http://plugins.jquery.com/project/appendDom
• http://plugins.jquery.com/project/openSocial-jquery-templates
• http://plugins.jquery.com/project/Orange-J
• http://plugins.jquery.com/project/fromTemplate-microtemplate
• http://plugins.jquery.com/project/resiglet
• http://plugins.jquery.com/project/databind
• http://plugins.jquery.com/project/jsont
• http://plugins.jquery.com/project/domplate
• http://plugins.jquery.com/project/noTemplate
• http://plugins.jquery.com/project/jQueryHtmlTemplates
• http://github.com/trix/nano
• http://aefxx.com/jquery-plugins/jqote/
• http://ajaxian.com/archives/chainjs-jquery-data-binding-service
• http://ajaxpatterns.org/Browser-Side_Templating
• http://beebole.com/pure/
• http://code.google.com/p/google-jstemplate/
• http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
• http://embeddedjs.com/
• http://stackoverflow.com/questions/1869726/javascript-template-system-pure-ejs-jquery-plugin
• http://stackoverflow.com/questions/170168/jquery-templating-engines
• http://goessner.net/articles/jsont/