Angular vs. React vs. Vue - Comparaison

Le choix d'un framework JavaScript pour votre application Web peut s'avérer fastidieux. Angular et React sont très populaires ces jours-ci, et il y a un démarreur qui a beaucoup de motricité ces derniers temps: VueJS. De plus, ce ne sont là que quelques-uns des nouveaux enfants sur le marché.

Javascripts en 2017 - les choses ne sont pas faciles ces jours-ci!

Alors, comment sommes-nous censés décider?

Avant de commencer - SPA ou pas?

Vous devez d’abord décider clairement si vous avez besoin d’une application à page unique (SPA) ou si vous préférez utiliser une approche de plusieurs pages.

Les entrées d'aujourd'hui: Angular, React et Vue

Premièrement, nous voudrions discuter du cycle de vie et des considérations stratégiques. Ensuite, nous passerons aux caractéristiques et concepts des trois frameworks javascript. Enfin, nous arriverons à une conclusion.

Voici les questions que nous allons aborder aujourd’hui:

  • Quelle est la maturité des frameworks / librairies?
  • Les cadres sont-ils susceptibles d'être présents pendant un certain temps?
  • Quelle est l'étendue et l'aide de leurs communautés correspondantes?
  • Est-il facile de trouver des développeurs pour chacun des frameworks?
  • Quels sont les concepts de base de la programmation des frameworks?
  • Est-il facile d'utiliser les cadres pour des applications petites ou grandes?
  • À quoi ressemble la courbe d'apprentissage pour chaque cadre?
  • Quel type de performance pouvez-vous attendre des frameworks?
  • Où pouvez-vous regarder de plus près sous le capot?
  • Comment pouvez-vous commencer à développer avec le framework choisi?

1. Cycle de vie et considérations stratégiques

1.1 Un peu d'histoire

Angular est un framework Javascript basé sur TypeScript. Développé et mis à jour par Google, il est décrit comme un «MVWFramework JavaScript super-héroïque». Angular (également «Angular 2+», «Angular 2» ou «ng2») est le successeur réécrit et le plus souvent incompatible avec AngularJS (également «Angular.js» ou «AngularJS 1.x»). Bien qu'AngularJS (l'ancien) ait été publié pour la première fois en octobre 2010, des corrections de bugs, etc., sont toujours en cours. la version 3 a été ignorée. Angular est utilisé par Google, Wix, weather.com, healthcare.gov et Forbes (selon madewithangular, stackshare et libscore.com).

React est décrit comme «une bibliothèque JavaScript pour la construction d'interfaces utilisateur». Initialement publié en mars 2013, React a été mis au point et est mis à jour par Facebook, qui utilise les composants de React sur plusieurs pages (mais pas en tant qu'application d'une seule page). Selon cet article de Chris Cordle, React est beaucoup plus utilisé sur Facebook que Angular sur Google. React est également utilisé par Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart et autres (selon Facebook, stackshare et libscore.com).

Facebook travaille sur la sortie de React Fibre. Cela va changer Réagissez sous le capot - le rendu est supposé être beaucoup plus rapide en conséquence - mais les choses seront rétro-compatibles après les modifications. Facebook a parlé des changements lors de la conférence des développeurs en avril 2017 et un article non officiel sur la nouvelle architecture a été publié. React Fibre est sorti avec React 16 en septembre 2017.

Vue est l'un des frameworks JS qui connaît la croissance la plus rapide en 2016. Vue se décrit comme un «MVVM intuitif, rapide et composite pour la construction d'interfaces interactives». Il a été lancé pour la première fois en février 2014 par Evan You, ex-employé de Google. a écrit un article de blog intéressant sur les activités de marketing et les chiffres de la première semaine à l’époque). C’est tout un succès, surtout que Vue est en train de gagner du terrain en tant que one-man show sans le soutien d’une grande entreprise. Evan a actuellement une équipe de douze développeurs principaux. En 2016, la version 2 a été publiée. Vue est utilisé par Alibaba, Baidu, Expedia, Nintendo, GitLab - une liste des plus petits projets est disponible sur madewithvuejs.com.

Les trois cadres sont disponibles sous licence MIT.

React a envoyé un fichier de licence BSD3 spécial jusqu'en septembre 2017. Le dossier de brevet a fait l'objet de nombreuses discussions. Si vous êtes intéressé par l'historique de ceci, vous pouvez lire cette discussion sur le problème Github, les raisons et l'historique du dossier de brevet (par l'ingénieur de Facebook, James Ide), Pourquoi ne pas avoir peur (par Dennis Walsh), le mise en garde contre l'utilisation pour les startups (par Raúl Kripalani) et une déclaration antérieure de Facebook sur ce sujet: Expliquer la licence de React. Quoi qu'il en soit, tout ne devrait plus avoir d'importance puisque Facebook a finalement annoncé que React obtiendrait la licence MIT.

1.2 Développement de base

Comme indiqué précédemment, Angular et React sont pris en charge et utilisés par les grandes entreprises. Facebook, Instagram et Whatsapp l'utilisent pour leurs pages. Google l'utilise dans de nombreux projets: par exemple, la nouvelle interface utilisateur Adwords a été mise en œuvre avec Angular & Dart. Encore une fois, Vue est réalisé par un groupe de personnes dont le travail est soutenu par Patreon et d’autres moyens de parrainage. Vous pouvez décider vous-même si cela est positif ou négatif. Matthias Götzke pense que la petite équipe de Vue est un avantage, car elle conduit à un code / API plus propre et moins sophistiqué.

Voyons quelques statistiques: Angular répertorie 36 personnes sur leur page d’équipe, Vue en répertorie 16 et React n’a pas de page d’équipe. Sur Github, Angular a> 25 000 étoiles et 463 contributeurs, React a> 70 000 étoiles et> 1 000 contributeurs, et Vue compte près de 60 000 étoiles et seulement 120 contributeurs. Vous pouvez également consulter l'historique des étoiles Github pour Angular, React et Vue. Encore une fois, Vue semble avoir une très bonne tendance. Selon bestof.js, Angular 2 reçoit en moyenne 31 étoiles par jour, React 74 étoiles et Vue.JS 107 étoiles.

Historique des étoiles Github pour Angular, React & Vue (Source)

Mise à jour: Merci à Paul Henschel pour avoir souligné les tendances de npm. Ils indiquent le nombre de téléchargements pour les packages npm donnés et sont encore plus utiles en tant que regard pur sur les étoiles de Github:

Les numéros de téléchargement npm des packages npm donnés au cours des 2 dernières années.

1.3 Cycle de vie du marché

Il est difficile de comparer Angular, React et Vue dans Google Trends en raison des différents noms et versions. Une façon d'approximer pourrait être la recherche dans la catégorie «Internet et technologies». Voici le résultat:

Tant pis. Vue n'a pas été créé avant 2014 - il y a donc quelque chose qui cloche ici. La Vue est le français pour «voir», «vue» ou «opinion». Peut-être que c'est ça. Une comparaison de «VueJS» et «Angular» ou «React» n’est pas juste non plus, VueJS n’ayant pratiquement aucun résultat par rapport aux autres.

Essayons autre chose, alors. Le radar technologique de ThoughtWorks donne une bonne idée de l’évolution des technologies dans le temps. Redux est en phase d’adoption (à adopter dans les projets!) Et a été inestimable dans un certain nombre de projets ThoughtWorks. Vue.js est en phase d’essai (essayez-le!). Il est décrit comme une alternative légère et flexible à Angular avec une courbe d’apprentissage plus basse. Angular 2 est en phase d’évaluation - il est utilisé avec succès par les équipes de ThoughtWork, mais n’est pas encore une recommandation forte.

Selon le dernier sondage Stackoverflow 2017, 67% des développeurs interrogés apprécient React et 52% AngularJS. «Aucun intérêt à poursuivre le développement» enregistre des nombres plus élevés pour AngularJS (48%) par rapport à React (33%). Vue n'est pas dans le Top 10 dans les deux cas. Ensuite, il y a le sondage statejs.com comparant les «frameworks front-end». Les faits les plus intéressants: React et Angular ont une connaissance à 100% et Vue est inconnu de 23% des personnes interrogées. En ce qui concerne la satisfaction, React a obtenu 92% des réponses «utilisera à nouveau», Vue 89% et Angular 2 seulement 65%.

Qu'en est-il d'un autre sondage sur la satisfaction de la clientèle? Eric Elliott en a démarré un en octobre 2016 pour évaluer Angular 2 et React. Seuls 38% des personnes interrogées utiliseraient à nouveau Angular 2, tandis que 84% utiliseraient à nouveau React.

1.4 Assistance à long terme et migrations

Les API React sont assez stables, comme le stipule Facebook dans ses principes de conception. Il existe également des scripts pour vous aider à passer de votre API actuelle à une nouvelle: consultez react-codemod. Les migrations sont assez faciles et il n’existe pas de nécessité en tant que version à long terme. Dans cet article de Reddit, les utilisateurs remarquent que les mises à niveau n'ont jamais vraiment posé problème. L'équipe de React a écrit un article de blog sur leur système de gestion de versions. Lorsqu'ils ajoutent un avertissement de désapprobation, ils le conservent pour le reste de la version actuelle avant que le comportement ne soit modifié dans la version majeure suivante. Aucune modification majeure n'est prévue pour une nouvelle version majeure: v14 est sortie en octobre 2015, v15 en avril 2016 et v16 n'a pas encore de date de sortie. La mise à niveau ne devrait pas être un problème, comme l'a récemment noté un développeur principal de React.

En ce qui concerne Angular, il existe un article de blog sur le versioning et releasingAngular commençant par la version v2. Il y aura une mise à jour majeure tous les six mois et une période de dépréciation d'au moins six mois (deux versions majeures). Certaines API expérimentales marquées dans la documentation avec des périodes de dépréciation plus courtes. Il n'y a pas encore d'annonce officielle, mais selon cet article, l'équipe Angular a annoncé des versions de support à long terme commençant par Angular 4. Celles-ci seront prises en charge pendant au moins un an après la prochaine version majeure. Cela signifie que Angular 4 sera supporté au moins jusqu'en septembre 2018 avec des corrections de bugs et des correctifs importants. Dans la plupart des cas, mettre à jour Angular de v2 à v4 est aussi simple que de mettre à jour les dépendances angulaires. Angular propose également un guide contenant des informations indiquant si des modifications supplémentaires sont nécessaires.

Le processus de mise à jour de Vue 1.x à 2.0 devrait être simple pour une petite application. L'équipe de développeurs a affirmé que 90% des API restaient les mêmes. Il existe un bel outil d'aide à la migration de mise à niveau-diagnostic qui fonctionne sur la console. Un développeur a noté que la mise à jour de v1 à v2 n'était toujours pas amusante dans une grosse application. Malheureusement, il n'y a pas de feuille de route claire (publique) sur la prochaine version majeure ni d'informations sur les plans pour les versions LTS.

Une dernière chose: Angular est un framework complet qui offre beaucoup de choses regroupées. React est plus flexible que Angular et vous utiliserez probablement davantage de bibliothèques indépendantes, instables et instables. Cela signifie que vous devez vous charger vous-même des mises à jour et des migrations correspondantes. Cela pourrait également être préjudiciable si certains paquets ne sont plus mis à jour ou si un autre paquet devient la norme de facto à un moment donné.

1.5 Ressources humaines et recrutement

Si vous avez des développeurs HTML internes qui ne veulent pas apprendre plus de Javascript, vous feriez mieux de choisir Angular ou Vue. Réagir implique plus de Javascript (nous en parlerons plus tard).

Avez-vous des concepteurs travaillant à proximité du code? L'utilisateur «pier25» note sur Reddit que React est logique si vous travaillez pour Facebook, où tout le monde est un développeur de super-héros. Dans la réalité, vous ne trouverez pas toujours de concepteur capable de modifier JSX. Il sera donc beaucoup plus facile de travailler avec des modèles HTML.

La bonne chose à propos du framework Angular est qu’un nouveau développeur Angular 2 d’une autre société se familiarisera rapidement avec toutes les conventions requises. Les projets React sont chacun différents en termes de décisions architecturales, et les développeurs doivent se familiariser avec la configuration de projet particulière.

Angular est également utile si vous avez des développeurs avec un fond orienté objet ou qui n’aiment pas le langage Javascript. Pour revenir sur ce point, voici une citation de Mahesh Chand:

Je ne suis pas un développeur JavaScript. Mon expérience est la construction de systèmes d'entreprise à grande échelle utilisant de «véritables» plateformes logicielles. J'ai commencé en 1997 à créer des applications à l'aide de C, C ++, Pascal, Ada et Fortran. (…) Je peux clairement dire que JavaScript est un charabia pour moi. Étant un MVP Microsoft et un expert, j'ai une bonne compréhension de TypeScript. Je ne vois pas non plus Facebook comme une entreprise de développement de logiciels. Cependant, Google et Microsoft sont déjà les plus grands innovateurs en logiciels. Je me sens plus à l'aise avec un produit fortement soutenu par Google et Microsoft. Aussi (…) avec mon expérience, je sais que Microsoft a des projets encore plus ambitieux pour TypeScript.

Eh bien, alors… je devrais probablement mentionner que Mahesh est directeur régional chez Microsoft.

2. Comparaison de React, Angular & Vue

2.1 Composants

Les cadres en question sont tous basés sur des composants. Un composant obtient une entrée et, après un comportement / informatique interne, il renvoie un modèle d'interface utilisateur rendu (une zone de connexion / déconnexion ou un élément de la liste des tâches à effectuer) en sortie. Les composants définis doivent être faciles à réutiliser sur la page Web ou dans d’autres composants. Par exemple, vous pouvez avoir un composant de grille (composé d'un composant d'en-tête et de plusieurs composants de ligne) avec différentes propriétés (colonnes, informations d'en-tête, lignes de données, etc.) et pouvoir réutiliser le composant avec différents ensembles de données sur une autre page. Voici un article complet sur les composants, au cas où vous souhaiteriez en savoir plus à ce sujet.

React et Vue excellent tous les deux pour la gestion des composants stupides: de petites fonctions sans état qui reçoivent des éléments d'entrée et de retour en sortie.

2.2 Typescript vs ES6 vs ES5

React se concentre sur l'utilisation de Javascript ES6. Vue utilise Javascript ES5 ou ES6.

Angular repose sur TypeScript. Cela offre plus de cohérence dans les exemples associés et les projets open source (des exemples de React sont disponibles dans ES5 ou ES6). Cela introduit également des concepts tels que les décorateurs et les types statiques. Les types statiques sont utiles pour les outils d’intelligence de code, tels que le refactoring automatique, le saut aux définitions, etc. - ils sont également supposés réduire le nombre de bogues dans une application. Même s’il n’ya certainement pas de consensus à ce sujet. Eric Elliott n'est pas d'accord dans son article «Le secret choquant sur les types statiques». Daniel C Wang affirme que le coût d’utilisation des types statiques ne nuit pas et qu’il est bon d’avoir à la fois un développement piloté par les tests et un typage statique.

Vous devez également probablement savoir que vous pouvez utiliser Flow pour activer la vérification de type dans React. C’est un vérificateur de type statique développé par Facebook pour JavaScript. Flow peut également être intégré à VueJS.

Si vous écrivez votre code dans TypeScript, vous n'écrivez plus du code JavaScript standard. Malgré sa croissance, TypeScript a toujours une base d'utilisateurs très réduite comparée à celle de l'ensemble du langage JavaScript. L’un des risques pourrait être que vous vous dirigiez dans la mauvaise direction, car TypeScript pourrait - même si cela est peu probable - disparaître également avec le temps. En outre, TypeScript ajoute beaucoup de temps (d’apprentissage) aux projets - vous pouvez en savoir plus à ce sujet dans la comparaison Angular 2 vs. React réalisée par Eric Elliott.

2.3 Modèles - JSX ou HTML

Réagissez en respectant les meilleures pratiques de longue date. Pendant des décennies, les développeurs ont essayé de séparer les modèles d'interface utilisateur et la logique Javascript intégrée, mais avec JSX, ceux-ci sont à nouveau mélangés. Cela peut paraître terrible, mais vous devriez écouter le discours de Peter Hunt «Réagissez: repenser les meilleures pratiques» (d’octobre 2013). Il souligne que la séparation des modèles et de la logique est simplement une séparation des technologies et non des préoccupations. Vous devez créer des composants plutôt que des modèles. Les composants sont réutilisables, composables et testables à l'unité.

JSX est un préprocesseur facultatif pour la syntaxe HTML, qui sera compilé ultérieurement en Javascript. Il a quelques particularités - par exemple, vous devez utiliser className à la place de class, car ce dernier est un nom protégé en Javascript. JSX est un gros avantage pour le développement, car vous avez tout en un, et que la complétion de code et les contrôles au moment de la compilation fonctionnent mieux. Lorsque vous faites une typo dans JSX, React n’est pas compilé et le numéro de la ligne où la typo s’est produite apparaît. Angular 2 échoue silencieusement au moment de l'exécution (cet argument est probablement invalide si vous utilisez AOT avec Angular).

JSX implique que tout dans React soit en Javascript - il est utilisé à la fois pour les modèles JSX et pour la logique. Cory House le souligne dans son article de janvier 2016: «Angular 2 continue de mettre‘ JS ’en HTML. React met «HTML» dans JS. ”. C'est une bonne chose, car le Javascript est plus puissant que le HTML.

Les modèles angulaires sont enrichis en HTML avec un langage angulaire spécial (comme ngIf ou ngFor). Tandis que React nécessite la connaissance de JavaScript, Angular vous oblige à apprendre la syntaxe spécifique à Angular.

Vue propose des «composants mono-fichier». Cela semble être un compromis en ce qui concerne la séparation des préoccupations - les modèles, les scripts et les styles sont dans un fichier mais dans trois sections différentes et ordonnées. Cela signifie que vous obtenez la coloration syntaxique, le support CSS et une utilisation plus facile des pré-processeurs tels que Jade ou SCSS. J'ai lu dans d'autres articles que JSX est plus facile à déboguer car Vue ne montrera pas les erreurs de syntaxe HTML. Ce n'est pas vrai car Vue convertit le HTML en fonctions de rendu - les erreurs sont donc affichées sans problème (Merci à Vinicius Reis pour les commentaires et la correction!).

Note latérale: Si vous aimez l’idée de JSX et que vous souhaitez l’utiliser dans Vue, vous pouvez utiliser babel-plugin-transform-vue-jsx.

2.4 Framework vs bibliothèque

Angular est un cadre plutôt qu'une bibliothèque, car il fournit des opinions bien arrêtées sur la structure de votre application et offre davantage de fonctionnalités prêtes à l'emploi. Angular est une «solution complète» - batteries incluses et prêtes à vous fournir un départ agréable. Vous n'avez pas besoin d'analyser les bibliothèques, les solutions de routage ou autres, vous pouvez simplement commencer à travailler.

React et Vue, en revanche, sont universellement flexibles. Leurs bibliothèques peuvent être associées à tout type de paquetages (React on npm en contient beaucoup, mais Vue a moins de paquets parce qu’il est encore assez jeune). Avec React, vous pouvez même échanger la bibliothèque elle-même contre des alternatives compatibles avec les API, comme Inferno. Cependant, une grande flexibilité implique une grande responsabilité: il n'y a pas de règles et des conseils limités avec React. Chaque projet nécessite une décision concernant son architecture et les choses peuvent mal se passer plus facilement.

Angular, d’autre part, est livré avec un nid déroutant d’outils de construction, de passe-partout, de linters et de temps d’attente. Ceci est également vrai pour React si des kits de démarrage ou des passe-partout sont utilisés. Ils sont naturellement très utiles, mais React fonctionne immédiatement et c’est probablement ainsi que vous devriez l’apprendre. Parfois, la variété d'outils nécessaires pour travailler dans un environnement Javascript est appelée «fatigue Javascript». Il y a un article à ce sujet par Eric Clemmons, qui a ceci à dire:

Il existe encore de nombreux outils installés, auxquels vous n’êtes pas habitué, lorsque vous démarrez avec le cadre. Celles-ci sont générées mais beaucoup de développeurs ne comprennent probablement pas ce qui se passe sous le capot - ou cela leur prend beaucoup de temps.

Vue semble être le plus propre et le plus léger des trois cadres. GitLab a publié sur son blog un article sur sa décision concernant Vue.js (octobre 2016):

Vue.js est livré avec un équilibre parfait entre ce qu'il va faire pour vous et ce que vous devez faire vous-même. (…) Vue.js est toujours à portée de main, un filet de sécurité solide mais flexible prêt à vous aider à garder votre programmation efficace et vos souffrances infligées par les DOM au minimum.

Ils aiment la simplicité et la facilité d’utilisation - le code source est très lisible et aucune documentation ni bibliothèque externe n’est nécessaire. Tout est très simple. Vue.js "ne fait pas de grandes hypothèses sur la plupart des choses non plus". Il existe également un podcast sur la décision de GitLab.

Un autre article de blog sur le passage à Vue provient de Pixeljets. React “a été un grand pas en avant pour le monde JS en termes de prise de conscience de l’état, et il a montré à de nombreuses personnes la véritable programmation fonctionnelle de manière efficace et pratique”. Un des gros inconvénients de React vs. Vue est le problème de la division des composants en composants plus petits en raison des restrictions JSX. Voici une citation de l'article:

Pour moi et mon équipe, la lisibilité du code est importante, mais il est toujours très important que l'écriture de code soit amusante. Ce n'est pas drôle de créer 6 composants lorsque vous implémentez un widget de calculatrice très simple. Dans de nombreux cas, il est également mauvais en termes de maintenance, de modifications ou d’application de refonte visuelle à un widget, car vous devez parcourir plusieurs fichiers / fonctions et vérifier chaque petit morceau de HTML séparément. Encore une fois, je ne suggère pas d'écrire des monolithes - je suggère d'utiliser des composants plutôt que des microcomposants pour le développement quotidien.

Il y a des discussions intéressantes à propos du billet de blog sur Hacker News et Reddit - il y a des arguments de dissidents et d'autres partisans de Vue.

2.5 Gestion des états et liaison des données

Construire des interfaces utilisateur est difficile, car il y a des états partout - les données changent au fil du temps, cela entraîne de la complexité. Les workflows d'état définis sont d'une grande aide lorsque les applications se développent et deviennent plus complexes. Pour des applications limitées, ceci est probablement excessif et quelque chose comme Vanilla JS serait suffisant.

Comment ça marche? Les composants décrivent l'interface utilisateur à tout moment. Lorsque les données changent, la structure rend à nouveau le composant d'interface utilisateur dans son intégralité - les données affichées sont toujours à jour. Nous pouvons appeler ce concept «l'interface utilisateur en tant que fonction».

React fonctionne souvent avec Redux. Redux se décrit en trois principes fondamentaux:

  • Source unique de vérité
  • State est en lecture seule
  • Les changements sont faits avec des fonctions pures

En d'autres termes: le statut de l'application complète est stocké dans une arborescence d'objets au sein d'un magasin unique. Cela facilite le débogage de l'application et certaines fonctionnalités sont plus faciles à implémenter. L'état est en lecture seule et ne peut être modifié que par le biais d'actions permettant d'éviter les situations de concurrence (cela facilite également le débogage). Les réducteurs sont écrits pour spécifier comment les états peuvent être transformés par des actions.

Redux est déjà intégré dans la plupart des tutoriels et des bases de données standard, mais vous pouvez utiliser React sans ce dernier (vous n'avez peut-être même pas besoin de Redux dans votre projet). Redux introduit de la complexité et des contraintes assez fortes dans votre code. Si vous apprenez à réagir, vous devriez penser à l’acquisition de connaissances simples avant de vous rendre à Redux. Vous devriez absolument lire «Vous n’avez peut-être pas besoin de Redux» de Dan Abramov.

Certains développeurs suggèrent d'utiliser Mobx au lieu de Redux. Vous pouvez penser à cela comme à un «Redux automatique», ce qui rend les choses beaucoup plus faciles à utiliser et à comprendre dès le départ. Si vous voulez jeter un coup d'œil, commencez par l'introduction. Vous pouvez également lire cette comparaison utile entre Redux et MobX de Robin. Le même auteur propose également des informations sur le passage de Redux à MobX. Cette liste est utile si vous souhaitez vérifier d'autres bibliothèques Flux. Et si vous venez d’un monde MVC, vous voudrez peut-être lire l’article de Mikhail Levkovsky intitulé «Penser en Redux (quand tout ce que vous savez est MVC)».

Vue peut utiliser Redux - mais Vuex est sa propre solution.

Une grande différence entre React et Angular réside dans la liaison unidirectionnelle par rapport à une liaison bidirectionnelle. La liaison bidirectionnelle d’Angular modifie l’état du modèle lorsque l’élément de l’interface utilisateur (par exemple une entrée utilisateur) est mis à jour. Réagir ne va que dans un sens: il met à jour le modèle en premier, puis il restitue l'élément d'interface utilisateur. La méthode Angular est plus propre dans le code et plus facile à implémenter par le développeur. La manière dont React permet d’obtenir une meilleure vue d’ensemble des données, car celles-ci ne circulent que dans un sens (cela facilite le débogage).

Les deux concepts ont leurs avantages et leurs inconvénients. Vous devez comprendre les concepts et déterminer si cela influence votre décision-cadre. L'article «Liaison de données bidirectionnelle: Angular 2 et React» et cette question de Stackoverflow offrent une bonne explication. Vous trouverez ici des exemples de codes interactifs (âgés de 3 ans, pour Angular 1 & React uniquement). Dernier point mais non le moindre, Vue prend en charge la liaison unidirectionnelle et la liaison bidirectionnelle (unidirectionnel par défaut).

Il existe un long article sur les différents types d'états et sur la gestion des états dans les applications Angular (par Victor Savkin) si vous souhaitez en savoir plus.

2.6 Autres concepts de programmation

Angular inclut l'injection de dépendance, un modèle dans lequel un objet fournit les dépendances (un service) à un autre objet (un client). Cela conduit à plus de flexibilité et à un code plus propre. L'article «Comprendre l'injection de dépendance» explique ce concept plus en détail.

Le modèle modèle-vue-contrôleur (MVC) divise un projet en trois composants: modèle, vue et contrôleur. Angular en tant que MVC-framework a MVC prêt à l'emploi. Réagissez uniquement avec le V - vous devez résoudre vous-même les problèmes M et C.

2.7 Flexibilité et réduction de la taille des microservices

Vous pouvez travailler avec React ou Vue en ajoutant simplement la bibliothèque Javascript au code source. Cela n’est pas possible avec Angular en raison de son utilisation de TypeScript.

Nous nous orientons maintenant davantage vers les microservices et les microapps. React et Vue vous donnent plus de contrôle pour dimensionner une application en sélectionnant uniquement les éléments réellement nécessaires. Ils offrent plus de flexibilité pour passer d'un SPA à un microservice utilisant des éléments d'une application antérieure. La fonction angulaire fonctionne mieux pour SPA, car elle est probablement trop gonflée pour pouvoir être utilisée pour les microservices.

Comme le note Cory House:

JavaScript se déplace rapidement et React vous permet d'échanger de petites parties de votre application contre de meilleures bibliothèques au lieu d'attendre en espérant que votre infrastructure innove. La philosophie des petits outils composables à usage unique ne se démode jamais.

Certaines personnes utilisent également React pour les sites Web non-SPA (par exemple, pour les formulaires complexes ou les assistants). Même Facebook utilise React - pas pour la page principale, mais plutôt pour des pages et des fonctionnalités spécifiques.

2.8 Taille et performance

Il y a un revers à toutes les fonctionnalités: le framework Angular est assez bouffi. La taille du fichier compressé est de 143k, contre 23K pour Vue et 43k pour React.

React et Vue possèdent tous deux un DOM virtuel, censé améliorer les performances. Si cela vous intéresse, vous pouvez en apprendre davantage sur les différences entre Virtual DOM et DOM, ainsi que sur les avantages réels de Virtual DOM dans react.js. En outre, l'un des auteurs du Virtual-DOM lui-même répond à une question sur les performances concernant Stackoverflow.

Pour vérifier les performances, j’ai jeté un coup d’œil au superbe js-framework-benchmark. Vous pouvez le télécharger et l'exécuter vous-même ou consulter le tableau de résultats interactif. Avant de vérifier les résultats, vous devez savoir que les frameworks trichent sur des points de repère - un tel contrôle de performance ne devrait pas être utilisé pour prendre des décisions.

La performance de Angular, React et VueAllocation de mémoire en Mo

Pour résumer: Vue offre d'excellentes performances et la plus grande allocation de mémoire, mais tous ces frameworks sont vraiment très proches les uns des autres par rapport aux frameworks particulièrement lents ou rapides (comme Inferno). Encore une fois: les critères de performance ne doivent être considérés que comme une note d'accompagnement, pas comme un verdict.

2.9 Test

Facebook utilise Jest pour tester son code React. Voici une comparaison entre Jest et Mocha - et un article explique comment utiliser Enzyme with Mocha. Enzyme est un utilitaire de test de JavaScript utilisé par Airbnb (conjointement avec Jest, Karma et d’autres coureurs de test). Si vous voulez en savoir plus, certains articles plus anciens sur les tests dans React (ici et ici).

Il existe également Jasmine en tant que cadre de test dans Angular 2. Un article d’Eric Elliott dit: Jasmine "donne des millions de façons d’écrire des tests et des assertions, nécessitant de les lire attentivement pour comprendre ce qu’elles font". La sortie est également très gonflée et laborieuse à lire. Il existe quelques articles informatifs sur l'intégration de Angular 2 avec Karma et Mocha. Voici une vieille vidéo (de 2015) sur les stratégies de test avec Angular 2.

Vue manque de conseils en matière de tests, mais Evan a écrit dans son aperçu de 2017 que l'équipe prévoyait de travailler sur cela. Ils recommandent d'utiliser Karma. Vue fonctionne avec Jest et avoriaz sert également d’utilitaire de test.

2.10 Applications universelles et natives

Les applications universelles introduisent des applications sur le Web, sur le bureau et dans le monde des applications natives.

React et Angular prennent en charge le développement natif. Angular est doté de NativeScript (supporté par Telerik) pour les applications natives et de Ionic Framework pour les applications hybrides. Avec React, vous pouvez consulter réactif natif-réactif pour créer des applications iOS et Android multi-plateformes, ou réactif natif pour des applications natives. De nombreuses applications (y compris Facebook; consultez le Showcase pour en savoir plus) sont conçues avec react-native.

Les frameworks Javascript rendent les pages sur le client. Cela nuit aux performances perçues, à l'expérience globale de l'utilisateur et au référencement. Le pré-rendu côté serveur est un plus. Les trois cadres ont des bibliothèques pour trouver de l'aide avec ça. Pour React, il y a next.js, Vue a nuxt.js et Angular a… .Angular Universal.

2.11 courbe d'apprentissage

Il y a certainement une courbe d'apprentissage abrupte pour Angular. Il contient une documentation complète, mais vous pouvez parfois vous sentir frustré parce que les choses sont plus difficiles qu'elles ne le paraissent. Même si vous avez une compréhension approfondie de Javascript, vous devez savoir ce qui se passe dans le cadre du framework. La configuration est magique au début et offre de nombreux packages et codes inclus. Cela peut être considéré comme négatif, car vous devez apprendre au fil du temps un grand écosystème préexistant. Par contre, cela pourrait être bon dans une situation donnée car beaucoup de décisions ont déjà été prises. Avec React, vous devrez probablement prendre de nombreuses décisions concernant les bibliothèques tierces. Il existe 16 paquets de flux différents pour la gestion des états parmi React seul.

La vue est assez facile à apprendre. Les entreprises passent à Vue, car cela semble beaucoup plus simple pour les développeurs débutants. Ici, vous pouvez lire à propos de quelqu'un décrivant le passage de son équipe d'angular à vue. Selon un autre utilisateur, l’application React de sa société était si complexe qu’un nouveau développeur ne pouvait pas suivre le code. Avec Vue, l’écart entre les développeurs débutants et expérimentés se réduit, et ils peuvent collaborer plus facilement et avec moins de bugs, de problèmes et de temps pour se développer.

Certaines personnes prétendent que les choses qu'ils ont faites dans React auraient été mieux écrites dans Vue. Si vous êtes un développeur Javascript inexpérimenté - ou si vous avez principalement travaillé avec jQuery au cours de la dernière décennie - vous devriez envisager d'utiliser Vue. Le changement de paradigme est plus prononcé lorsque vous passez à React. Vue ressemble davantage à du Javascript simple, tout en introduisant de nouvelles idées: des composants, un modèle piloté par les événements et un flux de données à sens unique. Il a également une petite empreinte.

Pendant ce temps, Angular et React ont leur propre façon de faire les choses. Ils peuvent vous gêner, car vous devez adapter vos pratiques pour que les choses fonctionnent correctement. Cela peut être préjudiciable parce que vous êtes moins flexible et que la courbe d'apprentissage est plus abrupte. Cela pourrait également être un avantage, car vous êtes obligé d'apprendre les bons concepts tout en apprenant la technologie. Avec Vue, vous pouvez faire les choses à l'ancienne, selon le mode Javascript. Cela peut être plus facile au début, mais pourrait devenir un problème à long terme si les choses ne se font pas correctement.

En ce qui concerne le débogage, c’est un avantage supplémentaire que React et Vue aient moins de magie. La recherche de bogues est plus facile car il y a moins d’endroits à regarder et les traces de pile distinguent mieux leur code que celui des bibliothèques. Les personnes travaillant avec React indiquent qu'elles ne doivent jamais lire le code source de la bibliothèque. Cependant, lors du débogage de votre application Angular, vous devez souvent déboguer les éléments internes de Angular pour comprendre le modèle sous-jacent. Du côté positif, les messages d'erreur sont supposés être plus clairs et plus instructifs, à commencer par Angular 4.

2.12 Angular, React et Vue sous le capot

Voulez-vous vérifier le code source vous-même? Voulez-vous voir comment les choses se sentent?

Vous voudrez probablement consulter d’abord les dépôts Github: React (github.com/facebook/react), Angular (github.com/angular/angular) et Vue (github.com/vuejs/vue).

Comment se présente la syntaxe? ValueCoders compare la syntaxe pour Angular, React et Vue.

Il est également bon de voir les choses en production - en conjonction avec le code source sous-jacent. TodoMVC répertorie des dizaines de la même application Todo, écrite avec différents frameworks Javascript - vous pouvez comparer les solutions Angular, Reactand Vue. RealWorld crée une application du monde réel (un clone Medium) et propose des solutions pour Angular (4+) et React (avec Redux). Vue est un travail en cours.

Vous pouvez également consulter certaines applications du monde réel. Voici des solutions pour React:

  • Do (une belle application de gestion de notes du monde réel construite avec React & Redux)
  • sound-redux (un client Soundcloud construit avec React & Redux)
  • Brainfock (une solution de gestion de projet et d'équipe construite avec React)
  • react-hn & react-news (clones d'actualités Hacker)
  • react-native-whatsapp-ui + un didacticiel (clone Whatsapp avec react-native)
  • phoenix-trello (clone de Trello)
  • slack-clone + un autre tutoriel (Slack clones)

Il y a quelques applications pour Angular:

  • angular2-hn & hn-ng2 (Clones de Hacker News + un beau tutoriel sur la création d'un autre par Ashwin Sureshkumar)
  • Redux-and-angular-2 (un clone de Twitter)

Il y a aussi des solutions pour Vue:

  • vue-hackernews-2.0 & Loopa news (clones de Hacker News)
  • vue-soundcloud (une démo de Soundcloud)

Conclusion

Décider d'un cadre maintenant

React, Angular et Vue sont tous assez sympas et aucun d’entre eux ne se démarque clairement des autres. Faites confiance à votre instinct. Ce dernier brin de cynisme divertissant pourrait vous aider dans votre décision:

Le sale petit secret, c’est que la plupart des «développements JavaScript modernes» n’ont rien à voir avec la construction de sites Web - c’est la création de packages pouvant être utilisés par ceux qui construisent des bibliothèques qui peuvent être utilisés par ceux qui construisent des cadres peut enseigner. Je ne suis pas sûr que quelqu'un construise réellement quelque chose pour que les utilisateurs réels puissent interagir.

C'est une exagération, bien sûr, mais il y a probablement un grain de vérité. Oui, l'écosystème Javascript est très animé. Vous trouverez probablement beaucoup d’autres alternatives attrayantes lors de votre recherche - essayez de ne pas vous laisser aveugler par le cadre le plus récent et le plus brillant.

Que devrais-je choisir?

Si vous travaillez chez Google: Angular

Si vous aimez TypeScript: Angular (ou React)

Si vous aimez la programmation orientée objet (POO): angulaire

Si vous avez besoin de conseils, d'une structure et d'un coup de main: Angulaire

Si vous travaillez chez Facebook: React

Si vous aimez la flexibilité: Réagissez

Si vous aimez les grands écosystèmes: Réagissez

Si vous aimez choisir parmi des dizaines de packages: React

Si vous aimez JS et l’approche «tout-est-Javascript»: Réagissez

Si vous aimez le code vraiment propre: Vue

Si vous voulez la courbe d'apprentissage la plus facile: Vue

Si vous voulez le framework le plus léger: Vue

Si vous souhaitez séparer les problèmes dans un seul fichier: Vue

Si vous travaillez seul ou avez une petite équipe: Vue (ou React)

Si votre application a tendance à devenir très volumineuse: angulaire (ou réactif)

Si vous voulez créer une application avec react-native: React

Si vous voulez avoir beaucoup de développeurs dans le pool: Angular ou React

Si vous travaillez avec des concepteurs et avez besoin de fichiers HTML propres: Angular ou Vue

Si vous aimez Vue mais avez peur de l'écosystème limité: Réagissez

Si vous ne pouvez pas décider, commencez par apprendre React, puis Vue, puis Angular.

https://pixxel.ml/angularjs-vs-reactjs-vs-vuejs-comparison/