w: rencore.com | e: info@rencore.com | 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