What is SharePoint Framework, and why is it popular?

SharePoint Framework (SPFx) is a page & web part model used to create SharePoint customizations with any JavaScript Framework. It provides easy integration with SharePoint data, and it is used for client-side SharePoint Framework development based on JavaScript & open-source tools. It does not replace the standard SharePoint add-in models & script editor web parts, but it makes the process of creating SharePoint customizations rich & more accessible for developers. It is a SharePoint Framework development model compatible with modern SharePoint sites and the classic experience.

Client & Server-side technologies comparison:

In old-school SharePoint, the development was mainly on the server side with C#, .Net Framework & SharePoint object model. But now, to suit modern development strategies where we can develop, host, and access applications on the cloud, SPFx uses modern technologies for development. Following is the comparison of old & new tooling chains.

SPFx vs. Script Editor Web parts vs. App Parts

1. JavaScript Injection using Script Editor: -

   This is one of SharePoint’s most popular web parts, in which developers can inject script into the SharePoint page. We can interact with DOM elements with this approach. But there are some cons:

   1. The end-user can edit the page & modify the script, so it is not safe.
   2. The configuration options cannot be provided quickly.
   3. There are certain cases where the "NoScript" feature is enabled for specific site collections. So, the script editor web part will be blocked from such sites.

2. JavaScript Injection using Script Editor: -

   This is an option for solutions that run "NoScript" sites, which was introduced in SharePoint 2013. It creates an iFrame where the experience resides & executes. This will require separate authentication & we will not be able to access DOM elements with this, thus secured.

   But there are disadvantages to this too:

   1. As it works in a separate iFrame, it needs to have its authentication, calls to SharePoint data, and load various JavaScript files. So, it will be slower than the script editor web parts.
   2. Also, making responsive designs and inheriting CSS & theming information will be more difficult.
   3. Not being able to access DOM elements is a disadvantage because we may need to interact with the elements on the SharePoint page.

3. SharePoint Framework: -

   The new SPFx model solves the issues in the above two options & also its popular because of the following features: -

   1. Open-source tooling: SPFx is an open & connected platform. It leverages all the open-source tools & can be installed on any machine.
   2. SharePoint 2019 On-Premise Customization: The new SharePoint Server 2019 can utilize modern SPFx features to build & deploy solutions.
   3. Capabilities to customize modern UI: Earlier, we could customize classic pages using JavaScript injection, but there was no option to customize modern SharePoint pages. With SPFx, we can customize modern lists, libraries, and pages to enhance user experience.
   4. Can leverage many JavaScript frameworks: We can choose anyone from several JavaScript frameworks to develop client-side web parts. Some popular ones are React, Angular, Vue.js, and Handlebars.
   5. Deploying SPFx web parts as MS Teams tabs: SPFx v1.8.0 onwards, SPFx web parts can be added to Teams as tabs with little customization. This allows utilizing web parts more & gives them more exposure.
   6. Library Components, a new feature: Developing reusable code that can be shared & reused among many components can be beneficial. SharePoint Framework provides this feature to create standard services that many web parts can utilize.

Power Apps VS SPFx: When to use what: -

Power Apps is a low-code development component of Microsoft's Power Platform. We can build custom business apps that can connect to various online & on-premises data sources (Microsoft 365, SharePoint, SQL Server & so on). As Power Apps is also becoming popular with an increase in the number of users due to its rapid application development, let us compare it with SPFx solutions: -

Counter View: Customer Success Story: SharePoint Designer Workflows migration to Power automate and Power apps

What can you build with the SharePoint Framework: -

With SPFx, we can build three things: Web parts, Extensions, and Library Components. And these include sub-components too.

1. Web parts: -

   Web parts are the boxes of functionality added to a page, and other web parts & can access DOM elements of the page. They run in the current context of the SharePoint page. It can be developed using HTML, CSS, and JavaScript and can leverage frameworks & libraries like Angular, React, and jQuery. All web parts have public properties that we can use to configure the web part.

   
2. Extensions: -

   Extensions allow developers to extend or augment the SharePoint user experience for modern pages & document libraries. This can be useful for branding across sites in the entire tenant. SPFx includes three types of extension: -

   1. Application Customizers:- This enables developers to add scripts across SharePoint pages and access HTML placeholders on the page, e.g., header & footer placeholders. It can be used for branding across sites.
   2. Field Customizers:- A Field Customizer allows us to create modified views to data for fields & columns within a list or library. For example, we can use it to display colored bars or a KPI instead of a text-based percentage in a field to have a more engaging experience.
   3. Commands Sets:- Command Sets help in creating custom commands for lists & libraries. It allows adding new actions by extending the command surfaces of SharePoint
3. Library: -

   A library component allows creating of shared code that can be referenced & used among all components in the tenant.

4. Microsoft Teams Solution: -

   The SPFx web parts can be used to develop custom apps for Microsoft Teams. A web part's manifest file can be updated to indicate that it can be used as a Microsoft Teams tab. This way, a single web part can be added to the SharePoint page and the Microsoft Teams custom app.

Single Page Apps (SPAs): -

The Single Page Apps are just significant web parts that are added to the page. They act as an application; no other web part can be added to the page. Developers can create SPAs by simply creating web parts & setting a string in the manifest file to indicate a SPA.

Like all other development models, there are some downsides for SPFx too: -

1. Elevating Permissions: As SPFx solutions run in the current user's context, like any other client-side solution, there is no inbuilt option to elevate permissions for impersonating another user.
2. Client-Side: As everything is JavaScript is SPFx at the end of the day, it is easy to reverse engineer & extract the logic, making it suitable for business-critical web parts.
3. Long-running operations: As SPFx is entirely a client-side implementation, it is not suitable for long-running operations. The web request cannot wait longer for the response. So, for such processes, a hybrid solution will be helpful, where extended operations can be implemented in Azure web jobs & SPFx can get updates via webhooks.

Want to read more on SPFx? Check out this Blog