SPFx, short for SharePoint Framework, SPFx allows us for client-side SharePoint development, we can easily connect with SharePoint data and it also supports for open source tools.

Both the development model supports client-side development but the major difference between these two is that the SharePoint app(add-in) runs on the iframe.

Using SPFx framework we can customize the SharePoint pages. We can build things mentioned below using the SharePoint Framework(SPFx).

Web parts, Extensions, Adaptive Card, Library Component

SharePoint Online Training

SPFx has three extension types:

Application Customizers:

Using the application customizer we can render custom HTML at different placeholders for ex. we can create a custom header/footer using it. Allows us to inject custom scripting files, and styling files(It's not best practice, and Microsoft does not recommend injecting custom script files).

Field Customizers:

Allow us in modifying views in a list, we can also use it with columns to change its representation.

Command Sets:

ListView Command Set enables expanding SharePoint's command surfaces to include new actions. The toolbar and context menu are supported.

VISWA Online Trainings

In the SPFx, we can develop the solutions using the Java Script and it also allows us to use the frontend frameworks like react.