Découper l’interface en composants

Si toute application Angular est un arbre de composants, il est souvent pratique de se représenter cet arbre - ou cette imbrication - visuellement.

Examinons ensemble le site FoodCheri.com, qui propose des repas frais livrés à domicile, et voyons comment nous aurions pu découper son interface en composants si nous avions dû réaliser ce site avec Angular (pour info, ce site n’a pas été réalisé avec Angular, même si ça aurait été possible).

On part toujours d’un composant racine qui contient l’ensemble de l’application ou du site.

Ensuite, c’est au développeur de décider comment il découpe l’interface. Ici, on pourrait avoir un composant pour la barre de navigation, un composant pour la barre des jours, puis un composant qui représente un plat et qui serait répété plusieurs fois pour afficher chaque plat.

Ensuite, on peut continuer à découper chaque composant en sous-composants. Par exemple, le composant qui affiche un plat pourrait contenir un sous-composant qui affiche le nom et la photo du chef, un autre sous-composant qui affiche les boutons d’ajout au panier, etc. Je pourrais également choisir d’afficher toutes ces informations dans un seul composant, sans utiliser de sous-composants du tout.

Vous devez comprendre que c’est VOUS qui décidez de la granularité de vos composants. Au cours de vos développements, vous devrez régulièrement choisir entre créer plusieurs petits composants imbriqués les uns dans les autres, ou créer un seul gros composant monolithique.

Quelques grands principes peuvent vous guider dans ce choix :

  • La réutilisabilité. Si un bout d’interface est affiché plusieurs fois, plusieurs fois à la suite ou à plusieurs endroits différents de votre application, c’est une bonne idée d’en faire un composant. Sur le site FoodChéri, les boutons d’ajout au panier sont un bon exemple de composant réutilisable.
  • L’encapsulation. Si un bout d’interface contient beaucoup de HTML ou une logique d’affichage complexe, c’est une bonne idée de l’encapsuler dans son propre composant. Cela simplifiera le code du composant parent tout en séparant clairement les responsabilités de chaque composant. Sur le site FoodChéri, le bloc qui affiche un plat est un bon exemple de composant qu’on veut encapsuler (c’est également un exemple de composant qu’on veut répéter).
  • Le routeur. Le routeur d’Angular permet d’afficher un composant précis en fonction de l’URL en cours. Si vous voulez afficher un bout d’interface sur une page précise, c’est donc une bonne idée de le mettre dans un composant. Sur le site FoodChéri, quand on clique sur le panier, une nouvelle page est affichée avec le contenu du panier. Pour pouvoir être affichée par le routeur, cette page doit être dans un composant.
Informations

Tags : components

Dernière mise à jour :

Auteur : AngularChef

Qualité : Pas finalisé