With the SharePoint Framework, you can incorporate modern development techniques to create fast, responsive components. Microsoft is giving more and more capabilities with SharePoint Framework and there are a lot of updates that Microsoft is posting on GitHub.

SharePoint developers, who are familiar with the development of server-side web parts are now increasingly adapting to this new Page and web part model framework.

Below are the best practices which you need to remember for while developing SPFx projects.

Saving dependencies & Lockdown dependencies

Once you have found the package you want to include in your project, you have to install and save it. The best practice is to install with:

npm install <packagename> –save

npm will save your dependencies with the ^ prefix by default. It means that during the next npm install the latest module without a major version bump will be installed.

If you do not save your dependencies, then the situation can easily become problematic for production deployments. It’s possible to have different versions locally than on production. In the meantime, if someone just released a new version, the problem will arise, when this new version has some bug which will affect your production system.

To solve this issue, you may want to use npm shrinkwrap. It will generate an npm-shrinkwrap.json that contains not just the exact versions of the modules installed on your machine, but also the version of its dependencies, and so on. Once you have this file in place, npm install will use it to reproduce the same dependency tree.

Use CDN for your file assets

As older development techniques, we used to upload our JS and CSS files in the Assets library. But in SPFx, enabling CDN and configuring, we gain immense performance benefits.

In online tenants, post enabling of CDNs, we saw a performance gain of up to 30-40% while fetching assets like CSS and JS files. This rendered the pages quickly to end-users. It executed the JS files faster, painted the page canvas faster and reduced lag and zig-zag effect. Needless to say, our page load times reduced a lot because of it. This is because of the nature of CDNs themselves, as in, they work as caching mechanism and store static assets like JS, CSS, images, favicons, etc. closer to the user’s environment.

Enabling CDNs is not necessary, it is considered as best practice. You can upload your assets to the SiteAssets or any other document library accessible to end-users and serve the files from there.

In SPFx, you can set the path in the cdnBasePath of the write manifests json file, but then you need to upload your files yourselves there. If you kept the cdnBasePath empty and your CDN is not enabled, those files will be served from the App Catalog site collection. The place where you upload the app is also a document library itself from where these files will be served.

App Package Deployment at Site Collection Level

SPFx app packages can be deployed at the 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 purposes (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.

Stay up to date with the latest SPFx packages

As we know, SPFx is still evolving and during this process, some of the releases by Microsoft come with some potential bugs which can cause major problems. Microsoft is quick to respond to such issues and they release patches with fixes. It is important to stay up to date with the latest SPFX packages.

Follow this link and keep your packages updated:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/update-latest-packages

User Office UI Fabric and Fabric React

Although Office UI Fabric is the official front-end framework for User Interface experiences, most of the developers are used to the Bootstrap. That is because Office UI Fabric is in the early stages. However, below are the important benefits that one will get when moving towards the Office UI Fabric:

  • The experience the users get on their SharePoint customizations will be in line with User Interface of Office 365.
  • There will be more and newer experiences as Microsoft is heavily investing in this.
  • There are possibilities to extend this Framework and create customizations that suit the requirements of end-users.
Get a Quote
shares