Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
Interactivité croisée à l'aide d'événements
Dans certains scénarios, plusieurs micro-frontends peuvent avoir besoin d'interagir les uns avec les autres pour réagir aux changements d'état ou aux actions des utilisateurs. Par exemple, plusieurs micro-frontends sur la page peuvent inclure des menus pliables. Un menu apparaît lorsque l'utilisateur choisit un bouton. Le menu est masqué lorsque l'utilisateur clique sur un autre menu, y compris sur un autre menu affiché dans un micro-frontend différent.
Techniquement, une bibliothèque d'état partagée telle que Redux peut être utilisée par plusieurs micro-frontends et coordonnée par un shell. Cependant, cela crée un couplage important entre les applications, ce qui rend le code plus difficile à tester et peut ralentir les performances lors du rendu.
Une approche courante et efficace consiste à développer un bus d'événements distribué sous forme de bibliothèque, orchestré par le shell de l'application et utilisé par plusieurs micro-frontends. Ainsi, chaque micro-frontend publie et écoute des événements particuliers de manière asynchrone, en basant son comportement uniquement sur son propre état interne. Plusieurs équipes peuvent ensuite gérer une page wiki partagée qui décrit les événements et documente les comportements approuvés par les concepteurs d'expérience utilisateur.
Dans une implémentation de l'exemple de bus d'événements, un composant déroulant utilise le bus partagé pour publier un événement appelé drop-down-open-menu avec une charge utile de. {"id": "homepage-aboutus-button"} Le composant ajoute un écouteur à l'drop-down-open-menuévénement pour garantir que si un événement est déclenché pour un nouvel identifiant, le composant déroulant est affiché pour masquer sa section pliable. De cette façon, le micro-frontend peut réagir aux changements de manière asynchrone avec des performances accrues et une meilleure encapsulation, ce qui permet à plusieurs équipes de concevoir et de tester plus facilement les comportements.
Nous recommandons d'utiliser une norme APIs implémentée nativement par les navigateurs modernes pour améliorer la simplicité et la maintenabilité. La référence MDN Event
