JsViews - Next Generation jQuery Templates
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


JsViews - Next Generation jQuery Templates



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

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.



Total Views
Views on SlideShare
Embed Views



9 Embeds 164

http://techmaster.vn 59
http://paper.li 34
http://paper.li 34
http://a0.twimg.com 18 10
http://us-w1.rockmelt.com 3
https://si0.twimg.com 3
https://twitter.com 2
http://faavorite.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

JsViews - Next Generation jQuery Templates Presentation Transcript

  • 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.
    Soon move to Beta – then on to V1
    will be used by jQueryUI(TBD whether it will migrate to jQuery project in GitHub)
    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}}
    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"}}
  • 8. JsViews?...
    View Hierarchy
    A view is a rendered template ($.tmplItem -> $.view)
    Nested templates are children of parent view
    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"}}
    Declarative markup for MVVM, MVP …
  • 11. Demos
    ‘Crash course’ of demos, stepping through the basics…
  • 12. References
    jQuery Templates: