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.