# React vs Angular in 2024? Let’s talk about React vs Angular. I’ve worked with both for over five years. They are both solid choices. But are they still relevant? After all, it feels like new JavaScript frameworks
are being announced every week. The pace of innovation has prompted big changes
in React and Angular. That means it’s time to revisit the rivalry. React or Angular: Which is worth investing
time in? Which is worth learning? Which is the best fit for you: your project,
career, personality? Have the recent changes altered the landscape
in any significant way? It’s time to think like a CTO. Let’s examine the different aspects of React
and Angular. We’ll look at :
- their philosophy, - how they are structured,
- what the statistics say - what kind of person and what kind of project
they are most suited to We’ll also explore the changes brewing in
these two frameworks. But first, who are our contenders? What do they bring to the table? What is their mindset and philosophy? ## The philosophies of React and Angular In the blue corner, we have React. React was created at Facebook in 2011. Facebook’s unofficial motto is “Move fast
and break things.” That same disruptive, chaotic side is also
in React’s logo, an atom that brings to mind an atomic reaction—an explosion. React is not opinionated. It doesn’t enforce any rules; it lets you
invent your own. React gives you freedom and flexibility. If we were to give React a role-playing alignment,
it would be chaotic neutral. If you value your creativity and prefer working
in disruptive, fast-moving environments, React might be a good fit for you. In the red corner, we have Angular. Angular was released by Google in 2016. Google’s motto used to be “Do no evil”. Angular’s logo is safe. Its previous logo used to look like a shield. Or you could see a cube. Angular is square - in all the senses of the
term. Il plays by the rules. Angular itself provides **structure**. It is opinionated. If you were to give it a role-playing alignment,
it would be “lawful-good”. If you need structure and like best practices
to be enforced, Angular might be a good fit for you. ## Commonalities and differences in structure
At least, that’s how things started out. Before we explore how things have changed,
let’s look at what they have in common. Both React and Angular use components, for
example. They both manage data flows between components. They both manage an application’s state. However, these commonalities hold their own
differences. Components, state, and data flow don’t work
the same in Angular and React. For example, Angular has a M-V-VM structure,
with: * Models, which hold data structures,
* Views, which manage what is displayed * And ViewModel bridge the gap between models
and views. React only does _one_ part of that. It only concerns itself with the _View layer_. React has a narrower scope. React components are functions that translate
inputs into interfaces. The data flow is simple: information flows
down from the top of the component tree (via props). This means there is a simple mental model. React doesn’t concern itself with routing,
translations, or authentication (for example). It gives you the freedom to choose how you
best want to do those. That freedom comes with a price: choosing
the wrong library can be costly. Angular has a wider scope. It aims to be “batteries included.” It provides a normalised framework of tools
and utilities. It provides structure. It is opinionated. It provides routing and translations out of
the box. Angular contains more than React. It does more for you, including making choices. But that structure comes with a cost: it can
limit your possibilities. The internal structure of components is also
different. A React component is one function. It starts with the hooks, transforms the data,
and returns the UI. An Angular component, on the other hand, is
more complex. It is separated into the directives, the business
logic, and the template. The template itself contains rendering logic. In my experience, React components tend to
have less code on average. React’s mental model encourages you to create
smaller (and dumber) components. ## Differences in code quality between React
and Angular But what about the quality of the code produced? The opposition between the two reminds me
of the difference between eating at a fast-food franchise (like, say, McDonald’s) and eating
at a restaurant. In a fast-food franchise, you know the quality
of what you are getting and the price you will pay. The choices are limited. Angular is like that: it might not be the
best, but it’s solid and reliable. You can’t write _exceptional_ applications
with it, but you can’t write very poor code with it, either. The quality is in a narrower band. You know what you are getting. This makes it a perfect fit for risk-averse
organisations like banks, enterprises and public institutions that plan for the long
term. Conversely, when you eat at a restaurant,
the quality depends much more on the chef. In fact, it can even depend on the chef’s
mood. The other day, I went to a small Korean restaurant
near my workplace in the Latin Quarter in Paris, and one dish was much less spicy than
usual. When I asked why, the owner told me the chef
adds more spice when he’s in a bad mood. React is similar. The quality of the code has a greater amplitude. You can write better-performing code, but
you can also write awful spaghetti code. The quality of the code depends a lot more
on who is cooking and sometimes even their mood. But that means that exceptional coders can
do more with React. Because React has a simpler mental model,
it is more agile. Compared to Angular, this makes React a perfect
fit for startups that need (first and foremost) to ship their product as fast as possible
and are threatened by external factors. If a company is fighting for survival, React
provides a better turnaround time. That’s the theory, but what about in practice? What do the real-world statistics say about
React and Angular? ## What do the statistics say about React
vs Angular? Let’s take a look at the latest StackOverflow
survey. React shows higher desirability and positive
options than Angular. In fact, React is the most desired technology
in the space. In the “Worked with vs Want to Work With”
chart, React’s market share is dominant. React mainly has incoming flows, that is,
people wanting to adopt it, with a few wanting to try out Svelte and VueJS. The largest outgoing flow is towards NextJS,
which, let’s be honest, isn’t jumping ship: Next is a React meta-framework. Angular has a much smaller market share and
mainly outgoing flows. The State of JavaScript survey shows a similar
picture. React is in the “high market share, high
opinion” quadrant. Angular is in the “average usage, low opinion”
quadrant. The Positive/Negative split and Usage over
time graphs tell the same story. All this shows us the current state of play
between Angular and React, but how are things _changing_? ## What does the future hold? Angular is targeted at the enterprise world,
which means it moves more slowly and has extra overhead. However, internally, Google also uses another
framework called Wiz. As the name implies, it is focused on performance. Ask Google, “What is 3 x 92?” You’ll be presented with a calculator that
loads in a fraction of a second. That, my friends, is Wiz. In the latest Angular Conference, the team
announced that Angular and Wiz will be moving closer together. In particular, Angular is adopting signals,
which I’ve talked about elsewhere. It’s impossible to say for now _how_ this
changes Angular’s structure and philosophy. In a sense, it is a step towards React's more
focused mindset. Will it help make Angular more popular and
mre agile, and therefore more versatile? We shall see. React, on the other hand, has been working
closely with Meta Framework teams such as Vercel, the creators of NextJS. React used to be a client-side library. With the release of version 18, it is no longer
“only client-side”. With version 19, React stops being “just
a library” since it introduces compiler-based optimisations. All this means that React can power a complete
application with a meta framework like Next. In a sense React is drawing closer to Angular’s
“batteries included” mindset. But that raises the question: When should
you use Angular or React? ## Angular and React use case React is more suited to situations where agility
is the primary need, and Angular is more suited when stability and security are required. What does this mean in practice? Imagine you need (for example) to build an
**internal administration tool** that displays different types of entities stored in a database. A tool that requires a lot of developers. Angular’s structure, MVVC model and “batteries
included” philosophy make it a good choice. On the other hand, if you have a small team
and want to produce a web app with some server-side logic where the user experience is key, React
would be a good fit. This use case fits many SaaS companies. I use React on my blog, coupled with NextJS. ## So where now? Now, obviously, those use cases are stereotypes. You can build a simple app in Angular, and
a complex one with React. Facebook would be a prime example of that. But if we boil the opposition down to its
essence, if you need structure, or want to work with large teams, you’re better off
learning Angular. And if you prefer agility and freedom, you’re
better off with React.
