Future-Proof Development for SharePoint and SharePoint...
Transcript of Future-Proof Development for SharePoint and SharePoint...
AnInsightcompany
BobGermanPrincipalArchitect- BlueMetal
Future-ProofDevelopmentforSharePointandSharePointOnline
MicrosoftismodernizingtheSharePointUI!
Prediction:Overthenextfewyears,MicrosoftwillchangetheentireSharePointuserexperiencetomeettheneedsofamodern,mobileworkforce.
It’slikeupgradingacar,onepartatatime– whileyou’redrivingitcrosscountry!
WebPartsO365– mid2016
NewPagesO365– late2016
SP2016 FeaturePackearly2017
WebEra CloudandDeviceEra
TooManySharePointDevelopmentModels!
FarmSolutions
SandboxedSolutions
Add-inModel
ContentEditor/
ScriptEditor
SharePointFramework
What’sNext??
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
FarmSolutions
SandboxedSolutions
App Add-inModel
SharePointFramework
Neverinthecloud Deprecated Optimizedfor
storefrontDoesn’texist
yet…
Toomanydevelopmentmodels…
Q:Whatdotheyallhaveincommon?
FarmSolutions
SandboxedSolutions
App Add-inModel
SharePointFramework
Neverinthecloud Deprecated Optimizedfor
storefrontDoesn’texist
yet…
Toomanydevelopmentmodels…
Q:Whatdotheyallhaveincommon?A:HTML,JavaScript,andSharePointAPI’s
Widgets• CommonlyusedontheInternetcalled”WebWidgets”,”Plugins”,”Embeds”,etc.• OfficePnPteamcallsthem”App Add-inScriptParts”• It’sjustacleverpieceofHTMLandJavascriptthatactslikeawebpart• WhynotusethesamepatterninSharePoint?
Widgetstotherescue
• Repackage/refactorinsteadofrewriting• Storecodecentrallyforeasyupdatestoallsites• NoIFrames!
Onewidget…
ContentEditorWeb
Part
SharePointAdd-in
SharePointPageorForm
Externalwebpage
…packagedmanyways
WidgetsinAction:BlueMetalIntranet
SharePointOnlineusingLightBrandingandWidgets
1. MyClients&ProjectsList
2. NewsFeed
3. TabbedNewHireandAnniversary
Carousel
4. TabbedCalendars/Discussions
5. TwitterFeed
Widgetsvs.Add-inModel
Add-inModels RemoteProvisioning
Complete accesstosite(e.g.Branding)Direct accesstopage(e.g.ConnectedWebParts)
EaseofData AccessEnd-user additions/modificationsProtection fromUntrustedCodeStorefront DistributionCentralizedDistribution andManagement
Whatmakesagoodwidget?
1 ISOLATED– sotheywon’t interferewithotherwidgetsortherestofthepage
Canyourunmultiple copiesofthewidgetonapage?
Whatmakesagoodwidget?
1 ISOLATED– sotheywon’t interferewithotherwidgetsortherestofthepage
Canyourunmultiple copiesofthewidgetonapage?
2 EFFICIENT – sotheyloadquickly Doesthepagegetnoticeably slowerasyouaddwidgets?
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?
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?
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?
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
demo
JavaScriptWidgetshttp://bit.ly/ww-jq1- jQuerywidgethttp://bit.ly/ww-ng1- HelloWorldwidgetinAngularhttp://bit.ly/ww-ng2- WeatherwidgetinAngular
WhatisAngularJS?
• Buildcomplexappsthatrunonawebpage
• MaintainedbyGoogle– agoodbetforsustainedsupport
• HTMLTemplateswith2-waydatabinding
• MVCpatternseparatescodefromDOMmanipulation– improvestestability
• AddsnewHTMLelementsandattributesforbuilding dynamicapplications
• Dependency InjectionandUnitTesting
• SimulatepagesandnavigationonasingleHTMLpage
• FlexibledatapresentationusingFilters
AnatomyofanAngularJSApplication
View(HTMLwithBindings)
ControllermanipulatescopetocontroltheUI
Services
WebServices
SCOPE
Module
Directivesnewelementsand
attributes
Routesnavigationwithinsingle-
pageapp
WebPage
CommonlyUsedAngularServices
$http HTTPcalls
$scopeAccesstoviewscope
$locationBrowserlocation
$log Loggingservice
$qPromises
$interval$timeout
Timerservices
Custom
Microsurvey App
main.html
mainController.js
surveyService.js
spDataService.js
settingsController.js
settings.html
initU
I.js
Default.aspx
VIEWS
CONTROLLERS
SERVICES
SharePointHostedApp
DragandDrop
Deployment
CentrallyManaged
demo• ListProvisioning• WebParts• CustomList
Forms
OfficeDev PatternsandPractices
https://github.com/OfficeDev/PnP
OfficeDev PnPCoreLibrary(C#)
CSOM“15”
CSOM“16”
PowerShellCommands CDNManagerProvisioning
Samples
YourCode
SharePoint2013 SharePointOnline
demo
WidgetsinSharePointFramework
SharePointHostedApp
DragandDrop
Deployment
CentrallyManaged
SharePointFramework
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
AnInsightcompany
Thankyou.