What is the SharePoint Framework (SPFx)?
Ever wondered what the SharePoint Framework is? Ever asked yourself "what can I build with the SharePoint Framework?" You're in luck because that's what this comprehensive article answers! This article assumes you don't have to have any prior knowledge or experience with the SharePoint Framework. You'll get answers to your questions "What is the SharePoint Framework?" as well as “What can someone build with the SharePoint Framework?” In this article.
by Andrew Connell
Last updated September 21, 2024
Focus Mode
- What is the SharePoint Framework?
- What can you build with the SharePoint Framework?
- Conclusion
This is one of a multi-part series of posts answering the most common questions on the SharePoint Framework. This series, SharePoint Framework Five “W"s & One “H” answered, gives you the best high-level picture of the SharePoint Framework. I ( Andrew Connell) wrote this series in late 2020 to help people new to the SharePoint Framework get the answers to the most common and basic questions about the SharePoint Framework.
What is the SharePoint Framework?
The SharePoint Framework (SPFx) is the customization and extensibility development model Microsoft currently recommends for all customers of Microsoft SharePoint. It’s a framework SDK and API contract for developers who want to customize their SharePoint implementations.
Client-side customization framework
In a break from previous development models, this model is entirely client-side. This means that all customizations are implemented in JavaScript ( TypeScript) and CSS and therefore are executed in the browser. Previous development models usually relied on some sort of server-side component, but as I explain in the post, Why did Microsoft create the SharePoint Framework, these not only outlived their usefulness but prohibited customers from easily migrating to new versions of SharePoint and from Microsoft offering a hosted SharePoint offering in Microsoft 365 ( formerly Office 365).
Addresses shortcomings of previous client-side scripting implementations
With the SPFx, Microsoft is fully embracing client-side customizations on existing SharePoint pages that developers were previously implementing using the content editor web parts (CEWP) and script editor web parts (SEWP). Customizations implemented using CEWPs or SEWPs were brittle solutions in the sense that anyone with edit rights on the page could change the code of the solution. While this is certainly an advantage to rapid development in many scenarios, it is a problem in organizations where many users rely on a custom solution and someone can easily make a change without going through a change management process or introduces a bug in the solution...
Microsoft addressed these two shortcomings with the SPFx. When developers create a custom solution of one or more SPFx components, the resulting files deployed to SharePoint are packaged into a SharePoint Package file ( .sppkg). This package is then deployed to your SharePoint environment and made available as an app. To add it to the page, a user simply has to select the SPFx component from the list of available components.
Introduces a “page contract”
As I explain in the post, Why did Microsoft create the SharePoint Framework, previous customization options didn’t include a contract for developers when customizing SharePoint pages. This was primarily an issue when using the JavaScript Injection technique to customize SharePoint pages...
SharePoint Development: SharePoint Framework Enterprise Guidance
“The SharePoint page HTML DOM is not an API. You should avoid taking any dependencies on the page DOM structure or CSS styles, which are subject to change and potentially break your solutions.
Mobile friendly & responsive
Microsoft likes to boast that all SPFx solutions are mobile friendly, accessible, and responsive by default.
Simplified permissions - all customizations run in the current context
All client-side solutions that run within a browser, including SPFx, execute within the context of the current user.
Developers are free to use any web framework or utility library in their solutions
Like I said above, all SPFx components are client-side solutions manifested in HTML, JavaScript, and CSS. While you may have heard that SPFx solutions are primarily built using React, the only real bias is towards TypeScript.
Using Angular in SharePoint Framework Projects
Are you interested in using Angular in SPFx projects? Check out our four-part blog post series covers the challenges developers face trying to incorporate modern Angular apps in SharePoint Framework projects...
SPFx includes APIs that simplify integration of SharePoint, Microsoft Graph or third-party services
Unlike previous development models, Microsoft included a set of APIs in the SPFx to make it easier to integrate data from external sources and interact with APIs.
SPFx is both for first-party & third-party developers
The SPFx is designed to be used by both first-party and third-party developers.
What can you build with the SharePoint Framework?
The second question I wanted to address in this post is what kind of things developers can build with SPFx. This is always what developers ask of a framework… What can you use it for? or What can I do with it?
SPFx provides developers with three types of things they can build: web parts, extensions, library components, and Adaptive Card Extensions. Some of these include additional sub-types of components they can create. Let’s look at each of these.
Web parts
Web parts are the oldest type of customization developers have been able to build for SharePoint.
Single part app pages (aka: single page apps/SPAs)
Developers can create single part app pages which are just very big web parts. These are more commonly known as single page apps, or SPAs, and act as large applications.
Microsoft Teams solutions
Developers can also use SPFx web parts to create custom apps for Microsoft Teams.
Extensions
Another type of SPFx component developers can create are extensions.
Application customizers
The application customizer extension type enables developers to add client-side script to all pages in a SharePoint site.
Command sets
Command sets allow developers to add toolbar buttons as well as items to the item context menus to SharePoint lists and libraries.
Field customizers
A field customizer is a SPFx extension that allows developers to use script to define how a cell within the grid view of a SharePoint list or library is displayed.
Search extension
The fourth type of extension allows developers to modify the search query entered by the user in the Microsoft search bar before submitting it to the search results engine.
Adaptive Card Extensions
This last type of component, Adaptive Card Extensions (ACEs)...
Conclusion
My goal in this post was to answer the question What is the SharePoint Framework? This is done by answering the two primary questions above...
author
Andrew Connell
Microsoft MVP, Full-Stack Developer & Chief Course Artisan - Voitanos LLC.
Andrew Connell is a full stack developer who focuses on Microsoft Azure & Microsoft 365. He’s a 22-year recipient of Microsoft’s MVP award and has helped thousands of developers through the various courses he’s authored & taught.