Distinguer les composants smart et dumb
La notion de composants est présente dans de nombreux frameworks JS (Angular, React, Ember, etc). Ils permettent de découper l'interface utilisateur en éléments facilement réutilisables.
Lors de la création d'un nouveau composant, différentes questions viennent à l'esprit:
- de quelle donnée ai-je besoin pour rendre mon composant utilisable par d'autres ?
- ai-je besoin d'y injecter des services ?
- sur lequel, du composant appelant ou du composant appelé, placer la logique ?
De ces questions découlent deux concepts de composants, les composants dumb et les composants smart.
Pourquoi ?
Lorsque l'on souhaite rendre un composant réutilisable, il est plus intelligent de lui fournir toutes les informations dont il a besoin pour s'afficher correctement plutôt que de repasser derrière lui pour l'adapter à notre besoin. On appelle ce composant qui ne fait que de la représentation visuelle le composant dumb. Le composant appelant sera appelé composant smart.
Prenons par exemple un composant Score. En fonction de l'emplacement du score dans la page, ce sera le score de l'utilisateur à une question ou le score total de l'utilisateur à toutes les questions qui sera affiché.
L'appel au composant dans le premier cas s'écrira de la manière suivante dans le template:
<Score @value= />Et dans le deuxième cas (affichage du score total de l'utilisateur):
<Score @value= />On remarque bien ici l'intérêt de séparer les responsabilités entre le composant appelant (smart) et composant appelé (dumb). Le composant Score peut être facilement réutilisé dans des contextes différents. Les données dont il a besoin lui sont passées directement en attributs.
Composant dumb
La seule responsabilité du composant dumb est l'affichage. Il ne garde pas d'état et n'appelle aucun service. La seule manière de communiquer avec lui est de passer par ses propriétés.
S'il faut modifier le rendu visuel, c'est ici qu'il faut aller.
Composant smart
Comme l'indique son nom, ce composant est intelligent: il communique avec des services (appels au storage, API, libraries, etc) et manipule des états. Il récupère/crée les données nécéssaires au composant dumb.
Il s'assure globalement du bon fonctionnement de l'application.