Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data. jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.

1. Boris Moore JsViews: Next-generation jQuery Templates and Data Link

2. jQuery Templates – where is it going? Next-generation jQuery Templates is separated into: JsRender:Pure string-based template rendering, without DOM or jQuery dependency JsViews:Interactive data-driven views, built on top of JsRender templates

3. Where does it live? jQuery templates: https://github.com/jquery/jquery-tmpl ‘owned’ by jQuery UI, but superseded by JsRender and JsViews JsRender: https://github.com/BorisMoore/jsrender JsViews: https://github.com/BorisMoore/jsviews

4. Roadmap? jQuery templates: Remain at Beta. JsRender: Soon move to Beta – then on to V1 will be used by jQueryUI(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 Current Usage Avoided drawing attention to it until now (stabilization process) Nevertheless JsViews and JsRender already being used by some teams within MS including Hotmail and Azure

5. What we’ll see… High-level summary of JsRender High-level summary of JsViews ‘Crash course’ of demos, stepping through the basics…http://borismoore.github.com/jsviews/demos/jQueryConfDemosOct2011/index.html

6. JsRender?... Really fast: as fast as fastest… Fast compilation Fast rendering -~20 times faster than jquery.tmpl for simple templates No DOM dependency (or even jQuery dependency) can run on the server (node.js) ‘codeless’ syntax (similar to Mustache and Handlebars) {{#each people}} <li>{{=Name}}</li> {{/each}} no JS expressions in markupbut wait – there is a way… …

7. …JsRender? … Renders directly to string var html = $.render( myTemplate, myData ); $( "#container" ).html( html ); Compiled template function simple to understand/debug function( $data ) { var result="<li> "+$data.name+"</li> "; return result; } Easy to create custom tags: {{#sort people reverse="true"}} <li>{{=Name}}</li> {{/sort}}

8. JsViews?... View Hierarchy A view is a rendered template ($.tmplItem -> $.view) Nested templates are children of parent view Interactivity User actions change underlying data/model/view model Changes are ‘observable’ Observable objects (property changes) and arrays (collection changes) Changed via code or via declarative binding Data binding expressions listen to changes Declarative binding of values/arrays - so changes to data automatically reflected by UI …

9. …JsViews?... … Incremental rendering when data changes Add item to an array: JsViews inserts new <tr> Delete item: JsViews removes <tr> = Fast responsive UI… and no recycling of state on other rows in table… Progressive enhancement support Server rendering (JsRender): HTML rendered as string on server Client activation: if javascript enabled and data available on client UI will then respond to data changes, user actions… …

10. …JsViews? … Integration with jQuery plugins {{datepickerdateFormat="DD, MM d, yy"}} Separation of concerns All code in registered helper functionsor in model/VM/presenter declarations Custom tags for controls {{#wizard step="1"}} ... {{/wizard}} Declarative markup for MVVM, MVP …

11. Demos ‘Crash course’ of demos, stepping through the basics…

12. References jQuery Templates: https://github.com/jquery/jquery-tmpl/ JsViews: https://github.com/borismoore/jsviews/ Blog http://www.borismoore.com/