36
17-18 March, 2018 · Beijing 陆 虎 [email protected] Senior Software Engineer SharePoint Framework 最佳 实 践
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
17-18 March, 2018 · Beijing
Senior Software Engineer
SharePoint Framework最佳实践
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Session objectives and takeaways
Session objectives:
Get to know the best practices around:
▪ Manage SPFx solutions
▪ Debug components
▪ Add External libraries support
▪ Upgrade SPFx solutions
Session takeaways
SharePoint Framework client-side development tools helps you in managing your developer environment and also gives you an edge in building optimized and performant web parts and extensions.
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
IIS Express
Project Templates
SharePoint Toolchain
SharePoint server side
SharePoint client side
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
npm i @microsoft/generator-sharepoint -g
Ship?
SharePoint Framework Build Flow
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Development Environment
▪ Tools on the host
▪ Extra effort to switch betweenthe different versions of SPFx
▪ Requires OS admin to installtooling
▪ No additional software
▪ Tools on the host
▪ Isolate SPFx dependencies
▪ Speed up developer environment setup
▪ Easy to keep up-to-date
▪ Tools in the VM
▪ Easy to work with differentversions of SPFx
▪ Large VMs
▪ Requires maintaining full OS
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
SharePoint Yeoman Generator
@microsoft/generator-sharepoint
▪ Global package
▪ Applies to all SPFx solutions
▪ Generator upgrade affects component creation for all SPFx solutions
▪ Local dev dependency
▪ Specific to that SPFx solution
▪ Generator upgrade affects component creation for specific SPFx solution
npm i @microsoft/generator-sharepoint -g npm i @microsoft/generator-sharepoint –-save-dev
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
SharePoint On-premises and SharePoint Online
▪ npm i @microsoft/[email protected]
▪ Supports:
▪ SharePoint 2016 Feature Pack 2
▪ SharePoint Online
▪ npm i @microsoft/generator-sharepoint
▪ Supports:
▪ SharePoint Online only
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Multiple Components
Include multiple components in a single package
Just execute:
▪ yo @microsoft/sharepoint
Understand how components get bundled
▪ config\config.json
Understand implications of multiple frameworks
SPFx version applies to all components
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Code Editors
Open source code editor
Windows, Mac and Linux
Built-in support for JavaScript, TypeScript and Node.js
Powered by rich ecosystem of extensions for Visual Studio Code
▪ Extensions for other languages
▪ Debugger extensions
▪ Source code repository extensions
▪ And m e…
Fully featured IDE
Server-side development with .NET and NodeJS (along with Windows, Android and iOS development)
Rich debugging, profiling, test tools
Powered by rich ecosystem of Visual Studio extensions
▪ Well established ISVs delivering extensions in the Visual Studio marketplace
Community-driven SPFx extensionPreferred SPFx code editor
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
JavaScript Frameworks
Templating Frameworks Application Frameworks
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Debugging SPFx components
SharePoint Workbench▪ Local
▪ Hosted
Gulp tasks▪ gulp serve
▪ gulp --tasks
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Debugging code
Browsers▪ Developer Console
Visual Studio Code▪ Chrome Debugger Extension
▪ Edge Debugger Extension
Support for:
▪ Breakpoints
▪ Watch variables
▪ Step into/over
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Writing conditional code
Global constants
Uses Webpack DefinePlugin
Different behaviors between development and release builds
Available constantsDEBUG
UNIT_TEST
..and more internal constants
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Custom gulp tasks
Define custom gulp tasks in gulpfile.js: build.subtask and build.task
let helloWorldSubtask = build.subTask('log-hello-world-subtask', function(gulp, buildOptions, done) {return gulp.src('images/*.png')
.pipe(gulp.dest('public'));})
let helloWorldTask = build.task('hello-world', helloWorldSubtask);
gulp hello-world
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Extend webpack configuration
Define your webpack loaders in gulpfile.js
npm i --save markdown-loader
build.configureWebpack.mergeConfig({additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.rules.push({
test: /\.md$/,use: [{ loader: 'html-loader’ }, { loader: 'markdown-loader’ }]
});return generatedConfiguration;
}});
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Component bundles
Components into a single .js file
Loaded on demand by SharePoint
Choose between:
▪ One bundle per component
▪ One bundle multiple components
Dependencies are optional
Do not include dependencies in your bundle. Keep it small and simple!
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
JavaScript Libraries
Defines code modules
Asynchronous by nature
Has numerous benefits to:▪ Performance improvements
▪ Smaller JavaScript files
▪ Load them only when needed
▪ Define dependencies per module
▪ And m e….
No modules
Synchronous by nature
Exists from early days
SPFx supports loading both module and non-modules scripts. Modules preferred.
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Loading Modules
"externals": {
"jquery":"node_modules/jquery/dist/jquery.min.js“"jqueryui":"node_modules/jqueryui/jquery-ui.min.js"
}
If you have typings:
import * as myJquery from “jquery”
If you don’t have typings:
require(“jquery”)
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Loading Non-modules
"externals": {"jquery": {"path": "https://code.jquery.com/jquery-2.1.1.min.js","globalName": "jQuery"
},"simpleWeather": {"path": "https://cdnjs.com/ajax/libs/simpleWeather/jquery.simpleWeather.min.js","globalName": "jQuery","globalDependencies": ["jquery"]
}}
If you have typings:
Import * as myJquery from “jquery”
If you don’t have typings:
require(“simpleWeather”)
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Office UI Fabric
All depending on the Core, all open source
Fabric Core
Core elements of the design language including icons, colors, type, and the grid
Fabric React
Robust, up-to-date components built with the React framework.
Fabric JS
Simple, visuals-focused components that you can extend, rework, and build on.
ngFabric
Community-driven project to build components for Angular-based apps.
Fabric iOS
Native Swift colors, type ramp, and components for building iOS apps.
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Developer Design goals
Reliably consume Fabric Core and Fabric React in their solutions
No conflicts with Microsoft
Customize and override the styles, designs, and components
If using non-react projects, use Fabric core styles to build SPFxcomponents
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
SharePoint Office UI Fabric Core Styles
Animations | Colors | Layout | Typography
Fabric Core Styles support in SPFx
Snapshot of styles used in SharePoint
npm i @microsoft/sp-office-ui-fabric-core --save
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Working with CSS in SPFx
Use CSS Modules
Avoid using IDs
SASS over plain CSS markup
Use Fabric SASS Mixins
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Fabric Core: Using SASS Mixins
@import ‘~sp-office-ui-fabric-core/dist/sass/References.scss';
.helloWorld {.container {
max-width: 700px;margin: 0px auto;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {@include ms-Grid-row;padding: 20px;background: $ms-color-neutralSecondary;color: $ms-color-white;
}
.group {@include ms-Grid-col;@include ms-lg10;@include ms-xl8;@include ms-xlPush2;@include ms-lgPush1;
}
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Fabric React: Using SASS Mixins
@import ‘~office-ui-fabric-react/dist/sass/Fabric.scss';
.helloWorld {.container {
max-width: 700px;margin: 0px auto;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {@include ms-Grid-row;padding: 20px;background: $ms-color-neutralSecondary;color: $ms-color-white;
}
.group {@include ms-Grid-col;@include ms-lg10;@include ms-xl8;@include ms-xlPush2;@include ms-lgPush1;
}
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Design Great Web Parts
Responsive
Leverage the property pane
Support touch interactions
Supports theming
Accessible▪ Keyboard navigation
▪ Screen reader navigation
▪ Alt text for images
▪ High contrast mode
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
JSOM
• Introduced in SP2010
• Mimics CSOM
• Works with delegates
• Does not support promises
• Not being invested in anymore
Raw REST
• The same across technology stacks
• Easy for GET requests
• Complex for non-GET requests
• Evergreen
HttpClient
• SPHttpClient
• GraphHttpClient
• Easy for all kinds of requests
• Evergreen
PnP JS Core
• Fluent API
• Works natively with Promises
• Open-source community-driven initiative
Characteristics
Coverage
Ease of use
Future-proof
Options to access SharePoint data from SPFx
Excellent Excellent FairFair
Moderate Moderate+ EasyHard
!
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Updating SPFx Packages
npm outdated
Not applicable for SharePoint on-premises
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Updating SPFx Packages
Update version numbers to the latest
Not applicable for SharePoint on-premises
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Updating SPFx Packages
rm –rf node_modules [or] rd /s /q node_modules
npm install
gulp clean
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
Updating generator-sharepoint
npm outdated
Update package.json
npm install
npm outdated -g
npm install @microsoft/generator-sharepoint@latest -g
npm ls @microsoft/generator-sharepoint –g --depth=0
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
It doesn’t end here
Learn used technologies – Web stack tooling▪ Install node.js and cmd tooling for testing web stack development on your computer
▪ Get familiar with Visual Studio Code
Learn JavaScript Framework(s)▪ Templating frameworks - knockout, handlebars, react etc.
▪ Application frameworks – angular, vue.js, ember etc.
▪ Get understanding on how they can be used and what the benefits are of using them
Learn Office UI Fabric usage▪ Office UI Fabric Core
▪ Office UI Fabric React
Lig
ht B
lue
R0 G
188 B
242
Gre
en
R16 G
124 B
16
Red
R232 G
17 B
35
Mag
en
taR
180 G
0 B
158
Pu
rple
R92 G
45 B
145
Blu
eR
0 G
120 B
215
Teal
R0 G
130 B
114
Yello
wR
255 G
185 B
0
Ora
ng
eR
216 G
59 B
1
Lig
ht Y
ello
wR
255 G
241 B
0Lig
ht O
ran
ge
R255 G
140 B
0Lig
ht M
ag
en
taR
227 G
0 B
140
Lig
ht P
urp
leR
180 G
160 B
255
Lig
ht T
eal
R0 G
178 B
148
Lig
ht G
reen
R186 G
216 B
10
Dark
Red
R168 G
0 B
0D
ark
Mag
en
ta
R92 G
0 B
92
Dark
Pu
rple
R50 G
20 B
90
Mid
Blu
eR
0 G
24 B
143
Dark
Teal
R0 G
75 B
80
Dark
Gre
en
R0 G
75 B
28
Dark
Blu
eR
0 G
32 B
80
Mid
Gra
yR
115 G
115 B
115
Dark
Gra
yR
80 G
80 B
80
Ric
h B
lack
R0 G
0 B
0
Wh
iteR
255 G
255 B
255
Gra
yR
210 G
210 B
210
Lig
ht G
ray
R230 G
230 B
230
© Copyright Microsoft Corporation. All rights reserved.
17-18 March, 2018 · Beijing
Thank you!
![QX P PR& $55$< - Department of Education and Training...0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 Z[Y YaY X_ Y`Z __ Z]Y ][ `\ a^Y a\ \\Y [^ '12 0+,&5](https://static.documents.pub/doc/80x56/6128b27417caad0c452f4aa8/qx-p-pr-55-department-of-education-and-training-0-0-0-0-0-0-0-0.jpg)
