How to build SPA in SharePoint

1. 1 | SharePoint Saturday Milan – 18 May 2013

2. 2 | SharePoint Saturday Milan – 18 May 20132 | SharePoint Saturday Milan – 18 May 2013
Grazie ai nostri Sponsor!

3. 3 | SharePoint Saturday Milan – 18 May 2013
Fabio Franzini – SharePoint MVP – fabiofranzini.com
fabio@fabiofranzini.com

4. 4 | SharePoint Saturday Milan – 18 May 20134 | SharePoint Saturday Milan – 18 May 2013
About Me






5. 5 | SharePoint Saturday Milan – 18 May 20135 | SharePoint Saturday Milan – 18 May 2013
What is a Single Page
App?






6. 6 | SharePoint Saturday Milan – 18 May 20136 | SharePoint Saturday Milan – 18 May 2013
Benefits of a SPA









7. 7 | SharePoint Saturday Milan – 18 May 20137 | SharePoint Saturday Milan – 18 May 2013
Disadvantages of a SPA







8. 8 | SharePoint Saturday Milan – 18 May 20138 | SharePoint Saturday Milan – 18 May 2013
SPApp: Choice of ThreeArchitecture
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
Web
Get 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

9. 9 | SharePoint Saturday Milan – 18 May 20139 | SharePoint Saturday Milan – 18 May 2013
SharePoint APIs

10. 10 | SharePoint Saturday Milan – 18 May 201310 | SharePoint Saturday Milan – 18 May 2013
SharePoint JS CSOM
Things that the SharePoint JavaScript CSOM Can Access SP2010 SP2013
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

11. 11 | SharePoint Saturday Milan – 18 May 201311 | SharePoint Saturday Milan – 18 May 2013
Can I realize modular
SPA in SharePoint?

12. 12 | SharePoint Saturday Milan – 18 May 201312 | SharePoint Saturday Milan – 18 May 2013
Yes, Use a Framework!
+

13. 13 | SharePoint Saturday Milan – 18 May 201313 | SharePoint Saturday Milan – 18 May 2013
Knockout.js is MVVM for JS &
HTML

14. 14 | SharePoint Saturday Milan – 18 May 201314 | SharePoint Saturday Milan – 18 May 2013
Knockout.js




15. 15 | SharePoint Saturday Milan – 18 May 201315 | SharePoint Saturday Milan – 18 May 2013
Knockout.js ViewModel
functionAppViewModel(){
this.firstName=ko.observable(“Fabio");
this.lastName=ko.observable(“Franzini");
this.fullName=ko.computed(function(){
returnthis.firstName()+""+this.lastName();
},this);
this.capitalizeLastName=function(){
varcurrentVal=this.lastName();
this.lastName(currentVal.toUpperCase());
};
}
//Activatesknockout.js
ko.applyBindings(newAppViewModel());

16. 16 | SharePoint Saturday Milan – 18 May 201316 | SharePoint Saturday Milan – 18 May 2013
Knockout.js View
<p>Firstname:<inputdata-bind="value:firstName"/></p>
<p>Lastname:<inputdata-bind="value:lastName"/></p>
<p>Fullname:<strongdata-bind="text:fullName"></strong></p>
<buttondata-bind="click:capitalizeLastName">Gocaps</button>

17. 17 | SharePoint Saturday Milan – 18 May 2013
Welcome

18. 18 | SharePoint Saturday Milan – 18 May 201318 | SharePoint Saturday Milan – 18 May 2013
Durandal.js







 https://github.com/BlueSpire/Durandal

19. 19 | SharePoint Saturday Milan – 18 May 201319 | SharePoint Saturday Milan – 18 May 2013
Require.js (an AMD
loader)

Global Namespace
•jQuery.js
•Knockout.js
•Etc.
Car.js
Engine.js Wheels.js
Pistons.js

20. 20 | SharePoint Saturday Milan – 18 May 201320 | SharePoint Saturday Milan – 18 May 2013
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”
Durandal
router
finds
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

21. 21 | SharePoint Saturday Milan – 18 May 2013
SharePoint 2013 SPA ……

22. 22 | SharePoint Saturday Milan – 18 May 201322 | SharePoint Saturday Milan – 18 May 2013
References
 http://knockoutjs.com/
 http://durandaljs.com/
 http://requirejs.org/
 http://bit.ly/YdS4sc

23. 23 | SharePoint Saturday Milan – 18 May 2013

24. 24 | SharePoint Saturday Milan – 18 May 201324 | SharePoint Saturday Milan – 18 May 2013
Session Feedback
Single Page Applications & SharePoint
http://www.surveymonkey.com/s/PM39FKS

25. 25 | SharePoint Saturday Milan – 18 May 2013
Grazie