Quick Summary: With the SharePoint Framework (SPFx), 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.
Introduction
SharePoint Framework is the latest development methodologies used for SharePoint customization and now also used in customization in Microsoft Teams. Microsoft is moving forward with modern experiences and provides greater flexibility and performance for end users and developer with SharePoint Framework. Using these guidelines will avoid for any disparity and will strengthen the performance of the solutions.
What is SharePoint Framework (SPFx)?
The SharePoint Framework (spfx meaning) is a page and web part model that provides full support for client-side SharePoint spfx development, easy integration with SharePoint data, and extending Microsoft Teams. With SharePoint Framework, can use modern web technologies and tools to build productive experiences and apps that are responsive and mobile-ready. With spfx sharepoint Framework, we can create client-side webparts, single part pages and extensions for SharePoint and tabs for Microsoft Teams.
Learn more about SharePoint Framework (SPFx)
Best Practices for SharePoint Framework (SPFx) Development
Following best practices which you need to remember for while developing SharePoint Framework (SPFx) projects.
Saving dependencies & Lock down 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 –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.
SharePoint Classic vs Modern Search Experience: A Complete Comparative Analysis
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 SharePoint Framework (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
SharePoint Framework (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 SharePoint Framework (SPFx) packages
As we know, spfx framework 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:
Update SharePoint Framework 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.
Conclusion
I understand the above solution have provided a value in regards to practices for sharepoint development best practices. C-Metric is the proficient Microsoft solutions provider with Microsoft Silver partnership. If you are looking for any Microsoft sharepoint development framework support, then C-Metric is a trusted partner to hire dedicated SharePoint experts to build an optimal product.
Author – Rashi Chauhan
Get in Touch