beijing sharepoint framework 最佳 实践 · 5 l 8 n 0 d b0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y...
TRANSCRIPT
![Page 1: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/1.jpg)
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最佳实践
![Page 2: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/2.jpg)
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.
![Page 3: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/3.jpg)
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
![Page 4: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/4.jpg)
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
![Page 5: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/5.jpg)
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
![Page 6: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/6.jpg)
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
![Page 7: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/7.jpg)
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
![Page 8: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/8.jpg)
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
![Page 9: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/9.jpg)
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
![Page 10: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/10.jpg)
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
![Page 11: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/11.jpg)
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
![Page 12: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/12.jpg)
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
![Page 13: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/13.jpg)
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
![Page 14: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/14.jpg)
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
![Page 15: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/15.jpg)
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;
}});
![Page 16: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/16.jpg)
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!
![Page 17: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/17.jpg)
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
![Page 18: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/18.jpg)
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.
![Page 19: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/19.jpg)
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”)
![Page 20: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/20.jpg)
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”)
![Page 21: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/21.jpg)
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
![Page 22: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/22.jpg)
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.
![Page 23: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/23.jpg)
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
![Page 24: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/24.jpg)
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
![Page 25: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/25.jpg)
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
![Page 26: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/26.jpg)
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;
}
![Page 27: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/27.jpg)
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;
}
![Page 28: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/28.jpg)
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
![Page 29: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/29.jpg)
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
![Page 30: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/30.jpg)
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
!
![Page 31: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/31.jpg)
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
![Page 32: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/32.jpg)
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
![Page 33: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/33.jpg)
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
![Page 34: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/34.jpg)
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
![Page 35: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/35.jpg)
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
![Page 36: Beijing SharePoint Framework 最佳 实践 · 5 l 8 n 0 d B0 2 e 0 ue 3 l 0 n 8 ue 0 y y k e 5 y y 0 Session objectives and takeaways Session objectives: Get to know the best practices](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f67ba73a8ce680b406d7f33/html5/thumbnails/36.jpg)
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!