SlideShare a Scribd company logo
1 of 13
Download to read offline
MVVM magic in
SharePoint 2010
using KnockoutJS!
Ajay Nayak
Cap Area SharePoint SIG
08/14/2012
About Me
• SharePoint “jack of all trades”
• Booz Allen Hamilton
• 5 years working exclusively with SharePoint
  2003/2007/2010
• Things that excite me:
  • Well-constructed SharePoint solutions
  • HTML5
  • Mountain biking
  • Craft beer
• @ajaynayak
• ajaynayak {at} gmail {dot} com
Client-side Development
• Coding on the client (HTML, JavaScript, CSS) vs.
  the server (.NET, Java)
• Modern browsers combined with new standards
  (HTML5) and powerful frameworks (jQuery)
• Users have come to expect asynchronous
  operations and rich UI interaction
What about SharePoint?
• Client-side tools at our disposal
  • SP2010 client-side object model
  • SPServices library
  • REST web services to interact with
• Reasons for developing client-side applications
  • Easy to deploy
    • Simple as pushing element files into document
      libraries
  • “Cloud ready”
    • The SP2013 “Cloud App Model” encourages JS on
      the client and RESTful services in the cloud
The Dilemma…
• How do we manage the interaction between
  HTML, JavaScript, CSS, and web services?

• jQuery provides us a powerful framework, but
  how do we structure our app in a way that
  preserves functionality, but reduces “code
  bloat”?
Model-View-Viewmodel
• Architectural pattern created by Microsoft for WPF
  development
• Separates UI from the Data layer and Business Logic
• Model
  • Defines the objects
• View
  • Defines the user interface
• Viewmodel
  • Defines how the user interface (View) is integrated with the data
    (Model)
Common MVVM Scenario
• The Model is defined server-side and is sent to the client in
  the form of a JSON (JavaScript Object Notation) string
  • Ex. person: { age: 23, name: ‘john doe’ }
• The View is defined via HTML and ASP.NET code
  • <div id=“personRecord”>
     • <div id=“age”>Age: <input id=“ageValue” ></input></div>
     • <div id=“name”>Name: <input id=“nameValue” </input></div>
  • </div>
• In this scenario, the Viewmodel would bind the JSON “person”
  object to the input fields contained in the “personRecord” div
  element
  • The Viewmodel would also handle getting fresh data or sending
    updates to the server
KnockoutJS
• Open-source JavaScript MVVM library created by Steve
  Sanderson
• Simplifies the MVVM data-binding process
  • Uses “observables” to dynamically change Viewmodel properties
    upon changes to the view
  • Eliminates the need for event handlers in the UI
  • Handles retrieving and updating data from web services
• Extremely easy to learn
  • Knockoutjs.com contains a live tutorial and ample documentation
  • Very few commands to learn, yet very powerful and extendable
Example
• View
  • <p>First name: <input data-bind="value: firstName" /></p>
  • <p>Last name: <input data-bind="value: lastName" /></p>
  • <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
• ViewModel
  • function ViewModel() {
  •   this.firstName = ko.observable("Planet");
  •   this.lastName = ko.observable("Earth");
  •   this.fullName = ko.computed(function() {
  •      return this.firstName() + " " + this.lastName();
  •   }, this);
  • }
  • ko.applyBindings(new ViewModel());
• Explanation
  • The “data-bind” attribute binds an HTML element to a variable in the
    Viewmodel
  • ko.observable() tells Knockout to “observe” this variable in the View, and
    update the variable with any changes
  • ko.applyBindings() ties all declared bindings in the Viewmodel to “data-
    bind” attributes in the View
Demo
Advanced Techniques
• Mapping Data
   • ko.mapping.fromJS(data, viewModel);
• Looping
   • <ul data-bind="foreach: months">
       • <li>
           • The current item is: <b data-bind="text: $data"></b>
       • </li>
   • </ul>
• Containerless Control Flow
   • <!-- ko if: someExpressionGoesHere -->
       • <li>I want to make this item present/absent dynamically</li>
   • <!-- /ko -->
• Templating
   • <div data-bind="template: { name: 'person-template', data: seller }"></div>
   • <script type="text/html" id="person-template">
       • <h3 data-bind="text: name"></h3>
       • <p>Credits: <span data-bind="text: credits"></span></p>
   • </script>
Links
• Knockoutjs Demo Video
  • http://channel9.msdn.com/Events/MIX/MIX11/FRM08
• Knockoutjs Tutorial & Documentation
  • http://knockoutjs.com/
• MVVM
  • http://addyosmani.com/blog/understanding-mvvm-a-guide-for-
    javascript-developers/
• SharePoint 2010 REST Documentation
  • http://msdn.microsoft.com/en-us/library/ff521587.aspx
• Using the SP2010 REST Interface with JavaScript
  • http://msdn.microsoft.com/en-us/library/ff798303.aspx
Thanks!

More Related Content

What's hot

Mobile services on windows azure (part2)
Mobile services on windows azure (part2)Mobile services on windows azure (part2)
Mobile services on windows azure (part2)Radu Vunvulea
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)Jia Mi
 
Building web front ends using single page applications
Building web front ends using single page applicationsBuilding web front ends using single page applications
Building web front ends using single page applicationsDavid Voyles
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.jsPragnesh Vaghela
 
Serverless with azure functions the rebel service
Serverless with azure functions   the rebel serviceServerless with azure functions   the rebel service
Serverless with azure functions the rebel serviceChristos Matskas
 
Building a dynamic application with GatsbyJS-Tec-Mexicali
Building a dynamic application  with GatsbyJS-Tec-MexicaliBuilding a dynamic application  with GatsbyJS-Tec-Mexicali
Building a dynamic application with GatsbyJS-Tec-MexicaliJesus Manuel Olivas
 
Backbonejs
BackbonejsBackbonejs
BackbonejsSam Lee
 
Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5Chris Bannon
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutAndoni Arroyo
 
CQRS and Event Sourcing with Akka, Cassandra and RabbitMQ
CQRS and Event Sourcing with Akka, Cassandra and RabbitMQCQRS and Event Sourcing with Akka, Cassandra and RabbitMQ
CQRS and Event Sourcing with Akka, Cassandra and RabbitMQMiel Donkers
 
Robust web apps with React.js
Robust web apps with React.jsRobust web apps with React.js
Robust web apps with React.jsMax Klymyshyn
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesBorisMoore
 
What is j query
What is j queryWhat is j query
What is j queryCHAN DARA
 
Marketing Automation with dotCMS
Marketing Automation with dotCMSMarketing Automation with dotCMS
Marketing Automation with dotCMSJason Smith
 
Building single page apps with Durandal js
Building single page apps with Durandal jsBuilding single page apps with Durandal js
Building single page apps with Durandal jsAlex Andreu Sánchez
 
2010 - Basta!: REST mit ASP.NET MVC
2010 - Basta!: REST mit ASP.NET MVC2010 - Basta!: REST mit ASP.NET MVC
2010 - Basta!: REST mit ASP.NET MVCDaniel Fisher
 

What's hot (20)

KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
 
XAML/C# to HTML5/JS
XAML/C#  to HTML5/JS XAML/C#  to HTML5/JS
XAML/C# to HTML5/JS
 
Mobile services on windows azure (part2)
Mobile services on windows azure (part2)Mobile services on windows azure (part2)
Mobile services on windows azure (part2)
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
 
Building web front ends using single page applications
Building web front ends using single page applicationsBuilding web front ends using single page applications
Building web front ends using single page applications
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.js
 
Serverless with azure functions the rebel service
Serverless with azure functions   the rebel serviceServerless with azure functions   the rebel service
Serverless with azure functions the rebel service
 
Building a dynamic application with GatsbyJS-Tec-Mexicali
Building a dynamic application  with GatsbyJS-Tec-MexicaliBuilding a dynamic application  with GatsbyJS-Tec-Mexicali
Building a dynamic application with GatsbyJS-Tec-Mexicali
 
Backbonejs
BackbonejsBackbonejs
Backbonejs
 
Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
 
Backbone Dev Talk by Max Mamis
Backbone Dev Talk by Max MamisBackbone Dev Talk by Max Mamis
Backbone Dev Talk by Max Mamis
 
CQRS and Event Sourcing with Akka, Cassandra and RabbitMQ
CQRS and Event Sourcing with Akka, Cassandra and RabbitMQCQRS and Event Sourcing with Akka, Cassandra and RabbitMQ
CQRS and Event Sourcing with Akka, Cassandra and RabbitMQ
 
Robust web apps with React.js
Robust web apps with React.jsRobust web apps with React.js
Robust web apps with React.js
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates
 
What is j query
What is j queryWhat is j query
What is j query
 
Marketing Automation with dotCMS
Marketing Automation with dotCMSMarketing Automation with dotCMS
Marketing Automation with dotCMS
 
Asp.Net MVC
Asp.Net MVCAsp.Net MVC
Asp.Net MVC
 
Building single page apps with Durandal js
Building single page apps with Durandal jsBuilding single page apps with Durandal js
Building single page apps with Durandal js
 
2010 - Basta!: REST mit ASP.NET MVC
2010 - Basta!: REST mit ASP.NET MVC2010 - Basta!: REST mit ASP.NET MVC
2010 - Basta!: REST mit ASP.NET MVC
 

Similar to MVVM Magic in SharePoint 2010 using Knockoutjs!

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
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Joe Wilson
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...Edureka!
 
Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)Benjamin Howarth
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
 
Planbox Backbone MVC
Planbox Backbone MVCPlanbox Backbone MVC
Planbox Backbone MVCAcquisio
 
ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015Hossein Zahed
 
Integrate MongoDB & SQL data with a single REST API
Integrate MongoDB & SQL data with a single REST APIIntegrate MongoDB & SQL data with a single REST API
Integrate MongoDB & SQL data with a single REST APIEspresso Logic
 
Welcome to Wijmo 5
Welcome to Wijmo 5Welcome to Wijmo 5
Welcome to Wijmo 5Chris Bannon
 
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDBDynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDBApaichon Punopas
 
Scalable Architectures - Microsoft Finland DevDays 2014
Scalable Architectures - Microsoft Finland DevDays 2014Scalable Architectures - Microsoft Finland DevDays 2014
Scalable Architectures - Microsoft Finland DevDays 2014Kallex
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - IntroductionSenthil Kumar
 
World 2013 - Pushing MicroStrategy to the Limit, The Hacker Way
World 2013 - Pushing MicroStrategy to the Limit, The Hacker WayWorld 2013 - Pushing MicroStrategy to the Limit, The Hacker Way
World 2013 - Pushing MicroStrategy to the Limit, The Hacker WayBryan Brandow
 
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...Naoki (Neo) SATO
 
Optimizing Code Reusability for SharePoint using Linq to SharePoint & the MVP...
Optimizing Code Reusability for SharePoint using Linq to SharePoint & the MVP...Optimizing Code Reusability for SharePoint using Linq to SharePoint & the MVP...
Optimizing Code Reusability for SharePoint using Linq to SharePoint & the MVP...Sparkhound Inc.
 
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 appsclimboid
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and conceptsSuresh Patidar
 

Similar to MVVM Magic in SharePoint 2010 using Knockoutjs! (20)

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!
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVC Introduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
 
Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)Canopy view of single-page applications (SPAs)
Canopy view of single-page applications (SPAs)
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Planbox Backbone MVC
Planbox Backbone MVCPlanbox Backbone MVC
Planbox Backbone MVC
 
ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015
 
Integrate MongoDB & SQL data with a single REST API
Integrate MongoDB & SQL data with a single REST APIIntegrate MongoDB & SQL data with a single REST API
Integrate MongoDB & SQL data with a single REST API
 
DirectToWeb 2.0
DirectToWeb 2.0DirectToWeb 2.0
DirectToWeb 2.0
 
Welcome to Wijmo 5
Welcome to Wijmo 5Welcome to Wijmo 5
Welcome to Wijmo 5
 
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDBDynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
 
Scalable Architectures - Microsoft Finland DevDays 2014
Scalable Architectures - Microsoft Finland DevDays 2014Scalable Architectures - Microsoft Finland DevDays 2014
Scalable Architectures - Microsoft Finland DevDays 2014
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
 
World 2013 - Pushing MicroStrategy to the Limit, The Hacker Way
World 2013 - Pushing MicroStrategy to the Limit, The Hacker WayWorld 2013 - Pushing MicroStrategy to the Limit, The Hacker Way
World 2013 - Pushing MicroStrategy to the Limit, The Hacker Way
 
Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
 
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
 
Optimizing Code Reusability for SharePoint using Linq to SharePoint & the MVP...
Optimizing Code Reusability for SharePoint using Linq to SharePoint & the MVP...Optimizing Code Reusability for SharePoint using Linq to SharePoint & the MVP...
Optimizing Code Reusability for SharePoint using Linq to SharePoint & the MVP...
 
Html5 css3 Online Training
Html5 css3 Online Training Html5 css3 Online Training
Html5 css3 Online Training
 
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
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
 

Recently uploaded

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Recently uploaded (20)

201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

MVVM Magic in SharePoint 2010 using Knockoutjs!

  • 1. MVVM magic in SharePoint 2010 using KnockoutJS! Ajay Nayak Cap Area SharePoint SIG 08/14/2012
  • 2. About Me • SharePoint “jack of all trades” • Booz Allen Hamilton • 5 years working exclusively with SharePoint 2003/2007/2010 • Things that excite me: • Well-constructed SharePoint solutions • HTML5 • Mountain biking • Craft beer • @ajaynayak • ajaynayak {at} gmail {dot} com
  • 3. Client-side Development • Coding on the client (HTML, JavaScript, CSS) vs. the server (.NET, Java) • Modern browsers combined with new standards (HTML5) and powerful frameworks (jQuery) • Users have come to expect asynchronous operations and rich UI interaction
  • 4. What about SharePoint? • Client-side tools at our disposal • SP2010 client-side object model • SPServices library • REST web services to interact with • Reasons for developing client-side applications • Easy to deploy • Simple as pushing element files into document libraries • “Cloud ready” • The SP2013 “Cloud App Model” encourages JS on the client and RESTful services in the cloud
  • 5. The Dilemma… • How do we manage the interaction between HTML, JavaScript, CSS, and web services? • jQuery provides us a powerful framework, but how do we structure our app in a way that preserves functionality, but reduces “code bloat”?
  • 6. Model-View-Viewmodel • Architectural pattern created by Microsoft for WPF development • Separates UI from the Data layer and Business Logic • Model • Defines the objects • View • Defines the user interface • Viewmodel • Defines how the user interface (View) is integrated with the data (Model)
  • 7. Common MVVM Scenario • The Model is defined server-side and is sent to the client in the form of a JSON (JavaScript Object Notation) string • Ex. person: { age: 23, name: ‘john doe’ } • The View is defined via HTML and ASP.NET code • <div id=“personRecord”> • <div id=“age”>Age: <input id=“ageValue” ></input></div> • <div id=“name”>Name: <input id=“nameValue” </input></div> • </div> • In this scenario, the Viewmodel would bind the JSON “person” object to the input fields contained in the “personRecord” div element • The Viewmodel would also handle getting fresh data or sending updates to the server
  • 8. KnockoutJS • Open-source JavaScript MVVM library created by Steve Sanderson • Simplifies the MVVM data-binding process • Uses “observables” to dynamically change Viewmodel properties upon changes to the view • Eliminates the need for event handlers in the UI • Handles retrieving and updating data from web services • Extremely easy to learn • Knockoutjs.com contains a live tutorial and ample documentation • Very few commands to learn, yet very powerful and extendable
  • 9. Example • View • <p>First name: <input data-bind="value: firstName" /></p> • <p>Last name: <input data-bind="value: lastName" /></p> • <h2>Hello, <span data-bind="text: fullName"> </span>!</h2> • ViewModel • function ViewModel() { • this.firstName = ko.observable("Planet"); • this.lastName = ko.observable("Earth"); • this.fullName = ko.computed(function() { • return this.firstName() + " " + this.lastName(); • }, this); • } • ko.applyBindings(new ViewModel()); • Explanation • The “data-bind” attribute binds an HTML element to a variable in the Viewmodel • ko.observable() tells Knockout to “observe” this variable in the View, and update the variable with any changes • ko.applyBindings() ties all declared bindings in the Viewmodel to “data- bind” attributes in the View
  • 10. Demo
  • 11. Advanced Techniques • Mapping Data • ko.mapping.fromJS(data, viewModel); • Looping • <ul data-bind="foreach: months"> • <li> • The current item is: <b data-bind="text: $data"></b> • </li> • </ul> • Containerless Control Flow • <!-- ko if: someExpressionGoesHere --> • <li>I want to make this item present/absent dynamically</li> • <!-- /ko --> • Templating • <div data-bind="template: { name: 'person-template', data: seller }"></div> • <script type="text/html" id="person-template"> • <h3 data-bind="text: name"></h3> • <p>Credits: <span data-bind="text: credits"></span></p> • </script>
  • 12. Links • Knockoutjs Demo Video • http://channel9.msdn.com/Events/MIX/MIX11/FRM08 • Knockoutjs Tutorial & Documentation • http://knockoutjs.com/ • MVVM • http://addyosmani.com/blog/understanding-mvvm-a-guide-for- javascript-developers/ • SharePoint 2010 REST Documentation • http://msdn.microsoft.com/en-us/library/ff521587.aspx • Using the SP2010 REST Interface with JavaScript • http://msdn.microsoft.com/en-us/library/ff798303.aspx