Comparing Sharepoint Framework, Add-Ins, And Web Parts For Customizations
What is the core difference between SPFx, Add-ins, and Web Parts?
The SharePoint Framework (SPFx) allows developers to build client-side solutions using modern web standards like HTML, CSS, JavaScript, and web frameworks such as React, Angular, or Vue. SPFx solutions consist of client-side web parts, extensions, or custom Teams apps that run in the browser. They utilize the SharePoint REST API and other Microsoft Graph APIs to connect to SharePoint data and services.
SharePoint Add-ins are self-contained extensions that run remotely from SharePoint. They surface content, data, and services from SharePoint in external web or mobile applications. Add-ins use remote APIs like the SharePoint REST API and can leverage standards like OAuth and OpenID to connect back to SharePoint sites.
SharePoint Web Parts are server-side components that run within the SharePoint process. Web parts enable customization and extensibility features directly on SharePoint pages. Traditional web parts use ASP.NET and server-side code that executes within the context of SharePoint on the web front-ends.
SPFx uses modern web standards for building client-side solutions
The SharePoint Framework utilizes modern standards like TypeScript, Node.js, npm, and webpack to optimize the development experience. Client-side code bundles and leverages CDN optimizations to deliver high-performance solutions. The toolchain compiles to output standards-compliant bundles that run across all modern browsers.
Add-ins run outside the SharePoint context using remote APIs
Add-ins provide remote connectivity to SharePoint from external applications. They enable hybrid and cloud connected solutions using OAuth, OpenID Connect, and APIs like the SharePoint REST API. Add-ins can surface SharePoint content, data, and services securely from other platforms.
Web Parts are server-side components running in the SharePoint process
SharePoint Web Parts execute directly within the context of SharePoint on the server-side. This enables tighter integration with SharePoint databases, eventing models, and inline customization on pages. Web parts use legacy approaches like .NET and ASP.NET and are constrained by older standards and toolchains.
When to choose SharePoint Framework
The SharePoint Framework is the recommended approach for most customizations and lightweight solutions on modern SharePoint experiences. It enables faster development and optimizations leveraging modern standards.
Building modern, lightweight customizations
For customizations like web parts, extensions, and applications on modern SharePoint pages, the SharePoint Framework delivers the best development experience. The modern standards and toolchain optimize developer productivity and output performance.
Accessing modern SharePoint data and services
The SharePoint Framework easily connects to modern SharePoint data sources like the REST API and Microsoft Graph. Client-side solutions can efficiently access these services using standards like OAuth and OpenID Connect.
Leveraging modern web technologies and tools
SPFx enables developers to build SharePoint solutions using the latest web languages, frameworks, and workflows. Develop, debug, and deploy SharePoint apps and web parts using established open source JavaScript tools and libraries.
Sample SPFx Web Part Code
“`
import {Version} from ‘@microsoft/sp-core-library’;
export default class HelloWorldWebPart extends BaseClientSideWebPart
public render(): void {
this.domElement.innerHTML = `
`;
}
}
“`
This sample demonstrates creating a basic client-side SharePoint Framework web part. It imports the SharePoint client-side library, extends from the web part base class, and overrides the render method to output HTML content.
Add-ins for Remote Access and Hybrid Scenarios
SharePoint Add-ins provide remote connectivity and extensibility to SharePoint from external platforms and hybrid environments. They enable surfacing SharePoint in cross-platform mobile, web, and business applications.
Surface SharePoint content in other applications
Add-ins can securely surface SharePoint content, lists, libraries, and more in native mobile, single page applications, Microsoft Power Platform apps, Teams apps, and more. This provides remote data connectivity across environments.
Hybrid cloud and on-premises connectivity
SharePoint Add-ins connect SharePoint environments across hybrid topologies, enabling solutions across cloud, on-prem, private cloud, and custom deployments. Add-ins provide a consistent way to build extensible solutions across hybrid SharePoint estates.
Legacy Web Parts for Backwards Compatibility
Legacy SharePoint Web Parts execute in the server-side SharePoint process, enabling customizations on classic SharePoint pages and integration with existing SharePoint customizations.
Integrate with legacy SharePoint solutions
Custom legacy web parts can deeply integrate with proprietary SharePoint frameworks like WebpartPages and existing custom database extensions. This maintains customizations built for legacy releases.
Limited to old web standards and tools
Classic web parts utilize legacy Microsoft web dev stacks like .NET Framework, ASP.NET, Windows Server, and Internet Information Services. They don’t benefit from modern standards, tools, and optimizations available to modern solutions.
Summary
The SharePoint Framework delivers the most productive, performant option for building modern customizations like web parts and extensions on SharePoint pages. Add-ins provide secure remote connectivity for hybrid and cross-platform integration scenarios with SharePoint data and services. Legacy web parts maintain compatibility with existing solutions on legacy SharePoint releases.
SPFx is the modern approach for customizations
SPFx solutions utilize the latest web standards enabling faster, modular development and high-performance delivery of customizations.
Add-ins enable remote and hybrid scenarios
Add-ins provide consistent connectivity to SharePoint across hybrid environments and surfaces content in external applications.
Web Parts maintain backwards compatibility
Legacy web parts built using older Microsoft web stacks preserve customizations targeting legacy SharePoint versions.
