The document discusses transitioning custom SharePoint components to the SharePoint Framework (SPFx). It provides an overview of SPFx and demonstrates how to build various types of extensions and components using SPFx, including web parts, provisioning templates, workflows, and accessing data. It also discusses other modern tools that can be used alongside SPFx, such as PowerApps, Microsoft Flow, and Azure Functions. The conclusion encourages developers to leverage the new tools available to build modern solutions for SharePoint that will have improved performance, security, and developer experience compared to previous methods.

1. Migrate your custom components to
the SharePoint Framework
SharePoint Fest DC 2019
Vincent Biret

2. Passionate about technologies, development and community
Vincent Biret
@baywet
bit.ly/vince365
Microsoft Office Dev MVP
Azure and Office 365 developer @ 2toLead

3. SharePoint always appealed to a vast SharePoint audience and the mordernization of
tooling means it is time for changes in approaches.
Targeted audience
New to SharePoint DevSeasoned SharePoint
developer
Project manager Decision Maker

4. Agenda
•Introduction
•Our scenario
•About Data
•About Processes
•About Users
•Conclusion

5. Ready?

6. Our scenario

7. The MaintainIt Company
« We locate, document and fix
infrastructure defects in the
country »
S.L, CEO

8. Mobile App
to document
defects
Our solution
Seb, the CEO has tasked us with delivering a comprehensive and modern solution
List to store
information
Let our workers
know about the
new defects
Display the
information.
Line of business
intelligence
Provide
user-centric
insights

9. Data Entry

10. SharePoint designer has been the go to solution for data entry, it’s now time to transition
In the past

11. Prefer PowerApps for more complex corporate apps and Forms for simple forms or you
want to expose it to external users
Entry forms/simple apps

12. PowerApps Form
Demo

13. Provisioning

14. You currently four options, limited feature, code, PNP template or site script in preview.
Microsoft is working on filling the gaps around those scenarios.
Provisioning options
• Most SPFX samples include code provisioning
• SPFX provides limited « feature framework » support for provisioning
• Pattern and Practices has made awesome work
• PnP Provisioning far better than code
• Site script to be executed based on templates
• Limited functionalities, can call a flow
• which can call a function and apply a PNP template

15. The provisioning template for Defect App, and the site script for Construction
Community
Demo

16. Business Process
Automation

17. We built powerfull solutions using SharePoint Designer, we now have access to better
tools
In the past

18. Azure Functions is also a valid approach for smaller processes, Flow is the most user
friendly, Logic Apps the most complete and Functions are simple for developers
Workflows
Azure Logic Apps

19. Flow workflow
Demo

20. Displaying
information

21. The options you get
• Column formatters
• JSON based definition
• Limited
• No UI yet (OOTB)
• Field Customizers
• Part of SPFX
• Custom webpart…

22. Column formatter, Field customizer
Demos

23. Batch jobs
& Line of business
intelligence

24. Azure functions are becoming Microsoft’s default answer to backend processing for cloud
enabled solutions
Azure functions

25. Azure function computing
Demo

26. User centric
information

27. Power BI focuses on… BI and analytics, if you want more custom capabilities, you can
build components using the SharePoint framework
Your options

28. Microsoft has re-invented the extensibility model multiple times trying to find a solution
that scales
Our history
Full Trust Sandbox Add-ins (SP) Add-ins (PH)
Execution Server Side Server Side Front End Server Side out of SP
Context User & Service User Only User Only User & App
Bad code Impacts the farm Impacts the solution Impacts the user Impacts the solution
Deployment Farm downtime Solution downtime Solution downtime Solution downtime
Unit tests Hard Hard Better Better
APIs SSOM/JSOM SSOM/JSOM JSOM/REST CSOM/REST
Batch jobs Timer Jobs No No Your own
Surprise Throttling, API limitations Iframes Iframes

29. The situation generally left developers with gaps to fill and created a lot of frustration
SharePoint Add-ins/Sandbox

30. Some developers felt the winds turning and started gearing for that as well as changing
their approach.
Workarounds
•Content Script Editor
Webpart
•Display templates
•JSLink
•ScriptLink
•PowerShell

31. The Short Version
• New Tools!
• Front End only!
• Local And Remote Workbench
• Closed source relying on open source
• First and third party

32. The product team is working to get a good on premises story so you can develop
solutions working on both environments with little to no changes
On Prem 2016 feature pack 2
•Brings SPFX webparts support
•Few limitations
•Custom API /MS Graph access
•Version 1.1 of SPFX
•No application extensions

33. To start new projects for SharePoint 2019 use the 1.7.0 generator
On Prem 2019 RTM
•Hosts version 1.4.0
•Modern pages
•SPFX Webparts
• (without AAD/Graph Client, connected props….)
•Application customizer
•Command Set customizer
•Field customizer

34. The webpart project
Demo

35. Accessing data

36. Integration with house made or third party systems was one of the key requirements in
building SPFX
Multiple API’s
• SharePoint REST API’s
• TypeScript libraries available, use those! (@pnp/sp, @types/SharePoint)
• Microsoft Graph
• Get access to much more data
• (no demo on that today, too much content)
• (Microsoft working on improving auth story)
• Or your own API (next slide)

37. Think of event receivers as ancestors of the modern webhooks, they should feel familiar
to SharePoint developers.
Reacting on data events
• We used to have Event Receivers
• SP Provider Hosted Add-ins have RER’s (same thing
over HTTP)
• SharePoint API /MS Graph provides webhooks
support
• GA: Better integration between Azure Functions and
Microsoft Graph

38. Getting Defect Data
Demo

39. Conclusion

40. Things are going really fast demonstrating Microsoft’s desire to close the gaps with on
premises solutions and provide modern solutions at every level
Modern tools reference
Purpose Workflows LOB Batch Events
Old tool SP Designer Front end
Components
TimerJob Event Receivers
New tool Flow/
Logic Apps
SPFX Azure Function RER’s
WebHooks
Purpose Augmentations Provisioning Branding Data Forms …
Old tool JSLink/ScriptLink/
Custom Actions
Feature Framework Design manager SSOM/
JSOM
InfoPath …
New tool SPFX Extensions:
Application,
Command Set, Field
customizers,
Column Formatting
PnP Provisioning / Site
Scripts
Custom Themes CSOM/
PNP-Core/
REST/
Graph/
Custom API
PowerApps/
Forms
…
We’re still
missing
custom page
layouts 

41. Conclusion
• We have a modern tooling
• The SharePoint Framework is one item of our gear
• Add-ins are still relevant in some scenarios
• Leverage other tools to have a full spectrum
• SharePoint dev cost will decrease because bigger community
• SharePoint devs’ life just became better
• Happy coding 

42. Come join me for deeper dives on Microsoft Graph, Azure Functions, and provisioning
To go further – additional sessions
• Tomorrow 1:20 PM: 154AB
• AZR202 - Azure Functions: What’s New In V2 & Getting Started
• Friday 10:40 AM: 154AB
• Automating provisioning For Your Digital Workplace: With Azure Durable
Functions & Microsoft Graph

43. Bit.ly/vince365 @baywet slideshare.net/VincentBIRET
Thanks!/Questions?
Vincent Biret
Office 365 and Azure
Developer, 2toLead
@baywet
Bit.ly/vince365