JsViews - Next Generation jQuery Templates

JsViews - Next Generation jQuery Templates

• 1.
  Boris MooreJsViews: Next-generationjQuery 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 dependencyJsViews:Interactive data-driven views, built on top of JsRender templates
• 3.
  Where does itlive?jQuery templates: https://github.com/jquery/jquery-tmpl ‘owned’ by jQuery UI, but superseded by JsRender and JsViewsJsRender: https://github.com/BorisMoore/jsrenderJsViews: https://github.com/BorisMoore/jsviews
• 4.
  Roadmap?jQuery templates: Remainat Beta. JsRender:Soon move to Beta – then on to V1will 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 jQueryUICurrent UsageAvoided 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-levelsummary of JsRenderHigh-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: asfast as fastest… Fast compilationFast rendering -~20 times faster than jquery.tmpl for simple templatesNo 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 tostringvar html = $.render( myTemplate, myData );$( "#container" ).html( html );Compiled template function simple to understand/debugfunction( $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 HierarchyA viewis a rendered template ($.tmplItem -> $.view)Nested templates are children of parent viewInteractivityUser actions change underlying data/model/view modelChanges are ‘observable’Observable objects (property changes) and arrays (collection changes)Changed via code or via declarative binding Data binding expressions listen to changesDeclarative binding of values/arrays- so changes to data automatically reflected by UI …
• 9.
  …JsViews?...…Incremental rendering whendata changesAdd 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 supportServer rendering (JsRender): HTML rendered as string on serverClient activation: if javascript enabled and data available on clientUI will then respond to data changes, user actions……
• 10.
  …JsViews?…Integration with jQueryplugins{{datepickerdateFormat="DD, MM d, yy"}}Separation of concernsAll code in registered helper functionsor in model/VM/presenter declarationsCustom tags for controls{{#wizard step="1"}} ... {{/wizard}}Declarative markup for MVVM, MVP …
• 11.
  Demos‘Crash course’ ofdemos, stepping through the basics…
• 12.
  ReferencesjQuery Templates:https://github.com/jquery/jquery-tmpl/ JsViews:https://github.com/borismoore/jsviews/Blog http://www.borismoore.com/