Learn from my Mistakes - Building Better Solutions in SPFx
Download as PPTX, PDF6 likes4,913 views
This document provides tips for building better solutions with the SharePoint Framework (SPFx) from the experience of the presenter, Thomas Daly. It discusses common problems developers face with SPFx such as bloated bundles, conflicting library versions, and poor architecture. It provides recommendations for optimizing bundles such as externalizing third-party libraries, minimizing mock data, and using the SP-PnP-JS library. The document concludes with miscellaneous tips including using the Office UI Fabric, typing objects in TypeScript, and staying up to date with the SPFx community.
![About me
• SharePoint Team Lead @ SoHo Dragon - NYC
• Branding & Developer for SharePoint / Office 365
• Focused on the UI side of things
• Community Involvement
• Speaker [Branding & Front End Development]
• NJ SharePoint User Group Organizer
• SharePoint Saturday NYC Organizer
• NJ & NYC Global Office 365 Dev Bootcamp
Organizer 2017
• NJ Azure Bootcamp Organizer
• SharePoint Saturday NJ Organizer [2013-2014]
• My SharePoint Blog
• Git Hub [corp directory controls / o365 sticky footer
/ bootstrap navigation]](https://image.slidesharecdn.com/learnfrommymistakes-190121182455/85/Learn-from-my-Mistakes-Building-Better-Solutions-in-SPFx-2-320.jpg)
![Scenario
• We need to build a “thing” in SPFx
• Need libraries like:
• Moment
• Stock
• Slider
• Office UI Modal [for location selection]](https://image.slidesharecdn.com/learnfrommymistakes-190121182455/85/Learn-from-my-Mistakes-Building-Better-Solutions-in-SPFx-10-320.jpg)
![Externalize Scripts
• Beware of types of JavaScript files
• Module [AMD, UMD, CommonJS] vs Non-Module
• Don’t know whether it’s module or non-module?
SharePoint Framework Script Check by Rencore](https://image.slidesharecdn.com/learnfrommymistakes-190121182455/85/Learn-from-my-Mistakes-Building-Better-Solutions-in-SPFx-20-320.jpg)
![Caching
• Use when data doesn’t change quickly / often
• Caching Timeout
• Globally Disable [for testing/debugging]
• Storage Options
• Session Storage – persists until window closed
• Local Storage – persists until explicitly deleted](https://image.slidesharecdn.com/learnfrommymistakes-190121182455/85/Learn-from-my-Mistakes-Building-Better-Solutions-in-SPFx-40-320.jpg)
![Common Issues
• Requires Setup for Modern Pages (must establish context) - guidance
• Disabling Cache – guidance
• Delete or clear cache when testing: turn off in code or purge in browser
• Remember! If a user logs out and then a different users logs on the same
machine / same browser cached results would be the same
• Beware if you are caching security trimmed results or personal properties
• Publishing Image Fields – cannot be retrieved with an item in PnP-JS
(requires 2 calls) – guidance [see paragraph on
PublishingRollupImage]
• Use JSOM to get everything in 1 call – example](https://image.slidesharecdn.com/learnfrommymistakes-190121182455/85/Learn-from-my-Mistakes-Building-Better-Solutions-in-SPFx-41-320.jpg)
![Check SPFx First!
• Lodash - @sp-lodash-subset
• SPHttpClient, SPHttpClientConfiguration - @microsoft/sp-http
• Logging - @microsoft/sp-core-library
• Logging in SharePoint Framework solutions
• @microsoft/sp-page-context – [SPUser, SPWeb, SPSite]
• SPFx includes some versions of their own polyfills
• Polyfills mainly Map and Proxy. – IE 11 can be your worst enemy
• Importing ES6-Shim or Core.js/ES6 Shims for ES6 library support in SPFX
[babel-polyfill]
• SPFX Polyfill Out of Stack Space exception](https://image.slidesharecdn.com/learnfrommymistakes-190121182455/85/Learn-from-my-Mistakes-Building-Better-Solutions-in-SPFx-57-320.jpg)
Ad
More Related Content
Similar to Learn from my Mistakes - Building Better Solutions in SPFx (20)
More from Thomas Daly (20)
Ad
Recently uploaded (20)
Ad
Learn from my Mistakes - Building Better Solutions in SPFx
- 1. Learn from My Mistakes – Tips for Building Better Solutions with SPFx Presented By: Thomas Daly Microsoft Office Servers and Services MVP SoHo Dragon
- 2. About me • SharePoint Team Lead @ SoHo Dragon - NYC • Branding & Developer for SharePoint / Office 365 • Focused on the UI side of things • Community Involvement • Speaker [Branding & Front End Development] • NJ SharePoint User Group Organizer • SharePoint Saturday NYC Organizer • NJ & NYC Global Office 365 Dev Bootcamp Organizer 2017 • NJ Azure Bootcamp Organizer • SharePoint Saturday NJ Organizer [2013-2014] • My SharePoint Blog • Git Hub [corp directory controls / o365 sticky footer / bootstrap navigation]
- 3. SharePoint / Office 365 / Azure / Data Intranets - Migrations - Development Recruiting - Staff Aug - Placement
- 4. Outline • Introduction • Bundling • 3rd Part Libraries • Analyzing Bundles • Externalizing References • SP-PnP-JS • Miscellaneous Tips
- 5. Introduction MS & SPFx stood behind React as their choice for front end framework SPFx was to be framework agnostic - React, Knockout, Angular SPFx was TypeScript based, being easier for C# devs to learn SPFx was said to be similar to other modern web dev practices Since the introduction of the SharePoint Framework (SPFx) Microsoft has painted it as this new an improved way of development
- 6. SPFx Popularity • A couple years later SPFx is very popular and widely adopted • Endless amounts of information from Microsoft + Community • Video Tutorials + Demos • Bi-Weekly call with engineering teams + community members • Large collection of examples in GitHub • Large community support / blogs / forums
- 7. What Really Happened • The people currently building SharePoint solutions were trying to learn and build SPFx solutions for modern with little to no experience with the toolset, framework, TypeScript. • Steep Learning Curve • React • Syntax • State Management • Passing Props • TypeScript • ES6 Syntax • Interfaces • Toolchain – npm / gulp / webpack / bundling • Sass / CSS • Office UI Fabric
- 8. Problems in the Wild Little to no thought behind the impact on the tenant Using different versions of the same libraries on the page Bloated Solutions bundling all assets Conflicts between developers Poor Architecture No / Improper Versioning Unnecessarily including 3rd party libraries Falling back to old habits, doing what’s comfortable
- 9. Let’s Get Started • The following material has been based on working with various developers over the course of the past year • ….Tips • …Tricks • …Optimizations • …Lessons Learned
- 10. Scenario • We need to build a “thing” in SPFx • Need libraries like: • Moment • Stock • Slider • Office UI Modal [for location selection]
- 11. Scenario (Continued) • Adding those libraries increases the bundle size which contributes to load times causing the page to slow down • If these were web parts we have multiple bundles bloating the page • If other webparts were using the same packages we get 2 possible scenario’s • Same libraries being loaded once or more on page load • Multiple versions of libraries being loaded on page load
- 12. As Solutions Grow BundleBundle Loaded SPFx1 SPFx2 WP1 CODE WP2 CODE WP2 CODE WP1 CODE
- 13. What Can We Do? • Trim as much as you possibly can • Identify the largest portions of code • Identify where we can reuse packages • Identify where we can remove packages • Optimize Wherever Possible
- 14. Comments on 3rd Party Libraries • Existing libraries allows you to be more productive • Lets you focus on adding value for your organization • There are tons of helpful packages within the npm repository • Quicker to use than to build • You can get a sense of maturity by the statistics users, contributors, issues • By default, 3rd libraries are bundled into your project • Users end up downloading the same library multiple times with each component. • The total page size grows significantly, taking longer to load and leading to a poor user experience, particularly on slower networks.
- 15. Why Bundle • Makes deployment simpler • Optimal to load 1 larger file vs many little files • Loads modules in the order they are required • Faster for end users
- 16. When to Bundle vs Eternalize Bundle • Lack of external internet access • Blocking to particular websites • Insulate yourself from external changes to CDN / code • Maintain full control over assets & versions Externalize • Shared Libraries across multiple webparts • Benefits of one time payload hit • Generally speaking, Microsoft suggests this method
- 17. Externalize 3rd Party Libraries Bundle Bundle Loaded WP1 CODE WP2 CODE WP2 CODE WP1 CODE
- 18. Summary • You can argue that you’re web part bundle loads once and then you get the benefits of caching • The benefit is loading the 3rd Party items once instead of 2, 3, 4x depending on web parts • Recommended by SPFx to eternalize 3rd Party Libraries • Recommend using CDN • Delivers static assets faster • 3rd Party libraries could already be cached
- 20. Externalize Scripts • Beware of types of JavaScript files • Module [AMD, UMD, CommonJS] vs Non-Module • Don’t know whether it’s module or non-module? SharePoint Framework Script Check by Rencore
- 21. Externalize Scripts w/ Dependencies If you try to build the project now, you would get another error, this time stating that you can't specify a dependency to a non-module script.
- 22. Externalize Scripts w/ Dependencies (cont’d)
- 23. Handle Different Tenants • Issue: external reference contain hard coded references to URL’s and hosting location of the bundled files • Requires manually modifying configuration files between builds
- 24. Handle Different Tenants (cont’d) • spfx-build-url-rewrite by Wictor Wilén • Replaces https://contoso.sharepoint.com w/ target-cdn value
- 25. Reference CSS Stylesheets • While the project configuration in the config.json file allows you to specify external resources, it applies only to scripts. Use SPComponentLoader instead of require so assets do not get bundled
- 26. Dynamic Bundling • Conditionally loading CSS or JS • Code can dynamically inject assets - does not increase the bundle size • Assets load on the fly as the are needed • David Warner Blog - Dynamic SPFx Package Bundling
- 28. Measuring Your Files • The size of the .sppkg is NOT the size of the bundle • Must make sure to build Production vs Development Builds (--ship) • SPFx recommends webpack-bundle-analyzer • This measures all the combined JavaScript files in your solution (excluding external references) • Chrome will show you full download / gzipped size or if cached
- 29. Webpack Bundle Analyzer A visual html report each build demonstrating code size relative to each other
- 30. Install Webpack Bundle Analyzer • Install the webpack-bundle- analyzer in your project directory • Change the gulpfile.js
- 31. Size Definitions
- 32. Trimming out Mock Data • Mock data / services are used to develop and test your web part while using the workbench. • Browser is unable to call SharePoint locally due to CORS (cross-origin resource sharing) • sp-rest-proxy - SharePoint REST API Proxy for local Front-end development tool- chains • These mock services could be large depending on the amount of data • Exclude your mock data and other modules from your production bundle in SPFx by Elio Struyf
- 33. Size Relative to Custom Code
- 35. How to Exclude Mock Data / Services • Make use of if(DEBUG) to conditionally mock data
- 36. Getting Data from SharePoint
- 37. SP-PnP-JS • PnPjs is a collection of fluent libraries for consuming SharePoint, Graph, and Office 365 REST APIs in a type-safe way • https://pnp.github.io/pnpjs/
- 38. Benefits of Using SP-PnP-JS • Intellisense & TypeChecking • Simplify development experience • Intuitive using fluent library • Easier to read code intent • All the cool kids are using it • Asynchronous, built on Promises • Built-in caching • Abstracts devs from low level details Remember SPServices?
- 40. Caching • Use when data doesn’t change quickly / often • Caching Timeout • Globally Disable [for testing/debugging] • Storage Options • Session Storage – persists until window closed • Local Storage – persists until explicitly deleted
- 41. Common Issues • Requires Setup for Modern Pages (must establish context) - guidance • Disabling Cache – guidance • Delete or clear cache when testing: turn off in code or purge in browser • Remember! If a user logs out and then a different users logs on the same machine / same browser cached results would be the same • Beware if you are caching security trimmed results or personal properties • Publishing Image Fields – cannot be retrieved with an item in PnP-JS (requires 2 calls) – guidance [see paragraph on PublishingRollupImage] • Use JSOM to get everything in 1 call – example
- 42. Optimize Queries • Regardless of REST, JSOM, or PnP-JS you should always optimize queries • Optimizations reduce payload size of data transfers • Use row limit or top to reduce the number of returned results • Specify only the fields which you need back • Use where or filters where appropriate
- 45. UI Frameworks • Recommended to use Office UI Fabric • Core - Grids / Icons / Animations • Components – Loaders / Pickers / Inputs / Surfaces • Office UI Fabric current version is greater than O365 deployed version • Eventually the dev path of Office UI Fabric will converge w/ Office 365 • Other framework’s may not work with Office 365, leaving you stuck
- 46. Office UI React Guidance • It’s recommended that you use the versions of the Office UI Fabric React package included in the project in the SharePoint Framework's Yeoman generator. • For instance, the SharePoint Framework v1.7.0 release uses Fabric React v5.131.0 • Using Office UI Fabric Core and Fabric React in SharePoint Framework
- 47. jQuery • Highly recommend NOT using jQuery • React is unaware of changes made to the DOM outside of React • There are other ways to get items from SP other than $.ajax or $.get • If you absolutely must use it these are things to consider: • Be mindful of what you are doing to prevent React from updating • jQuery registers globally as $ • Multiple webparts loading different jQuery versions can be very bad • Use references to react components • Integrating with Other Libraries
- 48. TypeScript – Typing Specifically • You are already using TypeScript • It’s your job to type your objects, interfaces, variables • By typing objects • Reduces defects • Easier to add new features / enhance code • Clearly defines inputs & outputs
- 49. TypeScript – Typing Specifically (cont’d) • Typing inputs & outputs • Typing variables The goal is for everything to have a type! …. Try not to use Of course there are some exceptions • It’s not an object from your library • You don’t have typedefs available TypeScript Do's and Don'ts
- 50. • Creating interfaces TypeScript – Typing Specifically (cont’d)
- 51. Productivity & Plugins • Use a code repository to work on the same project • Chrome Debug Tools • Cache Killer Classic – always kills cache / no worries about ctrl-f5 • React Developer Tools – inspect React Components – State & Properties • SP Insider – inspect anything in O365 & Generate REST / Search Queries ! • Scratch JS – write JS in the browser for quick testing • SP-Editor – PnP JS console built in – quickly write / test queries • Visual Studio Code Plugins • GitLens • Rencore Deploy SPFx Package • Prettier – code formatter • XML – code formatter • Stick to the same coding standards • Airbnb React/JSX Style Guide • Use versioning on projects • How to version new SharePoint Framework projects • SPFx Automatically Generating Revision Numbers + Versioning
- 52. Build / Bundle / Package Script • Commands to execute before pushing to live SharePoint env. Simple Build Script for the SharePoint Framework by Thomas Daly
- 53. Debugging & Testing • Use Chrome Dev tools or FireFox, far superior than IE (not even a contest) • Blackbox native SP scripts • Disable cache • The local workbench can increase the speed of your development • It’s a good practice to mock your data to simulate interactive w/ SP • Test Live using a real sites workbench • {siteUrl}/_layouts/15/workbench.aspx • Test Live on your site, append this to your URL • Solution must be deployed and added to the site first • ?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true
- 54. Choose your primary client-side library • Consider multiple components on same page, or across different pages • Using same library loaded from same URL, web browser will used cached results portal loads faster • Rationalize which libraries and versions AND where you load from • Not just project specific but for the whole organization
- 56. Reference only the necessary components • When working with external libraries, you might actually not need the whole library • Take Lodash as example: • Reference entire library = 527KB (unoptimized) • Reference specific method = 45KB (unoptimized)
- 57. Check SPFx First! • Lodash - @sp-lodash-subset • SPHttpClient, SPHttpClientConfiguration - @microsoft/sp-http • Logging - @microsoft/sp-core-library • Logging in SharePoint Framework solutions • @microsoft/sp-page-context – [SPUser, SPWeb, SPSite] • SPFx includes some versions of their own polyfills • Polyfills mainly Map and Proxy. – IE 11 can be your worst enemy • Importing ES6-Shim or Core.js/ES6 Shims for ES6 library support in SPFX [babel-polyfill] • SPFX Polyfill Out of Stack Space exception
- 58. Reusable Components & Examples • Reusable React controls for your SharePoint Framework solutions • Reusable property pane controls for the SharePoint Framework solutions • SharePoint Framework Client-Side Web Part Samples & Tutorial Materials • Office Fabric UI Components • SPFx Fantastic 40 Web Parts
- 59. Packages.json • dependencies • Modules required during runtime • Packages you would bundle • devDependencies • Modules only required during development • Packages you won’t bundle • Packages you plan to externalize • Packages only required to build • Keep it to the packages you are using, remove anything else
- 60. Packages Checker • npm-check • Checks packages.json for unused dependencies • Has interactive update functionality
- 61. Warnings & Considerations • SPFX 1.7 is now using React 16 • SPFX 1.7 still using TypeScript 2.4.2 • Some npm libraries won’t compile with that • IE 11 is not your friend • Check for browser supportability: Caniuse.com • Watch out for npm packages that use polyfills that collide w/ SPFx • Read Release Notes when new versions of SPFx are released • Check SPFx github when you encounter issues – Report Bugs
- 62. Staying Current • Community Calls • https://docs.microsoft.com/en-us/sharepoint/dev/community/community Community call When Description Skype Monthly community call Second Tuesday of each month at 8:00 AM PT / 4:00 PM GMT Monthly community call covering the latest changes in SharePoint development-related topics within the last month, including news, UserVoice updates, and community contributions Direct Skype link to meeting Special interest group call for SharePoint Framework Bi-weekly on Thursdays at 7:00 AM PT / 3:00 PM GMT SharePoint Engineering updates, SharePoint Framework, PnPJS, Office 365 CLI, and reusable SPFx controls Direct Skype link to meeting Special interest group call for general SharePoint development Bi-weekly on Thursdays at 7:00 AM PT / 3:00 PM GMT SharePoint Engineering updates, end-to-end solution designs, provisioning, PnP CSOM, and PnP PowerShell Direct Skype link to meeting
- 63. Questions / Comments • [email protected] • Twitter: @_tomdaly_ Slides, Demos & Contact • https://www.slideshare.net/tommdaly Email: [email protected] Twitter: @_tomdaly_ LinkedIn: profile