As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
Interatividade cruzada usando eventos
Em alguns cenários, vários microfront-ends podem precisar interagir entre si para reagir às mudanças de estado ou às ações do usuário. Por exemplo, vários microfront-ends na página podem incluir menus dobráveis. Um menu aparece quando o usuário escolhe um botão. O menu fica oculto quando o usuário clica em qualquer outro lugar, incluindo outro menu que é renderizado em um micro-frontend diferente.
Tecnicamente, uma biblioteca estadual compartilhada, como a Redux, pode ser usada por vários microfront-ends e coordenada por um shell. No entanto, isso cria um acoplamento significativo entre os aplicativos, resultando em um código que é mais difícil de testar e pode diminuir o desempenho durante a renderização.
Uma abordagem comum e eficaz é desenvolver um barramento de eventos distribuído como uma biblioteca, orquestrado pelo shell do aplicativo e usado por vários microfront-ends. Dessa forma, cada microfrontend publica e escuta eventos específicos de forma assíncrona, baseando seu comportamento apenas em seu próprio estado interno. Em seguida, várias equipes podem manter uma página wiki compartilhada que descreve eventos e documenta comportamentos que foram acordados pelos designers de experiência do usuário.
Em uma implementação do exemplo de barramento de eventos, um componente suspenso usa o barramento compartilhado para publicar um evento chamado drop-down-open-menu com uma carga útil de. {"id": "homepage-aboutus-button"} O componente adiciona um ouvinte ao drop-down-open-menu evento para garantir que, se um evento for acionado para uma nova ID, o componente suspenso seja renderizado para ocultar sua seção dobrável. Dessa forma, o microfrontend pode reagir às mudanças de forma assíncrona com maior desempenho e melhor encapsulamento, facilitando que várias equipes projetem e testem comportamentos.
Recomendamos usar o padrão APIs implementado nativamente por navegadores modernos para melhorar a simplicidade e a capacidade de manutenção. A referência de eventos do MDN
