Besoin de créer une application web ? Découvrez Vuex !

Aujourd'hui le BlogDuWebdesign vous propose de découvrir Vuex, une interprétation de Flux assez proche de redux faite pour travailler avec Vue.js

Quésaco ?

Vue js, interprétation de Flux, nous sommes ici face à des termes et concepts qui ne parlent pas vraiment à tout le monde, il va donc falloir les expliciter un petit peu. Je réunis ça en petits paragraphes bien range pour vous permettre de sauter les portions que vous connaissez déjà.

Vue, c'est quoi ?

Vue est un framework Javascript très puissant et versatile, ce qui fait qu'il est particulièrement complexe de le décrire correctement. 

Utilise à son minimum, Vue peut-être utilise comme une simple library de data binding, exactement comme ce que l'on peut faire avec Rivets. De l'autre côté du spectre, une utilisation "à fond" de Vue permet de créer une application basée sur des composants, comme ce que l'on peut faire avec React ou Polymère, et sans utiliser de jsx en prime.

Si vous avez une application web à faire et que l'utilisation de React vous fait peur, jetez un oeil à vue, il est bien plus simple à appréhender !

Flux c'est quoi ?

Il y a fort longtemps (en 2013, une demi-éternité dans le monde du JS), dans un royaume nommé Facebook, en groupe d'audacieux développeurs ont eu à lutter contre une invasion de zombies. Des notifications zombies plus précisément, qui annonçaient aux utilisateurs qu'ils avaient des messages non lues sans raison.

Durant la lutte, les valeureux développeurs se rendirent compte que le problème était bien plus grand que prévu, et venait de la façon dont était organisé toute la code base du contre : Facebook était tout simplement trop gros pour être maintenu en l'état. Cette constatation les a poussé à créer une toute nouvelle architecture pour les applications Web, et à la création de deux nouveaux outils : React et Flux.

En quelques mots, Flux est une structure d'organisation permettant la separation des fonctionnalitees en 4 grands concepts 

Les stores, qui possèdent les données. 
Les reducers, qui modifient les stores. 
Les actions, qui commandent aux reducers.
Les vues, qui affichent les données du store et qui émettent des actions.

En respectant strictement les usages de chacun et en ne débordant pas, il est possible de toujours savoir d'où viennent les actions, quel est l'état de l'application, et donc créer des applications très complexes maintenables

Redux, Flux, Vuex, quelle différence ?

Les premières fois que l'on entend parler de Flux, ce genre de questions peut faire assez mal à la tête. je vais donc essayer de vous faire un point pour clarifier ce point.

Pour commencer attaquons-nous à Flux. Il faut bien comprendre que Flux n'est pas un Framework, une library ou que sais-je encore, mais une architecture d'application web, un peu comme peuvent l'être les design patterns. 
Sa première implémentation peut être trouvée sur le github de Facebook, et est elle aussi nommée Facebook Flux, ce qui prête bien évidemment à confusion.

Redux est une implémentation de l'architecture Flux qui se remarque par sa rigidité et sa rigueur.
Ici, non content de s'imposer une structure lourde et complexe, les développeurs ont aussi décidé de se mettre des handicaps comme l'obligation d'utiliser un objet unique pour maintenir toutes les données de l'application, rendre cet objet immutable, et forcer tout changement à être fait par une fonction pure (sans contrecoup Ajax par exemple).

Enfin, Vuex est une autre implémentation de Flux très proche de Redux pour son approche rigoriste et faite expressément pour travailler avec Vue.js. Son organisation du code est bien plus simple que celle de Redux et tend à réunir les portions de code ayant le même sujet dans un même fichier plutôt que les portions ayant le même rôle (nous retrouverons la state, les reducers et les actions d'un même sujet dans le même fichier).

Finalement, Vuex

Maintenant que tout cela est dit, passons enfin a notre sujet ! Vuex est une interprétation de Flux assez proche de redux faite pour travailler avec Vue.js.

Si vous connaissez Redux, vous ne devriez pas être perdu avec l'environnement de Vuex, car vous y retrouverez une rigidité a toute épreuve, les mêmes outils de debugging (Time travel, astate management, ….), et les mêmes avantages. Petite plus, l'organisation des fichiers est très différente et plus sympa à travailler que dans Redux. 

De plus, le fait que Vuex soit fait pour s'intégrer avec Vue js (qui est vraiment un excellent Framework d'affichage) rend le tout vraiment homogène et très agréable à manipuler. Donc si vous ne connaissez pas