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".

jQuery Bay Area Conference - presentation, meetings and movements

I just got back from speaking at this jQuery Conference Bay Area Conference last weekend, so this is a quick blog to provide some links.

This was the official jQuery Conference, which is held twice a year. So all the key members of the jQuery team and community were there.

• 29 presentations over two days
•  About 500 participants
• Other presenters included John Resig, Yehuda Katz, Paul Irish, and others who you can see here

My Presentation
I spoke about “Harnessing jQuery Templates and Data Link, to build dynamic data-driven browser apps”.
The presentation was in three sections:

• Discussion of App Scenarios for data and templates in the client, and example demo app
• Templates today: walkthrough of all the main features
• Templates ‘tomorrow’: preview of current work on really fast responsive interactive client-side views, integrating jQuery Templates and Data Linking. (Demo)

The slides are here. 

Meetings and movements

I had some great meetings and discussions with other developers and open-source community members. Definitely declarative binding of templated views to observable data is ‘in the air’, and there is clearly a huge interest in related scenarios and patterns like client-side MVVM or MVC. We were already doing much of this in Microsoft AJAX Preview 6 with observable objects and arrays and declarative bindings in templates, but it was not known to many. My hope is that the current JsViews integration of data link and templating we are working on will break new ground in this area, but this time within a simpler leaner approach, and in synergy with jQuery. People are looking for fast lightweight declarative frameworks of this kind. 

Update: I have published the demo pages above on GitHub as live pages, and have updated the links above to point to the new pages.

The new content is as follows:

• Live demo pages of current jQuery Templates: jquery.github.com/jquery-tmpl/demos/step-by-step.html
• Demo pages of preview work of pure string-based rendering, for better performance in read-only scenarios: borismoore.github.com/jsrender/demos/index.html
• Demo pages of JsViews, for interactive pages while still using string-based rendering, for better performance in read-only scenarios: borismoore.github.com/jsviews/demos/index.html

In the Pipeline

Things have been busy, and I have been way less active on this blog than I intended.

But there's a good side to that: there are some important updates and improvements in the pipeline, and that's what's been keeping me busy...

I have been working in three main areas:

• A Beta2 release of jQuery Templates, which is planned for April.
  
  This should address a number of issues and requests that have been expressed. One new feature planned for Beta2 is an API to render a template against data, straight to an HTML string, without any dependency on an HTML DOM. This can then be used for direct insertion as innerHTML, and will also enable easy use of jQuery Templates for rendering on the server, as well as improved performance of jQuery Templates when used in the browser for read-only scenarios.
  
  At the same time all the power of jQuery Templates will still be there, for those that choose to render templates with the full DOM activation phase included, as at present.
  
  In the case of server rendering, the idea is that the DOM activation can still happen in the browser, against server-rendered HTML. So progressive enhancement scenarios should be relatively easy to achieve...
  
  
• A Beta2 release of jQuery Data Link, also planned for April.
  
  This involves significant changes to the current Data Link implementation, with much broader scenario coverage than at present. I hope to push my present code for this new version to a Beta2 branch of jQuery Data Link soon, for those who are curious about the ongoing design.
  
  
• Finally, I have been working on a new script loader: JsDefer.
  
  You can find the current code for JsDefer here https://github.com/BorisMoore/JsDefer. This script loader shares a number of features with a script loader which we had released a long way back within the Microsoft AJAX platform (see http://aspnet.codeplex.com/releases/view/34488).
  
  It comes in two versions - a jQuery plugin, and another version that does not require jQuery to be loaded in the page.
  
  As well as providing some of the features we had in our Microsoft AJAX script loader, JsDefer also takes advantage of the concept of a "Deferred" object, to facilitate working with asynchronous processes (in particular, of course, the process of dynamically fetching a script and loading it into the page). The recent jQuery 1.5 release uses Deferred objects in the context of AJAX requests, so JsDefer is designed to work 'hand in glove' with jQuery 1.5 AJAX requests, among other scenarios. 

I plan to publish a blog post on JsDefer very soon, with an initial dive into how it works and the scenarios it addresses.