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
- No iframes, runs within the context of the user browser and connection in the browser
- Faster rendering on the browser as all controls all rendered in normal DOM
- Controls are responsive
- Runs in the context of current user
- Gives controls to access the lifecycle of the SharePoint Framework webpart (component) (Init, render, load, serialize, deserialize, configuration changes and many more)
- No dependency on underlying Framework. You can use any framework like React, Angular, Knockout and more
- Open source Development tools are used (npm, TypeScript, Yeoman, webpack and Gulp)
- Can be added on both classic pages and modern pages
- Safe and Secure, need tenant access to deploy/make changes to the SPFx webpart
- Controlled visibility, we can decide who can view this webpart in the App Catalog of the site contents
- You can leverage your earlier knowledge of CSOM, as the data models are not changed and is completely transferable
- SPFx webparts can be used with classic or modern sites in SharePoint
- Supports mobile views of SharePoint Online sites
Script Editor WebParts vs App Parts vs SPFx WebParts
Script Editor WebParts
- Obvious choice of developers for customizing DOM on classic SharePoint sites.
- Script can be edited by any users easily
- Cannot be added to “NoScript” sites
App Parts
- Developed using Add-in model
- Uses iframe
- Cannot access DOM of SharePoint page
- Development and deployment is bit complicated
SPFx WebParts
- Client side web parts, leverages modern JavaScript frameworks
- Can be used with classic SharePoint pages
- Provides modern experience, responsiveness out of the box
- 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
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)
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,
To check outdated packages,
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.
meg my tempPosted Jul 30, 2020, 7:35 PM
Hi, Thank you for your helpful information, If I want to use angular, which component must be replaced?
VENKATESWARULU SPosted Mar 28, 2019, 4:23 AM
For Basic Persons very nice article
VENKATESWARULU SPosted Mar 28, 2019, 4:22 AM
Good article
Prashant KumbharPosted Oct 7, 2018, 9:55 AM
Great article...
Nilesh UbhePosted Sep 19, 2018, 4:05 AM
Thanks a lot for this wonderful information... Any specific advice to perform this behind corporate proxy
Kiran Kumar TalikotiPosted Aug 1, 2018, 5:52 AM
Interesting Part1 .This made me to read all the the series of SPfx. Thank you for Sharing this Series :)
Hadshana KamalanathanPosted Jul 19, 2018, 12:00 AM
Thanks for sharing