Angular vs React vs Vue: quel cadre choisir en 2020

Angular vs React vs Vue: quel cadre choisir en 2020

Angular vs React vs Vue: quel cadre choisir en 2020
СОДЕРЖАНИЕ
02 августа 2020

Cet article est un guide complet sur lequel est peut-être la bonne solution pour vous: Angulaire vs React vs Vue.


Il y a quelques années à peine, les développeurs se demandaient principalement s’ils devaient utiliser Angular vs React pour leurs projets. Mais au cours des deux dernières années, nous avons constaté une augmentation de l’intérêt pour un troisième acteur appelé Vue.js.

Si vous êtes un développeur débutant sur un projet et que vous ne pouvez pas décider du framework JavaScript à utiliser, ce guide devrait vous aider à prendre une décision.

Nous couvrons divers aspects d’Angular, Vue et React pour voir comment ils répondent à vos besoins. Ce message n’est pas seulement un guide sur Angular vs React vs Vue, mais vise à fournir une structure pour aider à juger les cadres JavaScript frontaux en général. Dans le cas où un nouveau cadre arriverait l’année prochaine, vous saurez exactement quels paramètres regarder!

* Dans cet article, nous supposons que vous avez une connaissance de base de JavaScript et que vous avez également utilisé des frameworks JavaScript.

Angulaire vs React vs Vue

Commençons:

Partie 1: Une brève histoire de Vue vs React vs Angular

Avant d’entrer dans les détails techniques, parlons d’abord de l’histoire derrière ces frameworks – juste pour mieux apprécier leur philosophie et leur évolution dans le temps.

Comment tout a commencé 🐣

logo angulaire

Angulaire, développé par Google, a été publié pour la première fois en 2010, ce qui en fait le plus ancien du lot. Il s’agit d’un framework JavaScript basé sur TypeScript. Un changement substantiel s’est produit en 2016 avec la sortie d’Angular 2 (et l’abandon du “JS” du nom d’origine – AngularJS). Angular 2+ est connu comme juste angulaire. Bien que AngularJS (version 1) reçoive toujours des mises à jour, nous concentrerons la discussion sur Angular. La dernière version stable est Angular 9, sortie en février 2020.

logo vue

Vue, également connu sous le nom de Vue.js, est le plus jeune membre du groupe. Il a été développé par l’ancien employé de Google, Evan You, en 2014. Au cours des trois dernières années, Vue a connu un changement substantiel de popularité, même s’il n’a pas le soutien d’une grande entreprise. La version stable actuelle est la 2.6, sortie en février 2019 (avec quelques petites versions incrémentielles depuis lors). Les contributeurs de Vue sont soutenu par Patreon. Vue 3, actuellement en phase alpha, prévoit de passer à TypeScript.

réagir logo

Réagir, développé par Facebook, a été initialement publié en 2013. Facebook utilise largement React dans ses produits (Facebook, Instagram et WhatsApp). La version stable actuelle est la 16.X, sortie en novembre 2018 (avec des mises à jour incrémentielles plus petites depuis lors).

Voici un bref résumé d’Angular vs React vs Vue, en termes de statut et d’historique:

L’histoire d’Angular vs React vs VueAngulaire
Réagir
Vue

Première version201020132014
Site officielangular.ioreactjs.orgvuejs.org
Environ. taille (KB)50010080
Version actuelle916.x2.6.x
Utilisé parGoogle, WixFacebook, UberAlibaba, GitLab

Licence 👮‍♂️

Avant d’utiliser un framework open source, assurez-vous de passer par sa licence. Fait intéressant, les trois cadres utilisent le Licence MIT, qui fournit des restrictions limitées sur la réutilisation, même dans les logiciels propriétaires. Assurez-vous de connaître les implications de la licence avant d’utiliser un framework ou un logiciel.

Voici un bref résumé de la licence MIT en termes simples anglais.

Popularité 🔥

Comme “angulaire” et “réagir” sont des mots courants, il est difficile de saisir leur popularité à partir de Google Trends. Cependant, un bon indicateur de leur popularité est le nombre d’étoiles que leurs référentiels GitHub obtiennent. Un changement soudain du nombre d’étoiles de Vue s’est produit à la mi-2016 et, récemment, Vue a été là-haut avec React parmi les cadres les plus populaires.

Étoiles sur les projets GitHub pour Angular vs React vs VueNombre d’étoiles sur les projets GitHub pour Angular, React et Vue

Vérifions comment le marché du travail est pour Angular vs React vs Vue, qui est également une bonne mesure de popularité:

Marché de l’emploi pour Angular vs React vs Vue 👷‍♂️

Le meilleur sources de données qui indiquent les tendances sur le marché du travail sont les différents sites d’emploi.

Comme le montrent les tendances de la fin de 2018, le nombre d’emplois qui nécessitent un ensemble de compétences Angular ou React est à peu près le même, alors que celui de Vue n’était encore qu’une fraction de ce nombre (environ 20%). Cette liste n’est certainement pas exhaustive mais donne une bonne image de l’industrie technologique globale.

Si vous cherchez strictement du point de vue du marché du travail actuel, votre meilleur pari est d’apprendre Angular ou React. Cependant, étant donné que Vue a gagné en popularité au cours des trois dernières années, les projets peuvent prendre un certain temps pour utiliser Vue, ou de nouveaux projets qui adoptent Vue pour atteindre un niveau de maturité qui commande un plus grand nombre de développeurs..

Partie 2: Communauté et développement

Maintenant que vous connaissez l’histoire et les tendances de chacun de ces cadres, nous allons examiner la communauté pour évaluer le développement de ces cadres. Nous avons déjà vu que pour tous les cadres, des versions incrémentielles ont été expédiées régulièrement au cours de la dernière année, ce qui indique que le développement se poursuit en plein essor.

Voyons Angular vs React vs Vue en ce qui concerne les statistiques sur leurs référentiels GitHub:

Angulaire
Réagir
Vue

# Observateurs3,2 k6,6 k6.0k
# Étoiles57k144k157k
# Fourches15,9 k27,6 k23,7 k
# Contributeurs1 0891 361289

Vue a un grand nombre d’observateurs, d’étoiles et de fourchettes. Cela montre sa popularité parmi les utilisateurs et sa valeur lorsque l’on compare Vue vs React. Cependant, le nombre de contributeurs pour Vue est inférieur à Angular et React.

Une explication possible est que Vue est entièrement piloté par la communauté open source, alors qu’Angular et React comptent une part importante d’employés de Google et Facebook contribuant aux référentiels.

D’après les statistiques, les trois projets montrent une activité de développement importante, et cela va sûrement continuer à l’avenir – ces statistiques ne peuvent pas être la base pour ne pas décider d’utiliser l’un ou l’autre.

Partie 3: Migrations

Comme vous travaillez avec le framework de votre choix, vous ne voulez pas avoir à vous soucier d’une mise à jour du framework et de gâcher votre code. Bien que dans la plupart des cas, vous ne rencontrerez pas de nombreux problèmes d’une version à l’autre, il est important de garder le doigt sur le pouls, car certaines mises à jour peuvent être plus importantes et nécessitent des ajustements pour rester compatibles..

Angulaire prévoit des mises à jour majeures tous les six mois. Il y a également une période de six mois avant que les principales API ne soient obsolètes, ce qui vous donne le temps de deux cycles de publication (un an) pour apporter les modifications nécessaires, le cas échéant..

En ce qui concerne Angular vs React, Facebook a déclaré que la stabilité est de la plus haute importance pour eux, car de grandes entreprises comme Twitter et Airbnb utilisent React. Les mises à niveau via des versions sont généralement les plus faciles dans React, avec des scripts tels que réagir-codemod vous aider à migrer.

Dans la section Migration de la FAQ, Vue mentionne que 90% de l’API est identique si vous migrez de 1.x vers 2. Il y a un outil d’aide à la migration qui fonctionne sur la console pour évaluer l’état de votre application.

Partie 4: Travailler avec Vue vs Angular vs React

Il existe une poignée de caractéristiques importantes à examiner ici, la principale étant la taille globale et les temps de chargement, les composants disponibles et la courbe d’apprentissage.

Taille et temps de chargement ⏲️

Les tailles des bibliothèques sont les suivantes:

  • Angular 4+: dépend de la taille du paquet produit
  • Réagir: 116 Ko
  • Vue: 91 Ko

Bien qu’il existe une différence significative entre les tailles des frameworks, ils sont encore petits par rapport à la taille moyenne des pages Web (2+ Mo en 2018). De plus, si vous utilisez un CDN populaire pour charger ces bibliothèques, il est fort probable qu’un utilisateur ait déjà la bibliothèque chargée dans son système local.

Composants 🏗️

Les composants font partie intégrante des trois frameworks, que nous parlions de Vue, React ou Angular. Un composant obtient généralement une entrée et change de comportement en fonction de celle-ci. Ce changement de comportement se manifeste généralement comme un changement dans l’interface utilisateur d’une partie de la page. L’utilisation de composants facilite la réutilisation du code. Un composant peut être un panier sur un site de commerce électronique ou une boîte de connexion sur un réseau social.

Angulaire Angulaire:
Dans Angular, les composants sont appelés directives. Les directives ne sont que des marqueurs sur les éléments DOM, qu’Angular peut suivre et associer également un comportement spécifique. Par conséquent, Angular sépare la partie UI des composants en tant qu’attributs des balises HTML et leurs comportements sous la forme de code JavaScript. C’est ce qui le distingue quand on regarde Angular vs React.
Réagir Réagir:
React, fait intéressant, combine l’interface utilisateur et le comportement des composants. Par exemple, voici le code pour créer un composant Hello World dans React. Dans React, la même partie du code est chargée de créer un élément d’interface utilisateur et de dicter son comportement.
Vue Vue:
Dans Vue, l’interface utilisateur et le comportement font également partie des composants, ce qui rend les choses plus intuitives lorsque vous regardez Vue vs React. De plus, Vue est hautement personnalisable, ce qui vous permet de combiner l’interface utilisateur et le comportement des composants à partir d’un script. De plus, vous pouvez également utiliser des pré-processeurs dans Vue plutôt que CSS, ce qui est une grande fonctionnalité. Vue est géniale en ce qui concerne l’intégration avec d’autres bibliothèques, comme Bootstrap.

Pour comparer à quoi ressemble la même application avec différentes bibliothèques, voici un excellent article sur créer la même application de liste de tâches sur React et Vue et contrastant les différences des deux cadres.

Courbe d’apprentissage 🎓

Alors, comment est-il difficile d’apprendre chacun de ces cadres?

Angulaire Angulaire:
Angulaire a une courbe d’apprentissage abrupte, considérant qu’il s’agit d’une solution complète, et la maîtrise d’Angular vous oblige à apprendre des concepts associés tels que TypeScript et MVC. Même s’il faut du temps pour apprendre Angular, l’investissement paie des dividendes en termes de compréhension du fonctionnement du frontal.
réagir Réagir:
React propose un Commencer guide qui devrait aider à configurer React en une heure environ. La documentation est complète et complète, avec des solutions aux problèmes courants déjà présents sur Stack Overflow. React n’est pas un framework complet et les fonctionnalités avancées nécessitent l’utilisation de bibliothèques tierces. Cela rend la courbe d’apprentissage du framework de base moins raide mais dépend du chemin que vous empruntez avec des fonctionnalités supplémentaires. Cependant, apprendre à utiliser React ne signifie pas nécessairement que vous utilisez les bonnes pratiques.
vue Vue:
Vue offre une personnalisation plus élevée et est donc plus facile à apprendre que Angular ou React. De plus, Vue a un chevauchement avec Angular et React en ce qui concerne leurs fonctionnalités comme l’utilisation de composants. Par conséquent, la transition vers Vue depuis l’un des deux est une option facile. Cependant, la simplicité et la flexibilité de Vue est une épée à double tranchant – elle autorise un code médiocre, ce qui rend difficile le débogage et le test.

Bien qu’Angular, React et Vue aient une courbe d’apprentissage importante, leurs utilisations lors de la maîtrise sont illimitées. Par exemple, vous pouvez intégrer Angular et React avec WordPress et WooCommerce pour créer des applications Web progressives.

Angular vs React vs Vue: qui gagne?

Vers la fin de cet article, rappelons les caractéristiques de chaque framework pour tenter de répondre à la question: Angular vs React vs Vue: lequel choisir??

logo angulaire Angulaire est le plus mature des frameworks, a un bon soutien en termes de contributeurs et est un package complet.

Cependant, la courbe d’apprentissage est abrupte et les concepts de développement dans Angular peuvent rebuter de nouveaux développeurs.

Angular est un bon choix pour les entreprises avec de grandes équipes et des développeurs qui utilisent déjà TypeScript.

Extra 👉 Voici quelques modèles de tableau de bord d’administration angulaire qui pourraient vous intéresser.

réagir logo Réagir est juste assez vieux pour être mature et a un grand nombre de contributions de la communauté. Il a été largement accepté. Le marché du travail pour React est vraiment bon, et l’avenir de ce cadre s’annonce brillant.

React semble être un bon choix pour quelqu’un qui débute avec des frameworks JavaScript frontaux, des startups et des développeurs qui aiment une certaine flexibilité. La capacité à s’intégrer à d’autres frameworks de manière transparente lui confère un grand avantage pour ceux qui souhaitent une certaine flexibilité dans leur code.

logo vue Vue est le plus récent dans l’arène, sans le soutien d’une grande entreprise.

Cependant, il a vraiment bien réussi ces dernières années à devenir un concurrent solide pour Angular et React. Cela joue peut-être un rôle avec de nombreux géants chinois comme Alibaba et Baidu choisissant Vue comme leur principal framework JavaScript frontal.

Cependant, il reste à voir comment cela se passe à l’avenir et il est justifié d’être prudent avec elle. Vue devrait être votre choix si vous préférez la simplicité, mais aussi la flexibilité.

Extra 👉 Voici quelques modèles d’administration Vue construits avec Bootstrap qui pourraient vous intéresser.

La réponse au débat Angular vs React vs Vue est qu’il n’y a pas de bon choix absolu, auquel vous vous attendiez probablement.

Chacune de ces bibliothèques a ses propres avantages et inconvénients. En fonction du projet sur lequel vous travaillez et de vos besoins individuels, l’un d’entre eux sera plus adapté que les autres. Il est toujours essentiel de faire vos propres recherches avant de décider, surtout si vous allez travailler sur une entreprise et non sur un projet personnel.

Quel cadre pensez-vous est le gagnant ici – Angular vs React vs Vue? Faites-le nous savoir dans les commentaires ci-dessous.

Lectures complémentaires: 📚

  • Modèles de conception de matériaux pour Vue, Angular, React (Material UI)
  • Meilleures bibliothèques / cadres de composants React UI
  • Bibliothèques de composants Vue UI intéressantes
  • Meilleurs modèles de tableau de bord d’administration angulaire
  • Meilleurs modèles de bootstrap gratuits pour ReactJS
  • Modèles natifs React gratuits
  • Modèles d’administration VueJS gratuits et premium construits avec Bootstrap

Sur une autre note, que diriez-vous d’utiliser WordPress un peu plus? WordPress est parfaitement adapté pour exécuter presque n’importe quel projet de site Web imaginable, et il existe des thèmes impressionnants disponibles pour rendre votre design superbe (beaucoup d’entre eux sont gratuits). Sans oublier que vous pouvez héberger un site WordPress pour moins cher.

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Mise en page et présentation par Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector