What is Microsoft SharePoint Framework?
Microsoft SharePoint Framework (SPFx) is a page and web part model that offers full client-side SharePoint development support as well as simple integration with SharePoint data. It enables you can create user experiences and apps that are mobile-ready and responsive using the most recent web technologies and tools in your chosen development environment.
Why Microsoft SharePoint Framework?
- SharePoint was first released in 2001 as an on-premises product. A large developer community has extended and shaped it in a variety of ways over time
- SharePoint product development teams use a variety of tools, such as web parts components, XML, and other features
There are a few downsides to this JS injection approach,
- While your solution can be packaged such that users can drag the control into the page, it is difficult to provide configurable choices
- The user can modify the page and change the script, which can cause the web part to break
SharePoint Add-in Model
The add-in/app-part model introduced in SharePoint Server 2013 is one option for NoScript solutions. This implementation generates an iFrame thatexecutes the actual experience. The advantage is that it is easier for information workers to trust and deploy because it is external to the system and has no access to the current DOM/connection. On NoScript sites, end users can install add-ins.
There are a few downsides to this SharePoint Add-in approach as well,
- They run in an iFrame, as it requires a new request to another page. iFrames are slower than the Script Editor web part
- The page must go through the entire authentication and authorization process, make its own calls to retrieve data from SharePoint, load a number of JS libraries, and more
- A Script Editor web part, for example, may take 100 milliseconds to load and render, whereas an app part may take 2 seconds or more
Lightweight Components/Tools Used
**Server-Side tool comparison with SPFx development tools environment.
What kind of tools are required?
- Microsoft 365(M365) tenant
- An Office 365 tenant or Microsoft 365 tenant, or Azure tenant is the same regardless of the service you are using
- SPFx development environment
- Code Editor
- You can use any code editor or IDE that supports client-side development to build your web part, such as Visual Studio Code (IDE/Code editor we are using here)
- Install Node.js
- Development Toolchain (Install Gulp, Yeoman, Yeoman SharePoint Generator)
- Code Editor
- SharePoint client-side web parts are controls that appear within a SharePoint page and run in the browser client-side
- Web parts can be used with classic SharePoint pages
- They provide out-of-the-box responsiveness and a modern experience for the users
- Free, open-source toolchain
Client Side Web Part Flow
Setup Developer Environment for SPFx
The commands listed below will help you prepare your developer environment for SPFx.
Install Node JS
- Install the latest LTS version from https://nodejs.org
- Check the version of NodeJS you already have installed
Command: node -v
Install Code Editor
Install any of below code editors,
- Visual Studio Code
Install Yeoman and Gulp
Run the below command (to install globally)
Command: npm install -g yo gulp
Install Yeoman SharePoint Generator
Run the below command,
Command: npm install -g @microsoft/generator-sharepoint
Note: Batch files can be made to install all packages.
Updating NPM Packages
Yo, Gulp, Yeoman SharePoint Generator is installed as an NPM package. To check and update them, use the commands listed below.
- To update NPM,
Command: npm i -g npm
Folders in Solution
- src – The code files are stored inside this folder which Includes a web part code file (HelloWorldWebPart.ts) and a JSON configuration file
- config – Contains a set of JSON files for configuration. Bundling and packaging each require a different configuration file
- SharePoint – Contains the final .spapp file generated by the gulp package-solution command
Major Files in Solution
- Web Part Class – The web part class extends BaseClientSideWebPart. Each client-side web part should extend from BaseClientSideWebPart, which provides the web part’s basic functionality
- Property Type Interface (IHelloWorldWebPartProps.ts) – The web part class accepts the property type of interface. Using this interface, we can create custom properties for the web component. We can include any of the properties listed below,
- Choice Group
- Horizontal rule
- Multi-line Textbox
- WebPart Manifest – HelloWorldWebPart.manifest.json contains web part metadata such as display name, description, icon, version, and id
- Config.json – The configuration file includes information about bundling, the components used in the solution, and the solution’s entry point
Create Web Parts with Microsoft SPFx
SharePoint development companies can meet a variety of complex custom requirements by combining modern JS tools and libraries with the SPFx. Continuous Development or Continuous Integration can be used for SPFx development (e.g., Azure DevOps). Other advantages include its lightweight nature, high performance, and ease of use. It is preferred for SharePoint development businesses to choose the contemporary SharePoint site over the classic site because Microsoft regularly releases new features for developing current SharePoint sites.