<aside> ✅ Gérer la complexité d'une application frontend avec redux et redux-thunk
</aside>
Dans cet article, j’explique ma vision de la clean architecture dans une application frontend. En appliquant ces principes, je suis en mesure d'implémenter les règles métier d'une app front, même lorsqu’elles deviennent complexes, tout en étant découplé des frameworks.
Après une une introduction expliquant plus en détail ce que j'entends par clean architecture côté front, nous verrons une application de ces principes avec un exemple concret, via l’utilisation de redux et redux-thunk (le code final est accessible sur ce dépôt GitHub).
Disclaimer : cet article n'est pas une référence détaillant comment il faut mettre en place la clean archi, et quelles sont les bonnes pratiques à suivre. Moi, développeur depuis quelques années, n’ai qu’assez peu de recule ce sujet pour être sûr de ce que je racconte. Ces quelques bouts de code sont donc à prendre avec des pincettes. D'ailleurs, si vous avez des retours, ou simplement envie de discuter de ce qui est dit ici, laissez-moi un message sur twitter !
Pour synthétiser la clean archi en quelques mots (et c'est pas évident), c’est une façon de coder dont le but est d'établir une séparation bien claire entre le code relatif aux règles métiers et le code relatif aux frameworks. Voyons la partie règles métier, le domaine, et les frameworks, l'infrastructure, en deux temps.
Côté backend, la notion de "règle métier" est assez intuitive, ce sont les fonctionnalités de la plateforme : lister des produits, passer une commande, créer un compte, etc. Mais côté front, ce n'est pas aussi évident, car notre domaine est composé de règles relatives à l'affichage et aux comportements de la page rendue par un navigateur.
Un exemple de règle frontend pourrait être :
“Lorsque l'utilisateur sélectionne une réponse à une question de QCM, elle doit être mise en évidence.”
Notez qu'il n'est pas précisé comment la réponse doit être mise en évidence. Notre règle métier est abstraite, elle se contente de définir l'état "cette réponse est sélectionnée", et rien de plus.
Mais au bout d'un moment, il faudra bien afficher la réponse sélectionnée d'une certaine manière : en gras, sur fond bleu ou en comic sans. Et bien ça, le comment, ça ne fait pas partie de notre domaine, ça sera géré par un framework, et fera donc parti de l’infrastructure.