In this article, there is a quick & crisp comparison between the two open-source UI web frameworks – React & Angular. These can be coupled with SharePoint framework aka SPFx for client-side solution or web part development.
SPFx is compatible with both old and contemporary (or classic and modern) SharePoint pages. You can extend Microsoft teams with it. Not many worries about safety/security. As the SharePoint development pattern used in full trust solutions is a flexible and robust way for customizing client-side SharePoint application.
Whether you’re a newbie or someone with exposure of frameworks like Angular or React and targeting to:
i) modernize existing client-side SharePoint applications.
ii) planning client-side SharePoint webpart development with any of the top-notch web frameworks (react, angular) then you may ponder these points to choose the best-fit framework for your solution.
React with SPFx v/s Angular with SPFx
React + SPFx
- 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 will load faster initially.
- It has a predictable UI, SharePoint modern UI uses it, 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 use React for implementing various controls e.g., property pane.
- While local development solution packaging (creating .sppkg) is really quick.
- 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)
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.
Some pros & cons of using Angular with SharePoint framework mentioned below:
- It has good code structure (MVC pattern) and market popularity.
- It has routing, dependency injection, HTTP calls etc.
- This pattern is tried & tested, robust and allows us to control every aspect of the UI.
- Since Angular is working on the real DOM, it will update the entire tree structure of HTML tags.
- It implements MVC patterns.
- It allows 2-way communication.
- 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.
- While local development solution packaging (creating .sppkg) is slight time consuming than react.
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.
Key Points and Differences
- Long term strategy – Microsoft office Fabric UI, Fluent UI is supported by Microsoft. React is supported by Microsoft, Angular is supported by Google.
- Architectural choice should depend on – your competency(team) and project timeline.
- Performance penalty – Angular uses the regular DOM whereas React uses the Virtual DOM.
- SEO Ranking – Search engines can easily index React apps than Angular apps as they are light in weight.
- 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.
- 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).
- Both React and Angular have good community support. So it seems that we can be confident in this regard.
A place for big ideas.
Reimagine organizational performance while delivering a delightful experience through optimized operations.
The trend may vary with times about using one over the other but one of the deciding factors can be familiarity. If you’re already acquainted with any of the frameworks then this will also be helpful while writing real code. It would be better to choose the particular framework rather than learning or adapting a new one. Hopefully, this would have been a good read for you to spot the one best suit over others.