Introduction to SharePoint Framework

Getting started with SharePoint Framework SPFx


In this series of posts you will learn what SharePoint Framework is and why you should begin to learn it.

You will learn also how to setup your environment of development SharePoint Framework and we will detail the functionality of each client side tool and compare them with server side tools in order to have a good visibility of the newest concept of development SharePoint client side model.

Then we need to setup our environment of test (either Office 365 or SharePoint 2016 Feature Pack 2) for this reason i will show you how to setup Office 365 Tenant and create your developper Site.

To close this post series about Getting started with SharePoint Framework you will learn the web part project and displaying your first Hello World then deploying our components to Azure Storage CDN and SharePoint CDN.

So, Let’s get started ! 


What is SPFx

SharePoint Framework Aka SPFx is a new development model for SharePoint is a page and web part model. It is considered as the trend of client-side SharePoint development, released as open source and this is still in initial stage even for developers.

“The SharePoint Framework is a Page and Part model that enables client-side development for building SharePoint experiences. It facilitates easy integration with the SharePoint data, and provides support for open source tooling development.” – Microsoft



Why SPFx

For years, Microsoft keeps on enabling the different development models like Farm based solutions, Sandboxed solutions, SharePoint Add-In to access the SharePoint objects with the help of different APIs. And also we have another model in SharePoint by manually injecting a JavaScript file (which created based on JSOM, REST API) to the SharePoint page to obtain the appropriate result.

So recently Microsoft added an another model called “SharePoint Framework model” to build great & better applications which bring some benefits over the limitation of previous model Like :

  • Instant application debugging using Workbench without SharePoint site.
  • Instant SharePoint site debugging using workbench (which is uploaded in SharePoint site)
  • Automated process for deploying the updates
  • Opens a way to use different JavaScript frameworks
  • Tenant-Scoped solution deployment
  • Open source tooling development


SharePoint Framework Tools and libraries

For building the applications in SharePoint based on the old development models you need Visual Studio as a source editor for developing and packaging the applications which is a heavy weight software.

But for SharePoint Framework development we require just some light weight tools like :

 Node JS :

Is an open source and cross platform JavaScript based runtime environment built on top of Chrome’s V8 JavaScript engine for developing JavaScript based applications.

NPM (Node Package Manager) :

Is a package manager for JavaScript, Used with Node.js for local JavaScript development.


Is an open source toolkit provides automation for your build tasks.

Typescript :

Is typed superset of JavaScript, which compiles to plain JavaScript.

Visual Studio Code :

Is a source code editor tool, a light weight software of Visual Studio.

Yeoman Generator  :

Is a scaffolding tool for development projects, used to create SharePoint Framework templates on your development machine.

The below image provides a summary of Microsoft equivalent to the Light weight component.

Figure 1 : Server side tool comparison


See you in the next post where i will show you how to setup our SharePoint Framework development environment step by step.