SharePoint Framework (SPFX) Best Practices

1. Introduction

The introduction of technology has a whooping impact on businesses. Just like we see businesses hopping from one technology to another, the reason behind it is the advancement it offers in terms of technology. Consumers using Office 365 have now moved to SharePoint SPFx. Now if you are not familiar with and wonder what SPFx is then, it is SharePoint Framework defined as a “page and web component paradigm that provides complete support for client-side SharePoint development, simple interaction with SharePoint data, and supports open source tooling.”It is a template for creating SharePoint platform modifications. The Framework is built around the idea of creating client-side applicationsapps that interact with the current SharePoint UX.

In this blog, we will be exploring more about what SharePoint SPFx is, how it can be used and its best practices. So let’s start with

2. What is SharePoint SPFx?

SharePoint SPFx is a simple way of utilizing data through open source tools.The modifications can be easily applied and customizations are simpler. It enables you to use whatever JavaScript framework you choose to develop SPFx solutions, and constructing SharePoint solutions isn’t restricted to Windows and Visual Studio.

Because SharePoint Framework makes use of a widely known web development stack, spfx solutions may be created on any platform, including OS X and Linux, using any code editor of your choosing. In this Microsoft powered SharePoint development model, it does not employ a proprietary model but rather tools and techniques that are widely utilised by developers across all platforms and stacks. In addition, the Product Group is dedicated to building their solutions on top of the framework using only publicly available APIs, which will support developers.

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 server and SharePoint Online sites.There are plethora of benefits that businesses may get if they use SharePoint Framework. 

One of the most significant advantages is that developers may work in their chosen development environment. This approach is applicable to any JavaScript platform.

• The first advantage is to leverage current web technology and utilities to construct and alter components of contemporary SharePoint pages.
• They can also use it to create apps that adhere to the most recent mobile standards.
• Iframes are completely absent.
• SPFx runs in the current user’s browser. SPFx allows for quicker browser rendering and standard page rendering DOM
• All of the controls are responsive and are displayed in the standard DOM.
• SPFx is framework-independent.
• You are free to use whatever framework you choose.
• Anything goes, including React, Angular, and Knockout frameworks.
• SPFx provides full support to open source development tools such as npm, TypeScript, and Yeoman generator, and webpack.
• It is compatible with both old and contemporary SharePoint pages. It can also be used to extend Microsoft teams.
• SPFx development is safe and secure.

3. What is the SharePoint Framework Used For?

Initially before the advent of SharePoint, the components were built in Visual Studio using C# and Client-Side Object Model (CSOM) or Server-Side Object Model (SSOM) assemblies.This was a complicated process.This strategy resulted in over-engineered systems with complicated deployment methods. This was frequently placed on a server. While on the other hand when the solutions were created using the Sharepoint framework development paradigm, it offered a simpler deployment procedure. The solution is client-side development, therefore there is no need for a dedicated server.

But with the announcement of Sharepoint by Microsoft in response to evolving web technologies and customer requests for more extensibility possibilities.SharePoint Framework solutions’ deployment, maintenance, and development are simplified and do not need server-side activities, allowing the developer complete control over the deployment process.Furthermore, developers have the freedom to select their preferred programming tool.

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 project of the SPFx client side web parts.

4. 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 spfx web parts, the best practice is to save the package. This is helpful while migrating the spfx web parts 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 SharePoint Site Collection level if the SPFx development is used in a single sharepoint 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.

5. 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, extend your capabilities and enhance performance optimization.

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