Introduction To SharePoint Framework

Recently in the SharePoint world, a new topic has become the focus of discussion -- SharePoint Framework or in short SPFx. Everyone is saying this SPFx is going to change the SharePoint development roadmap and will bring significant changes in many ways. So, as a player in the SharePoint world, I became interested about this.

So, the first question on my mind is 'what is SPFx (SharePoint Framework)?' It can’t be a usual language framework, because SharePoint is not a language, it is a content management and collaboration platform. And by digging on the internet I got an idea of the answer.

What is SharePoint Framework?

We can say that Microsoft SharePoint Framework is a new development model. It is built with a set of tools to build on top of Microsoft SharePoint. It provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. It works for both SharePoint on-premises and SharePoint Online.

Figure: SharePoint Framework Structure

SharePoint Framework is mobile-first and cloud-enabled, so it works as well with SharePoint Online, Office Graph and other parts of the Office 365 business productivity suite.

In this new development model, we can build the clientside web part which will run in the normal page DOM and in the same context as the current user. It allows the controls to be responsive and accessible. And SPFx sorted the custom code safely in the background so that the end user can’t alter it when modifying the page.

SharePoint Framework Topology

Now the question is what are the ingredients of SharePoint framework? SharePoint framework includes several clientside JavaScript libraries and several other tools and libraries that could be used to develop clientside web parts.

SharePoint Framework Topology

Node JS
Node Package Manager (npm)
Typescript
Gulp
Yeoman
JavaScript Framework (any)

React
Angular
Handlebars
Knockout

SharePoint Workbench

Node.js

Node.js is an asynchronous event driven JavaScript runtime, which helps to build scalable network applications. It is a cross-platform runtime environment for hosting and serving JavaScript code. In SPFx, Node.js works as IIS, but includes tools to simplify client-side development. The Node.js ecosystem is tightly coupled with npm and task runners(gulp) to provide an efficient environment for building JavaScript-based applications.

Node Package Manager (npm)

Node Package Manager (npm) is a command-line package manager which is like the NuGet Package Manager. The npm package consists of one or more reusable JavaScript code files called modules. SPFx consists of several npm packages and npm provide a useful interface to work with them. Using npm, a new client-side web part project can be set up quickly with sensible defaults and best practices and it empowers developers to create client-side experiences for Microsoft SharePoint easily.

Yeoman

Yeoman is a client-side development stack and consists of tools which help to combine several functions in one place and it runs as a command-line interface. In SPFx, a generator is being used which is created using yeoman. It generates some starter templates prescribing best practices and tools, managing dependencies and optimizing production code for deployment. To sum up, it provides the common build tools, boilerplate code (standard default code), and test web site (SharePoint Workbench) to host the web parts for testing.

Gulp

Gulp is a task runner which used in SPFx as the build process task runner. It assists the web-part to deploy in CDN, refresh the browser when a file is saved, compiles LESS or SASS files to CSS and TypeScript files to JavaScript and copying modified files to an output directory.

JavaScript Framework

Any JavaScript framework from the following can be used in the development of the clientside web part in SPFx: React, Angular, Handlebars, Knockout. These are all supported in SharePoint Framework development model.

Typescript

Typescript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. SharePoint client-side development tools are built using Typescript classes, modules, and interfaces. You can use these to build robust client-side web parts.

SharePoint Workbench

SharePoint Workbench is a developer design surface that enables quick preview and tests web parts without deploying them in SharePoint. Basically, there are two forms of the workbench. One is available locally with SPFx developer toolchain and another one is used in a SharePoint site in the developer’s tenancy. The key difference between the two is that, the latter loads SPFx version from Office 365 and the former loads SPFx version from the local toolchain. So, it is tremendously useful to test and validate web parts against the service.

Points of Interest

If any point or information is missing, please let me know in the comments below and I will update my article. And if you want to know how to set up the development environement in your computer can follow my blog post SharePoint Framework - Setup Development Environment.