DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISE

1. DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS
FOR THE ENTERPRISE
Eric Shupps

3. ♡ DIAMOND AND PLATINUM SPONSORS ♡

4. @eshupps sharepointcowboywww.sharepointcowboy.com
slideshare.net/eshupps linkedin.com/in/eshupps
Eric Shupps
Office Servers & Services MVP

5. Introduction
Enablement
Design and Development
Deployment
Agenda

6. INTRODUCTION

7. Enterprises are fueling the SPFx rocket
PowerApps for
full-time devs &
Microsoft Graph
enabling them
Discussing
enterprise
development in
Microsoft 365
with Eric Shupps
The state of SPFx
with Andrew
Connell
Highlights of
Build 2018 and
SharePoint
Conference NA
2018
Microsoft Teams
provisioning with
Bob German
Dev tools that
make IT Pros
smarter with
Matthew
McDermott
Developing for
Office and
Microsoft Graph
with Bill Ayers
Microsoft Teams
on Microsoft
Graph with Nick
Kramer
SharePoint view
formatting and
PnP with Chris
Kent
PowerBI with
John White
M365 Dev Podcast – Top 10 Episode Downloads (Apr 2018 – Apr 2019)
http://www.m365devpodcast.com

8. Models
Full Trust
Coverage
Capability
Integration
Familiarity
Add-Ins
Contextual
PHA/SHA
Extensibility
Framework
X-Platform
Customizations
Modern
Azure
Flexible
SSO
Multi-Tenant
Deployment

9. Purpose
• Providea“pagesandparts”customizationmechanismthataddressesgapsintheadd-in
model
• Regainthecontextual functionalityofwebparts
• Givecustomerstheabilitytocreateintegratedmodernpageexperiencesinthecloud
• Transitiontoacompletelyclient-sideexecutionmodel withinthecorepageflow
• Extendout-of-the-boxelements,includingmenus,listitemsandbranding

10. Architecture
SharePoint/Office 365
Host Web
Page

11. Enterprise Challenges
• Vision
• Teamskills
• Toolsacquisition
• Solutiondesign,re-designandmigration
• Legacydependencies
• Cloudintegration
• Collaborativedevelopment
• Vendor support
• Platformandversiondisparities
• Automatedlifecyclemanagement(DevOps)

12. ENABLEMENT

13. Legacy
Windows Server
IIS
ASP.NET
SharePoint Server
Framework
.NET (C#/VB)
SharePoint Server OM
CAML/XOML
Languages and API’s
• Visual Studio
Tools

14. Modern
Browser
Server
Mobile
Framework
HTML, JavaScript (JQuery, Knockout, Angular, React, etc.)
CSOM, JSOM, REST, Office JS, Graph, OAuth
C#, VB, Java, PHP, Python, Ruby, Others
Languages and API’s
Visual Studio
VS Code
IDE of choice
Tools

15. Toolchain
TypeScript - JavaScript superset w/ typed objects, classes &extension
methods
Node.js - Web server and component packaging extensions
NPM – Packaging and module management utility
Gulp – Task runner and build automation
Yeoman – Project scaffolding generator
CDN – Content delivery network (or location) for hosting
source files
React – JavaScript library of UI components
Office Fabric – Office-centric set of React UI components

16. Skills Acquisition
Source: raywenderlich.com

17. Machine Configuration
• Windows
• Node.js
• NPM
• Gulp
• GitHub
• YeomanGenerator
• VSCode(or other)
• NVM(optional)
• Visual StudioExtension
• Mac
• Node.js
• NPM
• Gulp
• GitHub
• YeomanGenerator
• Homebrew(optional)
• NVM(optional)
• VSCode(or other)

18. Platform Configuration
• Developer Sites
• Workbench
• CorporateCatalog
• Site collection app catalog
• ContentDeliveryNetwork(or accessiblefilelocation)
• Apps(On-Premises)

19. Vision
• Whydowehavetolearnyetanother developmentmodel?
• Howlongisthisonegoingtolast?
• We’reMicrosoftdevelopers,whydowehavetolearnall thisNodestuff?
• Whycan’tI useVisual Studio?
• WhattheheckisthisGitstuff?
• TypeScript?Whatwhatthe[bleep] isthat?
• Mycodegoeswhere?
• Commandline?Seriously?Whatyear isthis?

20. DESIGN AND DEVELOPMENT

21. Models
SPFx
Cloud or OnPrem
Contextual
Integrated
Parts &
Extensions
Add-In
Cloud or OnPrem
Contextual
Unintegrated
Apps, SPA's, Self-
Contained
Azure AD
Cloud
SSO
Full Stack
LOB
Full Trust
OnPrem
Full Trust
SSOM
Legacy
Solution

22. Legacy Redesign
Web Parts SPFx Web Part
Application Pages SPFx Web Part / Add-In Page
Timer Jobs Azure Functions / Web Jobs
Provisioning Add-In
Branding SPFx Application Customizer
Event Receivers Webhooks

23. Solution Components
Web Part
• In-context
page
component
• Customizable
property
pane
• Connectable
• Scope: Page
Application
Customizer
• Script
injection
onto pages
• Defined
DOM
element
identifiers
• Scope: Site
Command Set
• Modify list
and item
menus
• Custom
dialogs
• Scope: List
Field
Customizer
• Change
display
options for
field
elements
• Scope: List
Add-Ins Azure

24. Legacy Dependencies
ERP
SaaS
LOB
Third-Party
VPN
Constrained
Networks
Bandwidth
Gateways
Directory
Permissions
Groups
MFA
Databases
Web Services
Applications
Data Auth
SystemsAccess

25. Vendor Support
• Visual Studio
• .NET
• VB/C#
• TFS/VSTS/Azure DevOps
• Azure
• VS Code
• TypeScript
• Yeoman Generator
• SharePoint/O365
• Node
• NPM
• Gulp
• NVM
• JavaScript
• React
• Knockout
• Yeoman
• PnP

26. Security
Ifyouwantauthenticatedcode,with
verifieddependencies,signedand
supportedbyreputableentities,with
legallybindingcommercial licensing
agreements…
…THATDOGWON’THUNT!

27. LIFECYCLE MANAGEMENT

28. Interoperability
SP 2016
(FP2)
SPO
SP 2019
Web Parts
Application
Customizers
Field Customizers
Command Sets
Web Parts

29. Version Management
• Definefeaturesupportbaseline
• Branchsolutionsaccordingtobaselineor
targetenvironment
• Leveragecommonutilityclassesand
librarieswherever possible
• Applylocal updatesonlytomaster,resolve
dependencies,branchfrommaster
SPFx
On-
Premises
2016
🚫
🚫
🚫
🚫
v1.1
2019
🚫
🚫
v1.4
Cloud
Current
v1.7
v1.5
v1.4
v1.2
v1.1

30. Updates
• Local vs.Global
• npm outdated
• npm install package@version –save
• o365 spfx project upgrade –toVersion [version]

31. Automated Lifecycle Management
• IDEintegrationwithDevOpstoolingandservices
• Optimizationofbuilddependencies(npminstall)
• Controlledbuildpipeline
• Packageconfiguration(dev,test,staging,production)
• Environmenttargeting
• Versioneddeployment
Commit Build Package Deploy

32. DEPLOYMENT

33. Packaging
• Output of build tasks is a package file (similar to classic WSP)
• Controlled by package-solution.json file in project
• All assets packaged into .sppkg file if “includeClientSideAssets” = true.
• Use “skipFeatureDeployment” for tenant-wide deployment
• If CDN enabled, hosting of assets is automatic (otherwise served from App Catalog site collection)
• Change behavior by setting “includeClientSideAssets” = false

34. Packaging Commands
• gulp bundle --ship
• gulp package-solution --ship

35. Feature Framework
• DeclarativeassetscanbedeployedtositesaspartofanSPFxproject
• Fields
• Site Columns
• Content Types
• List Instances
• Usesthesame“Elements”structureaslegacysolutionpackages
• Assetsareprovisionedwhensolution(“app”) isinstalled
…andretractedwhenit’sremoved!

36. Office 365 CDN
• EnablesdeliveryofSPFxassetsfromanO365library
• SupportsCSS,EOT,GIF,ICO,JPEG,JS,MAP,PNG,SVG,TTFandWOFFextensions
• Requires*/CLIENTSIDEASSETSorigin*
• Automaticallyplacesassetsintocorrectlocationsfor tenant-wideaccessibility
• * Introduced in SPFx v1.4; If enabled previously, disable and re-enable. Not compatible with on-premises SP 2016 FP2.

37. CDN Commands
• Set-SPOTenantCdnEnabled –CdnType Public
• Get-SPOTenantCdnEnabled
• Get-SPOTenantCdnOrigins
• Get-SPOTenantCdnPolicies
• NOTE: Provisioning can take 15+ minutes to complete

38. Visual Studio Extension
• Custom Visual Studio VSIX project and item templates
• Parameters and settings configured in Windows Forms
• Overlays but does not replace the native Yeoman Generator for SharePoint Framework
• Ability to customize command line for advanced usage scenarios
• Automated project scaffolding with standard VS and MS Build file structures
• One-click F5 debug experience plus integration with the Task Runner Explorer

39. VS Extension Usage
13k

40. DEMO

41. Resources
• Slides: http://www.slideshare.net/eshupps
• Code:https://www.github.com/eshupps
• Samples:https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples
• Docs:https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-
overview
• WebPart Examples:https://github.com/SharePoint/sp-dev-fx-webparts
• Extension Examples:https://github.com/SharePoint/sp-dev-fx-extensions
• Visual Studio Extension:http://bit.ly/2Uoz2q7

42. thank you
questions?