Introduction :
Framework créé en 2014 par Evan You, Vue Js permet de gérer la partie interface ( VUE ) de votre application web.
Il est perçu comme plus intuitif et donc plus accessible pour les 'Juniors' (deux lignes de commande suffisent à lancer un projet Vue : 'npm install vue' et 'npm run dev' ou équivalence) par exemple mais aussi plus performant car il enlève certaines couches de votre code qui sont implicite grace à Vue.
Il en résulte un code plus clair, moins chargé mais surtout plus rapide à écrire et donc à relire!
Il a également la particularité d'être progressif et versatile: vous pouvez tout à fait créer un simple composant et l'implémenter dans une application déjà existante et conçut avec un autre framework à la manière d'un plugin JQUERY ou bien créer une application complète et complexe grâce à son écosystème: avec une arborescence (Vue Router) et la gestion d'un store (vueX), le tout avec un affichage dynamique du Virtual Dom !
Explorons quelques points qui à mon sens font sens quand j'essaie d'expliquer à d'autres pourquoi je travail avec Vue Js.
La réactivité dans l'interactivité !
L'une des particularité de Vue Js est la mise à jour des données affichées à l'écran en temps réel. En effet, le 'state' des données est mis à jour automatiquement sans avoir besoin de spécifier une logique 'RENDER' derrière. VueJs détecte automatiquement les changements effectués mais au lieu de refaire le rendu de la vue en entière, Vue effectuera seulement un rendu des modifications.
Ce qui produit une économie des ressources utilisées et donc un gain des performances de vos sites en générale.
Dans les faits, toutes les variables (object, table, string, props, etc..) affichées à l'écran sont désormais dynamique et misent à jour instantanément. Si vous jetez un oeil dans l'inspecteur de votre navigateur vous verrez un onglet Vue qui fournit au développeur un affichage du Virtual Dom avec la structure de chaque variables (object, table, string, props, etc..) reçut par chaque vue, ainsi que la structure Parent / Enfant de celles-ci.
Pratique pour vérifier la cohérence d'une réponse API ou bien pouvoir vérifier que ma variable est bien passée d'un composant à un autre par exemple.
Fini les console.log() à tout va ! Ou presque !
Le All-in-One par Vue Js
Là où Vue Js va s'avérer pratique c'est qu'il permet de rassembler le html, le javascript et le css sur un seul et même fichier (.vue).
Mais pas que ! Un système de 'Hooks' est mis en place pour pouvoir exécuter une logique à chaque étape de l'initialisation d'un projet (created, mounted, beforeDestroy, etc..). Son utilité réside en partie dans l'initialisation des données qui parfois sont appelées trop tôt ou trop tard dans la logique de votre feature.
Mais pas que ! Un panel de directives agissant directement sur le template est disponible permettant de 'binder' sur n'importe quel attribut html (class, style, title, etc..) ou sur n'importe quel élément html, ce qui permet de générer des liaisons de style et de classes facilement et rapidement.
Par exemple si on veut avoir une couleur de police en fonction d'un booléen A et changer la couleur de fond en fonction d'un booléen B, on écrirait ceci :
Ici on suppose deux booléens A et B : si A === true la police sera de couleur blanche sinon elle sera noire, et si B === true la couleur de fond sera noire sinon blanche.
Autre exemple, si on veut afficher un message d'erreur OU un message de confirmation on écrirait ceci :
Ici on suppose un booléen (confirm), SI celui-ci est TRUE on affiche le message de confirmation SINON le message d'erreur.
Ou plutôt on affiche {{ errorMessage }} SI confirm n'est pas TRUE (!confirm) SINON on affiche {{ confirmMessage }}.
Plutôt rapide et beaucoup moins volumineux à écrire que si je l'avais fait en javascript !
Le fait que tout soit sur le même fichier facilite la relecture ou le debuggage par une autre personne que vous ou par vous.. si vous revenez quelques mois après sur un projet.
Cela permet aussi de créer des composants réutilisables avec leur propre template, leur propre logique JS et style CSS embarqué.
La Store Academy !
Pour finir je vais vous montrer comment mettre en place un STORE pas à pas avec VueX sans trop de pré-requis.
Le seul pré-requis sera de d'avoir déjà lancé un projet Vue.
Le STORE va permettre de stocker des variables qui seront disponible depuis n'importe qu'elle vues ou composants, et de le mettre à jour de manière globale.
Vous pouvez y stocker n'importe quel type de variables, du simple string
à la réponse d'une requête API au format JSON.
C'est parti !
1. INSTALLATION VUEX
Tout d'abord il faut installer VueX : npm install vuex / yarn add vuex ( ou équivalence ).
Voilà l'installation est terminée !
2. INITIALISATION du Store
Une fois VueX installé, il faut initialiser votre store.
Commençons par mettre en place notre dossier 'store' sous le dossier 'src' (src/store) de votre projet, celui-ci contiendra 4 fichiers que l'on peut créer au préalable : actions.js | getters.js | mutation.js | index.js
Ensuite direction votre fichier 'main.js' pour y effectuer quelques modifications:
Une fois cette étape terminée, passons au 4 fichiers créés au préalable.
Commençons par le commencement... index.js qui va permettre de déclarer qu'on utilise VueX dans cette application et d'y déclarer les futures variables que l'on voudrait 'storer':
Ici on indique le mode Strict pour Vue Js, on le met à false pour un gain de performance.
S'il est à true cela permet de s'assurer que toutes les mutations de l'état peuvent être explicitement tracées par les outils de débugage.
Le state: {} indique les variables qui sont dans le store et qui peuvent être modifiées par les mutations et les actions, ici on a mis une variable {{ counter }} qui pourrait donner le nombre de notifications non-lus sur une app par exemple.
Puis on indique qu'il y aura un fichier pour les actions (actions.js), un fichier pour les getters (getters.js) et un fichier pour les mutations (mutations.js).
Reste à 'fixer' un getter et une mutation pour mettre à jour le state de {{ counter }} dans le store.
Direction le fichier getters.js :
Les getters vont permettre de récupérer le state de la variable {{ counter }} dans la vue/composant de son choix !
Puis direction le fichier mutations.js :
La mutation va permettre de mettre à jour le state de la variable {{ counter }} depuis n'importe qu'elle vue ou composant !
Voilà le store est mis en place, il ne reste plus qu'a faire appel à nos getters et nos mutations là où on en aura besoin.
Pour cela dans mon fichier.vue par exemple, au début de ma partie <script> j'importe les getters, actions et mutations,
puis je les appels comme ceci:
Pour finir je précise que pour accéder à cette variable c'est pareil que pour n'importe qu'elle variables déclarées dans data() -> 'this.counter' vous donneras accès à cette variable, au même titre -> 'this.CHANGE_COUNTER(this.counter)' va permettre de faire appel à la mutation CHANGE_COUNTER et mettra à jour {{ counter }} .
Voilà cette découverte de VueJs est terminée, à bientôt pour découvrir encore plus de choses avec ce framework.