Image
sharepoint framework blog banner

What is SharePoint Framework, and why is it popular?

Vrunda Ghate
August 26, 2021

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's used for client-side SharePoint development based on JavaScript & open source tools. It doesn't 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's a SharePoint 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, access applications on the cloud, SPFx uses modern technologies for development. Following is the comparison of old & new tooling chains.

Managed-Services-providers Managed-Services-providers

SPFx vs. Script Editor Web parts vs. App Parts

  1. JavaScript Injection using Script Editor:-

    This is one of the most popular web parts in SharePoint, 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's not safe.
    2. The configuration options can not be provided easily.
    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, and it was introduced in SharePoint 2013. It creates an iFrame where the experience resides & executes. This will require separate authentication & we won't be able to access DOM elements with this, thus secured.

    But there are disadvantages of this too:

    1. As it works in a separate iFrame, it needs to have its authentication, calls to SharePoint data, 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 it's 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 have the flexibility to customize modern lists, libraries, 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. Here are some popular ones:- React, Angular, Vue.js, 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's compare it with SPFx solutions:-

Category Power Apps SharePoint Framework
Performance Even for small applications, the load time taken by Power Apps is more. Performance is better than Power Apps. Small or large-scale applications load quickly compared to Power Apps.
Data Connections Multiple out-of-the-box connectors are available for connecting with a variety of data sources which makes the process easy. Data Connections require a bit more setup to be done in SPFx, but they can be tailored to do exactly what you want.
Time to build Power Apps takes less time to build apps/forms than SPFx as it's a low code solution. SPFx takes more time to build the apps/forms/solutions as more development efforts are required.
Size of applications & Customizations Suitable for small-scale applications. Even though there are options available for customizations, you will not have complete control over them. Suitable for small & large-scale applications, it can be fully customized. But for small applications, development efforts & time required can outweigh the benefits.
Skills required Excel background (Excel formula structure & cell construction is closely related to Power Apps), Math, logic, design. Client-side development experience, Typescript, JavaScript Frameworks, UI Design.

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

What all can you build with the SharePoint framework:-

With SPFx, we can build three types of things: Web parts, Extensions, 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, JavaScript and can leverage frameworks & libraries like Angular, React, jQuery. All web parts have public properties that we can use to configure the web part.

    Managed-Services-providers Managed-Services-providers
  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 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. In 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, and 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 an 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's 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's 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's not suitable for long-running operations. The web request can not wait longer for the response. So, for such processes, a hybrid solution will be helpful, where long operations can be implemented in Azure web jobs & SPFx can get updates via webhooks.

 

Want to read more on SPFx? Check out this Blog

 

About the Author

Vrunda Ghate, Senior Associate Engineer, Cloud ADM – Microsoft

Vrunda Ghate has worked in Microsoft SharePoint Online to build SharePoint business solutions and has two years of experience. She has designed, developed & executed many applications for various clients & internal projects(jCorpNet).

Add New Comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.