Related Service

SharePoint Development

Know more about SharePoint Development

Learn More

8 Best Practices in SharePoint Framework (SPFx) Development

Published: Nov 9, 2020

Introduction

SharePoint Framework (SPFx) is the latest development model for SharePoint developers enabling them to use the features for the creation of custom functionality with responsive design compatibility in both SharePoint on-premises and O356 platforms.

Microsoft is already expanding its capabilities by adding updates and SPFx has some new and advanced features for simpler development. Thereby, it is important to follow the best practices to keep the development intact without breaking any functionalities. With our expertise and substantial experience in SPFx development, we have curated the below mentioned best practices and guidelines that can be used during the development of the SPFx webpart.

Best Practices for SharePoint Framework (SPFx) Development

1. Check for the latest SharePoint Framework (SPFx) Package

Start with SPFx evolution, Microsoft frequently comes with the latest updates of its packages that contain the fixes from previous releases as well as new capabilities. It is important to check the functionalities and bugs with the new release. It is advised to download the latest version of the package by reading the functionalities from Microsoft which will eliminate the hurdles and simplify the process of tracking down the issue if there is any version problem.

2. Update the outdated packages

The updated and latest packages are downloaded by Yeoman while creating a new SPFx webpart. But it is possible that those packages might get outdated over a period and hence it is important to update them. You can identify the package through the below command,

npm outdated command is used to get the list of outdated npm packages. This will list the current version of the package installed along with the latest version available for the packages that need to be upgraded. You can update SPFx package through the below command,

npm install mypackagename@newversion –save

3. Save dependencies

Once the package to be installed is identified for the webpart, the best practice is to save the package. This is helpful while migrating the webpart from one environment to another as it will install the latest package without jumping to the major version. Sometimes, it is possible that the latest package has some bugs and that can cause issues to the existing package.

4. Lock dependencies

Generally, the SPFx code is distributed without the node modules folder as that can be downloaded using the npm install command. But it is an unsaid fact that the code should be compatible in all the versions of npm package installation.

Locking the packages will make the code work without breaking the functionality in any version of the npm package. npm shrinkwrap is used to lock the versions of the installed packages and will generate the file named npm-shrinkwrap.json containing the versions of the installed packages and dependencies used. This file will be used to create the dependency tree while npm install.

5. Usage of CDN files

Earlier, we were using the JS and CSS files by uploading them in any folder. But in SPFx, as per the best practice CDN path is recommended to increase the loading of the pages faster. For online tenants, using the CDN path, they will render the pages quickly to the end-users as the files are cached. The nature of CDN is that it will store the CSS, JS, Images, favicons, etc. closer to the user’s environment. You can enable the CDN in Microsoft 365 OR deploy web part on Azure CDN

6. Usage of Office UI Fabric and Fabric React

Currently, the developers are more adaptive to using bootstrap for UI rather than Office UI Fabric even though Office UI Fabric is the official framework by Microsoft for Office 365. Following are some of the perks that businesses can achieve using office UI fabric.

  • The UI will be in sync with Office 365.
  • Additional features are imbibed as an update in the software by Microsoft to meet the needs of the businesses and their users

7. Deployment of App Package at Site Collection Level

SPFx App package has many unexplored features that need to be deployed at a tenant level. It is advisable to deploy the App Package at the Site Collection level if the SPFx development is used in a single site collection. If the same tenant is used for UAT and Production then this option will not be available. i.e. same tenant but different site collection for UAT and Production site.

8. Optimization SPFx (SharePoint Framework) Production Builds

Below are a few points that should be followed for a better and optimized performance while coding.

  • Try to load the third-party library using CDN paths rather than downloading them and using them.
  • Import the components which are used in code instead of importing all the libraries.
  • It is best practice to always use release builds for production environments.
  • Try to minimize the HTTP calls
  • Install the Webpack Bundle Analyzer to identify the generated bundle size and verify the bundle contents.

Conclusion

SharePoint Framework is a highly adapted framework by SharePoint developers for doing customization in SharePoint Online Modern UI and SharePoint on-premises 2016 Feature Pack 2 onwards. We hope you exploit all the business opportunities by following the guidelines and best practices of SharePoint Framework Development while building its solutions to avoid any discrepancies and enhance performance optimization.

More Blogs on SharePoint Framework
SharePoint Development Methods
Sharepoint Framework Extensions – Field Customizer

Comments

  • Leave a message...

Related Articles

Things you must know before choosing Power BI

Nov 26, 2020

What are ORMs and How does it work?

Nov 24, 2020

Introduction of Azure DevOps Pipelines

Nov 19, 2020