As a SharePoint developer you might have heard about SharePoint Framework (SPFx). Nowadays, when it comes to custom client side development, many developers use SharePoint Framework.

Key features of the SharePoint Framework include:

  • It runs in the context of the current user and connection in the browser. 
  • Performance of SPFx is reliable.
  • The controls are rendered in the normal page DOM.
  • SPFx controls are responsive.
  • SPFX is framework-agnostic. You can use any JavaScript framework like React, Knockout, Handlebars, Angular, and Vue.js.
  • You can use open-source client development toolchains such as NPM, TypeScript, Yeoman, webpack, and gulp.
  • SPFx web parts can be added to both classic and modern pages.

Why the SharePoint Framework?

We have used Script editor webparts and SharePoint add-ins previously. But both of these methods have their own pros an cons as follows:

Script Editor Webpart

  • Pros:
    • Simple to use and performance is good
    • runs in the context of current user
    • as it uses same DOM, you can interact with other elements of the page
  • Cons:
    • You can't provide webpart configuration options to user
    • End user can edit the page and modify the script which can break the page
    • You cannot use it on the "NoScript" enabled SharePoint sites.

SharePoint Add-in model

  • Pros:
    • Can be used on "NoScript" enabled sites
    • It has no access to current DOM, therefore it's easier for information workers to trust and deploy
  • Cons: 
    • As it runs in an iFrame, add-ins are slower than the script editor webpart
    • Page needs additional authentication and authorization for add-ins.
    • Because of iFrames, difficult to create responsive designs

Combining above pros and cons, SPFx is best fit because it includes most of the Pros and it also overcomes the downsides of above two methods.