Más contenido relacionado

Presentaciones para ti(20)

Similar a O365Con19 - Things I've Learned While Building a Product on SharePoint Modern - Elio Struyf(20)


Más de NCCOMMS(20)


O365Con19 - Things I've Learned While Building a Product on SharePoint Modern - Elio Struyf

  1. Things I've learned while building a product on SharePoint Modern Elio Struyf- @eliostruyf Solu?ons architect @ Valo Intranet
  2. Kiitos, thank you our dear sponsors…
  3. Architecture overview JavaScript, HTML, CSS à SharePoint Framework Web Parts Extensions Client-Side SoluCon Driven Key vault Functions All back-end logic lives here
  4. Channels to follow • hIps:// • hIps:// • PnP Community Calls: hIp:// • hIps:// • hIps://
  5. Let us talk about building things
  6. SPFx runs in the context of the user
  7. Azure Functions tips ❗ Don’t forget to secure them with Azure AD ❗ You’ll be using app-only permissions • Check the SharePoint permissions on both ends ❗ Try to create a messaging system • Users will not wait > 10 seconds • Queues great for this in combinaCon with Queue Triggered funcCon • Create a HTTP Message Broker à creates the queue message
  8. Naviga?on
  9. Checks that we have in place ✓ Check page URL ✓ Check list ID + item ID ✓ Check the HubSite ID ✓ Check the current UI language ✓ Check if you are creaCng a new page Depending on the change: - ApplicaCon customizer reloads - Page refreshes - Component updates - AborCng calls hIps:// hIps:// hIps://
  10. SPFx localiza?on story • Each web part / extension has its own localizaCon file • /src/webparts/<your-webpart>/loc/<locale>.js • Developers must maintain these files • “Easy” for 1-3 languages à updates need to happen in each file • Harder when you need to support +20 languages • It is JS, things can go wrong!
  11. SPFx localiza?on solu?ons • Create the localizaCon files as TS files à Catch issues during build • One global localizaCon file ✅ Easy to maintain ✅ Sharing localizaCon keys is easier ❗ Developer must sCll maintain it • Use an extension - h"ps:// ✅ AutomaCcally add entries in all locale files ✅ Generate a CSV file that can be owned by someone else • Create your own system
  12. How we do localization CI CD Global localization project provided as a library component Excel file is maintained by our localizaCon master Retrieves XLSX + Export new keys + Generates locale files
  13. Mul?ple projects ✅ Faster build Cmes ✅ Easier to debug ✅ Lower impact when you need to do a hokix ❗ Watch out for code duplicaCon ❗ LocalizaCon ❗ Packaging and installaCons ❗ Project management -> Check out monorepo (Lerna)
  14. Think about sharing common logic
  15. Sharing common logic • SPFx library component ✅ OpCon for sharing code between projects ❗ Only one library component version can be used • Private npm dependencies (Azure ArCfacts) ✅ Each project can use its own version ✅ Not SPFx specific ✅ Will work for classic and on-prem projects ❗ Could lead to larger bundles (talking about KBs)
  19. SP doesn’t care
  20. Solu?on versioning • Update version in package-solu,on.json • The version only applies to the feature framework and SharePoint feature defini,ons • Code and assets will be updated as soon a new version is uploaded
  21. My preferred versioning approach • Use seman,c versioning to align with your dependency versions • Keep control over your version by manually updaCng them • If you want to automate, update the label (you can use the build nr) • Update version in package.json (caching in Azure DevOps – future) • Sync your version numbers (hIps://
  22. Challenges
  23. The one that doesn’t want to die
  24. Suppor?ng IE11 ❗ Speed is the biggest issue ❗ Slow due to all the polyfills required (ex.: fetch) ❗ SPFx memory leaks (1,5GB aMer two minutes) ❗ Styling
  25. Suppor?ng classic ❗ Not everything is supported • Dynamic data • No applicaCon customizers ❗ Speed
  26. Suppor?ng on-premises
  27. Are you alone?
  28. Are you the only third-party on the tenant? ✅ If you don’t do DOM manipulaCons, you should be OK ❗ Watch out with AadHIpClient • Shares permission scopes • You are not in control ✅ Use isolated web parts (>=1.8.0 SPFx) ✅ Use your own Azure AD App if you want to be in control • Use the AadTokenProvider
  29. It’s not always your fault
  30. Tes?ng is THE most important thing
  31. hIps://
  32. Automate as much as you can
  33. Automate your releases CI CD
  34. The full story • We push everything immediately to our shared-DEV environment • We do nightly provisioning • Flush the whole environment • Reinstall all components • Azure AD Apps • Azure FuncCons • SharePoint sites • Deploy SPPKGs # PnP PowerShell
  35. Things to consider ❗ Flat site structure are great, but … • Lots of cross-site collecCon calls à calls cannot be batched • Have a good caching story ❗ Watch your bundle sizes • Don’t be blinded by it • Have a good CDN or use the Office 365 CDN (client-side asset packaging) • Browser will cache files à biggest impact on cold load ❗ Test on different environments
  36. Ques?ons?
  37. Office Servers & Services MVP Azure / Office 365 / SharePoint @eliostruyf Elio Struyf Solutions Architect at Valo Intranet