w: rencore.com | e: [email protected] | t: @rencoreab
Manage Customization Risk and Save on Maintenance Costs!
Customization governance, transformation and risk prevention for SharePoint & Office365
Building SharePoint Framework solutionsdeep dive
One generator to rule them all
rencore.com
@microsoft/generator-sharepoint
Online only
@latest
latest features
≥ SP2016 FP2
@1.1
subset
Building an SPFx solution over time
SPFx v1.3.2
SPFx v1.4
SPFx v1.5
SPFx v1.6
SPFx v1.7
rencore.com
Upgrading projects
rencore.com
Create new & move
Beware of IDs
Update existing
Update all version references
Mind new project structure
Beware of npm outdated
Development environment
Install SPFx Yeoman generator locally
• npm i yo -g
• npm i @microsoft/generator-sharepoint
• yo @microsoft/sharepoint
• npm i @microsoft/generator-sharepoint -D
rencore.com
ALM
rencore.com
Dev UAT Prod
ALM ingredients
rencore.com
• Package management APIs
• Promote package through stages
Contoso intranet 9:00am
rencore.com
0 2000 4000 6000 8000 10000 12000
spfx-weather-webpart-weatherstrings_en-
us_e7b9950840f4742a1ba71b7cf9b5fcae.js
weather.bundle_ea8f663450667f0760f7b54c6fa15c06.js
9:00am
Contoso intranet 9:10am
rencore.com
0 2000 4000 6000 8000 10000 12000
spfx-weather-webpart-weatherstrings_en-
us_e7b9950840f4742a1ba71b7cf9b5fcae.js
weather.bundle_ea8f663450667f0760f7b54c6fa15c06.js
9:00am 9:10am
How your browser loads SPFx solutions
SharePoint Service
How your browser loads SPFx solutions
SharePoint Service
Optimize serving your files for performance
rencore.com
• Set far-future expiration (eg. 1 year)
• Allow proxies to cache
• Use HTTP/2
• Enable dynamic compression
Optimize serving your files for performance
rencore.com
Hosting
CapabilityOffice 365 Public CDN Azure Blob Storage Azure CDN
Expiration 1 hour Configurable Configurable
Allows proxies to cache No Configurable Configurable
Use HTTP/2 Yes No Configurable
Dynamic compression No Manual Configurable
Costs 0 € €€
Working with JS libraries
Working with Office UI Fabric
Next steps
• Check out official documentation at
aka.ms/spfx-docs
• Follow @OfficeDev to keep up with latest news
• Share your experience & feedback at
aka.ms/spfx-feedback
rencore.com