Single page applications & SharePoint
Upcoming SlideShare
Loading in...5
×
 

Single page applications & SharePoint

on

  • 1,828 views

How to build SPA in SharePoint

How to build SPA in SharePoint

Statistics

Views

Total Views
1,828
Views on SlideShare
1,677
Embed Views
151

Actions

Likes
1
Downloads
28
Comments
0

7 Embeds 151

http://www.fabiofranzini.com 125
http://feeds2.feedburner.com 15
http://cloud.feedly.com 4
http://localhost 3
http://feeds.feedburner.com 2
http://www.linkedin.com 1
http://feedreader.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Single page applications & SharePoint Single page applications & SharePoint Presentation Transcript

    • 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 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 | 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 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 | SharePoint Saturday Milan – 18 May 201311 | SharePoint Saturday Milan – 18 May 2013Can I realize modularSPA in SharePoint?
    • 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 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 | 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 | SharePoint Saturday Milan – 18 May 2013Welcome
    • 18 | SharePoint Saturday Milan – 18 May 201318 | SharePoint Saturday Milan – 18 May 2013Durandal.js https://github.com/BlueSpire/Durandal
    • 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 | 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 | SharePoint Saturday Milan – 18 May 2013SharePoint 2013 SPA ……
    • 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 | SharePoint Saturday Milan – 18 May 2013
    • 24 | SharePoint Saturday Milan – 18 May 201324 | SharePoint Saturday Milan – 18 May 2013Session FeedbackSingle Page Applications & SharePointhttp://www.surveymonkey.com/s/PM39FKS
    • 25 | SharePoint Saturday Milan – 18 May 2013Grazie