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
