SharePoint Framework(SPFx) Basics

SharePoint Framework is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and extending Microsoft Teams.

With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready.

With the SharePoint Framework, we can develop:

1. Web Parts
2. Extensions
3. Library components
4. Adaptive Card Extensions

Technology stack:

SPFx Development Toolchain: New and the old development model                           

Web Stack	Microsoft Tool
Node.js	.Net Framework
NPM	NuGet
Yeoman	Visual Studio
Gulp.js	MS Build
TypeScript	C#

SPFx web frameworks: React, Angular, and Vue frameworks:

In SPFx if you chose 'No JavaScript Framework' template, webpart contain "webpart.ts" file.

If you chose ‘React’ template, SPFx webpart contains the below 2 files.

1. webpart.ts file
2. webpart.tsx file in component folder: TSX allows for embedding JSX elements inside the file, and is largely used by React. TS files are plain old Typescript files and do not support adding JSX Elements.

Quick comparison between the two open-source UI web frameworks – React & Angular:

SPFx React vs Angualr:

React is supported by Microsoft, Angular is supported by Google.

SPFx with React:

It is best for component-based applications. There won't be any page load because in React js we break our application into components. And for each component the application maintains internal state.

Pros	Cons
1. Component and data patterns improve readability, which helps to maintain larger apps.	1. It is not a full framework.
2. local development solution packaging (creating .sppkg) is really quick.	2. It allows only 1-way data flow. 3. No HTTP call option.

SPFx with Angular:

Angular is a full-blown web framework by Google instead of patchwork of libraries (much more than react). It is among the robust web frameworks for front-end development. Go for Angular if you want full page experience. It’s a recommended framework if routing, dependency injection & 2-way communication is required a lot.

Pros	Cons
1. It has good code structure (MVC pattern) and market popularity.	1. The full-page experience lacks SharePoint UI reuse.
2. It has routing, dependency injection, HTTP calls etc.	2. It lacks SharePoint friendly components.
3. It allows 2-way communication.	3. SPFx don’t support any default control.

SPFx Open Source Development Tools