single page applications & sharepoint

1 | SharePoint Saturday Milan – 18 May 2013

2 | SharePoint Saturday Milan – 18 May 20132 | SharePoint Saturday Milan – 18 May 2013

Grazie ai nostri Sponsor!


Fabio Franzini – SharePoint MVP – [email protected] - @franzinifabio – www.fabiofranzini.com

Single Page Applications & SharePoint


About Me Senior Consultant and Software Engineer SharePoint MVP, MCT Trainer, MCPD Web

Applications, MCTS SharePoint 2010/2007 Web Stack Lover Official Ignite Trainer for SharePoint 2013 &

2010 in Italy Over 8 years experience in IT as a

software engineer


What is a Single Page App? RIA Applications for HTML AJAX, instead of DOM reload

Using an API w/ JSON Using client side templating Using client for maintaining state of app

Hash change for url


Benefits of a SPA State maintained on client User experience

More interactive Less network activity and waiting Developer experience

Better (if you use a framework!!!) No constant DOM refresh Rely on a ‘thick’ client for caching etc.


Disadvantages of a SPA Building an efficient SPA framework from

scratch is very difficult/time consuming SEO can be problematic No more DOM refreshes to clean up your

messes! Lots of JavaScript

No compiler help Lots of “magic strings”


SP App: Choice of Three Architecture Approaches

App Web

(from WSP)

Parent Web

SharePoint-Hosted App

Provision an isolated sub web on a parent web• Reuse web elements

(lists, files, out-of-box web parts)• No server code allowed; use

client JavaScript for logic, UX

Provider-Hosted App

“Bring your own server hosting infrastructure”

SharePoint

WebGet remote events from SharePoint Use CSOM/REST + OAuth to work with SP

Cloud-based Apps

Your Hosted Site

Autohosted App

Windows Azure + SQL Azure provisioned invisibly as apps are installed

Windows Azure

Websites

SharePoint Web


SharePoint APIs

Browser

External Application

SharePoint 2010 and 2013 Farm

.NET Server-Side Object Model

SOAP Based Web Services (.asmx)

WebDAV

REST

.NET Managed Client Side OM

JavaScript Client Side OM

(SharePoint 2010 and 2013)


SharePoint JS CSOMThings that the SharePoint JavaScript CSOM Can Access SP201

0SP2013

Site Collections, Webs, Lists, List Items, Views, List Schemas, Files, and Folders

Property Bags at Web, List, and List Item Levels

Web Parts, Security, Content Types, Site Templates

User Profiles, Search, Taxonomy, Feeds, Publishing, Sharing *

Workflow, E-Discovery, IRM, Analytics, Business Data

Cross domain HTTP endpoints

*SP2010 has SOAP based Web Services that you can call outside of the CSOM for User Profiles and Search


Can I realize modular SPA in SharePoint?


Yes, Use a Framework!

+


Knockout.js is MVVM for JS & HTML


Knockout.js Model: It uses the Observable property that can notify

subscribers about changes and automatically detect dependencies

View: A KnockoutJs View is simply a HTML document with declarative bindings to link it to the ViewModel

ViewModel: The ViewModel can be considered a specialized Controller that acts as a data converter. It changes Model information into View information, passing commands from the View to the Model.


Knockout.js ViewModelfunction AppViewModel() { this.firstName = ko.observable(“Fabio"); this.lastName = ko.observable(“Franzini");

this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this);

this.capitalizeLastName = function() { var currentVal = this.lastName(); this.lastName(currentVal.toUpperCase()); }; }

// Activates knockout.jsko.applyBindings(new AppViewModel());


Knockout.js View<p>First name: <input data-bind="value: firstName" /></p>

<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps</button>


Welcome


Durandal.js Built on top of jQuery, Knockout & RequireJS

jQuery Promises, MVVM, AMDs built in Also does Navigation, Routing, Screen State

Management JS & HTML Modularity

Provides a FRAMEWORK to ORGANIZE your Controllers, ViewModels, and Views

Simple, Effective App Lifecycle Events Modals, Message Boxes, etc. https://github.com/BlueSpire/Durandal

https://github.com/BlueSpire/Durandal


Require.js (an AMD loader) Think: a combination of dependency

injection & namespaces for JavaScript Shows clear dependencies for USER code

w/o polluting the global namespace

Global Namespace•jQuery.js•Knockout.js•Etc.

Car.js

Engine.js Wheels.js

Pistons.js


API

COMPOSITION

{ FirstName: “John”, LastName: “Culviner”}

ko.mapping

{ FirstName: ko.observable(), LastName: ko.observable()}

{//person.js person: , activate : function(){ save: function(){… cancel: function(){….}

{ //person.js person: null, activate : function(){ save : function() {… cancel : function() {…}

User requests URL“…/#/person/1”

Durandalrouterfinds VM, invokes activate

Within activate function

Save

Person.html

Durandal locates the view by convention

DONE! Bound View / View Model

GET person/1

After active promise returns

Cancel


Demo

SharePoint 2013 SPA ……


References http://knockoutjs.com/ http://durandaljs.com/ http://requirejs.org/ http://bit.ly/YdS4sc (SharePoint 2010 App

Model)

http://knockoutjs.com/

http://knockoutjs.com/

http://durandaljs.com/

http://requirejs.org/

http://requirejs.org/

http://bit.ly/YdS4sc

http://bit.ly/YdS4sc


Q&A


Session Feedback

Single Page Applications & SharePoint http://www.surveymonkey.com/s/PM39FKS


Grazie

single page applications & sharepoint

Technology

sharepoint apis

sharepoint js csomthings

sharepoint javascript

fabio franzini sharepoint

list schemas

list items

box web parts

isolated sub web