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 !
Cet article est un extrait de ma formation âMaĂźtriser Angular : RĂ©ussir votre prochain projet en entreprise ». Si vous souhaitez rĂ©ussir votre prochain projet Angular, vous pouvez recevoir mes recommandations par email.