Monday, September 15th, 2008

Patroon: Another JavaScript Templating Solution

Category: JavaScript, Library

Matthias Georgi has posted the release of Patroon, his new templating system that uses JavaScript. It joins other solutions such as using Django via JavaScript (e.g. Dojo let’s you do that), TrimPath, and more.

The way it works is simple. You setup the data that you will be able to access in the template:

javascript

  1. var data = {
  2.   comment: [{
  3.     date: "2008-09-07 12:28:33",
  4.     name: "David Beckham",
  5.     website: "beckham.com",
  6.     text: "I watched the euro finals on tv..."
  7.   }, {
  8.     date: "2008-09-07 14:28:33",
  9.     name: "Tuncay",
  10.     website: "",
  11.     text: "Me too"
  12.   }]
  13. };

Then you create an HTML template with variables a la {variablename}:

  1. <div class="comments">  
  2.       <div id="comments-template">
  3.         <div class="comment">
  4.           <div class="_ top">
  5.             <a class="_" href="{website}">{name}</a> said
  6.             <a class="_" title="{time}"></a>:
  7.           </div>
  8.           <div class="text"></div>
  9.         </div>  
  10.       </div>
  11.     </div>

Then you run the template and put the output back into the DOM:

javascript

  1. // The comments template will be removed from the DOM!
  2. var template = new Template('comments-template');
  3.  
  4. // not using a library
  5.  
  6. // template will result in a new DOM node
  7. var result = template.expand(data);
  8.  
  9. // insert the resulting node into the comments container
  10. var container = document.getElementsByClassName('comments')[0];
  11. container.appendChild(result);
  12.  
  13. // using jquery
  14. $('.comments').expand(template, data);

Posted by Dion Almaer at 7:29 am
12 Comments

++---
2.7 rating from 23 votes

12 Comments »

Comments feed TrackBack URI

This is cool and all, and defeinitely could have its uses, but without some form of content negotiation to feed this to spiders, isn’t this SEO suicide?

Comment by ashooner — September 15, 2008

Just don’t use templating on searchable pages. I’d never use templating on a home page, but I use it a lot for admin interfaces and other systems that are not SEO oriented.

Comment by jonhartmann — September 15, 2008

Using JS also on the server fixes the SEO problem…

I don’t see the templating code being much of a breakthrough, but I appreciate the linked tutorial as a whole — I too think it’s much more efficient to use flat-files when possible in simple situations.

Comment by doublerebel — September 15, 2008

EJS anyone? http://embeddedjs.com It’s probably the easiest to use JS template system. It allows you to load templates from files.

Futhermore, with JavaScriptMVC, you can compress processed templates into your production script: http://javascriptmvc.com

Comment by JustinMeyer — September 15, 2008

ashooner: This templating solution is meant for ajax applications, so if you want searchable pages, you should use a server-side scripting language.

My use case was the comment-system on my blog. It should work on static files, because my blog engine just generates a bunch of static pages. So the comments are loaded seperately on each page view as JSON data and rendered via Patroon.

I’d like to point out something, which wasn’t quite clear in this article. Patroon uses two kinds of rendering techniques: DOM Node manipulation and String interpolation. Used together this technique is quite powerful as you can keep your templates clean through the use of meaningful class names and variable insertion inside attributes and text sections.

I’m not quite satisifed with the scoping rules. Using class names is problematic, as the engine doesn’t know exactly if a class name is meant for styling or for data binding. Sometimes both purposes overlap and sometimes not, therefore opening new scopes through the use of a class name is not what I want.

Comment by georgi — September 15, 2008

It would be nice if the templating supported conditionals like like EXT’s XTemplate. Also I don’t think putting markup in the dom is the best idea. Storing the template in a Javascript variable would be better.

Comment by edmilic — September 15, 2008

Conditionals would be hard to add. The template is not available as string, because it is processed as DOM node. But you may add conditionals inside the evaluated code:

{website ? link(name, website) : name}

Well, the link helper doesn’t exist, but this is a strong case for adding it.

Comment by georgi — September 16, 2008

For true JavaScript templates that let you utilize the full JavaScript language within your markup, consider the UIZE implementation. The idea is nothing terribly revolutionary (it’s really just like what you’d expect from aspx or other systems that let you mix control code within markup for output).
 
Innovations include the ability to compile the .jst (JavaScript Template) files to functions for optimized re-processing, as well as the ability to build .jst files into generator code modules that can be used to generate markup for widget instances. JST’s can be compiled using a build script as part of a site build process, or they can be dynamically compiled on the client side.
 
Other innovations include the concept of directives (JavaScript code that can run during template compilation, rather than at runtime template processing). Ultimately, a server side JavaScript solution could allow processing of JST’s on the server side for page generation, but the JST’s could then also be passed to the client for smooth / instantaneous client updates / rebuilds of DOM.
 
Documentation at…
http://www.uize.com/explainers/javascript-templates.html

Comment by uize — September 16, 2008

I have built a library similar to this. It also uses inline tags with rich semantics allowing you to bind to an entire hierarchy, bind recursively to any depth and has support for alternation and output formatting.

You can see it at: http://jsrepeater.devprog.com

There are some examples on the site showing this in action with the JSON returned from Google Search and Feeds as well as a forum based on jsRepeater itself.

It looks like we are both on a similar track. Nice work Matthias.

Comment by ShawnS — September 16, 2008

Patroon has changed a bit. Please read the update.

ShawnS: jsrepeater looks great. So great, that I borrowed the context attribute, improving the template algorithm significantly.

Comment by georgi — September 16, 2008

The move towards standards based templates, is very positive in my opinion, PURE (Pure Unobtrusive Render Engine) and chain.js being two great examples. These can run serverside with Jaxer (I work on that product @ aptana). Getting away from the special template syntax forced on us with solutions based on the old java velocity model is a good thing, EJS, trimpath etc are all well and good but dont have any kind of standard or generic support in IDE’s. So having templates based on CSS, HTML and JS is really the way to go. With serverside support you can even handle the SEO stuff by rendering the page serverside for the spider, which is a much better solution than all that progressive enhancement malarkey you’d otherwise have to do to get the brain dead web 1.0 googlebots etc, to make a decent job of indexing any kind of functionally ‘advanced’ web site,

Comment by davey — September 17, 2008

I have looked at other template libraries (JSBind, PURE..), but find JSRepeater exactly what I was looking for.

I tested with a Twitter and Youtube JSONP feed and this library works just great.

I only wish to know more about the project because I think it’s really good. The website doesn’t provide much background info, but the howto’s are good. http://jsrepeater.devprog.com

So ShawnS, could you add some about info on your site?

Comment by wiibart — August 9, 2009

Leave a comment

You must be logged in to post a comment.