Simplifiez-vous la création d’application Javascript avec Redux

Le 06/10/2010

Je pense que vous avez entendu parler de Flux, l'architecture d'application créée (et utilisée par) Facebook, très a la mode ces temps-ci. Bien plus qu'un framework, Flux est surtout un schéma et une philosophie, et de nombreuses ressources directement inspirées de Flux ont vu le jour. Parmi elles, citons Reflux et mon petit chouchou, Redux.

Redux

Redux est un "state container" crée pour être totalement prévisible, et donc de pouvoir simplifier des tests et le debug. Pour cela, il se base sur une philosophie très stricte et rigide que je pourrais essayer de résumer en 3 petites phrases :

Les données dynamiques de notre application existent en un seul endroit.
Modifier les données de l'application ne peut se faire qu'à travers une action, et les actions ne peuvent faire autre chose que modifier les données de l'application.
Modifier les données crée une nouvelle "version" des données, il est interdit de modifier une la version en cours.

D'un point de vue technique, son fonctionnement est assez simple : chacune des actions pouvant affecter notre application, qu'elle soit visuelle (ouvrir un volet, changer de page) ou plus complexes (créer un nouveau contact pour un agenda), est à exprimer sous forme d'objets possédant un type et des arguments (optionnels).

{
type: 'ADD_CONTACT',
firstname: 'Benjamin',
lastname: 'SANCHEZ'
}

Ces actions sont ensuite envoyées à un "store" unique, qui va s'occuper de passer l'état actuel de nos données et notre action à plusieurs "reducers" successivement. Ces reducers, enfin, auront pour tâche de dupliquer l'état actuel pour en renvoyer une version mutée.

Avant de commencer

Si vous avec à créer une application Javascript à créer mais que vous ne savez pas par où commencer, je vous conseille très fortement d'essayer Redux. Pour moi, c'est de loin l'interprétation de Flux la plus simple à comprendre, et il a l'avantage d'être compatible avec tous types de vues et de modèles.

Néanmoins, bien que la ressource en elle-même soit assez simple, sa mise en place se retrouve encombrée de plusieurs petits points que je vais essayer de vous détailler.

1/ Browserify

Redux utilise des paquets commonJs, il vous faudra donc utiliser Browserify pour y avoir acces depuis votre navigateur.

Si vous ne connaissez pas du tout Browserify, attention, ce n'est pas une ressource Javascript à importer dans votre navigateur, mais bien un préprocesseur qui aura pour but de compiler vos scripts en un seul fichier tout en leur permettant de communiquer entre eux.

2/ Babel et ES6

La documentation de Redux utilise des notations ES6, et les différents exemples ne fonctionneront donc pas dans le navigateur. Si vous voulez utiliser les mêmes syntaxes que la documentation, je vous conseille de passer par Babel, un autre préprocesseur permettant de compiler les nouvelles syntaxes ES6 en Javascript old-school.

3/ Task Runner

Vu qu'il est nécessaire d'utiliser deux préprocesseurs, je vous encourage très vivement à utiliser un task Runner. J'ai personnellement mis en place Broccoli, mais Gulp fonctionnerait tout aussi bien.

Pour plus d'informations, je vous renvoie sur un article dédié aux tasks runner : Les ressources JS de l'été : des task runner pour automatiser vos process

Quelques ressources

Maintenant que vous avez un environnement en place, il est temps de commencer ! Pour cela, je vous conseille cette petite introduction suivie de deux tutoriaux assez intéressants.

Je vous conseille aussi la mise en place de redux-devtools, qui fournit des outils bien pratiques pour le debug, ainsi que du live-editing.

https://github.com/gaearon/redux-devtools

Enfin, si vous ne savez pas quelle vue utiliser avec votre application, Redux est originellement fait pour fonctionner avec React, je vous conseille donc d'y jeter un oeil. Ce n'est cela dit pas une obligation, je lui ai préféré Polymer pour l'instant.