Episode 8 : Organiser l’arborescence des composants 🎶

Episode 8 : Dans l’épisode précédent, nous avons ajouté des classes TypeScript ayant pour rôle de modéliser les entités métiers de notre application. Nous avons donc assez d’éléments pour mettre en place nos premiers composants. Cependant dans une « vraie » application, il y a beaucoup, beaucoup de composants différents qui interagissent entre eux. Comment organiser l’ensemble des composants de son projet ? Comment est-il recommandé de découper ses composants ? Combien faut-il en créer ?

Nous avons mis en place tout le socle nécessaire à notre projet, et nous allons pouvoir commencer à ajouter nos premiers composants. Mais comme notre application fera une certaine taille, nous savons déjà que nous aurons de nombreux composants à gérer. Nous allons donc voir comment organiser l’arborescence de tous ces nouveaux composants. Pour cela, je vais vous présenter une des architectures les plus populaires, c’est l’architecture en composants Smart et Dumb.

Arborescence des composants 

Vous le savez sûrement, une application Angular est conçu comme un assemblage de composants, qui s’emboîtent les uns dans les autres comme des briques Lego, donnant forme peu à peu à votre application. 

Ce qui signifie que nous allons développer un nombre important de nouveaux composants pour notre projet. Nous devons donc trouver un moyen efficace d’organiser tous ces composants : 

• Si nous découpons trop notre application en composants, nous aurons un grand nombre de petits composants à ajouter, répartis dans plusieurs dossiers différents. Il sera difficile de s’y retrouver dans le code. 
• Si nous ne découpons pas assez notre application, nous aurons des composants de plusieurs centaines de lignes, qui seront dur à relire et à maintenir. 

Nous devons trouver un compromis entre des composants trop nombreux, ou trop long.  Pour commencer, je vous propose de considérer la page d’accueil d’AwesomeList : 

Il s’agit d’une page web classique en apparence. Cependant, pour nous, en tant que développeur Angular, nous devons essayer de voir cette page comme un assemblage de composants. C’est un exercice qui peut ne pas être évident au début, car il faut se familiariser avec cette nouvelle façon de concevoir des pages. C’est pour cela qu’on va s’exercer ensemble tout au long du cours, et petit à petit cela deviendra une habitude pour vous.           

J’obtiens le découpage suivant de mon côté : 

Bien que cette page d’accueil reste très simple, on a déjà identifié six composants : 

• En rouge : La barre de navigation et le pied de page. J’ai différencié la couleur car ces deux composants ne concernent pas directement la page d’accueil, ils seront présents sur plusieurs pages différentes. 
• En vert, quatre composants : Un composant pour la grande bannière en haut de l’écran, et trois autres composants très similaires juste au-dessous, décrivant les fonctionnalités présentes dans l’application.

Heureusement, il existe une architecture permettant d’organiser nos composants, en les répartissant en trois types différents : les composants de pages, les composants intelligents ou “smart”, et les composants idiots ou “dumb”. Si si, il existe des composants dit “idiots”, et nous allons en avoir besoin. Ne vous fiez pas à leur nom peu flatteur.  

Tous ces composants forment ensuite l’arborescence suivante :  

Les composants de page sont censés être un assemblage de composants smart, qui s’occupent eux-mêmes de récupérer les données dont ils ont besoin, et peuvent ensuite éventuellement transmettre ces données à des composants dumb, qui s’occupent uniquement de l’affichage. Si votre page est très simple, il se peut que des composants dumb suffisent. 

Nous allons voir toute de suite comment appliquer cette architecture avec notre simple page d’accueil. 

Les composants de page 

Ce sont les premiers composants que nous devrons ajouter dans notre application, et chacun correspondra à une page dans notre application. Ils sont les composants les plus haut dans notre arborescence de composants, et leur implémentation est plutôt logique : 

• Pour la page d’accueil, nous devrons créer un composant HomeComponent. 
• Pour le tableau de bord, nous créerons un composant DashboardComponent.
• Pour le planning, il nous faudra un composant PlanningComponent. 
  
• Etc. 

Ces composants sont plutôt simples à comprendre. Ils servent à héberger les pages de notre application.  

Je vous recommande de donner à vos composants de page le même nom que le module auxquels ils appartiennent. Par exemple, le composant de page du module Home se nomme HomeComponent. Ainsi, lorsque j’accède au dossier de ce module, je sais tout de suite dans quel dossier se trouve le composant de page. Cela vous évitera de perdre du temps à chercher le composant de page parmi tous les composants de votre module.

Par contre, on se doute que ces composants risquent d’être trop long, si nous plaçons tout le code nécessaire à l’affichage et à la gestion d’une page au sein d’un seul composant. Nous devons les redécouper en composants smart et dumb. 

Les composants intelligents 

Les composants smart sont situés juste en dessous des composants de page. Il s’agit de composants intelligents, dans le sens qu’ils s’occupent eux-mêmes de faire le chef d’orchestre pour récupérer les données fournies par un service.

Les composants smart sont plus orientés sur la partie données et service. La partie concernant la gestion de l’affichage et le lien avec le template est souvent déléguée au composant dumb. 

Pour reprendre notre exemple de la page d’accueil, nous n’avons pas vraiment de composants smart, car notre page d’accueil est une page statique qui ne s’occupe que d’afficher du code HMTL. Afin de quand même vous donner un exemple concret, prenez le tableau ci-dessous : 

La composant smart, en rouge, s’occupe de récupérer l’ensemble des données nécessaires à l’affichage du tableau. Cependant, l’affichage de chacune des lignes du tableau est délégué aux composants dumb, en vert. Le cas des tableaux, et des listes en générale, permettent de mieux comprendre le lien entre les deux types de composants.

Les composants idiots 

En règle générale, le composant le plus en bas de l’arborescence sera celui avec le moins de logique métier. Il s’occupera donc seulement d’afficher des données, sans se soucier de leur provenance. Ils ne font donc jamais directement appel à un service. 

Les composants dumb permettent d’alléger les composants plus haut dans l’arborescence, en s’occupant exclusivement de la logique d’affichage. 

Le principe de responsabilité unique 

Cette arborescence facilite la maintenance et l’ajout de modifications ultérieures, car chaque composant a une et une seule mission. Je vous le redis : 

Chaque composant doit avoir une seule responsabilité. 

Par exemple, le rôle du composant de la page d’accueil n’est pas de récupérer les informations de cette page, ou de s’occuper de la mise en forme de la bannière. Son rôle est simplement d’afficher une page, c’est-à-dire assembler d’autres composants.

Une fois que vous avez assigner un rôle précis à vos composants, via l’arborescence que nous venons de voir, il est beaucoup plus facile d’organiser son code. 

De plus, cela vous force à réfléchir dans la manière où vous concevez votre code AVANT de commencer à tapoter sur votre clavier, et ça c’est une excellente pratique ! 

Nous savons comment organiser l’ensemble des composants de notre application, grâce à l’architecture « Smart & Dumb ». Nous serons en mesure de mieux organiser notre code. De plus, le principe de responsabilité unique nous permettra d’avoir un code plus lisible et plus facilement maitenable.

Afin de se mettre en situation, dans le prochain épisode, nous développerons tous les composants de notre futur page d’accueil en respectant l’architecture que venons de voir. Cela nous permettra de mettre en pratique les éléments théoriques de l’architecture Smart & Dumb, que nous avons appris jusque là. A bientôt !

---

Si vous n’avez pas la patience de chercher les articles sur le blog, je peux vous les envoyer dans l’ordre, directement dans votre boîte mail. En fait, cet article fait partie d’une série de 10 articles extraits de l’ouvrage Maîtriser Angular pour l’entreprise.