JsViews - Next Generation jQuery Templates

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

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

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

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

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

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…
…

…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}}

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
…

…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…
…

…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 …

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

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

http://paper.li	34
http://paper.li	34
http://a0.twimg.com	18
http://techmaster.vn	10
http://127.0.0.1	8
http://us-w1.rockmelt.com	3
https://si0.twimg.com	3

JsViews - Next Generation jQuery Templates

by BorisMoore on Oct 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 110

Statistics

JsViews - Next Generation jQuery Templates — Presentation Transcript