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.
Pre-Requisites
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 provides complete support to open-source development tools. For example, NPM (node package manager is a software registry to share software or manage private development). Another one 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). Again, webpack (is a module bundler for bundling JavaScript files & transforming, bundling, or packaging any resource or asset). Meanwhile, VS Code (is a free coding editor which for various JavaScript frameworks & several other languages).
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 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.
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 with managing dependencies. This must be on your own and like to work with JavaScript alone. Search engines can easily index light-weight applications made using React. 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.
Some pros & cons of using Angular with SharePoint framework mentioned below:
Pros
- 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.
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.
- 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.
- 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.
- 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.
Similarity
- 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.
Conclusion
Picking up any framework before knowing the requirement is not very sensible. Angular is a full fletched web framework. Hence if you are more comfortable using Typescript, then you may go with Angular. Whereas react is JavaScript library. It is mainly used for component-based applications. Further, it follows JSX syntax. Both the front-end platforms function somehow the same way. What matters is the requirement of the project, competency, project timeline. If there is extensive use of inbuilt web components then React can be a better choice. Angular can be better choice if we need to customize more things to achieve the deliverable task. But if we compare the applications then React app are light weight than Angular app. We can include required components rather than entire library with unused components.
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.
