SharePoint Blogs
Sairam | AuthorAuthor : Shyam R | Just 2 Min Read

SharePoint frameworks (SPFx): An overview

SharePoint online has started moving from classic models towards modern sites for better user experience and customizations that are offered by SharePoint frameworks (SPFx). SPFx is page and web part model that can be developed using client-side languages and open-source tools. SPFx is an open and connected platform that can provide easy integration with SharePoint data. 

SharePoint frameworks (SPFx) allow a structured approach that can both enrich and extend the user interface of client-side web parts of SharePoint. Additionally, it offers unique features that can make SharePoint customizations available for developers and enterprises, without deviating from the existing applications. 

Key features of SharePoint Frameworks (SPFx)

  1. It runs within the context of the user browser and connection in the browser. There are no iFrames for the customization (JavaScript is embedded directly into the page). 
  2. Controls are rendered in the normal page DOM.
  3. Controls are responsive and accessible by nature. 
  4. It enables developers to access the lifecycle of SharePoint framework web part (render, load, serialize and deserialize, configuration changes, and more). 
  5. Does not have dependency on the underlying framework. Any JavaScript framework such as React, Handlebars, Knockout, Angular, and more can be used.
  6. Open source Development tools such as npm, TypeScript, Yeoman, webpack, and Gulp are used.
  7. SPFx web parts can be added on both classic and modern pages.
  8. Need tenant access to deploy or make changes to SPFx web part.
  9. It is safe, secure and performance is reliable.
  10. It enables controlled visibility by restricting who can see the web part in the App Catalog.
  11. Data models are not changed and can be completely transferable. 
  12. It supports mobile view of SharePoint online sites.
  13. SPFx web parts can be added to both classic and modern sites.
  14. End users can use SPFx client-side solutions that are approved by the tenant administrators on all sites, including self-service team, group, or personal sites.

Comparison: Script Editor Web parts vs App Parts vs SPFx Web parts

SPFx Webparts

  1. Client-side web parts
  2. Leverages modern JavaScript frameworks
  3. Can be used on classic SharePoint pages
  4. Provides modern experience
  5. Responsiveness and out of the box
  6. Free, open source tool 

Script Editor Web Parts

  1. Choice of developers for customizing DOM on classic SharePoint sites
  2. Script can be easily edited by any user
  3. Cannot be added to “NoScript” sites

App Parts

  1. Developed using Add-on model
  2. Uses iFrame
  3. Cannot access DOM of SharePoint page
  4. Development and deployment is a bit complicated

"In this article, we had a high-level understanding of SharePoint framework (SPFx) and its key features. We also compared between SPFX, Script Editor and App web parts".