Comment savoir si Vue.js est le bon cadre pour votre prochain projet –

Vue.js est passé d’un projet individuel à un framework JavaScript dont tout le monde parle. Vous en avez entendu parler par vos collègues et lors de conférences. Vous avez probablement lu plusieurs comparaisons entre Vue, React et Angular. Et vous avez probablement aussi remarqué que Vue surpasse React en termes de stars GitHub.

Tout cela vous a amené à vous demander si Vue.js était le bon cadre pour votre prochain projet? Explorons les possibilités et les limites de Vue pour vous donner un aperçu général du cadre et faciliter votre décision.

Veuillez noter que ce document s’appuiera fortement sur celui de Monterail . expérience avec Vue et d'autres frameworks JavaScript. En tant que société de développement de logiciels, nous avons mené à bien une trentaine de projets basés sur Vue et nous l’évangélons vivement auprès des développeurs et des entreprises avec des initiatives telles que State of Vue.js et Vue Newsletter .

Plongeons-nous.

Vue.js Overview

En 2014, la première version publique de Vue.js était disponible. Sa syntaxe de modèle – similaire à AngularJS – et une architecture à base de composants – similaire à celle proposée par React – la rendait accessible aux développeurs JS à l’époque. Vue.js a vraiment pris son envol seulement un an plus tard, lorsqu'il a été découvert par la communauté Laravel (framework PHP populaire).

Quelques années plus tard, il enregistre le plus haut taux de satisfaction tous les cadres JS (91,2%), d'après les données sur l'état des JS. De plus en plus de développeurs déclarent en avoir entendu parler et le souhait de l'utiliser à l'avenir. Des entreprises comme IBM, GitLab et Adobe ont déjà adopté Vue pour leurs produits.

Selon Evan You le créateur de Vue:

L'objectif initial était de «se gratter les démangeaisons,» créer une bibliothèque frontale que j'aimerais utiliser moi-même.

Et apparemment, lui et toute la communauté ont réussi à accomplir cette mission.

Voici ce que dit le site officiel du projet:

Vue (prononcé / vju v /, comme view) est un cadre évolutif permettant de créer des interfaces utilisateur. Contrairement aux autres cadres monolithiques, Vue est conçu dès le départ pour être progressivement adopté. La bibliothèque principale se concentre uniquement sur la couche de visualisation et est facile à extraire et à intégrer à d'autres bibliothèques ou à des projets existants.

Voilà! Progressif et facile à prendre en main et à intégrer. Mais cela suffit-il pour en faire votre premier choix?

The Business Perspective on Vue

Chez Monterail, nous pensons que cela ne devrait pas faire grande différence pour un programmeur JavaScript dont le framework ou la bibliothèque est choisi pour le front-end d'une application. . Construire des produits rapides, beaux et faciles à entretenir n’est pas trivial du tout, mais si quelque chose est réalisable, il est réalisable avec tout framework JS moderne.

Pourtant, nous aimons Vue.js et le recommandons à notre clients dans la plupart des cas. C’est parce que Vue est excellent pour plusieurs raisons. Explorons-les.

Lorsque votre application regorge d’animations et d’éléments interactifs

Vue offre une API véritablement élégante et flexible – non seulement pour l’architecture composable pour le front-end, mais également pour les transitions transparentes entre les vues. Les transitions et les animations améliorent l'expérience utilisateur, en adoucissant les changements entre les états. Le cerveau humain aime le mouvement, il s’agit donc d’une partie importante des sites Web et des applications modernes. L’animation est essentielle lorsque nous devons attirer l’attention de l’utilisateur, le garder sur notre site Web plus longtemps ou tout simplement pour rendre notre produit plus amusant.

La ​​sortie de Vue 2.0 a apporté beaucoup plus de flexibilité avec en ce qui concerne les transitions. Nous avons maintenant un accès plus granulaire aux crochets de transition, ce qui permet d’exploiter des bibliothèques tierces et d’offrir des animations complexes tout en utilisant Vue à la base. Cela signifie qu'il existe une multitude de façons de créer des animations dans Vue. Tout ce que vous avez à faire est d’appliquer un attribut personnalisé et d’ajouter de la magie CSS. Vue nous fournit les composants et déjà intégrés et basés sur des animations CSS, permettant à la fois les hooks CSS et JS. Il s'intègre également facilement à des éléments non HTML – comme SVG, par exemple.

Dans notre portefeuille, nous avons ce très bel exemple de projet avec de nombreuses transitions différentes, où nous avons utilisé Vue.js en tandem avec Nuxt. . Nous avons réussi à fournir une belle interface utilisateur pour Easyship 37% plus performante que leur version AngularJS. Les incroyables possibilités de Vue en termes de transitions en font également un bon choix pour les sites Web de campagnes marketing. «Jusqu'à ce que nous appartenions à tous» d'Airbnb est un autre bon exemple: une campagne primée lancée en six semaines et entièrement écrite avec Vue.js.

Quand vous avez besoin d'une intégration transparente avec plusieurs applications

Facilité 81% des développeurs interrogés pour State of Vue.js 2017 ont souligné que l'intégration était un avantage clé de Vue. Vue fonctionnait très bien pour la création de deux SPA (applications d'une page) et l'intégration à des serveurs existants (rendus sur plusieurs serveurs). ) applications. Vue peut être facilement «inséré» dans les pages rendues sur le serveur – par exemple, par des frameworks tels que Rails, Laravel ou Express – pour ajouter un certain niveau d'interactivité. Vous voulez une validation rapide du formulaire côté client? Aucun problème! Contenu récupéré dynamiquement? Cela ne pourrait pas être plus facile! Et la liste s'allonge …

En plus de la possibilité de créer des applications complètes d'une page à la fois, grâce à l'intégration de son WebPack, Vue offre également une foule de fonctionnalités modernes telles que le groupement, le partage de code ou ébranlant. Et dans de nombreux cas, nous n’avons utilisé Vue que pour ajouter de l’interactivité aux pages existantes – et ce, tout aussi performant. Il suffit de le charger dans une balise et d'ajouter Vue ({el: "#app"}) au fichier JS. C’est notre base. Ensuite, nous pouvons ajouter des modèles HTML, insérer nos données et rendre les composants.

Quand vous voulez créer un prototype sans compétences avancées

Ce qui est bien dans Vue, c'est que les composants peuvent être écrits en HTML pur, CSS et JavaScript. Cela le rend assez facile pour commencer. De l’autre côté, nous avons React, où les structures HTML sont exprimées avec JSX (qui est également pris en charge par Vue). Les modèles HTML sont une alternative plus simple qui semble plus naturelle pour lire et construire du code. Une telle approche permet aux développeurs ou concepteurs moins expérimentés d'écrire du code et même de préparer des prototypes fonctionnels. La documentation très appréciée de Vue la rend également très conviviale pour les débutants ou les entrepreneurs moins avertis en matière de technologie. Même si vous êtes bloqué à un moment donné, cela vous aidera. La ​​configuration des applications Vue ne nécessite pas beaucoup d’efforts. Le Vue CLI (interface de ligne de commande) facilite la création d'une configuration d'application prête pour la production. Pas un grand fan de la ligne de commande? Aucun problème! Hors de la boîte, Vue offre une interface utilisateur graphique étonnante au-dessus de son CLI, appelée Vue UI . En quelques clics, vous pouvez configurer votre application, la configurer pour utiliser les fonctionnalités les plus populaires (telles que Vuex, Vue Router ou TypeScript) et bien plus encore. Outre la flexibilité de la configuration initiale de l'application, de plus en plus de plug-ins vous permettent d'intégrer tout aussi facilement des bibliothèques populaires à votre application. Il peut s'avérer difficile de refléter correctement les modifications de données dans vos vues. Heureusement, Vue vient à la rescousse avec son système de réactivité intégré - ce qui manque par exemple à React (malgré son nom!). Le système peut être très utile dans les petites applications, où l’état est relativement simple et où des solutions de gestion d’état plus complexes ne sont pas nécessairement nécessaires. Par conséquent, nous pouvons facilement suivre tout changement dans les données fournies par les entrées utilisateur.

Lorsque vous souhaitez expédier votre MVP rapidement

La simplicité des modèles de Vue signifie également une vitesse de codage extrêmement rapide - en particulier par rapport à Angular - en termes de de l'API et du design. La configuration de votre environnement de projet peut ne prendre qu'une journée avec Vue. Ce n’est pas tout à fait vrai pour Angular, qui a été créé principalement pour les grandes applications. Avec Vue, vous n’avez pas à réinventer la roue à chaque fois; vous pouvez réutiliser des composants existants pour accélérer le développement. Gilles Bertaux de Livestorm (qui a décidé d’utiliser Vue pour tous ses composants frontaux et a livré son premier MVP en un mois):

Nous n’avons pas passé un mois à tout mettre en place comme avec React. Vue nous a rendus opérationnels en une semaine. Nous ne serions jamais là où nous en sommes maintenant si ce n’était pas pour Vue. Je suis sûr à 100% de cela.

Autres éléments qui font de Vue une explosion

Je dirais que les cas décrits ci-dessus sont assez simples et nous recommandons toujours Vue.js lorsqu'un client nous contacte quelque chose de similaire. Mais cela ne signifie pas nécessairement que Vue ne fonctionnera que dans ces cas (qui couvrent néanmoins la plupart des projets que nous rencontrons). L’un des principaux «arguments de vente» de Vue est sa progressivité. Cela signifie que vous pouvez progressivement vous inscrire au cadre, en ajoutant des éléments si nécessaire. Cela rend la mise à l'échelle de votre application beaucoup plus fluide, vous permettant de rester flexible en termes de fonctionnalités, de configuration d'équipe et d'outils. Cela devient très utile lorsque vous redimensionnez l'application ou que vous la réécrivez. La ​​dernière chose que je veux mentionner ici, ce sont les personnes qui composent l'incroyable communauté qui se cache derrière Vue. Grâce à eux, la pile de Vue est beaucoup plus cohérente et bien organisée. Il n’existe qu’une seule organisation sur GitHub et de nombreuses bibliothèques Vue, dont Vuex, Vue-Router ou Vuepress, sont créées par les mêmes personnes que celles qui composent l’équipe de Vue. Ils ont un seul objectif: créer le meilleur cadre qui soit agréable à utiliser. Cependant, dans le cas de React, l'histoire est quelque peu différente, car les intérêts de Facebook et ceux de la communauté ne sont pas toujours parfaitement alignés.

Alors, où est le piège?

Comme toutes choses, Vue arrive avec ce que nous pouvons considérer des inconvénients. Sa flexibilité, d’une part: alors que certains développeurs profitent de la liberté offerte par Vue, d’autres préfèrent ne disposer que d’une seule manière correcte de créer de nouveaux composants. Le support de typescript est une autre chose. Bien que ait déjà fait beaucoup de choses pour améliorer l’expérience, il reste encore beaucoup à faire. Des modifications sont également à venir dans Vue 3.0 :

De plus, l'API est conçue avec une inférence de type TypeScript. La base de code 3.x sera elle-même écrite en TypeScript, offrant un meilleur support de TypeScript. (Cela dit, l'utilisation de TypeScript dans une application est encore entièrement facultative.)

Enfin, de nombreuses entreprises optent pour React au lieu de Vue en raison du nombre réduit de programmeurs Vue.js disponibles (Europe de l'Ouest et États-Unis). Il existe de nombreuses autres offres d'emploi pour les développeurs de React et, bien sûr, davantage de développeurs de React sur le marché. Les entreprises peuvent vouloir atténuer les problèmes d’embauche potentiels en choisissant la bibliothèque la plus populaire pour leur centre d’accueil. D’autre part, la courbe d’apprentissage de Vue est vraiment fluide et tout développeur possédant une expérience JavaScript peut rapidement se lancer dans un projet basé sur Vue. Nous avons vu des juniors sans expérience de Vue devenir productifs en quelques heures. Par conséquent, je pense que cela ne devrait pas être un facteur de rupture pour aucune entreprise.

Conclusion

Il existe de nombreuses études de cas d'entreprises de formes et de tailles différentes, et je suis à peu près sûr que leur nombre augmentera au cours des prochaines années. mois. Si vous souhaitez voir quelques exemples d'utilisation de Vue.js dans des analyses de cas concrets, voici une liste de celles que je préfère: J'espère que cet article a bien expliqué pourquoi et quand Vue est une solution viable. choix pour un projet. Il existe évidemment d’autres excellents cadres qui conviendront bien à votre produit. Rappelez-vous que la technologie n’a aucune importance. Faites vos recherches, car c’est le seul moyen de prendre une décision vraiment éclairée.