.png)
I'm a FE developer for Admios and have done many projects in both React and Angular. Most of my colleagues prefer React. I do not. This post has one simple goal: lay out the main differences between Angular and React in modern software development and explain why I prefer Angular. Although I’ll mention some facts, it’ll ultimately end on a conclusion based on my personal and professional opinion.
Let’s define these two:
Angular is defined, by its creator Google, as “an application design framework and development platform for creating efficient and sophisticated single-page apps”.
React, on the other hand, is defined by its creator Facebook as a “library for building user interfaces”.
Yes, Angular is a framework and React is a library. Is it really fair to expect the same out of them?
Let’s Compare
Looking at both frameworks and libraries, they serve at least one common purpose: provide tools for easier and faster software development. Libraries, as opposed to a framework, do not intend to standardize the way a product is built or deployed so its scope is broader compared to a framework.
React, being a library, is much more lightweight than Angular in terms of scope and flexibility, and in some cases functionality. Angular, as a framework, deliberately looks to force a standard for software development which allows itself to provide more features that fit a bigger picture.
My Personal Experience
Both React and Angular certainly have valid use cases and are very popular and used throughout the industry. In my professional career as a software developer, I’ve met several people with mixed feelings regarding either React, Angular or both. However, I can definitely say that many more people prefer React over Angular. Some prefer React without having really given a chance to Angular.
And the thing is, it happens much more often that I would imagine or even prefer. I’ve personally developed several client-facing products with both React and Angular and I 100% prefer Angular.
What I Don’t Love About React
React is really limited in its scope and that’s by design. React is mostly used to render web pages and interact with them, and it excels at it. It is extremely easy to get started and it’s blazing fast for the end user. The issue is, that is pretty much what React does or at least what it’s meant to do.
In modern applications it’s safe to assume that there’ll be a need to define a set of routes for navigation, forms for the user to enter data into, security related needs like guarding a user from entering unauthorized pages, access to resources in the internet (via http), among other things.
The main issue I have with React arises from the fact that most projects I’ve seen using React completely and fully rely on it to build a tech stack of some sort where every single piece of the application is built and implemented around React.
Because React, by its own set goal, is just a library for building user interfaces, it misses to address much of the product needs I’ve mentioned above. That’s not to say you cannot possibly make it work using React, but because it’s not offered “natively” as a software developer you need to reach to other people’s solutions to address use cases that are really not uncommon.
The need to use third party libraries is not an issue. It’s actually pretty common on open source software and that’s how entire communities have been built, even including React’s. The problem, to me, stems from the fact that developers are “overusing” React, pushing the limits of what it can do, exposing its limitations, at least on highly complex things I feel Angular solves in an easier manner, for example guarding routes based on business logic (authorization, role based, etc), in a centralized manner without needing to complicate overall route definition.
Why I Prefer Angular Even After Tasting React’s Heaven
Angular, as a framework, has a much bigger scope, if not limitless by design. Just like React, it’s used to render pages and interact with them. The differences begin with the fact that most of your needs when developing modern applications are addressed by Angular which even encompasses what React doesn’t.
Angular, just like React, is open source so if there’s anything Angular does not provide and you need, you can still rely on third party libraries to get it done. Because Angular provides so much out of the box, the freedom Angular provides you may feel limiting. I believe that’s one of the biggest reasons software developers do not like Angular, because in order to achieve a simple goal you need to take a set of steps that might feel cumbersome as a developer.
Let’s Have a Deeper Comparison Between the Two
Disclaimer: I’m going to be mentioning tools and libraries I’ve personally used and researched when working with both Angular and React, not necessarily representative of the entire offering for both or their community.
What are the differences in scope I keep mentioning? What is it that Angular provides and React doesn’t, at least out of the box? Is it really that big of a deal? Let’s see.
Do you want to have a form to gather information from the user? Do you want to have some complex validation to meet product requirements? Then both React and Angular might be of service to you. However, only Angular will provide you with native support.
React has rudimentary support for forms. In a component you can define a form like you would using HTML5 and rely on `value` and `onChange` properties to keep track of its state, basically relying on callbacks to update each value.
Conversely, Angular has robust support right off the bat. It provides, what is called in React “uncontrolled forms”, where you do not need to update the input values by hand. Instead, it binds the template and its counterpart in the typescript file, removing the need of listening to changes to update its state in the code. Even within Angular, two options are provided, with use cases mostly depending on complexity of the form. Do you have a simple form? You can use `FormsModule` and rely on `ngModel` to bind the template with the component. Do you have a more complex structure with validations that go beyond a simple max length check? You can rely on `ReactiveFormsModule` and define validations and constraints fully handled by Angular.
React, as I’ve mentioned before, has support for third party libraries and it has a lot of form support. Some popular libraries I’ve used or seen being used are: `react-form`, `react-redux-form` (in integration with Redux - probably a separate topic) and most recently `react-hook-form` with hooks support. All of these can ultimately be enough for your needs but they can be more of a hassle than what they need to be and certainly more complex and cumbersome than just using Angular’s solution.
This is also true for navigation which is also vital to modern applications. React does not offer a solution for navigation and instead relies on third party libraries like `react-router` where Angular also provides a very robust solution with several use cases, including lazy loading which is important on heavy featured applications and route guarding to restrict unauthorized access.
There are extremely popular options for React on things that it doesn’t support natively, for example using `redux` for state management. In my experience using these types of features and solutions feels more simple in Angular as everything is designed and built to work with it and it does not feel like an add-on that is not supposed to be supported.
Final Thoughts
Bottom line: Angular is not perfect and what I say about Angular might also be true about other frameworks and that’s fine because React doesn’t really want to be a framework but the applications software developers tend to give React, in my opinion, exposes its limitations.
Due to some of the reasons I laid out above, on a personal and professional level, I wouldn’t choose React over Angular if I were to develop a complex enterprise application just because I feel I’ll need to find solutions to problems that I know Angular already provides very clearly. Angular is great for big projects and complex requirements as I can expect everything to be resolved by its offerings.
However, I would not use Angular for small projects or projects that don’t really take advantage of most of the offerings that it provides, mainly because Angular is way slower on first loads, resulting in more time for the first meaningful paint and requires much more setup and configuration to get going.
