SharePoint Framework

SharePoint Framework
Name	SharePoint Framework
Developer	Microsoft
Released	2016
Latest release	1.16.1
Programming language	TypeScript, JavaScript
Platform	SharePoint Online, SharePoint 2016, SharePoint 2019
License	Proprietary

SharePoint Framework is a client-side development model for building web parts and extensions that run in the context of Microsoft pages. It integrates modern web technologies and tooling with Microsoft 365 services and supports customization across SharePoint Online, SharePoint 2016, and SharePoint 2019. The framework emphasizes open-source toolchains, component-based UI, and integration with cloud services such as Microsoft Graph and Azure Active Directory.

Overview

The framework provides a model for building client-side components that render within SharePoint Online pages and communicate with services like Microsoft Graph and Azure Functions. Developers use languages and ecosystems associated with TypeScript, JavaScript, and libraries such as React, Angular, and Vue.js. It aligns with web standards and package ecosystems including Node.js, npm, and Yarn while interoperating with Office Add-ins and Microsoft Teams experiences.

History and development

Origins trace to Microsoft's initiative to modernize customization beyond server-side solutions like SharePoint Server 2013 and solutions built using Farm Solutions and sandboxed solutions. The initial public announcements occurred alongside updates to Office 365 and were influenced by trends set by projects such as Node.js Foundation and ecosystems like npm. Subsequent releases added support for additional hosts and backward compatibility strategies similar to versioning approaches used by .NET Framework and ECMAScript evolution. Community feedback from organizations including enterprises using Azure Active Directory authentication and partners in the Microsoft Partner Network guided enhancements and roadmap decisions.

Architecture and components

Core components include client-side web parts, extensions (including application customizers, field customizers, and command sets), and the workbench for local testing. The runtime model leverages the browser environment and integrates with Office UI Fabric (now Fluent UI). Build and packaging use tools and configs aligned with Webpack, Gulp, and the TypeScript compiler. Components interact with services via REST endpoints and SDKs for Microsoft Graph and may use authentication flows supported by Azure Active Directory and OAuth 2.0 patterns. The component model supports React components that can interoperate with styling frameworks like CSS-in-JS solutions and global styles adopted by Microsoft 365.

Development tools and workflow

A typical workflow uses Node.js and package managers such as npm or Yarn to manage dependencies, with scaffolding provided by Yeoman generators inspired by Yeoman project patterns. Developers rely on editors like Visual Studio Code or Visual Studio and debugging tools integrated with browser developer tools and F12 Developer Tools. Continuous integration/continuous deployment pipelines often employ Azure DevOps or GitHub Actions and artifact feeds such as npm registry or Azure Artifacts. Testing frameworks and patterns include unit tests with Jest and end-to-end tests using tools like Selenium or Playwright.

Deployment and hosting models

Deployment options include hosting client-side assets in the SharePoint app catalog, external CDNs such as Azure CDN, or static hosting on services like Azure Storage with static website hosting. Solutions can be packaged as SharePoint add-ins and deployed to tenant app catalogs managed through Microsoft 365 admin center or via automated pipelines in Azure DevOps. Hosting choices affect performance, caching, and governance, similar to considerations in large enterprises that use CDN strategies employed by organizations like Walmart and Netflix.

Security and permissions

Components authenticate against services using delegated permissions and application permissions managed through Azure Active Directory app registrations and consent frameworks familiar from OAuth 2.0 and OpenID Connect. Governance models align with tenant-level controls in the Microsoft 365 admin center and share responsibilities between administrators and developers akin to paradigms in Zero Trust architectures advocated by National Institute of Standards and Technology standards. Security reviews often reference practices from CIS benchmarks and utilize tools for static analysis and dependency scanning, paralleling supply-chain security guidance from entities like the Open Web Application Security Project.

Use cases and examples

Common use cases include building dashboard web parts that surface data from Microsoft Graph, line-of-business integrations that call Azure Functions or Azure Logic Apps, and customizations for intranets used by organizations such as universities and government agencies that leverage Active Directory integrations. Examples in enterprise scenarios mirror patterns used by companies integrating with Dynamics 365, Power Platform, and Microsoft Teams to provide cohesive employee experiences. Open-source community samples and starter kits often reference prominent libraries like React, Redux, and Lodash to demonstrate patterns for state management, performance optimization, and accessibility compliance aligned with WCAG guidelines.

Category:Microsoft technologies