The SharePoint Framework provides a modern development platform for cloud-first solutions using popular web technologies. But integrating the new model in a structured enterprise development environment can be quite challenging, from toolset integration to application lifecycle maintenance, SPFx creates a number of challenges that can inhibit adoption. In this session you will learn how to overcome these challenges by using popular Microsoft tools such as Visual Studio and Team Foundation Services to deliver well-managed projects that plug easily into existing enterprise development patterns.

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

3. Introduction
Enablement
Design and Development
Lifecycle Management
Deployment

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

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

11. • 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

12. 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

13. Source: raywenderlich.com

14. • Node.js
• NPM
• Gulp
• GitHub
• Yeoman Generator
• VS Code (or other)
• NVM (optional)
• Visual Studio Extension
• Node.js
• NPM
• Gulp
• GitHub
• Yeoman Generator
• Homebrew (optional)
• NVM (optional)
• VS Code (or other)

15. • Developer Sites
• Workbench
• Corporate Catalog
• Site collection app catalog
• Content Delivery Network (or accessible file location)
• Apps (On-Premises)

18. 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

19. 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

20. 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

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

22. 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

23. THAT DOG
WON’T HUNT!

25. SP 2016
(FP2)
SPO
SP 2019

26. SPFx
On-
Premises
2016
🚫
🚫
🚫
🚫
v1.1
2019
🚫
🚫
v1.4
Cloud
Current
v1.7
v1.5
v1.4
v1.2
v1.1

27. npm outdated
npm install package@version –save
o365 spfx project upgrade –toVersion [version]

28. Commit Build Package Deploy

30. package-solution.json
.sppkg
• Change behavior by setting “includeClientSideAssets” = false

31. gulp bundle --ship
gulp package-solution --ship

32. • Fields
• Site Columns
• Content Types
• List Instances

33. * Introduced in SPFx v1.4; If enabled previously, disable and re-enable. Not
compatible with on-premises SP 2016 FP2.

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

36. http://www.slideshare.net/eshupps
https://www.github.com/eshupps
https://github.com/SharePoint/sp-dev-fx-
extensions/tree/master/samples
https://docs.microsoft.com/en-
us/sharepoint/dev/spfx/sharepoint-framework-
overview
https://github.com/SharePoint/sp-
dev-fx-webparts
https://github.com/SharePoint/sp-
dev-fx-extensions