SPFx+React or SPFx+Angular – Which One to Choose?

Should you pick SPFx React or Angular? This article gives a quick and crisp comparison of the two open-source UI web frameworks, React and Angular. You can pair either one with the SharePoint framework (SPFx) for client-side solutions or web part development.

SPFx is compatible with both old and contemporary (or classic and modern) SharePoint pages. You can also extend Microsoft Teams with it. Moreover, safety and security are not a big worry, because the SharePoint development pattern used in full trust solutions is a flexible and robust way to customize a client-side SharePoint application.

Whether you’re a newbie or someone with exposure to frameworks like Angular or React, you may be aiming to:
i) modernize existing client-side SharePoint applications.
ii) plan client-side SharePoint web part development with a top-notch web framework (React, Angular). In both cases, think about these points to choose the best-fit framework for your solution.  

Pre-Requisites for SPFx with React or Angular

SPFx is framework-independent. You may choose from a variety of frameworks. Anything goes with it, including (but not limited to) React, Angular, and Vue frameworks. SPFx fully supports open-source development tools. For example, NPM (node package manager is a software registry to share software or manage private development). Another is TypeScript (which is an open-source language built on JavaScript). Also Yeoman generator (is a plugin to scaffold complete projects or useful parts) and Gulp (is a task runner that uses Node.JS as platform, it builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SaaS files tasks can be run using Shell or Bash scripts). Also, webpack (is a module bundler for bundling JavaScript files & transforming, bundling, or packaging any resource or asset). Finally, VS Code (is a free coding editor which for various JavaScript frameworks & several other languages). 

SPFx React or Angular: React with SPFx v/s Angular with SPFx

React + SPFx

Pros

• Component and data patterns improve readability, which helps to maintain larger apps. 
• React is particularly useful in cases where the contents of the Web Part change a lot as it can efficiently update the DOM. Because end-users don’t need to load any other framework, Web Parts load faster at first. 
• It has a predictable UI. The SharePoint modern UI uses it, and Fabric UI supports it. 
• The virtual DOM only looks at the differences between the previous and current HTML and changes the part that is required to be updated. 
  SPFx uses React to build various controls, for example the property pane.  
• Local development solution packaging (creating .sppkg) is also really quick.

Cons 

• • It is not a full framework.
  • There’s no router, model management, async operation, HTTP calls etc.
  • Too much manipulation of virtual DOM makes it slow.
  • It allows only 1-way data flow.
  • It covers only View from Model-View-Controller patterns of an app.
  • Achieving full page experience requires extra work.
  • The inline templating and JSX, which might seem awkward (if you’ve experience with MVC following framework like angular that has proper differentiated view & controller for templating & typescript)

Go for React if you are good at managing dependencies on your own and like to work with JavaScript alone. Search engines can also index light-weight React applications easily. It is best for component-based applications.

Angular + SPFx

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.

Here are some pros and cons of using Angular with the SharePoint framework:

Pros

• It has good code structure (MVC pattern) and market popularity.
• It has routing, dependency injection, HTTP calls etc.
• This pattern is tried and tested and robust, and it lets us control every aspect of the UI.
• Angular works on the real DOM, so it updates the entire tree structure of HTML tags.
• It implements MVC patterns.
• It allows 2-way communication.

Cons

• The full-page experience lacks SharePoint UI reuse.
• It lacks SharePoint friendly components.
• There are larger packages and version to version upgrade issues.
• SPFx don’t support any default control.
• Not best for multiple libraries, depends on office UI fabric Angular community project.
• However, local development solution packaging (creating .sppkg) takes slightly longer than with React.

Go for Angular if you want full page experience. We recommend it if you need routing, dependency injection and 2-way communication a lot.

Key Points and Differences

1. Long term strategy – Microsoft supports Office Fabric UI and Fluent UI. Microsoft backs React, and Google backs Angular.
2. Architectural choice should depend on – your competency(team) and project timeline.
3. Customized & out of the box solution – Angular is good if you are not building something very different that requires very much custom architecture. Also, it’s good to choose Angular if you prefer TypeScript over JavaScript.
4. Performance penalty – Angular uses the regular DOM whereas React uses the Virtual DOM.
5. SEO Ranking – Search engines can easily index React apps than Angular apps as they are light in weight.

Similarity

1. Both React and Angular are similar in terms of the component-based architecture. Both the frameworks can do everything which the other one can more or less.
2. Fast (a collection of technologies) is supported in both for design system. Using html elements/web components(https://www.fast.design/docs/category/components) e.g., menu, option, text-field & creating custom elements/tags).
3. Both React and Angular have good community support. So we can be confident in this regard.

Conclusion: Which One to Choose?

Picking a framework before you know the requirement is not sensible. Angular is a full-fledged web framework. Hence, if you are more comfortable with TypeScript, you may go with Angular. React, on the other hand, is a JavaScript library. Developers mainly use it for component-based applications. Further, it follows JSX syntax. Both front-end platforms work in much the same way. What matters is the project requirement, your competency and the project timeline. If you use inbuilt web components a lot, React can be a better choice. Angular can be a better choice if we need to customize more things. However, if we compare the applications, React apps are lighter than Angular apps. We can include the required components rather than an entire library with unused components.

The trend may change over time, but one deciding factor can be familiarity. If you already know one of the frameworks, that will also help while writing real code. It is better to choose that framework than to learn a new one. We hope this article helps you spot the best fit for you. If you need a team for SharePoint or web work, see our web development services.