30 th September 2017 Milan

Transcription

1 30 th September 2017 Milan

2 SharePoint Framework tips & tricks Giuseppe Marchi, Dev4Side S.r.l.

3 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 Office 365 advisor for Author of the book "Pocket C#" from Apogeo One of the top SharePoint and Office 365 influencers (for 2014 and 2015)

4 #SPSMilan

5 A Huge Thank You! To Our Sponsors In cooperation with

6 A special Huge Thank You! you! To to Our us Sponsors A complete offer for the adoption of Microsoft cloud collaboration products TRAINING video courses webinars on-site classes ADVICE development support maintenance FREE STUFF guides news webinars In cooperation with

7 A special Huge Thank You! you! To to Our us Sponsors Ready-to-go apps for SharePoint and Office 365 In cooperation with

8 A special Huge Thank You! you! To to Our us Sponsors SharePoint Framework training We are planning some SharePoint Framework trainings. Are you interested? If so, please fill this form: In cooperation with

9 Agenda Tips and tricks for Working with Web Part properties Manage dependencies Make the right choices for your solution Choose the right options for your dev environment Upgrades and automation

10 Before starting

11 A true story from a SharePoint developer

12 Hey guys, there s a new development model for SharePoint! Yyeeeeeessssssssss, finally some updates for developers!!!!

13 It s all about client-side development No problem, I became a Javascript ninja during these years!

14 Ehmm.. You ll have to use Typescript, not Javascript Ah..

15 And also NodeJs, npm, Yeoman, Webpack, Gulp, React, Redux, Code, and others Uhm.. But I can reuse my skills as a SharePoint developer, correct?

16 Yes.. REST APIs, some provisioning and ehmm.. Ah..

17 But don t worry.. You have the community that can help you! No please code from Pialorsi will have tons of bug for sure!!. I m gonna lose my job :(

18 Don t panic! Because I ve

19 15 tips to survive during your SharePoint Framework adoption! Translation: some useful information to speed up your SharePoint Framework projects

20 #01 Manage updates to properties values Reactive properties within SPFx Reactive properties withing React components

21 #02 Don t use text field for numeric properties! Remember: you re using Javascript and in Javascript, with strings, the following sentence is true = 11 (thx to Waldek Mastykarz) Use SliderPropertyField or

22 #03 Add metadata to your Web Part properties. Define additional metadata to integrate properties with SharePoint Enable search indexing, link fixing and removing unsafe HTML Note: only works with SharePoint Online modern UI pages

23 #04 Are you using Angular? Remember to bootstrap it only once! render() method is called many times in a Client Side Web Part This is the same also for external scripts/styles

24 #05 How to reference images Even simple tasks could be a nightmare somethimes

25 #06 Use dummy data and mocks during UI implementation The local workbench is awesome for UI development, but you need data

26 #07 Remember to download references when you git pull a SPFx project from repo, for the first time Working in team on a SPFx solution: use npm install to download references Dependencies are not inside the repository

27 #08 Always use --save when you re adding dependency to SPFx solution "In my environment it works «The same is for uninstall a package

28 #09 Reference external frameworks from CDN! Don t bundle external frameworks Keep your eyes on package size

29 #10 Lock your dependencies when you release! Use the npm shrinkwrap command to froze the dependencies tree of your solution In this way you can recreate the exact build you re shipping

30 #11 Use external custom APIs for privileges evelevation Azure web apps are your friends as SPUtility.RunWithElevatedPrivileges in a farm solution

31 External APIs for privileges elevation SharePoint Online Client side web part THIS CAN BE EITHER INSIDE SHAREPOINT ONLINE LOAD JS FILES IFRAME FOR GETTING AUTH TOKEN FROM API WEBSITE THEN, ASK FOR ADMIN ACTION Custom API SECURED WITH AUTHENTICATION + CORS DO THE ADMIN ACTION Note: in the next version of SPFx this will be inside the libraries from Microsoft, using adal.js

32 #12 Use a CDN for your solution, only if you need it! Is a CDN always the best solution for an SPFx web part?

33 When using a CDN makes sense? Having scripts inside a CDN makes a big difference for organizations with locations in several geographies SharePoint Online is your CDN!

34 #13 Increase solution version for upgrading a SPFx solution in prod The same as you re doing with SharePoint Addins

35 Here how you can upgrade a solution: Build and deploy your scripts gulp build --ship Notice that in /temp/deploy you now have 1more.js file! Increase the solution version in package-solution.json Build new package gulp package-solution --ship Overwrite the package in the app catalog Refresh the page with web part to see changes

36 #14 Automate tasks for scripts and package deployment npm install gulp-spsync-creds node-sppkg-deploy save (super thanks to Elio Struyf) Then update your gulpfile.js

37 DEMO

38 #15 Use a specific version of the SPFx Yeoman generator for each project! Avoid problems for adding new artifacts inside an old SPFx solution Try new SPFx versions without affecting your actual projects Build Web Parts for both SharePoint Online and on-premises

39 Use a specific version of the SPFx Yo Here the options for isolating your projects and their toolchain: Use a virtual machine for each version of SPFx Yo (not so usefull ) Use Docker containers Use NVM (Node Version Manager) Use NPX (NPM package runner) npx -p yo -- Install SPFx Yo to project s dev dependencies npm D Then lock your dependencies

40 QUESTIONS & ANSWERS

41 Thank You! Please fill the feedback form! PEPPEDOTNET.IT SOURCE CODE ON

42 30 th September 2017 Milan