SharePoint Framework is possible due to the various client-side JavaScript libraries. A lot of work has gone through to make these different tools work together for you to build client-side solutions. Below is a quick summary on various tools and libraries for you to get started with.

TypeScript is the primary language to build SharePoint client-side web parts. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. SharePoint client-side development tools are built using TypeScript classes, modules and interfaces to help developers build robust client-side web parts. Below are some resources to get started with TypeScript:

• TypeScript Quick Start
• TypeScript Playground
• TypeScript Handbook
• Engage with TypeScript Community

There are many JavaScript frameworks available to choose but some of the popular frameworks are, but not limited to:

• React
• AngularJS 1.x
• AngularJS 2.x
• Handlebars

Client-side web parts should be treated as components that gets dropped in a page. As SharePoint Framework is agnostic of JavaScript framework, you can choose your framework of choice to build your client-side web part. However, it is recommended to choose a JavaScript framework that supports similar component model. Lightweight frameworks such as React, Handlebars and Angular 2 Components all support component model which are well suited to build client-side web parts. That said, it shouldn't limit you from choosing other frameworks though.

npm is the package manager for JavaScript. It is usually included with Node.js setup. So if you have Node.js installed, chances are you have npm installed as well. SharePoint client-side development tools uses npm as its primary package manager to manage dependencies and other required JavaScript helpers. If you are familiar with NuGet, then you will feel home with npm as they are similar (with respect to package management). Below are some resources to get familiar with npm:

• npm documentation

Node.js is an open source, cross platform runtime environment for developers to host and serve JavaScript code. As a result, node.js is also used to develop server-side web applications written purely in JavaScript. Node.js ecosystem is tightly coupled with npm package manager and task runners such as gulp (described in the next topic) to provide an efficient environment for building JavaScript based applications. If you are familiar with IIS Express or IIS, then you will find node.js similar but backed by various other tools to simplify client-side development.

Below are some resources to get familiar with Node.js:

• Quick Introduction to Node.js
• Node.js API Reference Documentation
• Usage and Example
• Node.js at Wikipedia

SharePoint client-side development tools use gulp as its task runner which handles build process such as:

• Bundle and minify JavaScript and CSS files.
• Run tools to call the bundling and minification tasks before each build.
• Compile LESS or SASS files to CSS.
• Compile TypeScript files to JavaScript.

Below are some resources to get familiar with gulp:

• Getting started with Gulp
• TypeScript + Gulp
• Useful articles on Gulp

Webpack is a module bundler that takes your web part files, its dependencies and generates one or more JavaScript bundles so you can load different bundles for different scenarios.

The development tool chain uses CommonJS to bundle which enables you to define modules and require them where you want to use those modules. And finally, the tool chain uses SystemJS, a universal module loader to load your modules. This benefits the toolchain and runtime in various ways specifically helping to scope your web parts by making sure each web part is executed in its own namespace.

Below are some resources to get familiar with webpack:

• Webpack Documentation
• TypeScript + React + Webpack

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. SharePoint Yeoman generator will be available as part of the framework to kickstart new client-side web part projects. Once the project is generator, you can use your choice of IDEs like Visual Studio or HTML/JavaScript code editors like Visual Studio Code or Sublime Text or Atom.

Below are some resources to get familiar with Yeoman:

• Scaffold a web app with Yeoman
• List of available Yeoman generators

Below are some common Yeoman generators that you can try depending on your choice of framework:

• generator-react-webpack
• generator-angular

While the SharePoint Framework provides the key integrations with the SharePoint experiences, APIs are key to interacting with the SharePoint and other workloads that shape your web part functionality. As the framework is targeted towards web development, REST APIs are preferred as the standard model to interact with SharePoint and other workloads.

It is recommended you at least get familiar with the following set of REST APIs:

• SharePoint List REST APIs

We will be using Office Dev Patterns and Practices / SharePoint Pattern and Practices (PnP) as the channel for sharing upcoming samples and patterns with the SharePoint Framework. PnP has provided similar guidance for add-in/app model development during past years and we want to ensure that you have a needed information for transforming your existing solution to SharePoint Framework, if you chose to do so.

• Setup your Office 365 Developer Tenant
• Setup your Machine
• Go build Tutorial 1: HelloWorld WebPart
• [More Tutorials and Walkthroughs](Tutorials and Walkthroughs)