VueJS c’est la vie. Voilà, on part là-dessus. Je joue avec depuis peu et je suis impressionné. C’est simple, puissant, hyper agréable et incroyablement populaire. Même un débile comme moi arrive à faire des choses intéressantes avec. C’est bien la preuve que n’importe qui peut en faire des merveilles.
Il était une fois
Nous sommes en 2012 du côté de New York. À ce moment-là Evan You vit sa meilleure vie en apprenant Javascript. Il fait des sides projets à droite et à gauche pour le rire. L’un d’eux explose en popularité sur Hackernews ! Evan ne le savait pas, mais il venait d’attirer l’attention de Google.
Très vite engagé chez Google, son rôle est de créer des « projets expériences » pour des idées innovantes. Il utilise beaucoup de Javascript vanilla. Il essaye AngularJS et d’autres frameworks, mais il rage instantanément dessus. Il ne trouve pas la liberté dont il a besoin. Et c’est là qu’il a eu une idée : extraire la meilleure partie de ces frameworks et faire son propre framework léger et malléable pour son besoin perso.
En juillet 2013, le premier commit de VueJS a été fait. Pour la petite histoire, VueJS devait s’appeler Seed.JS. Mais c’était pris sur NPM ! Comme son framework est centré autour de la partie vue, Evan voulait quelque chose qui ressemble à « View » en anglais. Il est allé sur google translate et a traduit « View » dans plusieurs langues. Il est tombé sur la traduction Française « Vue » et a trouvé ça joli. Quelques minutes plus tard, VueJS était publié.
En 2014, la première version de VueJS a débarqué dans ton internet. Le projet n’explose pas tout de suite. Mais au fur et à mesure, comme le créateur de Laravel, de plus en plus de gens en parlent. Durant les années qui suivront sa courbe de popularité, va rapidement grimper. Aujourdhui, VueJS est dans la cour des grands.
C’est quoi VueJS ?
VueJS est un framework Javascript frontend pour créer des interfaces utilisateurs. Tu vas me dire « encore un ? » et la réponse est oui. Sauf qu’il est un peu différent.
Déjà, c’est intéressant de comprendre que VueJS a été conçu pour être intégré de façon incrémentale. Ça veut dire que si tu as une application frontend déjà existante, t’as pas à tout refaire. Tu peux faire une nouvelle partie en VueJS et l’intégrer rapidement au reste.
Là où VueJS se différencie aussi c’est dans la prise en main. C’est ce qui m’a attiré à la base en tant que développeur backend. Très vite, j’ai fait des affaires frontend qui marchaient avec. J’étais choqué ! En quelques heures à lire la doc et à tester des affaires, j’avais compris tout le fonctionnement de base. J’étais déjà entrain de shipper du frontend.
VueJS prend aussi les bonnes idées de ses concurrents. Il permet le data binding. Les données et le DOM sont couplés et réactifs aux changements. On retrouve également le concept de virtual dom avec VueJS. Le DOM n’est pas directement changé, ça passe par le virtual DOM.
On retrouve aussi l’organisation par composant. Cette fonctionnalité permet de découper ton application en plusieurs sous-composants qui gèrent chacun leur vie et qui sont réutilisables. Imaginons tu veux faire une liste d’images : tu peux faire un composant qui gère l’image et un composant qui gère une liste de composant image.
Tout ça c’est bien beau, mais comment ça marche ?
Comment ça marche ?
Pour une fois je triche un peu et je montre du code en avance pour mieux comprendre ce qui va suivre. Hello World !
{{ message }}
VueJS se concentre sur la partie vue de ton application. Pour ce faire, le framework s’inspire en partie du patron d’architecture MVVM. VueJS va lier ton DOM, la partie vue, avec ton instance de vue, la partie Vue-Modèle. Ces deux parties sont liées par le système de data-binding dont je te parlais juste avant.
Enfin, la data dans ton instance de vue est la partie Model. Elle va fournir ton application en données. Schématisé avec le code du Hello World, ça ressemble à ça.
Une application VueJS est composée d’un ou plusieurs composants. Quand l’instance de l’application globale est lancée, on y trouve d’abord une instance racine. Elle est ensuite composée d’un arbre de composants qui ont eux-mêmes leur propre instance racine.
Mais qu’est-ce qui se passe au niveau du cycle de vie de ton instance quand tu crées le composant avec new Vue() ? À la base, je voulais faire mon schéma à la con habituel. Et puis il se trouve que la doc officielle de VueJS est juste EXCELLENTE. Alors je vais juste pomper leur schéma.
Je te laisse l’admirer et comprendre ce qui se passe. Le seul truc peut-être pas clair c’est la différence entre « created » et « mounted ».
- Mounted en VueJS veut dire que l’élément DOM a été rendu dans ta page et que tu peux le manipuler.
- Created veut dire que l’élément est disponible seulement dans la partie View-Model.
OK super, mettons nos mains dessus.
Fais voir le code
Je vais te montrer un bout d’une affaire que j’ai fait pour un besoin perso. Une simple galerie responsive avec seulement trois composants. On commence par l’app racine.
app.vue
Côté template je commence par déclarer mon app racine dans une div. À l’intérieur on trouve deux autres composants (action et grid). Note comme je passe la data qui vient de l’instance vue dans les composants avec les directives v-bind.
Côté script j’import les composants pour les utiliser dans l’app qu’on export. On déclare la data, les photos et un message, qui est du coup réactif aux changements.
Côté style j’intègre du CSS très simple qui est globale à tout le projet.
action.vue
{{ message }}
Le composant action c’est simplement un texte qu’on met au milieu de la page et qui va être un call to action pour l’utilisateur. J’utilise la syntaxe {{ message }} pour afficher le champ réactif message qui vient de l’app.
À noter également que la partie style est « scoped ». Ce qui veut dire que le CSS en question n’a d’effet que dans ce composant. Ce qui est peut être très pratique pour bien séparer le scope de chaque composant.
grid.vue
Le composant grid c’est celui qui va faire la logique d’afficher des grilles d’images par rapport à la data qu’il reçoit de l’app. Dans la partie template je crée une colonne toutes les deux images. Dans ces colonnes j’affiche mes deux images. Je le fais en utilisant un autre composant photo. Tu remarqueras l’utilisation de la directive v-for pour parcourir mes listes.
Dans la partie script, j’utilise les props pour aller chercher la data passée par le v-bind dans l’app. Puis j’utilise la fonction computed pour créer une nouvelle variable grids avec la data des photos.
photo.vue
Le composant photo me permet juste d’isoler l’affichage de la photo dans un coin. C’est tout simple, mais ça me permet de changer beaucoup de choses de ce côté dans le futur sans avoir à toucher à la logique au-dessus ! Comme d’hab, je te mets une petite codesanbox, tu peux jouer avec et voir tout ça en action.
Épilogue
Ça fait plus de cinq minutes qu’on discute VueJS, je vais me faire insulter. Il faut comprendre qu’après avoir lu rapidement la doc j’ai créé toute cette première application en quelques heures. La prise de main de ce framework est folle et tellement agréable. Franchement je te conseille de tester, c’est jouissif !