Microsoft SharePoint Framework with its Web Parts and Why Should We use it?

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 two alternatives: Client-side JavaScript Injection and SharePoint Add-ins

JavaScript Injection

The Script Editor is a popular web part in SharePoint Online. You can add JavaScript to the Script Editor web part and have it run when the page is rendered. It’s simple & effective. It can interact with other controls on the page since it uses the same DOM and runs in the same browser context as the page. It's also relatively performative, and simple to use.

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)

Web Parts

• SharePoint client-side web parts are controls that appear within a SharePoint page and run in the browser client-side
• Client-side web parts, leverages modern JavaScript frameworks
• 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
• Atom
• Webstorm

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
• lib – It contains processed code that can be bundled and distributed. This folder contains all TypeScript files that have been compiled into JavaScript files
• dist – Contains the final distributed files. Includes JavaScript bundle file
• config – Contains a set of JSON files for configuration. Bundling and packaging each require a different configuration file
• node_modules – Contains JavaScript modules downloaded by Node.js
• typings – Contains TypeScript typings files for various libraries that support IntelliSense for JavaScript libraries
• 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,
  • Button
  • Checkbox
  • Choice Group
  • Dropdown
  • Horizontal rule
  • Label
  • Link
  • Slider
  • Textbox
  • Multi-line Textbox
  • Toggle
  • Custom
• 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
• deploy-azure-storage.json
• package-solution.json
• gulpfile.js
• package.json
• tsconfig.json

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.