What are SharePoint Framework? : A Definitive Guide with Best Practices [ OverView ]
Last updated on 28th Dec 2021, Blog, General
The modern SharePoint UX is all about improving productivity and allowing people to easily access their information on any device. SharePoint Framework helps developers build solutions that seamlessly integrate with the modern SharePoint experience and offer users additional capabilities.
- Introduction to SharePoint Framework
- Features of SharePoint Framework
- Use client-side web parts beyond SharePoint
- SharePoint Framework development tools and libraries
- Overview of SharePoint Framework Extensions
- Has SharePoint Framework replaced other models?
- Is using the SharePoint Framework a best practice?
- So, when should I use the SharePoint Framework?
- Why Yet another model?
Introduction to SharePoint Framework:
The SharePoint Framework (SPFx) is a Page and Web Part model that provides client-side SharePoint development, easy integration with SharePoint data, and full support for extending Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to create productive experiences and apps that are responsive and mobile-ready.
SPFx is the recommended SharePoint customization and extensibility model for developers. Because of the tight integration between SharePoint Online, Microsoft Teams, and Microsoft Viva Connections, developers can also use SPFx to customise and extend all of these products. In fact, SPFX is the only extensibility and customization option for Viva Connection. In addition to SharePoint Online, SPFx is supported and can be used to optimise SharePoint on-premises deployments going back to SharePoint Server 2016.
- Controls are rendered in the normal page DOM.
- Controls are responsive and accessible by nature.
- It enables the developer to access the lifecycle in addition to rendering, loading, serialising and deserializing, configuration changes, and much more.
- The developer toolchain is based on popular open-source client development tools such as NPM, TypeScript, Yeoman, Webpack and Gulp.
- The performance is reliable.
- End users may use SPFx client-side solutions that are approved by tenant administrators (or their representatives) on all sites, including self-service team, group or individual sites.
- SPFx Web Parts can be added to both classic and modern pages.
- SPFx solutions can be used to extend Microsoft Teams.
Features of SharePoint Framework:
Following are some of the key features included as part of SPFx:
The Runtime Model improves on the Script Editor Web Part. It includes a robust client API, an HttpClient object that handles authentication for SharePoint and Microsoft 365, contextual information, easy property definition and configuration, and more.
- Client-side Web Parts can be used to deploy Single Page Apps (SPA) in SharePoint Online. For more information about using Web Parts as SPAs, see Using the Single Part App page in SharePoint Online.
- Client-side Web Parts can be used to implement tabs in Microsoft Teams. For more information about using Web Parts in Microsoft Teams, see Creating Microsoft Teams Tabs Using the SharePoint Framework.
- Client-side Web Parts can be used to implement Office add-ins in clients such as Outlook. For more information about using Web Parts in the Office client, see Creating Outlook Add-ins by Using the SharePoint Framework.
- Try building your first client-side web part using the SharePoint framework today!
Use client-side web parts beyond SharePoint:
Client-side Web Parts are the basic building blocks for implementing other types of customization in SharePoint, Microsoft Teams, and the Microsoft Office client! for example:
- The handle
- For more information about npm, see the npm documentation.
- SharePoint client-side development tools use Gulp as the build process task runner:
- Run the tool before each build to call the bundling and minification tasks.
- Compile LESS or Sass files into CSS.
- The development tool chain uses webpack for bundling. This enables you to define modules and where you want to use them. The tool chain also uses SystemJS, a Universal Module Loader, to load your modules. It helps you extend the scope of your Web Part by ensuring that each Web Part is executed in its own namespace.
SharePoint Framework development tools and libraries:
Node package manager (npm):
Gulp task runner:
Yeoman generator:Yeoman helps you kick start new projects while prescribing best practises and tools to help you stay productive. Yeoman SharePoint Generator is available as part of a framework for kickstarting new client-side Web Part projects.
Overview of SharePoint Framework Extensions:
You can use SharePoint Framework (SPFx) extensions to extend the SharePoint user experience. With the SPFx extension, you can customise more aspects of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx extensions are available for production use in all Microsoft 365 subscriptions.
The SPFx extension enables you to extend the SharePoint user experience within modern pages and document libraries, using familiar SPFx tools and libraries for Client-side development. Specifically, SPFX includes three extension types:
Application Optimizer: Adds scripts to the page, and accesses well-known HTML element placeholders and extends them with custom rendering.
Field Customizer: Provides a modified view of the data for the fields in the list.
Command Sets: Extends the SharePoint Command Surface to add new actions, and provides client-side code that you can use to implement behaviours.
- SharePoint is a rich platform and there are many different scenarios for extending its standard capabilities. The SharePoint framework probably won’t support all of them, and combining SharePoint framework customization with a SharePoint add-in can yield particularly powerful solutions.
Has SharePoint Framework replaced other models?
- The declaration of SharePoint Framework is not deprecating anything. Whatever we were able to do in the past, we can do now. There is one more tool in the spfx toolbox and it is up to you to choose the best tool for the job.
- One important thing to keep in mind is that while customizations created using the SharePoint framework work on both new and old sites, SharePoint add-ins only work with older sites. So, if you want to extend the new SharePoint UX, you will need to use SPFx.
- There is currently no need to use modern team sites and your organisation can still use the user experience it is familiar with. This is very important because many organisations have made huge investments in SharePoint solutions and trained many users to work with specialised UX. Modern Team Sites look great and offer a better user experience in a mobile-first world. As your organisation gradually adopts modern team sites, you will be building more and more solutions using the SharePoint framework to further enhance their capabilities.
- Although the SharePoint Framework has just been announced, it is not yet available to developers. However, you can start preparing for it by getting hold of the technologies already used by the SharePoint framework. You see, the SharePoint Framework has been based on tools that have been available for some time, but until now was irrelevant to us as SharePoint developers. This changes as the framework is released and in order to fully take advantage of its potential, it is important that you know these tools. In my next article I’ll share some tips on the tools you should start looking into to prepare yourself for the release of the SharePoint framework.
Is using the SharePoint Framework a best practice?
- Generally speaking, solutions based on the SharePoint framework are your only option whenever you want to expand the capabilities of modern team sites. SPFx is the only SharePoint development model that works with modern SharePoint sites.
- Another thing to remember is that SharePoint SPFx solutions work in both a modern and a classic experience. Even if your organisation is not yet using modern team sites, it may be worth it to build your solutions using the new SharePoint framework so that they can be used in the future.
- There are also other architectural considerations for using the SharePoint Framework and other SharePoint development models and I will discuss them in more detail in a separate article, but whichever development model you use, code quality is an important factor in your solution. How will you perform and stand the test of time? It’s important to find a way to be the gold standard in all customization projects.
So, when should I use the SharePoint Framework?
Develop Your Skills with Advanced Developing with the SharePoint Framework Certification TrainingWeekday / Weekend BatchesSee Batch Details
- We’ve seen quite a few development models for SharePoint over the years. Starting with WSPs in MOSS 2007, through Sandboxed Solutions in SharePoint 2010 to SharePoint Add-ins in SharePoint 2013. SharePoint customization models are evolving with one objective: to implement platform cleanliness and consistency, different from SharePoint customization. The SharePoint add-in model was the first step towards driving customization externally to SharePoint. Despite the various forms of add-ins, the model has some limitations, one of which is the use of iframes to integrate add-ins on a page.
- As SharePoint SPFx, and technology in general, evolve and users demand new capabilities of their collaboration platforms, the new SharePoint UX is designed to answer that demand. SPFx is now the only model for building customization in SharePoint Modern.
- An important fact to keep in mind is that modern SharePoint UX uses responsive web design with all of its components. This means that whether you’re using a desktop computer or a mobile phone, if you navigate a modern Teams site, you’ll be able to easily consume its content. When building a SharePoint SPFx solution, if you follow the guidelines provided by Microsoft, your solution will not only look great on mobile devices but will also be presented in the native SharePoint mobile app. It’s important to remember that the SharePoint Framework is just that – a framework. You should still analyse the quality of the code created by you and your team.
Why Yet another model?
- The SharePoint Framework (SPFx) is a model for creating customization on the SharePoint platform. The framework is based on the concept of building client-side solutions that integrate with modern SharePoint UX.
- For the first time, Microsoft is not using a proprietary development model specific to SharePoint, but instead leveraging tools and techniques widely used by developers across all platforms and stacks. At the same time, the product group is committed to using only publicly available APIs to build their solutions on top of the framework that will allow developers to build solutions with capabilities greater than those available out of the box.