The document outlines an introduction to the SharePoint Framework (SPFx) and best practices for deploying solutions, discussing web parts, extensions, and data access through various methods. It emphasizes the use of Office UI Fabric for modern and responsive design and highlights the architecture and deployment processes including the SPFx solution architecture. Future developments and additional resources for further learning are also presented.

2. SharePoint Framework get
started and best practices
GIUSEPPE MARCHI - @PEPPEDOTNET
GIULIANO DE LUCA - @GIULEON
WPC2017 2

3. Agenda
• SharePoint Framework (SPFx) intro
• Toolchain
• WebParts
• Extensions
• Data access
• Office UI Fabric integration
• Architecture and deployment process
• Roadmap: a look to the future
WPC2017 3

4. Hi! My name is Peppe!
Co-founder of Dev4Side S.r.l.
8 years Microsoft SharePoint MVP
Speaker in Microsoft communities events in Italy
"SharePointer" from 2005
Father of www.peppedotnet.it 
Office 365 advisor for www.office365italia.com
Author of the book "Pocket C#" from Apogeo
One of the top SharePoint and Office 365 influencers (for 2014 and 2015)
WPC2017 4

5. Hi! My name is Giuliano!
Software Engineer
Blogger: www.delucagiuliano.com
Speaker in various SharePoint Saturday
Twitter: @giuleon
GitHub: https://github.com/giuleon
Contributor for SPFx on Microsoft GitHub
WPC2017 5

6. SharePoint
Framework intro
WELCOME TO THE NEW WAY FOR CUSTOMIZING
SHAREPOINT ON-PREM AND ONLINE
WPC2017 6

7. What is it?
WPC2017 7
Already available on
SharePoint Online and
also for SharePoint
2016*!

8. What’s a modern page?
WPC2017 8

9. Is all SPOnline development in Javascript?
WPC2017 9
No
In similar ways as with SharePoint Add-in
model, server side development is needed
for back end services
SharePoint Framework concentrates on user
interface, not on fundamentals around the
API usage

10. Toolchain
TOOLING
Typescript
Node.js
Yeoman
Gulp
WebPack
Visual Studio (Code)
FRAMEWORKS (CHOOSE YOURS)
React
Angular.js
Knockout
Vue.js
WPC2017 10

11. What I can do with SPFx?
WEBPARTS EXTENSIONS
WPC2017 11
Application customizers
Field customizers
Command Sets

12. DEMO  yo @microsoft/sharepoint
How to create your first SPFx web part
WPC2017 12

13. Data access
WPC2017 13

14. You have two options for data access:
WPC2017 14
Call external services
• You can build API for custom activities
• You need to take care about auth flow
• You can call Graph APIs*
Interact with SharePoint
• Read/write from SharePoint lists
• The classic behavior of a webpart
• Use SharePoint REST APIs
• Use PNP Core Js library

15. DEMO  npm install pnp-js-core --save
How to quickly read/update SharePoint list data
WPC2017 15

16. Office UI Fabric
integration
YOUR WEBPART CAN LOOK GOOD EASLY!
WPC2017 16

17. Your webpart should look modern,
responsive and with a beautiful UI!
WPC2017 17
"KEEP CALM AND
USE OFFICE UI
FABRIC“
- SATYA NADELLA
OHH NOOO ! I’M
NOT A DESIGNERWAIT A MINUTE
GIULIANO, I NEVER
SAID THIS….

18. What is Office UI Fabric?
Front-End Framework
Responsive and mobile-first
Office 365 User Experience
Support to React, Angular, JS and IOS
Many components available
Open source
WPC2017 18

19. A lot of components ready-to-use
WPC2017 19

20. ~1500 icons
WPC2017 20

21. And it’s all open source
WPC2017 21
Fabric JS
Lightweight and
simple
components in
vanilla Javascript
Fabric IOS
Native iOS styling
and components
written in Swift
AngularJS
Community-driven
project for Angular
apps
React
Fabric’s robust,
up-to-date
components are
built with React

22. DEMO  npm install office-ui-fabric --save
How to give a style to your web part
WPC2017 22

23. Architecture and
deployment process
WHERE MY FILES WILL BE EXECUTED?
HOW CAN I DISTRIBUTE MY SOLUTION?
WPC2017 23

24. SPFx solution architecture
WPC2017 24
Azure CDN
SharePoint
Online CDN

25. SharePoint Online is your CDN!
WPC2017 25
https://publiccdn.sharepointonline.com/<tenant host name>/<ID of the public CDN origin>/<sub-path under the origin>/

26. Security considerations
WPC2017 26
SPFx solutions
are running in
the context of
user

27. DEMO  gulp bundle --ship
How you can automate SPFx solution deployment
WPC2017 27

28. Roadmap
TAKE A LOOK TO THE FUTURE
WPC2017 28

29. SPFx roadmap
Site Collection App Catalog to allow for scoped deployment
Assets included in deployment packages
Site Designs
More Microsoft Graph support
Groupify APIs & Hub site APIs
WPC2017 29

30. Q&A Domande e risposte
WPC2017 30

31. Corsi
consigliati
• MOCXXXXX
• MOCXXXXX
• MOCXXXXX
• OECXXX
WPC2017 31

32. Contatti
OverNet Education
Info@OverNetEducation.it
www.OverNetEducation.it
Rozzano (MI) +39 02 365738
Bologna +39 051 269911
www.wpc-overneteducation.it
ROZZANO (MI) – BOLOGNA
ROMA – NAPOLI – GENOVA
TORINO
WPC2017 32