MVVM Magic in SharePoint 2010 using Knockoutjs!

MVVM Magic in SharePoint 2010 using Knockoutjs!

• 1.
  MVVM magic in SharePoint2010 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 • Codingon 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… • Howdo 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 patterncreated 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 JavaScriptMVVM 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 • MappingData • 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 DemoVideo • 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
• 13.
  Thanks!