The new SharePoint Framework, announced on May 4th, introduced a new model for developing SharePoint web parts that are radically different from its predecessors.

SharePoint development previously required a specific environment, with SandBox and Farm web parts you need at least one server with SharePoint and Visual Studio to develop and debug the code. The App model introduced in 2013 eliminated the need for a SharePoint server but it still requires Visual Studio and a Developer site collection hosted on Office 365.

This new framework frees you to choose your environment and the only requirement is a computer that can run the latest web technologies. You can even use Mac OS or a Linux distro.

The SharePoint framework is not yet publicly available. While you can’t get your hands on the code yet, though, it’s worth preparing by investing some time to learn the new technologies this framework uses.

Note that the new API will not replace any of the existent models. All the knowledge you have acquired will still be valid and will help you to correlate between the old model and the new one.

If you are already a Senior SharePoint developer — or if you are just a web developer — these are the seven technologies you should learn right now to prepare for the new framework.

#1 Node.js

Node.js in an open-source, cross-platform runtime environment for developing applications. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. The runtime environment interprets JavaScript using Google Chrome’s V8 JavaScript engine.

On the other hand, Node.js has npm, the largest ecosystem of open-source libraries in the world. With it you can build your own packages for your solution or use the packages already available from the community.

In the SharePoint framework, Node.js has the same role that .NET had in the previous development model, and npm replaces the NuGet.

To learn more about Node.js visit https://nodejs.org/en/

#2 Yeoman

Yeoman is the SharePoint framework’s template engine and it runs on top of Node.js. The templates used by the framework are downloaded from GitHub, which means that you need also to install Git on your machine.

Yeoman is responsible for creating the project structure with all the files and folders, just as Visual Studio does, but using the console instead.

To learn more about Yeoman visit http://yeoman.io/

#3 TypeScript

TypeScript is an open-source language created and maintained by Microsoft. It is a super set of JavaScript that extends the language. TypeScript is executed on top of Node.js and it’s suitable for both client- and server-side applications.

If you are coming from C#, TypeScript is the easiest way to start developing with script languages. All the concepts, such as classes and objects, are available in TypeScript.

If you are already a web developer, you have a smaller learning curve because JavaScript code is valid TypeScript code. TypeScript converts all the code to native JavaScript but we recommend reviewing the TypeScript documentation to take full advantage of the technology.

Other JavaScript libraries like jQuery will also work with the SharePoint framework. You just need to import them into your project. I’ll cover this topic in a future article.

To learn more about TypeScript visit https://www.typescriptlang.org/

#4 React, AngularJS or other framework

These are great frameworks for developing web applications. Currently, however, the Yeoman generator includes only one empty template and one template that uses React.

React might be the appropriate choice as it was chosen by Microsoft to develop Delve and the new document library. If you are familiar with other frameworks, though, go with the one you prefer as there is absolutely no limit on which one you use.

To learn more about React visit https://facebook.github.io/react/

To learn more about Angular JS visit https://angularjs.org/

#5 REST api

With the REST API you can perform basic create, read, update, and delete operations by using the Representational State Transfer (REST) interface that SharePoint provides.

The REST interface opens up all of the SharePoint entities and operations that are available in the other SharePoint client APIs.

One advantage of using REST is that you don’t have to add references to any SharePoint libraries or client assemblies. Instead, you make HTTP requests to the appropriate endpoints to retrieve or update SharePoint entities, such as webs, lists, and list items.

To learn more about the REST api visit https://msdn.microsoft.com/

#6 Gulp

Gulp is a task runner that automates processes built on Node.js. It can be used to compile TypeScript or Less files. In the new framework, Gulp has the same function as MS Build.

Gulp is used in the SharePoint framework to perform a variety of tasks, such as building the web part or uploading it to the CDN. I’ll cover this topic in detail in a future article.

To learn more about Gulp visit http://gulpjs.com/

#7 Office UI fabric

Office UI Fabric is the front-end toolkit that makes your app or add-in blend seamlessly into Office. It includes all the web components, styles, icons and fonts used by Microsoft SharePoint and other Office applications.

This is not directly related to the SharePoint framework and you don’t have to use it for building your web parts. It is, however, a good starting point for building an application that projects Microsoft style right out of the box. That means the end user will be familiar with the application’s layout and components.

To learn more about Office Fabric UI visit http://dev.office.com/fabric

Conclusion

For the first time Microsoft embraces the open source technologies and we no longer need proprietary software to build web parts for SharePoint.

This might take a few months to land in the new version of SharePoint, it will be first available on Office 365 and later on SharePoint 2016 on-prem.

If you are not a web developer and are not familiar with the web stack you still have a few months to learn the basics before starting building things in the new framework.

In the meantime, check the table below that makes a parallelism between the new and the old development model.