Table of Content

  1. Introduction
  2. Best Practices for SharePoint Framework (SPFx) Development

 

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 O365 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.

Get a Quote