React vs Angular in 2024

Summary

Le script compare React et Angular, deux frameworks JavaScript solides et pertinents malgré l'annonce régulière de nouveaux frameworks. React, créé par Facebook, offre une grande liberté et flexibilité, tandis qu'Angular, développé par Google, est structuré et fournit des outils intégrés. Les deux utilisent des composants et gèrent l'état et le flux de données de l'application, mais avec des différences notables dans leur structure et leur philosophie. React est plus adapté aux environnements agiles et aux start-ups, tandis qu'Angular est préférable pour les organisations à risque réduit et les projets nécessitant une structure solide. Les statistiques montrent que React est le plus souhaité, tandis qu'Angular a une part de marché plus petite. L'avenir pourrait voir React s'approchant du modèle complet d'Angular, et Angular intégrant des aspects de performance de Wiz, un autre framework de Google. Le choix entre les deux dépend des besoins en matière d'agilité ou de stabilité.

Takeaways

• 🚀 React et Angular sont tous les deux des choix solides et pertinents malgré l'annonce régulière de nouveaux frameworks JavaScript.
• 🧭 React, créé par Facebook, valorise la flexibilité et la créativité, tandis qu'Angular, développé par Google, est structuré et orienté vers les meilleures pratiques.
• 🤖 Les deux frameworks utilisent des composants et gèrent le flux de données et l'état de l'application, mais ils le font de manières différentes.
• 📈 React a une portée plus restreinte, se concentrant uniquement sur la couche de présentation, contrairement à Angular qui a une portée plus large avec un framework normalisé.
• 🍔 La qualité du code en React dépend davantage du développeur, offrant ainsi plus de possibilités pour les[codeurs exceptionnels, tandis qu'Angular assure une qualité plus uniforme.
• 📊 Selon les statistiques de StackOverflow, React est plus désiré et domine le marché, tandis qu'Angular a une part de marché plus petite avec principalement des flux sortants.
• 🔄 Angular s'adresse davantage au monde des entreprises et évolue lentement, mais Google travaille à l'amélioration de ses performances avec l'intégration de Wiz.
• 🌟 Avec la version 18, React n'est plus une bibliothèque côté client uniquement, et la version 19 introduit des optimisations basées sur le compilateur.
• 🛠️ React est mieux adapté aux situations où l'agilité est primordiale, tandis qu'Angular est préférable lorsque la stabilité et la sécurité sont requises.
• 🏢 Angular est un bon choix pour les outils d'administration internes nécessitant de nombreux développeurs, tandis que React convient mieux aux petites équipes et aux applications web axées sur l'expérience utilisateur.
• ⚖️ Choisir entre React et Angular dépend des besoins spécifiques du projet et de la préférence pour la structure ou l'agilité.

Q & A

Comment React et Angular se positionn-ils dans le paysage des frameworks JavaScript en 2024 ?

React et Angular sont des choix solides et toujours pertinents malgré l'annonce régulière de nouveaux frameworks. Les changements récents dans ces technologies les rendent pertinents pour une réévaluation de leur rivalité.

Quelle est la philosophie derrière le développement de React ?

React a été créé par Facebook en 2011 avec la philosophie de 'se déplacer vite et casser les choses', offrant ainsi une grande liberté et flexibilité au développeur.

Comment se différencient les structures internes des composants React et Angular ?

Un composant React est une fonction qui transforme les données en interface utilisateur, tandis qu'un composant Angular est plus complexe avec des directives, une logique métier et un modèle séparé contenant la logique de rendu.

Quels sont les avantages de la structure MVVM d'Angular ?

La structure MVVM (Modèles-Vue-VueModèle) d'Angular permet une gestion efficace du flux de données et de l'état de l'application grâce à la séparation claire entre les modèles de données, les vues et le pont entre les deux.

Comment la portée de React est-elle plus restreinte par rapport à Angular ?

React se concentre uniquement sur la couche de présentation (View layer), offrant ainsi moins de fonctionnalités intégrées par rapport à Angular, qui a une portée plus large avec un framework normalisé d'outils et d'utilitaires.

Que signifie le terme 'batteries included' en référence à Angular ?

Le terme 'batteries included' fait référence à la philosophie d'Angular qui fournit un ensemble complet d'outils et de fonctionnalités intégrées, offrant ainsi une structure et des meilleures pratiques imposées.

Quels sont les avantages et inconvénients de la structure opiniâtre d'Angular ?

L'opiniâtreté d'Angular assure une qualité de code prévisible et une expérience de développement uniforme, mais peut limiter les possibilités et la flexibilité pour les développeurs qui cherchent à innover ou à personnaliser davantage leur application.

Comment les enquêtes StackOverflow et State of JavaScript évaluent-elles React et Angular en termes de popularité et de satisfaction ?

Selon les enquêtes, React montre un désir plus élevé et une part de marché dominante par rapport à Angular. Angular a une part de marché plus petite avec principalement des flux sortants, ce qui indique que les développeurs cherchent à explorer d'autres technologies.

Quels changements sont prévus pour Angular qui pourraient l'amener à se rapprocher de React ?

Angular est en train d'adopter des signaux, une fonctionnalité provenant du framework interne de Google appelé Wiz, qui est axé sur les performances. Cela pourrait aider à rendre Angular plus populaire et agile.

Depuis la version 18, en quoi React a-t-il évolué pour ne plus être 'uniquement un client-side library' ?

Avec la version 18, React a ajouté des fonctionnalités qui le rendent capable de gérer des aspects au-delà du client-side, et la version 19 introduit des optimisations basées sur le compilateur, ce qui permet à React d'être utilisé pour alimenter une application complète avec un meta-framework comme Next.

Quels sont les cas d'utilisation idéaux pour React et Angular ?

React est mieux adapté aux situations où l'agilité est primordiale, tandis qu'Angular est plus approprié lorsque la stabilité et la sécurité sont requises, comme dans le cas des outils d'administration internes nécessitant de nombreux développeurs.

Comment la simplicité du modèle mental de React influence-t-elle la qualité et la performance du code produit ?

La simplicité du modèle mental de React permet aux développeurs talentueux de produire du code de haute qualité et de meilleures performances, mais cela peut aussi conduire à du code de mauvaise qualité si les développeurs ne sont pas compétents.

Outlines

00:00

🤔 React vs Angular : Le débat en 2024

Le script commence par une introduction au débat entre React et Angular, deux frameworks populaires pour le développement web. L'auteur a plus de cinq ans d'expérience avec ces technologies et questionne leur pertinence face à l'innovation rapide du secteur. Il propose d'examiner leurs philosophies, structures, les statistiques, et les types de projets et de personnes qu'ils conviennent le mieux. React, créé par Facebook en 2011, est décrit comme étant non opinié et offrant la liberté et la flexibilité, tandis qu'Angular, lancé par Google en 2016, est perçu comme structuré et opinié, offrant un cadre normalisé avec des outils et des utilités. Les deux utilisent des composants et gèrent l'état et le flux de données de l'application, mais avec des différences dans leur implémentation. React se concentre uniquement sur la couche de présentation, offrant une portée plus étroite, tandis qu'Angular a une portée plus large avec un modèle MVVM et un ensemble complet d'outils.

05:00

📊 Les statistiques de React et Angular

Le script analyse ensuite les statistiques concernant React et Angular, en se basant sur les dernières données de la survey StackOverflow. React apparaît comme étant la technologie la plus désirée avec une part du marché dominante et une tendance à attirer de nouveaux utilisateurs. Angular, en revanche, a une part du marché plus petite avec une tendance à perdre des utilisateurs. Les deux frameworks évoluent : Angular, qui cible le monde des entreprises, est en train de s'approcher de Wiz, un autre framework interne de Google axé sur les performances, notamment en adoptant des signaux. React, qui était auparavant une bibliothèque côté client, avec sa version 18, ne l'est plus uniquement et avec la version 19, introduit des optimisations basées sur le compilateur, s'approchant ainsi de la philosophie d'Angular. L'auteur conclut en disant que React est mieux adapté aux situations où l'agilité est primordiale, tandis qu'Angular est préférable lorsque la stabilité et la sécurité sont requises.

Keywords

💡React

React est une bibliothèque de développement d'interfaces utilisateurs créée par Facebook en 2011. Elle est décrite comme étant non opiniâtre, offrant ainsi une grande liberté et flexibilité au développeur. Dans le contexte de la vidéo, React est présenté comme étant plus adapté aux environnements dynamiques et aux équipes qui privilégient l'agilité et la rapidité de développement.

💡Angular

Angular est un framework de développement web open source maintenu par Google, initialement publié en 2016. Il est décrit comme étant structuré et opiniatre, fournissant ainsi un ensemble normalisé d'outils et d'utilitaires. Dans le script, Angular est présenté comme le meilleur choix pour les organisations à risque avéré comme les banques ou les entreprises qui recherchent la stabilité et la sécurité.

💡Components

Les composants sont des éléments fondamentaux utilisés par les deux frameworks React et Angular pour construire des interfaces utilisateurs. Ils permettent de gérer le flux de données entre les composants et l'état de l'application. Dans le script, il est souligné que bien que les deux frameworks utilisent des composants, leur fonctionnement est différent, avec Angular ayant une structure M-V-VM et React se concentrant uniquement sur la couche de présentation.

💡State Management

La gestion de l'état fait référence à la manière dont les applications maintiennent, modifient et organisent les données qui influencent l'interface utilisateur. React et Angular gèrent l'état de l'application, mais ils le font de manières distinctes, ce qui affecte la philosophie et la structure de chaque framework.

💡Mental Model

Le modèle mental est la façon dont les développeurs perçoivent et comprennent le fonctionnement d'un framework. React encourage la création de composants plus petits et plus simples, tandis qu'Angular propose une structure plus complexe avec des directives, une logique métier et un modèle de template. Dans le script, le modèle mental de React est décrit comme étant plus simple et plus agile.

💡Code Quality

La qualité du code est une mesure de l'efficacité, de la lisibilité et de la maintenabilité du code écrit. Le script compare la qualité du code produit par React et Angular à celle des fast-foods et des restaurants, suggérant que React permet une amplitude plus grande de qualité, allant de codes exceptionnels à des codes de mauvaise qualité, tandis qu'Angular assure une qualité plus uniforme et prévisible.

💡Market Share

Le marché partagé fait référence à la part d'un produit ou d'un service dans le marché total. Dans le script, les statistiques de StackOverflow montrent que React a une part de marché dominante par rapport à Angular, avec une forte désirabilité et une orientation vers l'adoption.

💡Agility

L'agilité fait référence à la capacité d'une équipe ou d'une organisation à réagir rapidement aux changements. Dans le contexte du script, React est considéré comme plus adapté aux environnements où l'agilité est primordiale, comme dans le cas des start-ups qui doivent lancer rapidement leurs produits.

💡Stability and Security

La stabilité et la sécurité sont des facteurs clés pour les organisations qui cherchent à minimiser les risques et à maintenir un environnement de développement sûr. Angular, avec sa structure opiniâtre et son ensemble complet d'outils, est présenté comme le meilleur choix pour les projets nécessitant ces attributs.

💡Wiz

Wiz est un autre framework interne utilisé par Google, axé sur les performances. Dans le script, il est mentionné que les équipes d'Angular ont annoncé que Angular et Wiz s'approfondiraient, ce qui pourrait conduire à des améliorations de performance et de structure pour Angular.

💡NextJS

NextJS est un framework de développement d'applications web basé sur React, créé par Vercel. Il est mentionné dans le script comme un exemple de 'meta-framework' qui utilise React pour offrir des fonctionnalités supplémentaires, comme la gestion des routes et le rendu côté serveur.

Highlights

React and Angular are both solid choices for JavaScript frameworks, but their relevance is being questioned amidst the rapid pace of innovation.

React was created at Facebook in : Facebook’s unofficial motto is “Move fast and break things.”

React is not opinionated and provides freedom and flexibility, making it a good fit for creative, fast-moving environments.

Angular was released by Google in 2016 and is more structured and opinionated, enforcing best practices.

Both React and Angular use components, manage data flows, and application state, but they have different approaches.

Angular has an MVVM structure with models, views, and view models, while React focuses solely on the view layer.

React components are simpler functions that transform inputs into interfaces, while Angular components are more complex with separate directives, logic, and templates.

React encourages creating smaller, dumber components, while Angular's structure can limit possibilities.

The quality of React code has a wider range - you can write better or worse code depending on the developer, while Angular produces more consistently solid code.

React is more suitable for startups needing to ship products quickly, while Angular is better for risk-averse organizations like banks and enterprises.

React is currently the most desired technology and has a dominant market share, according to the latest StackOverflow survey.

Angular has a smaller market share with more developers leaving for other frameworks like NextJS.

Angular is moving towards adopting signals like React, potentially making it more agile and versatile.

React has evolved from a client-side library to a more comprehensive solution with the release of version 18 and 19.

React is better suited for situations requiring agility, while Angular is more appropriate when stability and security are paramount.

Angular is a good choice for building internal admin tools with many developers, due to its structure and MVVM model.

React is ideal for small teams building web apps with a focus on user experience, like many SaaS companies.

Ultimately, the choice between Angular and React depends on whether you prioritize structure and working with large teams (Angular) or agility and freedom (React).

Transcripts

# 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.