SharePoint Framework (SPFx) is a modern and flexible development model introduced by Microsoft for creating customized solutions in SharePoint Online and SharePoint on-premises. It allows developers to create web parts, extensions, and apps that easily integrate with the SharePoint user interface, offering a cohesive and performing user experience. Thanks to the use of standard technologies such as TypeScript, React and other JavaScript tools, SPFx allows you to develop responsive and highly customizable solutions, also ensuring centralized security and deployment management. In this article we are going to see in more detail what SharePoint Framework is, what are its functionalities and the advantages of its adoption for the development of your own apps and corporate intranets.
With each version of SharePoint, Microsoft introduced various new features and provided different ways to meet the personalized requirements of end users. For customization, Microsoft has made the SharePoint development platform available. Over the past few years, we've seen Microsoft introduce different development models for SharePoint. For the development of add-ins, client-side components and customized solutions with different scopes, which address a wide range of needs for SharePoint developers.
To customize our requirements in the modern Office 365 user interface, Microsoft introduced a new development model called the SharePoint Framework (SPFx). The SharePoint Framework solution is suitable for SharePoint development companies for both SharePoint Server (SharePoint 2016 Feature Pack 2 and SharePoint 2019) and SharePoint Online.
The new SharePoint Framework (SPFx), offers full support to SharePoint developers for easy integration with SharePoint, support for open source tools and client-side development services for SharePoint. With SharePoint Framework, you can use modern web technologies and tools in the development environment to create productive, portable, ready, and responsive experiences and applications right from the start.
But how does it work and what are its main characteristics? Let's see it together in more detail in the next sections.
SharePoint Framework (SPFx) is a template for creating customizations based on Microsoft SharePoint. The Framework is based on the concept of building client-side solutions that integrate with the modern SharePoint user experience.
In recent years, we have seen different development models for SharePoint. Starting from the WSP in MOSS 2007, through the Sandboxed Solutions in SharePoint 2010, up to the SharePoint Add-ins in SharePoint 2013. SharePoint personalization models have evolved with a single objective: to separate customizations from SharePoint to ensure the hygiene and stability of the platform.
The SharePoint Add-in template was the first step in performing customizations outside of SharePoint. Despite the different forms of add-ins, the model had some limitations, one of which is the use of iframes to integrate add-ins into pages.
As SharePoint SPFx and technology in general are evolving and users require new functionality from their collaboration platforms, a new SharePoint UX has been designed to respond to that request. SPFx is now the only template for building customizations in modern SharePoint.
An important aspect to keep in mind is that SharePoint's modern UX, together with all its components, uses responsive web design. This means that regardless of whether you are using a desktop computer or a smartphone, if you browse a modern team site, you can easily enjoy its content.
When building SharePoint SPFx solutions, following the guidelines provided by Microsoft, not only will the developed solution look great on mobile devices, but it will also be rendered in the native SharePoint mobile app. It's important to remember, however, that SharePoint Framework is just that: a framework and you should still analyze the quality of the code you write.
To build SharePoint SPFx solutions, you can use any JavaScript framework you want, and creating SharePoint solutions isn't limited to Windows and Visual Studio. Because SharePoint Framework uses widely used web development stacks, solutions can be built on any platform, including OS X and Linux, using the code editor of your choice.
For the first time, Microsoft is not using a proprietary development model specific to SharePoint, but is instead using tools and techniques that are widely used by developers on all platforms and stacks. In addition, the Product Group is committed to using only publicly available APIs to build their solutions on top of the framework, which will allow developers to build solutions with functionality comparable to those available “out of the box” and beyond.
But let's quickly list the main features of SPFx below:
An important architectural consideration to consider when using SharePoint Framework (SPFx) is that it is based on JavaScript and so SharePoint SPFx solutions run in the browser in the context of the current user.
There is no elevation and trimming of security, so special care must be taken when executing custom solutions. This is one of the reasons why using the SharePoint Add-in template is still a good option, especially for the use of third-party solutions.
SharePoint is a rich platform and there are many different scenarios for extending its standard capabilities, and SharePoint Framework is unlikely to support all of these scenarios, and combining SharePoint Framework customizations with SharePoint Add-in could result in particularly powerful solutions.
We created intranet.ai, which now has over 200 installations worldwide. It is the ready-to-use and customizable solution for digitizing the processes and communication of any company. We'll help you:
Contact us if you have a SharePoint Online project in mind.
The installation of SharePoint Framework is not complicated and requires the completion of a few simple steps to be able to start using it right away. So let's see what these steps are and how to put them into practice.
Node.js is the fundamental component for the SharePoint Framework environment, since it acts as a local server that allows you to compile, build and run the SharePoint environment directly locally. This configuration greatly speeds up and simplifies the development process.
In particular, if your SharePoint application doesn't need access to specific SharePoint resources, you can develop it completely locally without having to have a tenant or direct access to SharePoint.
To install Node.js, download the installer from the link below and proceed with the installation. It is not necessary to change any configuration on the different screens, just click on the 'Next' button and the process will be completed.
Link for installing Node.js: https://nodejs.org/en/
Remember to restart the computer at the end of the installation, otherwise you will not be able to recognize the commands in the following steps.
Visual Studio Code is the IDE provided by Microsoft, known for supporting a wide range of programming languages. Compared to Visual Studio, Visual Studio Code is much lighter and faster. While there are other similar options, such as Atom, Visual Studio Code is often preferred for its speed and simplicity.
To install Visual Studio Code, click on the link below and start the installation. You can customize the configuration and select all the checkboxes.
Visual Studio Code installation link: https://code.visualstudio.com/
There are 3 NPM packages to install to complete the configuration. NPM packages are hosted JavaScript files that are created for a specific purpose. Likewise, the packages listed below each have their own function.
To install the above-mentioned NPM packages, just open the Node.js command prompt (click on Start and search for "node.js “) and run the following commands:
npm i -g @microsoft/generator-sharepoint
npm i -g yo
npm i -g gulp
After executing the commands, the configuration is complete and you can start creating your SharePoint Framework project.
A SharePoint web part is a modular unit of information that forms the building blocks of a SharePoint page. Essentially, it's a standalone component that can be inserted, configured, and reused within SharePoint pages.
Web parts can be considered as interactive widgets that integrate perfectly into the SharePoint architecture, allowing users to customize their pages by adding functionality that ranges from simple blocks of text to complex data connections.
Using SharePoint Framework (SPFx), you can develop different types of web parts to meet various business needs and improve the user experience.
Let's take a look at some of the types of web parts that can be created with SPFx in the list below:
SPFx extensions provide a secure way to extend and personalize SharePoint Online experiences without compromising the improvements that Microsoft provides to the user interface.
In the classic version of SharePoint, the user interface was often modified to completely overwrite the basic experience. However, this blocked the implementation of new features and created operational and maintenance challenges for customers, with a negative impact on the value provided by the platform.
With the introduction of modern SharePoint experiences, Microsoft has also introduced SPFx extensions as an option to extend SharePoint Online in a secure and future manner. There are several extension options that allow for highly personalized SharePoint experiences.
The main difference between extensions and web parts in SharePoint is that web parts are designed to be added to pages by content editors using the web part selector and can be configured according to business needs. SPFx extensions, on the other hand, are added to the user interface through automation in the SPFx package and, by default, cannot be configured by content editors.
Here are the different types of extensions currently available to build an extensible user interface for SharePoint Online.
As with any development tool, there are some precautions to consider when using SharePoint Framework for the development of web parts and extensions that can help developers get the most out of it.
Once you have found the package that you want to include in your project, you will need to install and save it. The best practice is to install it with the command:
npm install -save
which will save dependencies with the ^ prefix by default. This means that during the next npm install the last module will be installed without major version changes.
If you don't save your dependencies, the situation can become problematic for production deployments: it's possible to have different versions locally than in production. If someone releases a new version, you might run into problems if this version has a bug affecting the production system.
To solve this problem, you can use
npm shrinkwrap
which will generate a file npm-shrinkwrap.json containing not only the exact versions of the installed modules, but also those of their dependencies, and so on. Once this file is created, npm install will use it to reproduce the same dependency tree.
In the past, you would upload JS and CSS files to the Assets library. However, in SPFx best practices, enabling and configuring a CDN (Content Delivery Network) offers great performance advantages. In online tenants, enabling CDNs showed a performance improvement of up to 30-40% in retrieving files such as CSS and JS.
This allows pages to be displayed more quickly for end users, run JS files faster and reduce page load times, improving the visual experience. The advantage derives from the very nature of CDNs, which work as caching mechanisms and store static assets such as JS, CSS, images, favicons, etc., closer to the user's environment.
Enabling CDNs is not mandatory, but is considered a best practice. However, it is possible to upload the assets to the SiteAssets library or other document libraries accessible to end users and serve the files from there. In the SharePoint framework (SPFx), you can set the path in the CDNBasePath parameter of the JSON manifest file, and then manually upload the files to that location.
If you leave CDNBasePath empty and your CDN isn't enabled, the files will be served from the App Catalog site collection. The place where you load the app is also a document library from which these files will be served.
SharePoint Framework application packages (SPFx) can be distributed at the tenant level, making the app available throughout the tenant, which is beneficial.
However, if for some reason you're using a single Office 365 tenant for development, UAT, and production (for example, separate site collections for each environment), this option may not be feasible. In such cases, you should consider using the app catalog at the site collection level.
The SPFx framework is still evolving, and during this process, some Microsoft releases may have bugs that cause problems.
Microsoft responds quickly to these issues by releasing patches with fixes. It's important to stay up to date with the latest SPFx packages to ensure stability and access to any improvements and fixes.
The SharePoint platform has been at the center of the corporate digital infrastructures of for more than twenty years now more than 200,000 organizations worldwide, with a base of more than 190 million active users. These numbers include companies of all sizes, from government bodies and multinationals to small and medium-sized businesses, that use SharePoint both in the online version (part of Microsoft 365) and on-premises to build intranets, collaborative portals, document management systems and other business solutions.
And the reasons are simple: its versatility and ease of use make it an incredibly solid and reliable work tool for those who want a complete web collaboration platform full of solutions to meet their needs.
And SharePoint Framework represents another powerful tool for developing customized solutions within the SharePoint ecosystem, offering flexibility and integration with modern technologies. The ability to create reusable and modular components, such as web parts and extensions, allows companies to adapt SharePoint to their specific needs, overcoming some of the limitations of previous versions of the Microsoft collaboration platform.
While requiring front-end development skills, SPFx facilitates the adoption of standard development practices and the use of modern tools, contributing to a more secure and manageable implementation of solutions and with the continuous evolution of SharePoint Framework, companies have the opportunity to create increasingly functional and tailored digital environments, to support their activities and overall productivity. Try it to believe it.
SharePoint Framework (SPFx) is a development model introduced by Microsoft for creating customized solutions in SharePoint, both Online and on-premises. It allows developers to create web parts, extensions and applications integrated into the SharePoint user interface using standard technologies such as TypeScript and React.
SPFx allows you to develop client-side solutions that integrate with the modern SharePoint user experience. It supports open source tools and client development services, allowing the use of modern web technologies to create responsive and portable applications.
Configuring SPFx includes installing the necessary tools such as Node.js, Yeoman, and Gulp. We then proceed with the creation of a new project using Yeoman generators specific to SharePoint and, finally, with the development and testing of the solutions directly in a SharePoint environment.
You can develop web parts that display data, provide interactive functionality for users, or integrate with external services. These solutions can be customized to meet different business needs and improve the user experience.
Extensions in SPFx allow you to customize elements of the SharePoint user interface, such as toolbars, navigation menus, and notifications. They offer the ability to extend the functionality of SharePoint, going beyond simple web parts.
For best results, it is recommended to follow Microsoft guidelines to ensure compatibility and performance, keep the code clean and modular for easy maintenance, and test the solutions on different devices and browsers to ensure a consistent user experience.
The Modern Work team effectively and swiftly addresses IT needs, primarily focusing on software development. The technical staff is well-trained in implementing software projects using Microsoft technology stacks and is skilled in managing both agile and long-term projects.
