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

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

What's hot (20)

Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
 
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложенияCodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
 
Web Components v1
Web Components v1Web Components v1
Web Components v1
 
handout-05b
handout-05bhandout-05b
handout-05b
 
Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS intro
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!
 
dojo.Patterns
dojo.Patternsdojo.Patterns
dojo.Patterns
 
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
Intro to Vue
Intro to Vue Intro to Vue
Intro to Vue
 
Introduction to j query
Introduction to j queryIntroduction to j query
Introduction to j query
 

Similar to JsViews - Next Generation jQuery Templates

Web 2.0
Web 2.0Web 2.0
Web 2.0
Muhammad Nasr
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
Roberto Messora
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
Ron Reiter
 
Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
Flavius-Radu Demian
 
MVVM & Data Binding Library
MVVM & Data Binding Library MVVM & Data Binding Library
MVVM & Data Binding Library
10Clouds
 
jquery summit presentation for large scale javascript applications
jquery summit  presentation for large scale javascript applicationsjquery summit  presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
DivyanshGupta922023
 
Angularjs Basics
Angularjs BasicsAngularjs Basics
Angularjs Basics
Anuradha Bandara
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
Vivek Rajan
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
climboid
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.js
Bert Wijnants
 
Create an application with ember
Create an application with ember Create an application with ember
Create an application with ember
Chandra Sekar
 
Knockoutjs databinding
Knockoutjs databindingKnockoutjs databinding
Knockoutjs databinding
Boulos Dib
 
Web development with django - Basics Presentation
Web development with django - Basics PresentationWeb development with django - Basics Presentation
Web development with django - Basics Presentation
Shrinath Shenoy
 
MVC
MVCMVC
MVC
akshin
 
Asp.NET MVC
Asp.NET MVCAsp.NET MVC
Asp.NET MVC
vrluckyin
 
Knockout js session
Knockout js sessionKnockout js session
Knockout js session
Ravinder Mahajan
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
Anil Kumar
 
07_UIAndroid.pdf
07_UIAndroid.pdf07_UIAndroid.pdf
07_UIAndroid.pdf
ImranS18
 
J Query(04 12 2008) Foiaz
J Query(04 12 2008) FoiazJ Query(04 12 2008) Foiaz
J Query(04 12 2008) Foiaz
testingphase
 
Silverlight 2 for Developers - TechEd New Zealand 2008
Silverlight 2 for Developers - TechEd New Zealand 2008Silverlight 2 for Developers - TechEd New Zealand 2008
Silverlight 2 for Developers - TechEd New Zealand 2008
Jonas Follesø
 

Similar to JsViews - Next Generation jQuery Templates (20)

Web 2.0
Web 2.0Web 2.0
Web 2.0
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
 
Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
 
MVVM & Data Binding Library
MVVM & Data Binding Library MVVM & Data Binding Library
MVVM & Data Binding Library
 
jquery summit presentation for large scale javascript applications
jquery summit  presentation for large scale javascript applicationsjquery summit  presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
 
Angularjs Basics
Angularjs BasicsAngularjs Basics
Angularjs Basics
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.js
 
Create an application with ember
Create an application with ember Create an application with ember
Create an application with ember
 
Knockoutjs databinding
Knockoutjs databindingKnockoutjs databinding
Knockoutjs databinding
 
Web development with django - Basics Presentation
Web development with django - Basics PresentationWeb development with django - Basics Presentation
Web development with django - Basics Presentation
 
MVC
MVCMVC
MVC
 
Asp.NET MVC
Asp.NET MVCAsp.NET MVC
Asp.NET MVC
 
Knockout js session
Knockout js sessionKnockout js session
Knockout js session
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
07_UIAndroid.pdf
07_UIAndroid.pdf07_UIAndroid.pdf
07_UIAndroid.pdf
 
J Query(04 12 2008) Foiaz
J Query(04 12 2008) FoiazJ Query(04 12 2008) Foiaz
J Query(04 12 2008) Foiaz
 
Silverlight 2 for Developers - TechEd New Zealand 2008
Silverlight 2 for Developers - TechEd New Zealand 2008Silverlight 2 for Developers - TechEd New Zealand 2008
Silverlight 2 for Developers - TechEd New Zealand 2008
 

Recently uploaded

WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
Priyanka Aash
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
Ivanti
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
Priyanka Aash
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 

Recently uploaded (20)

WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 

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…