Tips for Effective SharePoint Framework Development" (Character count: 47)

Slide Note

In this presentation, Simon Doy shares valuable tips for building solutions with SharePoint Framework (SPFx) to enhance manageability and maintenance. Learn about project setup, creating a core SPFx library, leveraging out-of-the-box features, and more. Get insights to improve your SPFx solutions efficiently.

kristophe Follow

Uploaded on Feb 19, 2025 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.

Download Presentation

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.

E N D

Presentation Transcript

Tips for SharePoint Framework development Simon Doy simon@ithinksharepoint.com

Agenda What is this presentation about? Developing SPFx tips + demos Questions

Introduction What is this presentation about? Describe and demonstrate some tips for building solutions with SPFx which Make them easier to manage and maintain. Help you to build better SPFx solutions. What is this presentation not about? An introduction to SPFx development.

Office 365, Microsoft Azure & SaaS Solution Architect Twitter: @simondoy Email: simon@ithinksharepoint.com Blog: https://blog.simondoy.com Simon Doy iThink SharePoint

The Tips

Tip: Setup your projects in a consistent way If every SharePoint Framework project is setup differently it is harder to pick up and understand. Document your process for setting up a SPFx framework project Use a consistent folder structure. Detail your naming conventions for projects and SPFx extensions/webparts. Setup configuration. Setup tslint.config

Tip: Setup your projects in a consistent way Example folder structure src common components images interfaces services styles extensions webparts

Tip: Create a core SPFx library Used to store Utility functions. Logging framework Property pane controls Services Promote code reuse. Increase development velocity. Reduce the number of bugs in your code. Consume via a NPM private repo or Github repository. Github = standalone repository

Demo: How to build a Core SPFx library

Tip: Use out of the box for inspiration Take inspiration from how Microsoft build and design SPFx web parts. Get to know them. See how they function. Copy their approach to make your web part easier to use.

Demo: Use out of the box for inspiration

Tip: Guide your user When a user adds your web part to the page, what happens? Guide them, give them pointers, make it easy for them to configure your webpart. Use the Placeholder control https://sharepoint.github.io/sp- dev-fx-controls- react/controls/Placeholder/

Tip: Get to know your libraries Understand React s principles Run through the tutorial. https://reactjs.org/tutorial/tutorial.html Lodash - https://lodash.com/ Read the documentation clonedeep get update SPFX libraries Property Pane - https://github.com/SharePoint/sp-dev-fx-property-controls Reusable controls - https://github.com/SharePoint/sp-dev-fx-controls-react

Tip: Use a Content Delivery Network Why? Two options Azure CDN Office 365 CDN How to choose?

Tip: Version your webparts When things go wrong with code, how do you know if the customer is running the latest code? Versioning your web parts helps you understand Default SPFx project configuration deployment get messy quickly particularly when deploying to CDNs.

Demo: Version your webparts

Tip: Do not use hardcoded strings The SharePoint Framework project starts you down the right path. Do not hard code string values into your code, use the provided framework.

Tip: Default configuration via properties Use the webpart manifest json file to set property defaults. Configure the webpart properties within the render() function.

Tip: simplify getPropertyPaneConfiguration() This is called when a user clicks on the edit webpart button. Out of the box it is hard to read.

Tip: simplify getPropertyPaneConfiguration() Break it down to simplify Now you can change what the property pane displays based on its state.

Tip: Optimise your production builds Key takeaways Use release builds (append -ship to build tasks). Understand what is in the bundle. Webpack-bundle-analyzer Microsoft Guidance https://docs.microsoft.com/en- us/sharepoint/dev/spfx/toolchain/optimize-builds-for-production

Tip: Keep up to date SharePoint Development Blog https://developer.microsoft.com/en-us/sharepoint/blogs/ SharePoint Dev PnP Community call Meeting Invite: http://aka.ms/sppnp-call. SharePoint Framework special interest group Meeting Invite: http://aka.ms/spdev-spfx-call. Microsoft Graph call Meeting Invite: https://aka.ms/microsoftgraphcall.

Tip: Keep up to date Blogs Andrew Connell http://www.andrewconnell.com/blog Chris O Brien https://www.sharepointnutsandbolts.com/ Elio Struyf https://www.eliostruyf.com/ Stefan Bauer https://n8d.at/blog/ Vardhaman Deshpande https://www.vrdmn.com/