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.ï»ż