SharePoint Framework: Introduction

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, I got a first question in my mind is what is SPFx (SharePoint Framework). It can’t be a usual language framework, because SharePoint is no language, it is a content management and collaboration platform. And by digging on the internet I got some idea.

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.

SharePoint Framework Structure
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 client side 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 client-side JavaScript libraries and several other tools and libraries that could be used to develop client-side web parts.
  • Node JS
  • Node Package Manager (npm)
  • Typescript
  • Gulp
  • Yeoman
  • JavaScript Framework (any)
    • React
    • Angular
    • Handlebars
    • Knockout
  • SharePoint Workbench
SharePoint Framework Topology
Figure: SharePoint Framework Topology

Node.js: Node.js is an asynchronous event driven JavaScript run time, 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 as the NuGet Package Manager. 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 consisting 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 with prescribing best practices and tools, manage dependencies and optimizing production code for deployment.  To sum up, it provides with 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 followings can be used in development of Clint side web part in SPFx: React, Angular, Handlebars, Knockout. These all supports in SharePoint Framework development model.

Typescript: Typescript is a super-set 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 tool-chain and another one used in a SharePoint site in 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 tool chain. So, it is tremendously useful to test and validate web parts against the service.




Leave a Reply

%d bloggers like this: