![Page 1: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/1.jpg)
AnInsightcompany
BobGermanPrincipalArchitect- BlueMetal
Future-ProofDevelopmentforSharePointandSharePointOnline
![Page 2: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/2.jpg)
MicrosoftismodernizingtheSharePointUI!
Prediction:Overthenextfewyears,MicrosoftwillchangetheentireSharePointuserexperiencetomeettheneedsofamodern,mobileworkforce.
It’slikeupgradingacar,onepartatatime– whileyou’redrivingitcrosscountry!
WebPartsO365– mid2016
NewPagesO365– late2016
SP2016 FeaturePackearly2017
WebEra CloudandDeviceEra
![Page 3: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/3.jpg)
TooManySharePointDevelopmentModels!
FarmSolutions
SandboxedSolutions
Add-inModel
ContentEditor/
ScriptEditor
SharePointFramework
What’sNext??
![Page 4: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/4.jpg)
![Page 5: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/5.jpg)
FarmSolutions
SandboxedSolutions
App Add-inModel
SharePointFramework
Toomanydevelopmentmodels…
…andnoneofthemareideal!Microsoft Backs Away from Feature Framework, Rolls Back Years of Development Guidance and ToolsFebruary 2015, REDMOND, WA
The Microsoft Patterns and Practices team has released new guidance that users should avoid using the Feature Framework, a system for deploying SharePoint content and solutions since 2007. The Feature Framework is brittle; if a solution is removed or content is moved to a new environment, lists and content types break.
An ironic demonstration of the problems inherent in the Feature Framework was the “Fabulous 40” web templates released by Microsoft in 2007 which could never be upgraded to newer versions of SharePoint, causing headaches for enterprises worldwide. Many companies still keep SharePoint 2007 running because they came to depend on the Fab 40 templates.
Neverinthecloud Deprecated Optimizedfor
storefrontDoesn’texist
yet…
Timeouts
![Page 6: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/6.jpg)
FarmSolutions
SandboxedSolutions
App Add-inModel
SharePointFramework
Neverinthecloud Deprecated Optimizedfor
storefrontDoesn’texist
yet…
Toomanydevelopmentmodels…
Q:Whatdotheyallhaveincommon?
![Page 7: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/7.jpg)
FarmSolutions
SandboxedSolutions
App Add-inModel
SharePointFramework
Neverinthecloud Deprecated Optimizedfor
storefrontDoesn’texist
yet…
Toomanydevelopmentmodels…
Q:Whatdotheyallhaveincommon?A:HTML,JavaScript,andSharePointAPI’s
![Page 8: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/8.jpg)
Widgets• CommonlyusedontheInternetcalled”WebWidgets”,”Plugins”,”Embeds”,etc.• OfficePnPteamcallsthem”App Add-inScriptParts”• It’sjustacleverpieceofHTMLandJavascriptthatactslikeawebpart• WhynotusethesamepatterninSharePoint?
![Page 9: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/9.jpg)
Widgetstotherescue
• Repackage/refactorinsteadofrewriting• Storecodecentrallyforeasyupdatestoallsites• NoIFrames!
Onewidget…
ContentEditorWeb
Part
SharePointAdd-in
SharePointPageorForm
Externalwebpage
…packagedmanyways
![Page 10: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/10.jpg)
WidgetsinAction:BlueMetalIntranet
SharePointOnlineusingLightBrandingandWidgets
1. MyClients&ProjectsList
2. NewsFeed
3. TabbedNewHireandAnniversary
Carousel
4. TabbedCalendars/Discussions
5. TwitterFeed
![Page 11: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/11.jpg)
Widgetsvs.Add-inModel
Add-inModels RemoteProvisioning
Complete accesstosite(e.g.Branding)Direct accesstopage(e.g.ConnectedWebParts)
EaseofData AccessEnd-user additions/modificationsProtection fromUntrustedCodeStorefront DistributionCentralizedDistribution andManagement
![Page 12: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/12.jpg)
Whatmakesagoodwidget?
1 ISOLATED– sotheywon’t interferewithotherwidgetsortherestofthepage
Canyourunmultiple copiesofthewidgetonapage?
![Page 13: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/13.jpg)
Whatmakesagoodwidget?
1 ISOLATED– sotheywon’t interferewithotherwidgetsortherestofthepage
Canyourunmultiple copiesofthewidgetonapage?
2 EFFICIENT – sotheyloadquickly Doesthepagegetnoticeably slowerasyouaddwidgets?
![Page 14: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/14.jpg)
Whatmakesagoodwidget?
1 ISOLATED– sotheywon’t interferewithotherwidgetsortherestofthepage
Canyourunmultiple copiesofthewidgetonapage?
2 EFFICIENT – sotheyloadquickly Doesthepagegetnoticeably slowerasyouaddwidgets?
3 SELF-CONTAINED– sothey’reeasytoreuse Doesthewidgetwork without specialpage elementssuchaselementID’s,scripts,andCSSreferences?
![Page 15: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/15.jpg)
Whatmakesagoodwidget?
1 ISOLATED– sotheywon’t interferewithotherwidgetsortherestofthepage
Canyourunmultiple copiesofthewidgetonapage?
2 EFFICIENT – sotheyloadquickly Doesthepagegetnoticeably slowerasyouaddwidgets?
3 SELF-CONTAINED– sothey’reeasytoreuse Doesthewidgetwork without specialpage elementssuchaselementID’s,scripts,andCSSreferences?
4 MODERN– sothey’reeasiertowriteandmaintain Is thewidgetwritteninamodern JavaScriptframeworksuchasAngularJSorKnockout?
![Page 16: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/16.jpg)
Whatmakesagoodwidget?
1 ISOLATED– sotheywon’t interferewithotherwidgetsortherestofthepage
Canyourunmultiple copiesofthewidgetonapage?
2 EFFICIENT – sotheyloadquickly Doesthepagegetnoticeably slowerasyouaddwidgets?
3 SELF-CONTAINED– sothey’reeasytoreuse Doesthewidgetwork without specialpage elementssuchaselementID’s,scripts,andCSSreferences?
4 MODERN– sothey’reeasiertowriteandmaintain Is thewidgetwritteninamodern JavaScriptframeworksuchasAngularJSorKnockout?
5 CENTRALIZEDDEPLOYMENT– updateeverywidgetbydeploying tothesamespot
Can youupdateeverywidgetatonce?
![Page 17: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/17.jpg)
WidgetWrangler
• SmallopensourceJavaScriptFramework• Nodependenciesonanyotherscriptsorframeworks• WorkswithpopularJSframeworks(Angular,Knockout,jQuery,etc.)• Minimizesimpactontheoverallpagewhenseveralinstancesarepresent
<div><div ng-controller="main as vm">
<h1>Hello{{vm.space()}}{{vm.name}}!</h1>Who should I say hello to?<input type="text" ng-model="vm.name" />
</div><script type="text/javascript" src="pnp-ww.js“
ww-appName="HelloApp“ww-appType="Angular“ww-appScripts=
'[{"src": “~/angular.min.js", "priority":0},{"src": “~/script.js", "priority":1}]'>
</script></div>
AngularJSSample
![Page 18: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/18.jpg)
demo
JavaScriptWidgetshttp://bit.ly/ww-jq1- jQuerywidgethttp://bit.ly/ww-ng1- HelloWorldwidgetinAngularhttp://bit.ly/ww-ng2- WeatherwidgetinAngular
![Page 19: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/19.jpg)
WhatisAngularJS?
• Buildcomplexappsthatrunonawebpage
• MaintainedbyGoogle– agoodbetforsustainedsupport
• HTMLTemplateswith2-waydatabinding
• MVCpatternseparatescodefromDOMmanipulation– improvestestability
• AddsnewHTMLelementsandattributesforbuilding dynamicapplications
• Dependency InjectionandUnitTesting
• SimulatepagesandnavigationonasingleHTMLpage
• FlexibledatapresentationusingFilters
![Page 20: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/20.jpg)
AnatomyofanAngularJSApplication
View(HTMLwithBindings)
ControllermanipulatescopetocontroltheUI
Services
WebServices
SCOPE
Module
Directivesnewelementsand
attributes
Routesnavigationwithinsingle-
pageapp
WebPage
![Page 21: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/21.jpg)
CommonlyUsedAngularServices
$http HTTPcalls
$scopeAccesstoviewscope
$locationBrowserlocation
$log Loggingservice
$qPromises
$interval$timeout
Timerservices
Custom
![Page 22: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/22.jpg)
Microsurvey App
main.html
mainController.js
surveyService.js
spDataService.js
settingsController.js
settings.html
initU
I.js
Default.aspx
VIEWS
CONTROLLERS
SERVICES
![Page 23: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/23.jpg)
SharePointHostedApp
DragandDrop
Deployment
CentrallyManaged
demo• ListProvisioning• WebParts• CustomList
Forms
![Page 24: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/24.jpg)
OfficeDev PatternsandPractices
https://github.com/OfficeDev/PnP
OfficeDev PnPCoreLibrary(C#)
CSOM“15”
CSOM“16”
PowerShellCommands CDNManagerProvisioning
Samples
YourCode
SharePoint2013 SharePointOnline
![Page 25: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/25.jpg)
demo
WidgetsinSharePointFramework
SharePointHostedApp
DragandDrop
Deployment
CentrallyManaged
SharePointFramework
![Page 26: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/26.jpg)
ResourcesEndofFeatureFramework• http://bit.ly/NoFeatures
WidgetWrangler• http://bit.ly/ww-github
• http://bit.ly/ww-intro(includeslinkstowidgetsinPlunker)
• http://bit.ly/uSurvey
AngularJS• http://bit.ly/ng-Tutorial
• http://bit.ly/TSWeather
• http://bit.ly/ng-Pluralsight
SharePointRESTAPI’s• http://bit.ly/SPRestAPI
![Page 27: Future-Proof Development for SharePoint and SharePoint Onlinenellisconsultingllc.com/Resources... · Back Years of Development Guidance and Tools February 2015, REDMOND, WA The Microsoft](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee32ab4ad6a402d666d3616/html5/thumbnails/27.jpg)
AnInsightcompany
Thankyou.