Your SlideShare is downloading. ×
0
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Single page applications & SharePoint
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Single page applications & SharePoint

1,590

Published on

How to build SPA in SharePoint

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,590
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1 | SharePoint Saturday Milan – 18 May 2013
  • 2. 2 | SharePoint Saturday Milan – 18 May 20132 | SharePoint Saturday Milan – 18 May 2013Grazie ai nostri Sponsor!
  • 3. 3 | SharePoint Saturday Milan – 18 May 2013Fabio Franzini – SharePoint MVP – fabiofranzini.comfabio@fabiofranzini.com
  • 4. 4 | SharePoint Saturday Milan – 18 May 20134 | SharePoint Saturday Milan – 18 May 2013About Me
  • 5. 5 | SharePoint Saturday Milan – 18 May 20135 | SharePoint Saturday Milan – 18 May 2013What is a Single PageApp?
  • 6. 6 | SharePoint Saturday Milan – 18 May 20136 | SharePoint Saturday Milan – 18 May 2013Benefits of a SPA
  • 7. 7 | SharePoint Saturday Milan – 18 May 20137 | SharePoint Saturday Milan – 18 May 2013Disadvantages of a SPA
  • 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 | SharePoint Saturday Milan – 18 May 20139 | SharePoint Saturday Milan – 18 May 2013SharePoint APIs
  • 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 | SharePoint Saturday Milan – 18 May 201311 | SharePoint Saturday Milan – 18 May 2013Can I realize modularSPA in SharePoint?
  • 12. 12 | SharePoint Saturday Milan – 18 May 201312 | SharePoint Saturday Milan – 18 May 2013Yes, Use a Framework!+
  • 13. 13 | SharePoint Saturday Milan – 18 May 201313 | SharePoint Saturday Milan – 18 May 2013Knockout.js is MVVM for JS &HTML
  • 14. 14 | SharePoint Saturday Milan – 18 May 201314 | SharePoint Saturday Milan – 18 May 2013Knockout.js
  • 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 | 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 | SharePoint Saturday Milan – 18 May 2013Welcome
  • 18. 18 | SharePoint Saturday Milan – 18 May 201318 | SharePoint Saturday Milan – 18 May 2013Durandal.js https://github.com/BlueSpire/Durandal
  • 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 | 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 | SharePoint Saturday Milan – 18 May 2013SharePoint 2013 SPA ……
  • 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 | SharePoint Saturday Milan – 18 May 2013
  • 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 | SharePoint Saturday Milan – 18 May 2013Grazie

×