Share via

SharePoint Framework Development Guidelines

  • Article

Overview

SharePoint developers were very much used to server-side code development with .Net. With the introduction of JSOM, the client-side development started getting popular amongst the SharePoint developers. But, still most were happy writing managed .Net code using C#. It may be server side or CSOM.
SharePoint Framework supports open source toolchain (including Node.js, TypeScript, npm, etc.).

The development paradigm has shifted from server-side development to client side. However good thing is, SharePoint developers adopted to this change. Microsoft is giving more capabilities with SharePoint framework. The SPFx is now entering maturity stage.

There is a sufficient information available on internet about SPFx for best practices, coding guidelines, performance optimization, and related areas. In this article, we will stick to the basics and revise few guidelines for SPFx development that will help to build better SPFx solutions.

Upgrade to latest SPFx version

SharePoint Framework is evolving continuously based on user feedbacks, fixes and improvements. As a result, Microsoft releases newer versions of SPFx regularly. It is important to stay updated with latest SPFx version. It is always not an easy task as it involves upgrade of each web part, extension, libraries, and components to newer version and test out the entire solution for unit and integration part.

Use below command to view the version of SPFx Yeoman being used.

npm -g ls @microsoft/generator-spfx --depth=0

Upgrade the outdated packages

While creating a new SPFx solution, Yeoman generator fetches latest version of npm packages to create client-side project. The existing npm packages could be outdated in the future as there will be a new versions of npm packages are available.

Use below command to view the list of outdated npm packages.

npm outdated

This command will list down all the packages that needs upgrade along with information of current version installed in your project and latest available version.

For each package you want to update, run below command.

npm install package-name@newversion --save

Test Cases

As we try to be in sync with latest npm packages, this also silently says that nothing should break after the updates. This situation demands for having unit and integration test cases in place. The test cases can be implemented using Jest.

npm shrinkwrap

Locking down the package dependency is very important to ensure the same code works for all. The SPFx code is distributed without node_modules folder, because it can be built later using “npm install” command. If the npm packages are not locked down then “npm install” downloads the latest version of npm packages. This may break any dependent packages.

To lock down the npm packages, use below command.

npm shrinkwrap

Use Office UI Fabric Controls

SharePoint and UI developers have utilized bootstrap for developing nice user interfaces in the past. However, Microsoft has provided Office UI Fabric for SharePoint Framework. Office UI Fabric is an official front-end framework to build experiences in Office 365. It helps to develop robust and consistent design across SharePoint modern experiences.

Read more about Office UI Fabric here.

App Package Deployment

SPFx app packages can be deployed at tenant level, which makes the app available all across the tenant. Which is a good idea. However, if for some reason you are using a single Office 365 tenant for all development, UAT and production purpose (e.g. different site collections for each environment) then this will not be a viable option. In such cases consider using app catalog at site collection level.

Performance Optimization

Optimize the performance of SPFx solution by following best practices. Below few points might help:

  • Always use release builds in production.
  • Do not include third-party libraries in the bundle. Consider loading them from CDN or a hosting location owned by organization.
  • Reference (or import) only the necessary components in code.
  • Allow files to be cached by proxies.
  • Minimize HTTPS calls and data size transferred.

PnP Samples

SharePoint PnP (Patterns and Practices) has various samples created around common business scenarios. Before building web parts, extensions or property pane controls first verify if they are readily available in PnP samples.

DevOps

Implement CI (Continuous integration) / CD (Continuous deployment) to verify every change rigorously. Continuous Integration (CI) is the process of automating the build and testing of code when a developer commits changes to source control. Continuous Deployment (CD) takes a package from the build and deploys it to a designated environment.

Please follow my previous article to know more about it.

Summary

SharePoint framework is widely accepted by SharePoint developers. While implementing SPFx solutions, it is important to follow certain guidelines and build your own governance to accelerate the development, avoid common mistakes, and optimize the performance.