Arquitetura selecionada
Event-Driven Frontend
Nessa abordagem, partes do frontend reagem a eventos publicados por outras partes. Ela reduz acoplamento direto entre módulos, mas exige contratos e observabilidade dos eventos.
Estrutura de pastas
Navegue pelos arquivos para ver como a arquitetura aparece no código.
export type CartEvent =
| { type: 'cart.item-added'; sku: string }
| { type: 'cart.checked-out'; orderId: string };Prós
- Reduz dependência direta entre módulos.
- Facilita reações transversais como analytics, notificações e sincronização.
- Combina bem com aplicações em tempo real.
Contras
- Fluxos podem ficar difíceis de seguir se eventos forem genéricos demais.
- Exige naming, contratos e logs consistentes.
- Debug pode ser mais complexo que chamadas diretas.
Quando usar
- Produtos com muitas reações indiretas a ações do usuário.
- Aplicações colaborativas ou em tempo real.
- Microfrontends ou módulos independentes que precisam se comunicar.
Exemplo real
Uma plataforma de colaboração onde comentários, presença online e notificações reagem a eventos compartilhados.
Cenário prático
Quando o usuário adiciona um item ao carrinho, o módulo de recomendações, analytics e contador do header reagem ao evento `cart.item-added`.
Como implementar
- Defina eventos com nomes específicos e payloads tipados.
- Use um event bus ou streams observáveis para publicar e escutar eventos.
- Registre logs ou tracing para entender quem publicou e quem reagiu.
Cuidado comum
Eventos genéricos como `updated` ou `changed` tornam o fluxo invisível e difícil de depurar.