Before digging into SPFx development, it is important to understand the ecosystem it applies to. Microsoft 365 is a cloud platform dedicated to productivity offered by Microsoft and regrouping several workloads (aka applications), such as the following:

• Office applications (Word, Excel, and PowerPoint)
• Specialized tools, like:
  • Exchange (Outlook for emails and calendars)
  • SharePoint (organizational document storage, intranet portals, collaboration and sharing, and so on)
  • Teams (real-time communications, meetings)
  • OneDrive (personal storage)

Microsoft 365 is accessible through several subscription plans suitable for both individuals and companies (https://www.microsoft.com/en-us/microsoft-365/buy/compare-all-microsoft-365-products), determining the available applications and features for users.

Being a software-as-a-service (SaaS) platform, the platform itself is cloud-based only and most of the offered applications are accessible...

SPFx is the preferred development model when it comes to customizing or extending the SharePoint experience and beyond. It was initially introduced for SharePoint as part of the modern SharePoint experiences introduced in Microsoft 365 (at the time called Office 365) and is the evolution of the traditional add-in development model that appeared with SharePoint 2013.

SharePoint Add-ins

With SharePoint add-ins, applications were hosted either directly on SharePoint (SharePoint-hosted solutions) or in your own server (provider-hosted solutions) and integrated into the user experience through an iframe. The main goals were mainly to do the following:

• Reduce the risk involved by historical SharePoint farm solutions (developed server-side with .NET), hosted, and executed directly on SharePoint servers that could harm the entire farm
• Control customizations by providing “placeholders” on sites where add-ins can be integrated safely without interfering...

SPFx is not only about SharePoint anymore and offers a lot of capabilities beyond it, for instance, for other tools in the Microsoft 365 suite.

Depending on whether you work with the cloud or on-premises, possibilities won’t be the same due to technical limitations.

Enumerating differences between SharePoint Online and SharePoint On-Premises

SPFx lets you customize parts or integrate within the default SharePoint UI experience. It can be used both with SharePoint Online and SharePoint On-Premises. However, with the on-premises products, the maximum version of SPFx you can use is 1.4.1 for SharePoint Server 2019 and 1.5.0 for SharePoint Server Subscription Edition. For SharePoint Server 2016 SP2, the maximum version is 1.1.0. It means you are limited to the following solution types with on-premises products:

• Web parts for modern or classic pages
• Application Customizer
• Field Customizer
• ListView extension

All other...

The Microsoft 365 & Power Platform Community [formerly Pattern and Practices (PnP)] (https://pnp.github.io/) is a community around Microsoft 365 and Power Platform that regroups articles, videos, samples, tools, solutions, and so on to help you get the most out of the platform, focusing on value without reinventing the wheel. It is driven by Microsoft and people from the community and is one of the widest and most active technical communities in the world.

Figure 1.21 – The Microsoft 365 & Power Platform community website

This initiative is mainly technically oriented but not only; many topics around Microsoft 365, such as document management, governance, adoption, and best practices can also be found. As it is driven by Microsoft, this is also the preferred channel to stay up to date about the latest features and updates through regular community calls, especially on the SPFx side.

As...

In this chapter, we started introducing the ecosystem surrounding SPFx, especially Microsoft 365, and we enumerated the differences between SharePoint Online and On-Premises versions. We detailed SPFx philosophy and history, highlighting key features released over the years and what it means for developers.

Then, we covered all the capabilities of the framework, listing the two types of solutions that can be created with it: web parts and extensions. We went through all possible customizations, explaining how they integrate with SharePoint, Teams, or Viva Connections, and giving usage examples for each.

We finished by listing key community resources around SPFx and Microsoft 365 to help developers speed up their developments.

In the next chapter, we’ll detail the technical and functional architecture for both Microsoft 365 and SharePoint. We’ll also discuss how to access data from these platforms with SPFx solutions.