What is SharePoint?

The SharePoint framework (SPFx) is a page and part model that enables client-side development for building SharePoint experiences.

How has the SharePoint framework changed?

Web Development has changed in recent years with trends towards open and connected platforms. This is different to the old paradigm of opening Visual Studio selecting the project type you want and developing the solution, then relying on Visual Studio to compile the package you want so it can work in Microsoft specific technologies.

SharePoint development is now embracing this trend and the technologies that underpin it. In fact, it is such a change that when I first looked at the framework when it came out in August, I looked, followed the simple article and hid!

Why did I hide from the SharePoint framework?

SPFx utilises several technologies that have been around for a few years and are gaining ground but that I’ve not looked at.
In effect the world has moved on and I was still wearing my Oasis T-Shirt and wondering why my pager never went off. It used to be the case that SharePoint development was stuck in the development paradigms of when the product was released. “I need to learn these things but I was 3 years into using Visual Studio as a tooling engine.” This is no longer the case. Using open source tooling SharePoint development is modern and embracing new thinking quickly.
Thus, when I looked at the Framework, I was confronted not just with the new languages but a whole new set of development tooling, patterns and practises that were alien to me. I had Visual Studio Code, Yeoman, Glup and npm on the tooling side and TypeScript, React, Angular and scss on the coding side. A daunting task.

Where to begin with the SharePoint framework

Armed with a PluralSight subscription and some links I began to consider the languages I needed to begin. I started with TypeScript. The course was very good and did provide me with enough grounding to follow the Framework articles. Then I did the React and Angular course, both interesting and gave me a good understanding, not just of those technologies but the changing development landscape and where they fit in. I was ready to go back to SPFx

So why did I not look at the SharePoint framework tooling?

I figured that they were just that…tooling and as I went through the MSDN article it would soon become clear…

Getting started with the SharePoint framework

I choose to follow the Microsoft set of articles “Building your first SharePoint client-side web part”. I cannot recommend this series enough. You do need to have done the language grounding before you begin but after that it will take you all the way from putting in the pre-requisites to the deployment of the first web part.

Read the pre-requisites of SharePoint before you begin.

Ignore the set up your ‘development environment article’ at your peril. This is Preview stuff and certain things need to be in place before you begin. You need Visual Studio Code, you need Glup installed you need NPM Installed and you need a SharePoint Online tenancy with First Release set to ‘on’.
If your Office 365 is not set to First Release, set it in the Admin portal and wait for 24 hours, the functionality you need should be in the tenancy by then.

SharePoint explained

From the moment you had to open the Cmd Prompt to install all you needed, it seems alien to me and like stepping back in time. However, and it is a big however. After you get your head around the fact that this approach and tooling allows you to create a bespoke web part without the need for any pre-existing elements and that sits independently to other projects you may be using with different versions of the framework, it all makes sense(ish).

Understanding the new paradigm.

It seems strange to be creating and building the project via the command prompt and using a free IDE. However, once you start using it, you quickly discover that everything you need is there to create rich and engaging web parts. From creating the project for you, to its deployment, everything is in one place.

What are the SharePoint tools and what do they do?

NPM is a tool that allows you to download and install packages from its libraries to your desktop. NPM is installed initially by Node.Js. After installation, all you need to do is open a command prompt and type npm, then install the name of your package. NPM can then be used to install the latest version of the other libraries that are required for the framework.

  1. Firstly, you need to install Yeoman. Yeoman will be used to generate all the files you need for creating a new client web parts. It should be noted at this point that at present client-side, web parts are the only things that can be created via the framework.
  2. Next you need to install Gulp. Gulp is a tool that helps with tasks when doing web development. For example, within the context of the SPFx, it is used to spin up a web server, reload the browser when a file changes, pre-process Sass files, optimise assets, push files in to a CDN and create the deployment package. These npm packages are installed globally but the last one to install is the SharePoint framework itself and this goes against the windows directory you want to install your project in.

What is the SharePoint framework in this context?

What the SharePoint framework is not, at this point is an installation to the desktop that then allows you to develop client-side web parts in perpetuity. After specifying the directory that the project is to reside in Yeoman is used to pull down all the files that are required to make a client-side web part.
When I say all the files, I mean all the files, all the configuration files, the core TypeScript files, the files required for packaging and all the underlying files that provide intelliSense. Thus, the project is independent of any other projects that you have created using the framework elsewhere. You can have one project using Drop 5 and another Drop 6. You can of course upgrade a project and this would involve downloading the framework again to your project.

The SharePoint framework is a framework?

Yes, that’s correct. After installing all the tooling, the framework is a collection of files that acts as a framework to build your solutions from. It contains all the elements you need to create a client-side web part for SharePoint including the deployment of that web part.

You need to know Typescript before working with SharePoint

I realise it has taken me an entire article to explain that the SharePoint framework is a framework. I hope it gives some understanding of how you go about getting started.

Is the SharePoint framework too complicated?

We offer SharePoint workshops with the aim of getting you up to speed with the mobile platform. View our IT events page to find the next available SharePoint workshop.

Useful Links for SharePoint development

I have provided a set of links that I found useful for getting going with the Framework and I hope to blog some more articles as I dig deeper. If you are going to start working with the Framework, my best advice would be to ensure you know Typescript before you go any further.
I think SPFx is only going to get bigger and support almost all in SharePoint custom development. I would even stick my neck out and say that SharePoint Add-Ins will eventually die and that the SPFx is the future of Client-Side development in SharePoint.

If you’d like to know more about SharePoint, SharePoint development and the SharePoint framework, please don’t hesitate to contact us. We offer SharePoint consultancy, support and framework development for businesses – as a Microsoft Gold Partner our SharePoint specialists can create an effective mobile platform and deal with the above, so you don’t have to! Call 01202 360000 or fill out the form below.

Have a question?