Si vous êtes un développeur Front-end, tôt ou tard, vous envisagerez d’apprendre un framework JS particulier. À ce moment-là, la peur de faire le mauvais choix s’installe. Vous ne voulez pas vous retrouver à apprendre des technologies obsolètes ou des outils qui ne sont plus pertinents.
Des préoccupations similaires peuvent survenir chez le client, ce qui entraîne une réduction du nombre de développeurs utilisant ces technologies et, par conséquent, une augmentation du coût de support d’un produit construit sur celles-ci.
Nous allons maintenant essayer d’expliquer pourquoi, après avoir essayé les meilleurs frameworks JS, nous nous limitons à Vue.js.
Tout d’abord, un bref historique
En 2014, un ingénieur de Google a été chargé de prototyper rapidement des interfaces. À ce stade, Angular était déjà bien établi et React venait d’apparaître. Mais aucun des outils existants ne répondait pleinement aux exigences de la tâche. C’est ainsi qu’est née l’idée de créer un outil maison, qui a donné naissance à Vue.js, aujourd’hui l’un des trois meilleurs frameworks JS.
Mais qu’est-ce qui rend Vue.js si populaire ?
La raison la plus évidente est une faible barrière à l’entrée. Pour écrire en Vue.js, il suffit de connaître les bases du développement web comme JS, HTML et CSS. Le développeur n’est pas confronté à la nécessité d’apprendre TypeScript (comme avec Angular), et ne ressentira pas d’inconfort dû à un manque de connaissance des normes ES6 + (comme cela peut arriver avec React). Vue se situe entre React et Angular. Son auteur a repris les meilleures pratiques de ces deux frameworks et a créé un outil simple, rapide et flexible.
Le composant Vue le plus simple se compose de trois blocs : template, script et style. C’est un peu plus détaillé ici.
- Template est essentiellement un modèle de mise en page, un simple HTML, qui permet au développeur d’utiliser n’importe quel préprocesseur HTML (comme PUG, Haml), ce qui accélère le développement. Cela ne causera aucune gêne à ceux qui viennent d’Angular, car cette approche est largement utilisée dans l’environnement Angular. Vue.js permet également d’utiliser la syntaxe JSX, ce qui simplifiera grandement la migration des développeurs depuis React.
- Style est un bloc avec les styles écrits en CSS. Comme pour les modèles de mise en page, lors de l’écriture des feuilles de style, un développeur peut utiliser des préprocesseurs CSS (SASS, Less), ce qui permet d’augmenter la productivité.
- Script est un bloc de code JS représenté sous forme d’objet JS, dont chaque champ est un bloc de données ou un hook du cycle de vie du composant sous forme de fonction. Comme du JS pur est utilisé pour ce bloc, le développeur peut facilement écrire du code dans une norme pratique pour ES ou TypeScript et le convertir via Babel.
Maintenant, listons les raisons de choisir Vue.js
- Tout développeur disposant d’un minimum de technologies Front-end peut écrire en Vue. La structure proposée par Vue est assez évidente et réduit considérablement le temps passé sur la maintenance du code, l’amélioration des fonctionnalités et la recherche de bugs.
- Un autre avantage de Vue.js est son écosystème. Il n’a pas une aussi grande communauté que React, mais c’est peut-être mieux, car il est souvent difficile de trouver une option fonctionnelle parmi la variété de plugins et de packages React. Et s’il y en a une, il est difficile de l’étendre ou de la personnaliser. Avec Vue, les packages majeurs (tels que Vuex ou VueRouter), sans lesquels aucun projet majeur ne peut exister, sont profondément intégrés à Vue. Cela protège le développeur des bugs causés par l’incompatibilité des bibliothèques, car les développeurs de Vue.js maintiennent tous les composants de l’écosystème à jour. Chacun de ces composants est décrit en détail dans la documentation Vue.js.
- Documentation, voilà ce pour quoi Vue.js obtient un point supplémentaire. Il dispose d’une documentation traduite en 8 langues, avec de nombreux exemples d’utilisation détaillés du code. Et pour ceux qui ne comprennent pas les informations écrites, des cours de formation vidéo sont proposés.
- Il convient de souligner la portée de Vue.js, d’autant plus que ce framework a depuis longtemps dépassé les navigateurs. Mais commençons par les navigateurs. Vue est excellent pour écrire à la fois des paysages simples et des CMS complets. Selon les exigences du projet, la manière d’utiliser Vue peut varier. Les projets les plus simples ou les applications web qui n’impliquent pas de transmission de données lourdes avec le serveur sont mieux réalisés en format SPA, ce qui affecte négativement le time-to-content (le volume principal de données est téléchargé vers le client lors du premier chargement de la page) et le SEO (le site Web est un seul document et le contenu est généré par JS). Pour résoudre ce type de problèmes, et pour les projets à grande échelle, la documentation Vue suggère la mise en œuvre d’une approche SSR. Avec une telle mise en œuvre, chaque page est générée sur le serveur, ce qui accélère le time-to-content car seules les données nécessaires sont envoyées au client. Par conséquent, avec l’approche SSR, le SEO est également plus élevé, car tous les métadonnées nécessaires accompagnent le contenu de la page. Pour la mise en œuvre SSR, Vue recommande d’utiliser Nuxt.js ou le framework Quasar. Le Quasar susmentionné permet également d’écrire des applications PWA complètes sur Vue. Quasar est un environnement de développement basé sur Node.js et Webpack, qui fournit au développeur une gamme d’outils pour le développement d’applications, pour travailler avec le navigateur et sur les appareils mobiles et de bureau.
- Vue accélère le processus de développement. Et le mérite principal ici n’est pas que vous pouvez utiliser une grande variété de technologies, mais plutôt que vous n’avez pas besoin de les utiliser. Il s’agit d’un mécanisme d’ancrage de données bidirectionnel ou de réactivité. En d’autres termes, Vue suit les changements qui se produisent dans les données initialisées. Cela signifie que le développeur n’a pas besoin de manipuler le DOM. Les frameworks comme React et Angular ont leur propre système de réactivité. Mais si dans Vue, pour muter une variable particulière, il suffit de la réaffecter à une nouvelle valeur (par exemple : `this.someVar = “new value”`), dans React, vous devez utiliser une méthode spéciale setState (par exemple : `this.setState (() => ({ someVar : “new value”}))`). L’avantage de Vue se fait surtout sentir lors des mutations de tableaux ou d’objets. Dans Vue, il suffit d’utiliser la méthode de tableau standard pour ajouter un nouvel élément à un tableau. Par exemple : `this.someArr.push (“new value”)`), tandis que dans React, vous devez mettre à jour la valeur précédente (par exemple : `this.setState (state => ({someArr : [… state.someArr, “New value”]}))`). Parce que Vue a été écrit sous l’influence d’Angular, l’interface bidirectionnelle dans les deux frameworks est implémentée de manière similaire, mais la simplicité de Vuejs prévaut toujours.
- Un autre avantage qui accélère le processus de développement est la capacité à implémenter une approche par composant. Globalement, l’essentiel est qu’il existe une copie maître de Vue, qui est le point d’entrée de l’application, et que l’ensemble du projet est divisé en composants plus petits qui sont inclus dans la copie maître ou dans un autre composant. L’approche par composant offre de nombreux avantages. La première chose et probablement la plus importante est la capacité à écrire des composants polyvalents qui peuvent être réutilisés tout au long du projet (ou même dans d’autres projets) simplement en leur passant l’ensemble de paramètres nécessaire. Dans ce cas, si vous devez modifier la fonctionnalité d’une partie de l’application qui apparaît à plusieurs endroits, il n’est pas nécessaire de parcourir tout le code. Il suffira d’apporter des modifications dans un composant. Si vous imaginez que l’application contient des composants similaires à 90% et présente des différences minimes, les propriétés système (props, paramètres d’entrée du composant) seront utiles. En passant certains paramètres du composant parent, vous pouvez modifier le comportement interne du composant (polymorphisme du point de vue de Vuejs). L’héritage Vue est implémenté via les slots, c’est-à-dire que vous pouvez créer un composant abstrait avec un certain ensemble de fonctionnalités, et via le système de slots, créer des modules plus avancés sur sa base.
L’approche par composant accélère évidemment le développement. Elle réduit également la probabilité d’erreurs de copier-coller. Le code est extensible et réutilisable. De plus, la structure du projet est suffisamment évidente et compréhensible pour que tout novice puisse la maîtriser (un ajout agréable est Vue-devtools — une extension de navigateur spéciale développée par les auteurs de Vuejs pour vous permettre de visualiser la structure du projet via chrome-devtools. Bien sûr, une approche par composant existe dans React et Angular, mais en ce qui me concerne, elle est beaucoup plus facile à implémenter dans Vue.js. Bien que ce soit une question de goût.
Vue.js vs. Angular.js vs. React.js : Comparaison des statistiques
Grâce à des ressources comme stateofjs.com, nous avons l’occasion de voir comment les frameworks captent l’audience des développeurs. Il est évident que React.js a actuellement la plus grande communauté, mais à en juger par les statistiques, Vue.js a connu la plus forte augmentation de fans au cours des 3 dernières années. Le nombre de personnes qui ont utilisé ce framework et qui comptent continuer à l’utiliser a augmenté de 20%, et, à mon avis, c’est le principal indicateur de la satisfaction des utilisateurs vis-à-vis du produit. Au lieu de cela, le nombre de personnes qui ont utilisé le framework et ne souhaitent plus l’utiliser est le plus faible parmi les trois premiers.
Dans le même temps, le pourcentage de personnes qui ont entendu parler du framework et qui sont intéressées à l’utiliser est le plus élevé. Dans le cas de Vue, ce chiffre diminue progressivement principalement en raison de ceux qui ont déjà commencé à utiliser ce framework. Alors que dans le cas d’Angular, le nombre d’intéressés est compensé par le nombre de développeurs insatisfaits. Et dans React, le nombre d’intéressés diminue, en partie au détriment de ceux qui utilisent déjà ou sont insatisfaits de ce framework.
Les statistiques des sondages montrent que React a le plus grand nombre d’utilisateurs. Cependant, si l’on regarde les dépôts, le résultat est légèrement différent : le dépôt de Vue sur github compte plus de 146 000 étoiles (c’est le nombre de personnes qui ont exprimé leur satisfaction), React en a plus de 134 000, et Angular plus de 50 000 étoiles.
Vue.js
Angular.js
React.js
Il est évident que Vue.js n’en est qu’à ses débuts dans le monde du développement web, et pourtant, il existe déjà suffisamment de projets sérieux écrits avec ce framework. Les plus célèbres sont :
- gitlab.com — une plateforme web pour le contrôle des versions de code
- >wizzair.com — Wizzair utilise Vuejs sur son site officiel pour gérer la réservation de vols, d’hôtels et de taxis
- fontawesome.com — une ressource qui propose des polices graphiques pour les applications web et de bureau
- laravel.com — Site officiel du framework backend Laravel. De plus, Laravel installe Vue.js comme outil par défaut pour l’écriture côté client.
En résumé
Nous définirions Vue.js comme un framework qui se développe de manière très dynamique, voire agressive. Les développeurs qui ont essayé d’écrire en Vue.js deviennent très souvent des adeptes de ce framework. La simplicité et la flexibilité séduisent.
Bien que la gamme de tâches couvertes par cet outil couvre la majeure partie du développement Front-end, la sortie de Vue.js 3.0, attendue dans un avenir très proche, promet de nombreuses surprises agréables pour les développeurs.
Bien sûr, avant de réaliser toute tâche, il est nécessaire d’analyser quels outils utiliser. Besoin d’aide pour choisir la bonne pile technologique pour votre projet ? Contactez notre équipe pour une estimation de projet et une analyse. Nous vous aiderons à démarrer et à mettre en œuvre votre projet si vous avez besoin de notre implication ultérieure.
