SharePoint Framework (SPFx) uses several JavaScript tools and libraries to develop client side web parts for SharePoint. You can many of below listed tools and libraries for building such applications. I’ll go one by one to make the clarity on each tool or library.

Suggested Topics

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Microsoft 365 tenant for SharePoint Framework development

Setup SharePoint Framework client side web part development environment

Build SharePoint client side web part using SharePoint Framework (SPFx) – I

Build SharePoint client side web part using SharePoint Framework (SPFx) – II

Build SharePoint client side web part using SharePoint Framework (SPFx) – III

How to Debug SharePoint Framework Solutions in Visual Studio Code

What is the Developers Point of View on SharePoint Framework

What is Required Toolchain for SharePoint Framework

How to Integrate gulp tasks with SharePoint Framework Toolchain

How to Provision SharePoint assets with solution packages

How to Upgrade SharePoint Framework client side solutions in SharePoint Online

Typescript

Typescript is typed framework or superset of JavaScript which is further complied to JavaScript language before deployment on production. SharePoint Framework (SPFx) client side development tools are built on Typescript classes, interfaces and modules. We’ll grasp sufficient knowledge of Typescript as it is required to build client side web parts using SharePoint Framework. The extension of Typescript file is .ts and it is compiled to JavaScript using tsc command.

JavaScript Frameworks

We would also require any of the JavasScript frameworks to build client side web parts. Following are some of the famous frameworks:

1. React
2. AngularJS 1.x
3. Angular2 for Typescript 2.x
4. Handlebars

Client side web parts are a component that’s why we should use JavaScript framework which supports component model.

 

Node Package Manager (npm)

SharePoint client side development tools use npm package manager to manage dependencies and required JavaScript helpers. It is included in Node.js setup.

 

Node.js

Node.js is open source runtime environment. This is cross platform JavaScript technology, which is used to develop server side web applications in JavaScript. It is tightly coupled with npm and task runner of gulp to provide efficient environment for JavaScript programming. It is like another application server i.e. IIS but it includes tools to simplify client side programming.

Gulp Task Runner

Gulp task runner is used by SharePoint Framework to process bundling, minifying, compiling, deploying processes etc. Below is a list of tasks performed by task runner.

1. Bundle and minify JavaScript and CSS files.

1. Run tools to call the bundling and minification tasks before each build.
2. Compile LESS or SASS files to CSS.
3. Compile Typescript files to JavaScript.

 

Webpack

Webpack is module bundler. It takes web part files & its dependencies and generates one or more JavaScript bundles. We can use different bundles based on our requirements.

Yeoman Generators

Yeoman helps to start your project and it has various solution generators. With the help of appropriate generator, we can build our solution and eventually we can that in our application post customization.

SharePoint Yeoman Generator will be used to generate new client side web part projects.

 

Source Code Editors

We also require a source code editor to edit our solution. We know, IDE is a best friend of any developer. Below is a list of Source Code Editors, we can use. However, I am using Visual Studio Code for our examples. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.

1. Visual Studio Code
2. Atom
3. Webstorm

 

SharePoint REST APIs

SharePoint REST APIs help us to interact with SharePoint and other stuffs which are helpful for client side web part functionalities. SharePoint Framework (SPFx) uses these REST APIs for building client side web parts.

 

Patterns and Practices

It provides various code samples, patterns, and other resources to help you transform your existing solution to the SharePoint Framework.

 

What’s next

We have identified required tools and libraries for SharePoint Framework (SPFx) development. In the next article, we’ll see, how to configure Microsoft 365 tenant for SharePoint Framework client side development.

Hope you enjoyed reading it.

Please don't forget to Share, Follow and Like to get updated with latest posts.

It gives me motivation to share more knowledge with you.

About Author

Satyendra Mishra

Project Management Professional (PMP) and Microsoft certified, motivated, energetic and accomplished Project Manager / Architect with 15+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. I have been fortunate to be a part of over 25+ .Net / SharePoint projects delivery with various companies across different industry sectors. This has provided me a valuable insight and experience especially in successful implementation of SharePoint based solutions.

My experience in Web application implementation includes technology strategy and road-map definition, business and technical requirements identification, governance, platform architecture, solution design, configuration, development, quality assurance, training, post-production support, team lead and overall project delivery along with project management.

Satyendra Mishra holds a B.Tech. in Computer Science & Engineering and PG Diploma in Advance Computing from Center for Development and Advance Computing, Pune, India. He is also a certified Project Management Professional (PMP).

I love to share Project Management Tips and Tricks by writing Blogs in the Project Management India Community. I have written around 300+ articles in the Project Management, .Net, SharePoint and related client side technologies.