Please read previous posts if you want to know about key features of SPFx.
One thing I noticed with traditional SharePoint Developers venturing in this world of SharePoint Framework development is they get overwhelmed very quickly.
This is because there are lot of unfamiliar tools and technologies introduced that you have to install and get through just to build a simple “Welcome to SPFx” Client side web part.
I will provide an overview on what the development tool chain looks like for development with the SharePoint Framework.
You will understand everything what role it serves and how it compares to traditional Visual studio to SharePoint Development world.
I will also highlight what you need to know. There are lot of tools and pieces involved in new tool chain.
Development toolchain overview:
I can divide this in to two parts what you need to get to your job done as a developer.
One is the Development environment and Developer toolchain
Development environment
SharePoint Workbench:
Microsoft really improved the story for the SharePoint developers of the SharePoint development framework.
Now we have something called SharePoint work bench. This is a locally hosted page that can host your SharePoint client side web part using this page you can develop and test locally all without full SharePoint deployment.
It is limited in the sense you cannot test for the real data coming from SharePoint but you can mock that stuff out.
SharePoint Development Tenant:
This is a tenant in SharePoint online and office 365. You can test you customizations here as real SharePoint environment.
This environment also has a copy of SharePoint Workbench that you can use to test your Web Parts out as well. I will explain how to use local Workbench and SharePoint Workbench in next posts while covering a practical scenario/demo by building a first client side web part.
Developer toolchain
A toolchain is a set of programming tools that are used to perform a complex software development task or to create a software product.
Microsoft elected to adopt a popular open source based modern web development tool chain for SharePoint Framework.
This includes the things like
- Node.js and NPM:
This is an open source, cross-platform runtime environment for hosting and serving JavaScript code.
The Node.js ecosystem is tightly coupled with NPM and task runners (such as gulp) to provide an efficient environment for building JavaScript-based applications.
- Yeoman: To create project scaffolding
Yeoman provides a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.
yo scaffolds out a new application, writing your build configuration (e.g Grunt file, Gulp file) and pulling in relevant build tasks and package manager dependencies (Bower, NPM) that you might need for your build. This is similar to Project Scaffolding in Visual Studio.
- Gulp: As the task runner. Gulp has four characteristics
Automation – Gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
Platform-agnostic – Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.
Strong Ecosystem – Use NPM modules to do anything you want + over 2000 curated plugins for streaming file transformations
Simple – By providing only a minimal API surface, gulp is easy to learn and simple to use
- Webpack: To handle bundling the assets.
These tools should not be considered a replacement of an organizations traditional tools, but rather an extension of those, providing new opportunities to quickly get up and running with SharePoint development.
If you’re familiar with Visual Studio development with SharePoint, this tools carry a lot of similarities with the tools you may already be familiar with.
I will explain Development toolchain comparison in next post.
Kirti Prajapati 
2 comments