jQuery Templates and JsViews: The Roadmap

Update: JsRender is now close to beta, and JsViews has many new features which also bring it closer to beta.
See Approaching Beta: What's changing in JsRender and JsViews for details on the latest changes.

From jQuery Templates to JsViews

This post provides some details and some context on the relationship between jQuery Templates, JsRender and JsViews, and provides information about the current roadmap.

History of jQuery Templates

jQuery Templates started out in March 2010, and went through a series of steps:

• March 2010: John Resig posted a prototype
• from May 2010 onwards: I worked on a fork of John's prototype (as did many others)
• October 2010: My fork was pulled into the jQuery Templates repo, and it was decided to make this a jQuery Official Plugin:  (along with the Globalization and Data Link plugins, created primarily by Dave Reed, also at Microsoft). 
• October 2010 - April 2011: I continued to iterate on the code on jquery/jquery-tmpl - taking it to Beta1 then working towards Beta2.
• April 2011: The jQuery Project decided to change the status of official plugins. From that point the version of jQuery Templates at jquery/jquery-tmpl was owned by the jQuery UI team. I collaborated with jQuery UI on moving templates forward. 
• April 2011 onwards: jQuery UI decided to put  jquery/jquery-tmpl  on hold - and asked me not to continue with fixes and updates under that repository. The plan was first to establish their templating requirements, and from there move on to determining what template engine they would use.

Meanwhile: JsRender and JsViews
At the same time (April 2011) I was working on an updated approach to jQuery Templates: JsRender and JsViews. JsRender uses pure string-based rendering without any DOM (or even jQuery) dependency, and JsViews integrates JsRender templates with data linking, to provide data-driven templated views.  I gave a preview of this work at the April 2011 jQuery Conference.

The jQuery UI team asked me to continue that ongoing development in my own repository rather than under the jQuery project. Meantime we collaborated on establishing design and feature requirements for templates in jQuery UI.

More recently jQuery UI decided that they did not want to use the jQuery Template syntax for their future templating engine, and instead opted for a logicless syntax (or as I prefer to say, codeless - since there would still be {{each}} and {{if}} tags) similar to Mustache and Handlebars. This led me to develop a version of JsRender using that style of markup. The result is the JsRender template engine that I showed at the October jQuery Conference, which is considerably faster that jQuery Templates, and remains very flexible thanks to the ease and power of creating custom tags and helpers (which include some features not found in Handlebars or Mustache - such as chaining of tags, intermixing of named and positional parameters, postfixed encoding syntax etc.)

Personally I had mixed feelings about the new codeless syntax. One big concern was that it will require porting of existing jQuery Template apps to the new syntax, and in the case where the templates include a lot of inline JavaScript expressions, it will mean either creating new custom tags, or falling back on the 'opt-in' {{*... }} tag for inline code.

But on the positive side, it provides better separation of presentation and behavior, and includes some other new features and improvements that provide considerable advantages, including the ease of creating custom tags, and the improved performance. So finally I am pretty excited by the new approach and what it brings...

Moving forwards with JsViews and JsRender

Currently JsViews and JsRender include a number of samples which can provide the basis for using them already for front-end development. Although there is not yet any documentation as such, and there has been no publicity (until now), they are nevertheless already being used at the prototype level by some important sites (notably by Hotmail - who are about to go into production using JsViews). That said, I anticipate some changes in JsViews, so it may be better to wait a bit longer before doing too much development using the JsViews platform. JsRender on the other hand is I think getting close to a stable Beta-release API.

Templates in jQuery UI 
As far as jQuery UI is concerned, the current expectation is that jQuery UI will use JsRender templates, or at least use JsRender as the starting point for jQuery UI templates. No  decision has been made yet on whether jQuery UI will use JsViews for data linking and binding.

Roadmap summary:

• jQuery templates: Will remain at Beta1, and be superseded by JsRender templates, and JsViews.
• JsRender: Soon move to Beta – then on to V1
  jQueryUI plan to use JsRender. (TBD whether it will migrate to jQuery project in GitHub...)
• JsViews: Move to Beta (after JsRender) and then on to V1 …
  May also be used by jQueryUI

JsViews presentation at jQuery Conference, Boston

Six months in stealth mode...
My last blog entry was six months ago, and concerned my jQuery Conference presentation in April 2011. Since then, no blog entries, but lots of activity on moving  jQuery Templates forwards to the "next generation". It has been somewhat 'stealth mode' - since I wanted to stabilize the design and the code before drawing too much attention to it. That work has been progressing very well, and has now reached the point where I will gradually  bring it out from 'under wraps'.

jQuery Conference Presentation
The first step in that process just happened - another jQuery Conference presentation: I just returned from presenting on "JsViews: Next-generation jQuery Templates and Data Link" at the October 2011 jQuery Conference in Boston.

Here are the conference links:

• Slides from the presentation
• Conference Demos
• Index of all demos
• Code

The presentation was very well received, and created some buzz on Twitter, as illustrated by these tweets:

• thinksaydo Think Say Do, LLC: super excited about github.com/BorisMoore/jsr… and github.com/BorisMoore/jsv… being part of jQuery's future
• rascalking David Bonner: looking forward to playing with jsrender/jsviews. feels really comfortable, coming from a django background. #jqcon
• chinmaybijwe Chinmay Bijwe: #jqcon : JSViews and JSRender look great! Want to try soon.
• vinbrown2 Vin Brown: seems any previously stated (by me) similarity between jsViews and xslt were overstated. this is oozing coolness. #jqcon
• weisjohn john weis: coming from the Django template world, JsRender and JsViews are the      hotness! #jqcon
• abackstrom Adam Backstrom: Super easy to add new template tags to jsViews. Tags can be      used in conditional template logic (if/else). #jqcon
• abackstrom Adam Backstrom: Progressive enhancement in jsViews: render on the server, later apply a view to the DOM, get a view that is now observing for changes #jqcon
• shooley Shawn Hooley: Excited about jsViews! Slick solution for dynamic rendering. #jqcon
• addy_osmani Addy Osmani: Interesting next progression that's come out of the jQuery templatesproject: jsRender (no DOM/jQ dependence) -github.com/BorisMoore/jsr…
• clayalouise clayalouise: Love the design for JsViews! I've been looking for a better than knockoutjs #jqcon
• monkeysort Derek Meyer: Great talk by Boris Moore on the jQuery Templates replacementJsViews. Could have used a longer time slot for a public launch. #jqcon
• ScottRHuff Scott Huff: Exciting and thought provoking talk from Boris Moore on JsViews #jqcon
• _jeffrose Jeff Rose: Wish Boris Moore's presentation on JsViews was longer. Looks very impressive. #jqcon

One aspect that triggered a lot of excitement and questions was progressive enhancement, using the same JsRender template on the server as on the client, and then activating the content in the client by calling $.link().  (See this demo)

And now...
From this point I'll be working towards a documented Beta release - not too far away. More of that in an upcoming post on  "jQuery Templates and JsViews: The Roadmap".