0
1 | SharePoint Saturday Milan – 18 May 2013
2 | SharePoint Saturday Milan – 18 May 20132 | SharePoint Saturday Milan – 18 May 2013Grazie ai nostri Sponsor!
3 | SharePoint Saturday Milan – 18 May 2013Fabio Franzini – SharePoint MVP – fabiofranzini.comfabio@fabiofranzini.com
4 | SharePoint Saturday Milan – 18 May 20134 | SharePoint Saturday Milan – 18 May 2013About Me
5 | SharePoint Saturday Milan – 18 May 20135 | SharePoint Saturday Milan – 18 May 2013What is a Single PageApp?
6 | SharePoint Saturday Milan – 18 May 20136 | SharePoint Saturday Milan – 18 May 2013Benefits of a SPA
7 | SharePoint Saturday Milan – 18 May 20137 | SharePoint Saturday Milan – 18 May 2013Disadvantages of a SPA
8 | SharePoint Saturday Milan – 18 May 20138 | SharePoint Saturday Milan – 18 May 2013SPApp: Choice of ThreeArchitectureAp...
9 | SharePoint Saturday Milan – 18 May 20139 | SharePoint Saturday Milan – 18 May 2013SharePoint APIs
10 | SharePoint Saturday Milan – 18 May 201310 | SharePoint Saturday Milan – 18 May 2013SharePoint JS CSOMThings that the ...
11 | SharePoint Saturday Milan – 18 May 201311 | SharePoint Saturday Milan – 18 May 2013Can I realize modularSPA in ShareP...
12 | SharePoint Saturday Milan – 18 May 201312 | SharePoint Saturday Milan – 18 May 2013Yes, Use a Framework!+
13 | SharePoint Saturday Milan – 18 May 201313 | SharePoint Saturday Milan – 18 May 2013Knockout.js is MVVM for JS &HTML
14 | SharePoint Saturday Milan – 18 May 201314 | SharePoint Saturday Milan – 18 May 2013Knockout.js
15 | SharePoint Saturday Milan – 18 May 201315 | SharePoint Saturday Milan – 18 May 2013Knockout.js ViewModelfunctionAppVi...
16 | SharePoint Saturday Milan – 18 May 201316 | SharePoint Saturday Milan – 18 May 2013Knockout.js View<p>Firstname:<inpu...
17 | SharePoint Saturday Milan – 18 May 2013Welcome
18 | SharePoint Saturday Milan – 18 May 201318 | SharePoint Saturday Milan – 18 May 2013Durandal.js https://github...
19 | SharePoint Saturday Milan – 18 May 201319 | SharePoint Saturday Milan – 18 May 2013Require.js (an AMDloader)Global ...
20 | SharePoint Saturday Milan – 18 May 201320 | SharePoint Saturday Milan – 18 May 2013APICOMPOSITION{FirstName: “John”,L...
21 | SharePoint Saturday Milan – 18 May 2013SharePoint 2013 SPA ……
22 | SharePoint Saturday Milan – 18 May 201322 | SharePoint Saturday Milan – 18 May 2013References http://knockoutjs.com/...
23 | SharePoint Saturday Milan – 18 May 2013
24 | SharePoint Saturday Milan – 18 May 201324 | SharePoint Saturday Milan – 18 May 2013Session FeedbackSingle Page Applic...
25 | SharePoint Saturday Milan – 18 May 2013Grazie
Upcoming SlideShare
Loading in...5
×

Single page applications & SharePoint

1,625

Published on

How to build SPA in SharePoint

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,625
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Single page applications & SharePoint"

  1. 1. 1 | SharePoint Saturday Milan – 18 May 2013
  2. 2. 2 | SharePoint Saturday Milan – 18 May 20132 | SharePoint Saturday Milan – 18 May 2013Grazie ai nostri Sponsor!
  3. 3. 3 | SharePoint Saturday Milan – 18 May 2013Fabio Franzini – SharePoint MVP – fabiofranzini.comfabio@fabiofranzini.com
  4. 4. 4 | SharePoint Saturday Milan – 18 May 20134 | SharePoint Saturday Milan – 18 May 2013About Me
  5. 5. 5 | SharePoint Saturday Milan – 18 May 20135 | SharePoint Saturday Milan – 18 May 2013What is a Single PageApp?
  6. 6. 6 | SharePoint Saturday Milan – 18 May 20136 | SharePoint Saturday Milan – 18 May 2013Benefits of a SPA
  7. 7. 7 | SharePoint Saturday Milan – 18 May 20137 | SharePoint Saturday Milan – 18 May 2013Disadvantages of a SPA
  8. 8. 8 | SharePoint Saturday Milan – 18 May 20138 | SharePoint Saturday Milan – 18 May 2013SPApp: Choice of ThreeArchitectureApproachesApp Web(from WSP)ParentWebSharePoint-Hosted AppProvision an isolated sub web on a parentweb• Reuse web elements(lists, files, out-of-box web parts)• No server code allowed; use clientJavaScript for logic, UXProvider-Hosted App“Bring your own server hosting infrastructure”SharePointWebGet remote events fromSharePointUse CSOM/REST +OAuth to work with SPCloud-based AppsYour HostedSiteAutohosted AppWindows Azure + SQL Azureprovisioned invisibly as apps areinstalledWindowsAzureWebsitesSharePointWeb
  9. 9. 9 | SharePoint Saturday Milan – 18 May 20139 | SharePoint Saturday Milan – 18 May 2013SharePoint APIs
  10. 10. 10 | SharePoint Saturday Milan – 18 May 201310 | SharePoint Saturday Milan – 18 May 2013SharePoint JS CSOMThings that the SharePoint JavaScript CSOM Can Access SP2010 SP2013Site Collections, Webs, Lists, List Items, Views, List Schemas, Files, andFoldersProperty Bags at Web, List, and List Item LevelsWeb Parts, Security, Content Types, Site TemplatesUser Profiles, Search, Taxonomy, Feeds, Publishing, Sharing *Workflow, E-Discovery, IRM, Analytics, Business DataCross domain HTTP endpoints
  11. 11. 11 | SharePoint Saturday Milan – 18 May 201311 | SharePoint Saturday Milan – 18 May 2013Can I realize modularSPA in SharePoint?
  12. 12. 12 | SharePoint Saturday Milan – 18 May 201312 | SharePoint Saturday Milan – 18 May 2013Yes, Use a Framework!+
  13. 13. 13 | SharePoint Saturday Milan – 18 May 201313 | SharePoint Saturday Milan – 18 May 2013Knockout.js is MVVM for JS &HTML
  14. 14. 14 | SharePoint Saturday Milan – 18 May 201314 | SharePoint Saturday Milan – 18 May 2013Knockout.js
  15. 15. 15 | SharePoint Saturday Milan – 18 May 201315 | SharePoint Saturday Milan – 18 May 2013Knockout.js ViewModelfunctionAppViewModel(){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.jsko.applyBindings(newAppViewModel());
  16. 16. 16 | SharePoint Saturday Milan – 18 May 201316 | SharePoint Saturday Milan – 18 May 2013Knockout.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. 17 | SharePoint Saturday Milan – 18 May 2013Welcome
  18. 18. 18 | SharePoint Saturday Milan – 18 May 201318 | SharePoint Saturday Milan – 18 May 2013Durandal.js https://github.com/BlueSpire/Durandal
  19. 19. 19 | SharePoint Saturday Milan – 18 May 201319 | SharePoint Saturday Milan – 18 May 2013Require.js (an AMDloader)Global Namespace•jQuery.js•Knockout.js•Etc.Car.jsEngine.js Wheels.jsPistons.js
  20. 20. 20 | SharePoint Saturday Milan – 18 May 201320 | SharePoint Saturday Milan – 18 May 2013APICOMPOSITION{FirstName: “John”,LastName: “Culviner”}ko.mapping{FirstName: ko.observable(),LastName: ko.observable()}{//person.jsperson: ,activate : function(){save: function(){…cancel: function(){….}{ //person.jsperson: null,activate : function(){save : function() {…cancel : function() {…}User requests URL“…/#/person/1”DurandalrouterfindsVM, invokesactivateWithin activate functionSavePerson.htmlDurandallocates theview byconventionDONE!Bound View /View ModelGET person/1After active promise returnsCancel
  21. 21. 21 | SharePoint Saturday Milan – 18 May 2013SharePoint 2013 SPA ……
  22. 22. 22 | SharePoint Saturday Milan – 18 May 201322 | SharePoint Saturday Milan – 18 May 2013References http://knockoutjs.com/ http://durandaljs.com/ http://requirejs.org/ http://bit.ly/YdS4sc
  23. 23. 23 | SharePoint Saturday Milan – 18 May 2013
  24. 24. 24 | SharePoint Saturday Milan – 18 May 201324 | SharePoint Saturday Milan – 18 May 2013Session FeedbackSingle Page Applications & SharePointhttp://www.surveymonkey.com/s/PM39FKS
  25. 25. 25 | SharePoint Saturday Milan – 18 May 2013Grazie
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×