Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
André Atalaia

Min Read

23 février 2024

Vue.js contre React : nous avons créé une application sur les deux frameworks

Quand vous pensez aux frameworks JavaScript, vous vous retrouverez probablement coincé entre Vue.js et React, car ils se trouvent être les plus populaires de la Écosystème JavaScript. Alors, comment pouvez-vous décider lequel convient le mieux au projet que vous êtes sur le point de coder ou de gérer ? Devriez-vous d'abord examiner le cadre lui-même et considérez sa courbe d'apprentissage ou analysez plutôt le taille et complexité du projet pour prendre une décision précise ?

Si l'une de ces questions vous est venue à l'esprit récemment, que vous soyez développeur front-end ou que vous dirigiez une équipe, continuez à lire : J'ai levé la main pour travailler et a créé une application sur les deux frameworks. Son objectif principal était de nous permettre, à Imaginar, pour voter en interne sur les jeux que nous préférerions acheter pour la PlayStation 4 que nous avons dans nos bureaux, l'ex-libris de nos pauses déjeuner !

Dans cet article de blog, je vais partager mes idées, sur la base de l'expérience que j'ai eue avec Vue.js et React. À partir de sa popularité au fil du temps, des difficultés, du soutien de la communauté et d'autres sujets connexes, je vais tout clarifier afin que vous puissiez avoir une meilleure idée de chaque cadre et des problèmes qu'il résout.

blue arrow to the left
Imaginary Cloud logo

Une histoire courte d'abord

React est soutenu par le géant de la technologie Facebook, offrant la stabilité et le soutien à long terme qu'un géant de la technologie peut fournir. React est devenu open source en mai 2013, ce qui a permis à sa communauté de créer d'innombrables bibliothèques tierces pour vous aider à atteindre l'objectif souhaité.

Sinon, Vue.js a été créé par Evan You, un ancien Google employé qui a travaillé dans leur équipe Angular. Evan a eu la vision de créer un framework combinant le meilleur de React, Ember et Angular, afin de fournir des fonctionnalités supplémentaires et d'améliorer les performances de codage. Cependant, comme Vue.js n'est pas soutenu par un géant de la technologie, il s'appuie sur sa communauté active pour le pousser vers l'avant.

blue arrow to the left
Imaginary Cloud logo

Ce que nous avons fait exactement

Le défi ? Nous avons une nouvelle PlayStation 4 au bureau et tout le monde se disputait pour savoir quels jeux acheter et jouer. En tant que stagiaire, je suis venue à la rescousse et j'ai créé une application qui permettait aux gens de voter pour les jeux les plus populaires et de décider quoi acheter ensuite. Et parce que deux c'est mieux qu'un, J'ai créé l'application deux fois - d'abord dans Vue.js puis dans React.

Les services dorsaux ont été mis à disposition par une API capable de gérer JSON demandes. Je n'avais que des connaissances de base sur la façon d'écrire du HTML et du JavaScript de base (je suis stagiaire), donc oui, l'expérience consistait à approfondir React et Vue.js, en apprenant de zéro.

En ce qui concerne les exigences à accomplir, j'avais les suivantes :

  • Points de terminaison d'autorisation (nous avons décidé d'utiliser l'authentification de session)
  • Opérations CRUD sur tous les types de données
  • Répertorier et filtrer tous les types de données
  • Opérations utilisateur telles que la confirmation par e-mail, la connexion, la déconnexion, l'enregistrement et le changement de mot de passe.
blue arrow to the left
Imaginary Cloud logo

Lequel est le plus facile à apprendre ?

Vous connaissez le sentiment : au début, cela peut sembler accablant et vous commencez à vous demander si ce n'est pas une bonne idée de passer par là. La même chose m'est arrivée, mais lorsque j'ai commencé à comprendre la structure de base des composants, elle est devenue plus simple et plus facile à comprendre. J'ai parcouru les didacticiels, j'ai manipulé les propriétés et j'ai deviné quel résultat nous aurions obtenu en me basant sur la documentation que nous avons lue.

Est-ce que Vue est facile à apprendre ?

En parcourant ce processus, j'ai remarqué que la documentation de support de Vue.js est bien plus « conviviale pour les développeurs » que celui de React. De plus, j'ai décidé de commencer par Vue.js en raison de mes connaissances de base en HTML. Cela s'est avéré améliorer la montée en puissance de mes compétences et a influencé la durée totale du projet.

Est-ce que React est facile à apprendre ?

La documentation de React est légèrement plus difficile à lire, ce qui a entraîné une lente montée en puissance par rapport à Vue.js, principalement en raison de l'effort supplémentaire d'apprentissage JSX.

En résumé, les deux ont une structure assez similaire, mais Vue.js est légèrement plus facile à apprendre car il autorise le HTML et le JSX.

blue arrow to the left
Imaginary Cloud logo

Lequel est le plus facile à utiliser ?

Comme le font les développeurs expérimentés, j'ai dû analyser et sélectionner les bibliothèques externes à utiliser. Les bibliothèques peuvent être particulièrement pertinentes lorsqu'il s'agit de tâches essentielles, car elles améliorent la qualité du produit et réduisent les efforts de développement.

Quelles bibliothèques utiliser dans une application Vue.js ?

Pour Vue.js, je voulais créer des éléments d'interface utilisateur complexes mais l'implémentation native prendrait beaucoup de temps, j'ai donc utilisé Vuétifier qui dispose d'une documentation riche et d'une configuration simple. L'installation et l'importation de la bibliothèque suffisaient et elle était prête à être utilisée.

Gérer l'état de l'application et s'assurer que l'application s'adapte à son état dans Vue.js est complexe et chronophage. J'ai décidé d'utiliser Vuex pour gérer l'état de l'application. Il était également simple à installer et à utiliser.

J'avais également besoin de me connecter au serveur et de m'authentifier Requêtes REST. Pour résoudre ce problème, j'ai suivi le Tutoriel Vue.js et comme conseillé, j'ai utilisé axios, une bibliothèque qui gère les requêtes REST et facilite la gestion des autorisations.

Enfin, j'ai utilisé le Routeur Vue pour mettre à jour et actualiser l'interface utilisateur lorsque l'URL change, ce qui est très difficile à réaliser sans bibliothèque.

En résumé, nous avons utilisé les bibliothèques suivantes avec Vue.js :

  • Vuétifier: pour créer des éléments d'interface utilisateur complexes
  • Vuex: pour gérer l'état de l'application
  • Axios: pour intégrer l'API REST
  • Routeur Vue: pour mettre à jour l'interface utilisateur lorsque l'URL change

Quelles bibliothèques utiliser dans une application React ?

Pour React, je voulais également créer des éléments d'interface utilisateur complexes, mais ce n'est pas simple à réaliser dès le départ. J'ai donc utilisé Interface utilisateur du matériau, car il facilite la création d'éléments d'interface utilisateur complexes.

J'ai également utilisé Composants stylisés pour configurer l'apparence de l'interface utilisateur, car cela est assez complexe avec React en version vanille. C'est quelque chose avec lequel j'ai eu du mal dans Vue.js, car je n'ai pas pu trouver une bonne bibliothèque à cette fin.

Redux est venu à la rescousse lorsque j'ai eu besoin de gérer l'état de l'application. Il s'agit de la bibliothèque la plus populaire à cette fin dans le domaine React. C'est un peu plus complexe que l'alternative Vue.Js, mais comme elle est bien documentée, je n'ai pas passé trop de temps à chercher une meilleure alternative.

Pour répondre aux demandes REST, nous avons continué avec axios car je connaissais déjà la bibliothèque. Cela a fourni une bonne solution, similaire à celle que j'ai dans l'application Vue.js.

Enfin, j'ai résolu le problème de routage avec Routage React. Comme son homologue Vue.js, cette bibliothèque facilite la gestion de l'ensemble de l'opération.

En résumé, j'ai utilisé les librairies suivantes avec React :

  • Interface utilisateur du matériau: pour créer des éléments d'interface utilisateur complexes
  • Composants stylisés: pour modifier l'apparence des éléments de l'interface utilisateur
  • Redux: pour gérer l'état de l'application
  • Axios: pour intégrer l'API REST
  • Routage React: pour mettre à jour l'interface utilisateur lorsque l'URL change

New call-to-action

blue arrow to the left
Imaginary Cloud logo

Lequel est le meilleur : Vue ou React ?

Après le processus d'apprentissage, le codage et les tests, il est temps de partager mes idées (lâchez le tambour !) :

  • Vue.js le développement a duré environ 9 jours (environ 72 heures)
  • Réagir le développement a duré environ 13 jours (environ 104 heures)

Sur la base des données ci-dessus, je peux dire que la programmation dans React nous a pris environ 30 % plus de temps qu'avec Vue.js.

Alors pourquoi ai-je préféré Vue.js à React ?

Eh bien, j'ai pu souligner quelques raisons :

  • Faible complexité des didacticiels et excellente qualité de la documentation: le didacticiel Vue.js était plus complet que celui de React. Alors que Vue.js incluait Vuex dans son tutoriel officiel pour débutants, le tutoriel de React n'incluait pas Redux. La documentation de Vuex était également légèrement meilleure que celle de Redux ;
  • Connaissances de base en HTML: ce qui a influencé ma montée en puissance et par conséquent ma performance.

Sur la base de mon expérience personnelle, je peux maintenant affirmer qu'il faudrait beaucoup moins de temps pour développer un projet de même envergure ou de taille similaire puisque j'ai déjà :

  • le savoir pour manipuler l'état du magasin;
  • un meilleur compréhension de chaque cadre et ses outils ;
  • connaissance des bibliothèques tierces qui facilitent le travail et améliorent les performances en développement une fois que vous avez appris à les manipuler.

Au cours de la première phase de développement, j'ai trouvé les deux communautés en cherchant quelques éclaircissements. À ma grande surprise, j'ai pu obtenir toutes les réponses à toutes les questions que je me posais en ligne. Cela a vraiment changé la donne. Les deux communautés sont très actives, avec des milliers de membres qui publient fréquemment leurs difficultés sur des plateformes comme StackOverflow et aident d'autres utilisateurs à répondre à des questions similaires.

blue arrow to the left
Imaginary Cloud logo

Lequel est le plus amusant : Vue ou React ?

Si vous partagez la même passion que moi pour le codage, vous êtes probablement d'accord avec moi lorsque je dis que le choix d'un framework influe sur votre motivation et sur les résultats du projet. Donc, oui, il est important de comprendre si vous optez pour une technologie qui vous fera concurrence ou qui vous mettra au défi.

Est-ce que c'est amusant de travailler avec Vue ?

D'après mon expérience avec chacun de ces cadres, Vue.js possède un style et un modèle de programmation excellents, une bonne documentation et un courbe d'apprentissage plus fluide pour accélérer les choses. Il propose également un didacticiel de démarrage très complet qui intègre le routage et la gestion des magasins. C'est certainement un excellent coup de pouce initial pour les nouveaux développeurs.

Est-ce amusant de travailler avec React ?

Outre son ** système bien construit de packages provenant de tiers** (comme ReduxAndReact Routing), son une grande communauté est un avantage considérable car il contient près de 50 000 packages npm pour vous aider à atteindre l'objectif de votre projet. Ceci est réalisable grâce à la liberté donnée aux développeurs de créer et d'ajuster leurs besoins en fonction de leurs objectifs.

Du point de vue de la carrière et en raison de la nature en constante évolution de l'industrie technologique, il est important de savoir si vos frameworks préférés ont un potentiel de croissance de carrière et de marché. Alors que Vue.js a une courbe d'apprentissage plus facile, ce qui vous permet de le maîtriser plus rapidement, il y a beaucoup plus de développeurs React sur le marché. Si vous recherchez des jobs entre Vue.js et React, vous aurez certainement plus de concurrence dans React que dans Vue.js.


En termes de salaire, selon les statistiques de 2019 comparer la rémunération annuelle de l'emploi, Les développeurs de React peuvent gagner un peu plus dans une perspective à long terme par rapport aux développeurs de Vue.js.

blue arrow to the left
Imaginary Cloud logo

Quand utiliser Vue contre React

Sur la base du projet développé, j'ai appris que :

  • Vue.js a une courbe d'apprentissage plus facile, cela peut donc mieux convenir si vous voulez quelque chose qui peut être appris « rapidement » pour terminer votre projet plus rapidement ;
  • Vue.js convient mieux aux petits projets plutôt que React ;
  • React contient des milliers de packages qui peuvent grandement faciliter votre projet ;
  • React surmonte Vue.js pour des projets qui, par nature, sont plus importants et plus complexes.

Companies using React

Compte tenu de mes conclusions, je conclus que Vue.js convenait mieux que Réagir pour des projets moins complexes comme celui-ci. Cela est principalement dû au fait que :

  • Démarrage rapide en cours de développement: avec des connaissances de base en HTML, j'ai pu commencer à développer juste après avoir terminé le tutoriel et lu toute la documentation nécessaire ;
  • La clarté du HTML par rapport à JSX: Je trouve que le HTML est beaucoup plus clair et plus facile en matière de communication, ce qui fait vraiment la différence lorsque vous travaillez en équipe ;
  • Meilleur tutoriel: fournit un didacticiel qui inclut l'utilisation de packages officiels, tels que la gestion du routage et de la gestion des magasins.

Companies using Vue

Réflexions finales

La sélection d'un framework avec lequel travailler peut être un véritable défi, car chaque projet a ses propres besoins et caractéristiques. Cela me porte à croire qu'au lieu de plonger d'abord dans la pléthore d'informations disponibles sur le web pour répondre rapidement à la question : Quel cadre est le meilleur ?, il faut plutôt se concentrer sur la détermination quel cadre s'ajuste et répond le mieux aux besoins du projet.

De plus, des variables telles que votre taille, complexité et objectifs du projet, ont un poids considérable dans votre décision finale. Les deux frameworks ont leurs propres spécifications et votre expérience en tant que développeur joue un rôle important à cet égard, car elle peut influencer la façon dont vous gérez ces particularités au profit de votre projet.

Dans cet article, j'ai parlé de Vue.js contre React sur la base d'un projet que j'ai développé à partir de zéro en utilisant les deux frameworks.

Si vous recherchez de l'aide pour création d'une application mobile dans Vue.js ou React, nous avons des développeurs hautement qualifiés prêts à y parvenir ! Communiquez avec nous !

Grow your revenue and user engagement by running a UX Audit! - Book a call

Vous avez trouvé cet article intéressant ? Ceux-ci vous plairont peut-être aussi !

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
André Atalaia
André Atalaia

Je suis un développeur Web passionné par les frameworks qui simplifient la vie. On oublie souvent que vous n'avez probablement plus besoin de points-virgules.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon