Overview Of SharePoint Framework (SPFx)

The customizations in modern sites are supported using SharePoint Framework (SPFx). SPFx is an open and connected platform. SPFx is page and web part model. It can be entirely developed using client-side languages and open source tooling. SPFx provides easy integration with SharePoint data.

 

Key Features of SharePoint Framework

1. No iframes, runs within the context of the user browser and connection in the browser
2. Faster rendering on the browser as all controls all rendered in normal DOM
3. Controls are responsive
4. Runs in the context of current user
5. Gives controls to access the lifecycle of the SharePoint Framework webpart (component) (Init, render, load, serialize, deserialize, configuration changes and many more)
6. No dependency on underlying Framework. You can use any framework like React, Angular, Knockout and more
7. Open source Development tools are used (npm, TypeScript, Yeoman, webpack and Gulp)
8. Can be added on both classic pages and modern pages
9. Safe and Secure, need tenant access to deploy/make changes to the SPFx webpart
10. Controlled visibility, we can decide who can view this webpart in the App Catalog of the site contents
11. You can leverage your earlier knowledge of CSOM, as the data models are not changed and is completely transferable
12. SPFx webparts can be used with classic or modern sites in SharePoint
13. Supports mobile views of SharePoint Online sites

Script Editor WebParts vs App Parts vs SPFx WebParts

Script Editor WebParts

1. Obvious choice of developers for customizing DOM on classic SharePoint sites.
2. Script can be edited by any users easily
3. Cannot be added to “NoScript” sites

App Parts

1. Developed using Add-in model
2. Uses iframe
3. Cannot access DOM of SharePoint page
4. Development and deployment is bit complicated

SPFx WebParts

1. Client side web parts, leverages modern JavaScript frameworks
2. Can be used with classic SharePoint pages
3. Provides modern experience, responsiveness out of the box
4. Free, open source tool chain

Light weight Components / Tools Used 

Figure: Server Side tool comparison

 

Node.js

• Open source JavaScript runtime
• Used to build and run the applications which is equivalent to the .Net
• SPFx supports latest LTS (Long Term Support) version

NPM Packages

• Stands for Node Package Manager
• Installs modules and its dependencies (equivalent to Nuget Package)
• Packages can be installed globally (-g switch) or locally
• Installed packages go inside node_modules folder

Gulp

• Automates SPFx development and deployment tasks
• Bundle and minify JavaScript and CSS files
• Run tools to call the bundling and minification tasks before each build
• Compiles LESS or SASS files to CSS
• Compiles TypeScript files to JavaScript
• Equivalent to MSBuild in Microsoft World
• Compiles, bundle and copies files to deployment folder for packaging

Yeoman

• Relies on NPM and Gulp
• Scaffolding tool for Modern web apps
• Used as SPFx solution generator and builds required project structure
• ‘yo’ is the command line utility for creation of projects

TypeScript

• Strongly typed language
• Adds compile time syntax and type checking for JavaScript
• Help to build the Applications which will be then compiled to clean JS code

Visual Studio Code

• Interface for working with SPFx solutions
• Fast and light weight IDE
• Can work on Windows, Mac OS, and Linux

Flow of Client Side Web Part

 

 

Setup Developer Environment for SPFx

Follow the below set of commands to get your developer environment ready for SPFx,

Install Node JS

• Install latest LTS version from https://nodejs.org
• If you already have NodeJS installed, check the version

node -v

Install Code Editor

Install any of below code editors,

• Visual Studio Code (https://code/visualstudio.com)
• Atom (https://atom.io)
• Webstorm (https://www.jetbrains.com/webstorm)
• Visual Studio SPFx Project Template (https://marketplace.visualstudio.com/items?itemName=SharePointPnP.SPFxProjectTemplate)

Install Yeoman and gulp

Run the below command (to install globally)

npm install -g yo gulp

Install Yeoman SharePoint Generator

Run the below command,

npm install -g @microsoft/generator-sharepoint

Note

You can create batch files to install all packages. Please find the attached one for reference.

 

Updating NPM packages

Yo, Gulp, Yeoman SharePoint Generator gets installed as NPM packages. Use the below commands to check and update them.

 

To update NPM,

npm i -g npm

To check outdated packages,

npm outdated --global

This command will report packages that need updates. Use the below command to update the reported packages.

npm update -g <package-name>

Summary

In this article, we had a walkthrough on high level understanding of SharePoint Framework. We also discussed key features of SharePoint Framework. We also discussed the tool comparison which will be used in SharePoint Framework development and along with that we had a discussion on high level flow of Client Side Webparts development.