Angular vs React vs Vue 2022

Il existe trois frameworks pour créer des applications Web dont tout développeur frontend a entendu parler : React, Vue.js et Angular.

React est une bibliothèque d'interface utilisateur, Angular est un framework frontal à part entière, tandis que Vue.js est un framework progressif.

Ils peuvent être utilisés presque de manière interchangeable pour créer des applications frontales, mais ils ne sont pas identiques à 100 %, il est donc logique de les comparer et de comprendre leurs différences.

Chaque framework est basé sur des composants et permet la création rapide de fonctionnalités d'interface utilisateur.

Cependant, ils ont tous une structure et une architecture différentes. Nous allons donc d'abord examiner leurs différences architecturales pour comprendre la philosophie qui les sous-tend.

Architecture

Réagir

React n'applique pas de structure de projet spécifique, et comme vous pouvez le voir dans l'exemple officiel "Hello World" ci-dessous, vous pouvez commencer à utiliser React avec seulement quelques lignes de code.

 ReactDOM.render(
  <h1>Bonjour, tout le monde !</h1>,
  document.getElementById('root')
);

React peut être utilisé comme une bibliothèque d'interface utilisateur pour rendre des éléments, sans imposer une structure de projet spécifique, et c'est pourquoi ce n'est pas strictement un cadre.

Les éléments React sont les plus petits blocs de construction des applications React. Ils sont plus puissants que les éléments DOM car le DOM React s'assure de les mettre à jour efficacement chaque fois que quelque chose change.

Les composants sont des blocs de construction plus grands qui définissent des pièces indépendantes et réutilisables à utiliser dans toute l'application. Ils acceptent des entrées appelées props et produisent des éléments qui sont ensuite affichés à l'utilisateur.

React est basé sur JavaScript, mais il est principalement combiné avec JSX (JavaScript XML), une extension de syntaxe qui vous permet de créer des éléments contenant du HTML et du JavaScript en même temps.

Tout ce que vous créez avec JSX peut également être créé avec l'API React JavaScript, mais la plupart des développeurs préfèrent JSX car il est plus intuitif.

vue

La bibliothèque principale Vue.js se concentre uniquement sur la couche Vue. C'est ce qu'on appelle un framework progressif car vous pouvez étendre ses fonctionnalités avec des packages officiels et tiers, tels que Vue Router ou Vuex, pour en faire un véritable framework.

Bien que Vue ne soit pas strictement associé au pattern MVVM (Model-View-ViewModel), sa conception s'en est en partie inspirée. Avec Vue, vous travaillerez principalement sur la couche ViewModel, pour vous assurer que les données de l'application sont traitées de manière à permettre au framework de restituer une vue à jour.

La syntaxe de template de Vue vous permet de créer des composants View et combine le code HTML familier avec des directives et des fonctionnalités spéciales. Cette syntaxe de modèle est préférée, même si JavaScript brut et JSX sont également pris en charge.

Les composants de Vue sont petits, autonomes et peuvent être réutilisés dans toute l'application. Les composants de fichier unique (SFC) avec l'extension .vue contiennent HTML, CSS et JavaScript afin que tout le code pertinent réside dans un seul fichier.

Les SFC sont la méthode recommandée pour organiser le code dans les projets Vue.js, en particulier les plus volumineux. Des outils tels que Webpack ou Browserify sont nécessaires pour transpiler les SFC en code JavaScript fonctionnel.

Angulaire

Dans cet article, je parle d'Angular 2, et non de la première version du framework qui s'appelle désormais AngularJS.

AngularJS, le framework original, est un framework MVC (Model-View-Controller)). Mais dans Angular 2, il n'y a pas d'association stricte avec les modèles MV * car il est également basé sur des composants.

Les projets dans Angular sont structurés en modules, composants et services. Chaque application Angular a au moins un composant racine et un module racine.

Chaque composant d'Angular contient un modèle, une classe qui définit la logique de l'application et des métadonnées (décorateurs). Les métadonnées d'un composant indiquent à Angular où trouver les blocs de construction dont il a besoin pour créer et présenter sa vue.

Les modèles angulaires sont écrits en HTML mais peuvent également inclure une syntaxe de modèle angulaire avec des directives spéciales pour générer des données réactives et afficher plusieurs éléments, entre autres.

Les services dans Angular sont utilisés par les composants pour déléguer des tâches de logique métier telles que la récupération de données ou la validation d'entrées. Ils font partie intégrante des applications angulaires. Bien qu'Angular n'impose pas leur utilisation, il est fortement suggéré de structurer les applications comme un ensemble de services distincts pouvant être réutilisés.

Angular est construit en TypeScript, son utilisation est donc recommandée pour obtenir l'expérience la plus transparente, mais le JavaScript simple est également pris en charge.

Popularité

Réagir

React est l'un des projets JavaScript les plus populaires avec 160 000 étoiles sur GitHub. Il est développé et maintenu par Facebook, et il est utilisé en interne dans bon nombre de leurs projets. De plus, il alimente plus de 2 millions de sites Web, selon les statistiques d'utilisation de BuiltWith.

vue

Sur les trois frameworks, Vue a le plus d'étoiles sur GitHub, avec 176 000 étoiles. Le projet est développé et dirigé par l'ex-Googler Evan You. C'est un projet indépendant très fort dans la communauté open-source et est utilisé par plus d'un million de sites Web, selon BuiltWith.

Angulaire

Angular est développé par Google, mais étonnamment, il n'est pas utilisé dans certains de leurs produits phares tels que Search ou Youtube. Il est souvent utilisé dans les projets d'entreprise et alimente plus de 97 000 sites Web basés sur les données de BuiltWith.

C'est le moins étoilé parmi les trois frameworks, avec 68 000 étoiles sur GitHub. Cependant, lors du passage d'Angular 1 à Angular 2, ils ont créé un tout nouveau référentiel au lieu de poursuivre le projet AngularJS, qui compte également 59 000 étoiles.

Écosystème

Les packages open source vous font gagner un temps précieux lors du développement d'applications. Non seulement cela, mais ils sont souvent meilleurs que les composants et les packages sur mesure, car ils sont testés au combat.

Il est important de vérifier la disponibilité de composants, de thèmes et d'autres outils prêts à l'emploi qui peuvent vous aider à créer plus facilement de nouvelles fonctionnalités.

Réagir

De nombreuses applications frontales s'appuient sur la gestion globale de l'état pour stocker des informations, telles que les personnes connectées et d'autres paramètres utilisateur.

Le projet le plus populaire pour la gestion d'état JavaScript est Redux. La plupart des développeurs utilisent les liaisons React officielles pour Redux, qui sont gérées par l'équipe Redux.

En raison de la popularité de React, il est extrêmement facile de trouver des composants d'entrée et des éléments prêts à l'emploi. Ils ne sont tous qu'à une recherche Google ou GitHub.

L'écosystème React comprend également React Native qui vous permet de créer des applications iOS et Android natives à partir d'une seule base de code écrite en React. Ainsi, React peut également être un excellent choix pour créer des applications mobiles utilisant les technologies Web.

React fait partie de la pile MERN, qui contient MongoDB, ExpressJS, React et NodeJS. L'avantage de cette combinaison est qu'un seul langage, JavaScript, alimente l'ensemble de l'application.

vue

Même si Redux peut être utilisé dans Vue, il n'y a pas de liaisons officielles. Mais cela ne devrait pas vous inquiéter car Vuex est la bibliothèque officielle de gestion d'état spécialement conçue pour les applications Vue. En plus de s'intégrer très bien à Vue, il est facile de déboguer à l'aide des outils de développement de Vue.

Au début de Vue, il était plus difficile de trouver des composants prêts à l'emploi. Depuis que la communauté s'est développée, il existe un large éventail de composants d'entrée et d'éléments avancés que vous pouvez utiliser pour accélérer votre développement.

Pour le développement d'applications mobiles, il existe un projet prometteur appelé Weex. Weex est développé et utilisé par Alibaba, mais il n'est pas aussi mature et puissant que React Native. De plus, comme le projet est davantage développé et utilisé en Chine, il est plus difficile de trouver de la documentation et des solutions aux problèmes en anglais.

Vue s'intègre bien avec Laravel, et c'est pourquoi ils sont souvent utilisés ensemble. Laravel propose un échafaudage JavaScript et CSS complet pour permettre l'utilisation de Vue dans de nouveaux projets.

Angulaire

Pour la gestion des états dans Angular, vous pouvez utiliser le projet NgRx. Il a été inspiré par Redux, mais il est spécifiquement créé pour Angular.

Comme dans le cas de Vue et React, il existe de nombreux composants prêts à l'emploi que vous pouvez importer dans vos projets. Ce qui est légèrement différent avec Angular, c'est qu'il existe de nombreux composants officiels dans le projet Angular Material. Il s'agit d'un projet officiel de Google qui propose des composants Material Design pour les applications Angular.

Vous pouvez créer des applications mobiles multiplateformes dans Angular à l'aide de NativeScript. Il prend également en charge Vue, mais le support angulaire est plus mature.

Angular fait partie de la célèbre pile MEAN qui combine Angular avec MongoDB, ExpressJS et NodeJS. Semblable à la pile MERN, il repose entièrement sur JavaScript pour le front-end et le back-end.

Technologies communes

Angular, React et Vue peuvent tous être utilisés pour développer des applications Web progressives, également appelées PWA.

Les PWA ne sont pas des applications mobiles, mais des applications Web que les utilisateurs de smartphones peuvent ajouter en tant que raccourcis sur leur écran d'accueil et offrir une apparence et une convivialité similaires aux applications mobiles natives.

Vous pouvez également trouver des modèles premium et des applications prédéfinies pour chaque framework, mais Angular et React ont plus d'options premium disponibles que Vue.

Performance

Lorsque vous choisissez un framework ou une bibliothèque, vous devez également penser aux performances.

Dans de nombreux cas, vous n'aurez pas à vous soucier des performances, surtout si vous construisez un petit projet. Cependant, plus un projet prend de l'ampleur et de la complexité, plus la performance peut (et va) devenir une préoccupation.

Il est important de noter que la qualité du développement et le respect des meilleures pratiques en matière de performances Web sont plus importants que le choix du framework.

Mais comme il existe des mesures de performance et des différences, je vais les examiner et expliquer comment chacune pourrait affecter vos efforts de développement.

JS Framework Benchmark : Angular vs React vs Vue

Les résultats du JS Framework Benchmark montrent qu'ils fonctionnent tous assez bien dans la plupart des benchmarks, tels que la création ou l'ajout de lignes dans un tableau.

Comme vous pouvez le voir ci-dessus, Vue est considérablement plus lent que Angular et React lors de la sélection de lignes. En revanche, Angular et React ne sont pas très efficaces pour échanger des lignes.

Ce sont les seules différences substantielles dans les benchmarks de rendu - et dans la plupart des cas, elles ne produiront pas de résultats notables. Étant donné que la sélection de lignes est une fonctionnalité plus courante que l'échange de lignes, je dirais que ce benchmark place Vue à la troisième place derrière Angular et React qui partagent la première position.

En ce qui concerne la mémoire et le temps de démarrage, React et Vue obtiennent de très bons résultats, mais Angular est un peu plus lent. Angular peut prendre 150 ms pour démarrer un script de base et nécessite plus de mémoire pour s'exécuter.

Perf Track : Angular vs React vs Vue

Perf Track de Google Chrome Labs affiche les données de production de milliers de sites Web. Ces statistiques sont affectées par de nombreuses autres choses et pas seulement par le cadre de choix, mais regardons les chiffres.

Première peinture contente

Les sites Web Vue et React se classent plus haut pour cette métrique par rapport à Angular, qui peut prendre plus de temps pour démarrer et présenter le contenu à l'utilisateur.

La plus grande peinture de contenu

Angular est également le plus lent des trois frameworks à rendre une page complète, avec seulement 27% des sites Web Angular obtenant un score dans la plage acceptable.

Premier délai d'entrée

Pour les trois cadres, plus de 80 % des sites Web se situent dans la plage acceptable pour le premier délai d'entrée, ce qui montre combien il faut jusqu'à ce que l'utilisateur puisse interagir avec la page.

Octets JavaScript

Les applications les plus légères sont de loin celles développées avec Vue, avec 68 % des applications Vue chargeant moins de 1 Mo de JavaScript. D'autre part, les applications Angular et React ont tendance à avoir une taille de code plus grande.

Comment utiliser ces mesures

Vous pouvez voir une tendance à partir de ces chiffres, mais vous ne devriez pas être trop rapide pour tirer des conclusions. Pour le dernier chiffre, par exemple, une explication pourrait être que Vue est utilisé pour développer des applications plus légères tandis qu'Angular est utilisé pour des projets plus importants.

Les statistiques peuvent vous aider à prendre une bonne décision, mais vous ne pouvez pas les utiliser pour prouver qu'un framework est plus rapide ou meilleur que l'autre.

Fonctionnalités avancées

Pour les applications plus avancées, le framework frontal utilisé doit être capable d'effectuer certaines tâches qui améliorent les performances et peuvent mieux évoluer.

Deux technologies essentielles sont le rendu côté serveur (SSR) et la virtualisation.

Réagir

React prend en charge le rendu côté serveur avec le package officiel ReactDOMServer. Pour la virtualisation, vous pouvez utiliser un outil tiers populaire appelé React Virtualized.

vue

Le rendu côté serveur est également pris en charge dans Vue avec le package SSR officiel. De plus, vous pouvez également utiliser le framework Nuxt.js qui est construit sur Vue et prend en charge SSR.

Les options de virtualisation de Vue ne sont malheureusement pas si puissantes. À mon avis, Vue Virtual Scroll List est la meilleure solution pour le défilement virtuel, mais c'est un peu bogué et pas aussi stable que les options pour React et Angular.

Angulaire

Angular a le package officiel Angular Universal pour SSR, et un composant officiel pour le défilement virtuel et le rendu efficace de grandes listes.

Courbe d'apprentissage

Est-il facile d'apprendre chacun de ces frameworks ?

Pour répondre à cette question, nous devons examiner la complexité de chaque cadre et les concepts qu'ils introduisent.

Réagir

Dans son cas d'utilisation le plus basique, React est le moins complexe des trois frameworks. En effet, il vous suffit d'importer la bibliothèque, puis vous pouvez commencer à écrire votre application React avec quelques lignes de code.

Mais à part l'exemple Hello World, la plupart des applications React sont basées sur des composants et ne se contentent pas de restituer quelques éléments sur la page.

Une chose que certains développeurs trouvent étrange ou difficile à propos de React, c'est le fait que l'apprentissage de JSX est une rue à sens unique. Vous pouvez également utiliser du JavaScript brut, mais comme la plupart des développeurs React utilisent JSX, l'apprendre est pratiquement inévitable.

C'est la principale chose qui peut rendre la courbe d'apprentissage de React un peu plus raide, mais à part cela, c'est une bibliothèque facile à apprendre pour les développeurs qui connaissent JavaScript et comprennent les concepts de développement Web.

vue

Vue est un peu plus complexe à mettre en place que React. Vous pouvez l'utiliser comme une bibliothèque pour définir des composants que vous pouvez utiliser dans votre HTML - mais similaire à React, ce n'est pas ainsi que la plupart des projets sont construits.

La plupart des projets Vue auront un composant racine nommé App.vue et un certain nombre de composants enfants pour afficher diverses choses.

En ce qui concerne la syntaxe, la seule chose nouvelle que vous devez apprendre est la syntaxe du modèle de Vue, qui est très facile à comprendre si vous connaissez le HTML. Les directives de base, telles que v-if et v-for pour le rendu conditionnel et le rendu de liste, sont faciles à comprendre même pour les débutants.

De plus, les composants à fichier unique de Vue conservent tout le code frontal au même endroit, ce qui facilite l'organisation de nouveaux projets.

Vue est le plus facile à apprendre, à mon avis, en raison de sa simplicité et de sa syntaxe intuitive.

Angulaire

Angular a la structure de projet la plus complexe des trois, et comme il s'agit d'un framework frontal complet, il s'appuie sur plus de concepts.

Outre les composants, Angular prend en charge les modules et les services. Il s'attend à ce que vous écriviez et conceviez votre base de code d'une manière spécifique qui rend votre projet plus maintenable lorsqu'il évolue.

En ce qui concerne la syntaxe, étant donné qu'Angular fonctionne mieux avec TypeScript, il est important que vous connaissiez TypeScript lors de la création d'un projet Angular.

Comme avec Vue, vous devez également vous familiariser avec la syntaxe de type HTML afin de pouvoir commencer à coder de nouvelles fonctionnalités d'interface utilisateur avec Angular.

À mon avis, Angular est le plus difficile à apprendre pour le développeur moyen car il est plus complexe et repose sur TypeScript.

Prédictions à venir

De nombreux projets et frameworks open source tombent dans l'oubli et ne sont plus maintenus. Devriez-vous vous inquiéter de l'un des frameworks dont nous discutons ici ?

Bien que nous ne puissions pas entièrement prédire ce qui se passera, les travaux de développement en cours sont un bon indicateur de la santé de ces projets. La popularité et la croissance sont également des mesures importantes pour prédire la longévité d'un projet, alors examinons chaque cadre.

Réagir

React v17.0 est sorti, mais étonnamment, il n'inclut aucune nouvelle fonctionnalité pour les développeurs.

Le changement majeur est que cette nouvelle version facilite la mise à niveau de React lui-même. Vous pouvez mettre à niveau uniquement certaines parties de React de l'ancienne version vers la plus récente, sans avoir à mettre à niveau l'ensemble du projet.

Si votre application s'appuie sur des fonctionnalités qui changent ou deviennent obsolètes avec la nouvelle version, vous pouvez conserver l'ancienne version pour maintenir cette fonctionnalité en vie. Cette mise à jour fait de React un excellent choix à long terme car elle permet de rester plus facilement à jour avec les nouvelles versions.

React a augmenté de 44% depuis l'année dernière dans les téléchargements hebdomadaires de npm. En chiffres absolus, c'est toujours le plus téléchargé des trois projets.

vue

Vue 3 est sorti en septembre 2020 et résout de nombreux problèmes graves que Vue 2 a dans les grands projets. Il introduit l'API de composition qui s'inspire de React Hooks et facilite la réutilisation de la logique entre les composants.

L'ensemble du projet a été réécrit en TypeScript, ce qui améliore la prise en charge de TypeScript dans les nouveaux projets Vue tout en rendant le projet plus maintenable.

Vue 3 est une mise à niveau indispensable et fait de Vue un meilleur choix pour les projets à grande échelle.

Les téléchargements hebdomadaires de Vue ont augmenté de 87% depuis l'année dernière, faisant de Vue le framework à la croissance la plus rapide en termes relatifs. Si Vue peut maintenir ce taux de croissance, il dépassera certainement bientôt Angular.

Angulaire

Angular a récemment présenté le compilateur Ivy. Il réduit les temps de construction, optimise les actifs, permet des tests plus rapides et améliore généralement l'expérience des développeurs.

L'équipe Angular publie plusieurs mises à jour majeures deux fois par an, qui peuvent inclure de nouvelles fonctionnalités ou simplement mettre à jour le framework avec de nouvelles versions de navigateur.

Angular a augmenté d'environ 50% en téléchargements hebdomadaires depuis l'année dernière, c'est donc toujours un projet populaire.

Conclusion

Angular, React et Vue sont tous en cours de développement très actif. Ils sortent régulièrement de nouvelles versions et maintiennent celles existantes. Comme le niveau de support actuel est élevé dans chaque cas, vous pouvez utiliser n'importe lequel de ces frameworks en toute sécurité.

Il est important de noter qu'Angular ne se développe pas aussi rapidement qu'avant, tandis que Vue - même s'il a commencé plus récemment - semble se développer beaucoup.

Comme indiqué précédemment, nous ne pouvons pas prédire quels frameworks resteront pertinents à long terme, mais chaque projet a une grande communauté derrière lui et est en constante évolution.

Mon objectif avec cet article était d'expliquer les différences architecturales, de décomposer les forces et les faiblesses de chaque framework et de les comparer partout où cela est applicable.

Avant de sauter dans un nouveau cadre, il y a quelques points à considérer.

Premièrement, l'expérience de votre équipe peut être un facteur décisif lors du choix d'une nouvelle technologie.

De même, vous devez tenir compte des talents disponibles dans votre région afin de pouvoir embaucher des développeurs pour votre projet.

Enfin, en ce qui concerne le projet lui-même, la complexité et la portée peuvent également affecter votre choix de framework.

En tenant compte de toutes les différences clés, j'espère que vous pourrez décider quel est le meilleur framework frontal pour vos objectifs et vos besoins.