Post
Ask Question

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 

Server Side tool comparison
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

 

SharePoint

 

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
  1. 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)
  1. npm install -g yo gulp   
Install Yeoman SharePoint Generator

Run the below command,
  1. 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,
  1. npm i -g npm  
To check outdated packages,
  1. npm outdated --global  
This command will report packages that need updates. Use the below command to update the reported packages.
  1. 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.


Similar Articles