Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Mastering SPFx in larger projects: State Management, API Security, Deployments
Similar to Mastering SPFx in larger projects: State Management, API Security, Deployments (20)
More from Yannick Borghmans
Recently uploaded
Recently uploaded (20)
Mastering SPFx in larger projects: State Management, API Security, Deployments
- 1. Mastering SPFx in larger projects Yannick Borghmans | @yborghmans SharePoint Saturday Belgium 2019 #SPSBE
- 2. Platinum Gold Silver Community Thanks to our sponsors!
- 3. yannickborghmans.com Linkedin.com/in/yborghmans @yborghmans Yannick Borghmans Office 365/SharePoint Technical Lead @Ventigrate
- 4. Topics State Management API Management & Security (Automated) Deploy Versioning Upgrading Tips & Tricks
- 6. React
- 11. Demo Building ‘simple’ React application
- 13. Redux
- 14. Redux Redux is a state container, it stores all of your state in one place The state is read only, the only way to change state is to dispatch an action. State can only be changed by pure functions or in another term: Reducers. Redux Reducers take in the previous state and an action object and returns the next state.
- 15. Three Principles Single source of truth State is read-only Changes are made with pure functions
- 19. State libraries Redux Mobx Flux React Hooks
- 20. Demo Redux
- 21. API Management & Security
- 22. SPFx => Client side • User context, no delegated permissions • No long running operations possible • No complex/business logic • Examples: • PDF Creation • Setting item level permissions => Azure API
- 26. Continuous Integration and Continuous deployment • Integration • Testing • Build errors • Deployment • Automated to dev • On approval to acc and pro
- 27. DevOps
- 28. Demo DevOps
- 29. Versioning
- 30. Versioning x.x.x.x • Package-solution.json • No possibility of the same webpart on a single tenant • OR: don’t care and let DevOps handle the versioning for you..
- 31. Upgrading
- 32. Upgrading Why? Using new features of SPFx App pages Connected webparts Teams React/Typescript GraphFactory How? Office 365 CLI
- 33. Office 365 CLI Install npm i -g @pnp/office365-cli Get report o365 spfx project upgrade --output md > report.md Upgrade your packages (Move to new file/folder structure) https://github.com/SharePoint/sp-dev- docs/wiki/SharePoint-Framework-v1.6-release-notes
- 34. Demo O365 CLI
- 35. Tips & Tricks
- 36. Debugging in production 1. gulp clean 2. gulp serve --nobrowser 3. add at the end of the url the following url paramters: &loadSPFX=true&debugManifestsFile=https://localhost:4321/temp /manifests.js 4. confirm to load debug scripts
- 37. Split up actions (Redux) • Gets really quick ‘dirty’ • Split up by functionality • User actions • SP lists
- 39. Comments • Type in /**
- 40. Global components • Create generic logic • Examples • Configurable visibility of info labels • Error handling (required fields) • Combining of components (file upload) • Usage • Buttons • Dropdown • Labels • Extra => create a “company npm package”
- 41. PnP JS + PnP Controls • Installing PnP JS in your SPFx solution • npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp --save • Usage • sp.web.lists.getByTitle("Sessions").items.getAll().the n((items) => { console.log(items); })
- 42. Office UI fabric
- 43. Index files Single index.ts file for each folder Exporting all files in that folder Single import ‘cleaner’ code
- 45. Logging Application insights Create wrapper – change where to log Debug level => propertypane
- 46. VSCode extensions • VSCode Icons • SPFx Snippets (Elio) • Settings Sync • Rencore Deploy SPFx package • One Monokai Theme • Bracket Pair Colorizer • Gitlens • API Management
- 47. Key takeaways
- 48. Key takeaways Keep using local state Refactor General components “Componify” Keep learning
- 49. SharePoint Saturday Belgium 2019 #SPSBE
- 50. #SPSBE http://spsbe.be Please rate this session!
Editor's Notes
- npx -p yo -p @microsoft/generator-sharepoint@1.4.1 yo @microsoft/sharepoint
- o365 spfx project upgrade --output md > report.md