SlideShare a Scribd company logo
Boris MooreJsViews: 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 dependencyJsViews: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 JsViewsJsRender: https://github.com/BorisMoore/jsrenderJsViews: https://github.com/BorisMoore/jsviews
Roadmap?jQuery templates: Remain at 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
What we’ll see…High-level summary of JsRenderHigh-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 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……
…JsRender?…Renders directly to stringvar  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}}
JsViews?...View HierarchyA view is 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 …
…JsViews?...…Incremental rendering when data 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……
…JsViews?…Integration with jQuery plugins{{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 …
Demos‘Crash course’ of demos, stepping through the basics…
ReferencesjQuery Templates:https://github.com/jquery/jquery-tmpl/ JsViews:https://github.com/borismoore/jsviews/Blog	http://www.borismoore.com/

More Related Content

What's hot (20)

PDF
Levent-Gurses' Introduction to Web Components & Polymer
Erik Isaksen
 
PPTX
JavaScript and jQuery Basics
Kaloyan Kosev
 
PPTX
ME vs WEB - AngularJS Fundamentals
Aviran Cohen
 
PDF
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest
 
PDF
Web Components v1
Mike Wilcox
 
PDF
handout-05b
tutorialsruby
 
PPTX
Angular - Beginner
Riccardo Masetti
 
PDF
Introduction to AngularJS
Aldo Pizzagalli
 
PDF
Nuxt.JS Introdruction
David Ličen
 
PDF
Drupal point of vue
David Ličen
 
PPTX
AngularJS intro
dizabl
 
PDF
Introduction to AngularJS
Jussi Pohjolainen
 
PPTX
Backbone/Marionette recap [2015]
Andrii Lundiak
 
PDF
Great Responsive-ability Web Design
Mike Wilcox
 
PDF
Angular or Backbone: Go Mobile!
Doris Chen
 
PDF
dojo.Patterns
Peter Higgins
 
ZIP
Contextual jQuery
Doug Neiner
 
PDF
Thinking in Components
FITC
 
PDF
Intro to Vue
Isatu Conteh
 
PPT
Introduction to j query
thewarlog
 
Levent-Gurses' Introduction to Web Components & Polymer
Erik Isaksen
 
JavaScript and jQuery Basics
Kaloyan Kosev
 
ME vs WEB - AngularJS Fundamentals
Aviran Cohen
 
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest
 
Web Components v1
Mike Wilcox
 
handout-05b
tutorialsruby
 
Angular - Beginner
Riccardo Masetti
 
Introduction to AngularJS
Aldo Pizzagalli
 
Nuxt.JS Introdruction
David Ličen
 
Drupal point of vue
David Ličen
 
AngularJS intro
dizabl
 
Introduction to AngularJS
Jussi Pohjolainen
 
Backbone/Marionette recap [2015]
Andrii Lundiak
 
Great Responsive-ability Web Design
Mike Wilcox
 
Angular or Backbone: Go Mobile!
Doris Chen
 
dojo.Patterns
Peter Higgins
 
Contextual jQuery
Doug Neiner
 
Thinking in Components
FITC
 
Intro to Vue
Isatu Conteh
 
Introduction to j query
thewarlog
 

Similar to JsViews - Next Generation jQuery Templates (20)

PPTX
jQuery templates
ritu_kothari
 
PPTX
jQuery
Jeremiah Gatong
 
PPTX
jQuery plugins - templates, data link, globalization
hotrannam
 
PPT
jQuery Fundamentals
Doncho Minkov
 
PDF
D2W Branding Using jQuery ThemeRoller
WO Community
 
PPTX
Unobtrusive javascript with jQuery
Angel Ruiz
 
PPTX
Microsoft and jQuery: A true love story - templating and other contributions
jamessenior
 
PPTX
jQuery Templating and Datalinking
Chris Love
 
PDF
jQuery State of the Union - Yehuda Katz
Marakana Inc.
 
PDF
State of jQuery '09
jeresig
 
PDF
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
PDF
jQuery Mobile Introduction
Joris Graaumans
 
PDF
Viking academy backbone.js
Bert Wijnants
 
PPTX
jQuery
Jon Erickson
 
PPTX
Javascript for Wep Apps
Michael Puckett
 
PDF
jQuery Mobile Jump Start
Troy Miles
 
PPTX
Introduction to Knockoutjs
jhoguet
 
PDF
Microsoft PowerPoint - jQuery-1-Ajax.pptx
guestc8e51c
 
PDF
Microsoft PowerPoint - jQuery-3-UI.pptx
guestc8e51c
 
PDF
issue1
guest5fe9d57
 
jQuery templates
ritu_kothari
 
jQuery plugins - templates, data link, globalization
hotrannam
 
jQuery Fundamentals
Doncho Minkov
 
D2W Branding Using jQuery ThemeRoller
WO Community
 
Unobtrusive javascript with jQuery
Angel Ruiz
 
Microsoft and jQuery: A true love story - templating and other contributions
jamessenior
 
jQuery Templating and Datalinking
Chris Love
 
jQuery State of the Union - Yehuda Katz
Marakana Inc.
 
State of jQuery '09
jeresig
 
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
jQuery Mobile Introduction
Joris Graaumans
 
Viking academy backbone.js
Bert Wijnants
 
jQuery
Jon Erickson
 
Javascript for Wep Apps
Michael Puckett
 
jQuery Mobile Jump Start
Troy Miles
 
Introduction to Knockoutjs
jhoguet
 
Microsoft PowerPoint - jQuery-1-Ajax.pptx
guestc8e51c
 
Microsoft PowerPoint - jQuery-3-UI.pptx
guestc8e51c
 
issue1
guest5fe9d57
 
Ad

Recently uploaded (20)

PDF
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
PDF
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
PDF
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
PPTX
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
Blockchain Transactions Explained For Everyone
CIFDAQ
 
PPTX
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
HubSpot Main Hub: A Unified Growth Platform
Jaswinder Singh
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PDF
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PDF
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
July Patch Tuesday
Ivanti
 
PDF
Biography of Daniel Podor.pdf
Daniel Podor
 
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Blockchain Transactions Explained For Everyone
CIFDAQ
 
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
HubSpot Main Hub: A Unified Growth Platform
Jaswinder Singh
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
Jak MŚP w Europie Środkowo-Wschodniej odnajdują się w świecie AI
dominikamizerska1
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
July Patch Tuesday
Ivanti
 
Biography of Daniel Podor.pdf
Daniel Podor
 
Ad

JsViews - Next Generation jQuery Templates

  • 1. Boris MooreJsViews: 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 dependencyJsViews: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 JsViewsJsRender: https://github.com/BorisMoore/jsrenderJsViews: https://github.com/BorisMoore/jsviews
  • 4. Roadmap?jQuery templates: Remain at 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-level summary 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: as fast 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 to stringvar 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 view is 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 when data 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 jQuery plugins{{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’ of demos, stepping through the basics…