🗺️ Arquitetura de Federação de Módulos (Host Application & Remotes Independentes)

flowchart TD
    subgraph SHELL ["App Shell / Host (Orquestrador Global) 🏛️"]
        NAV["Barra de Navegação & Autenticação Compartilhada 🧭"]
        ROUTER["Roteador Principal de Domínios 🚦"]
    end

    subgraph REMOTES ["Aplicações Remotas Descentralizadas (Deploys Independentes)"]
        direction LR
        CATALOGO["Micro-Frontend Catálogo (React 18) 📦"]
        CHECKOUT["Micro-Frontend Checkout (Vue 3 / React) 💳"]
        DASH["Micro-Frontend Painel do Usuário (Angular) 📊"]
    end

    SHELL ==>|Carregamento Dinâmico em Runtime via Module Federation| REMOTES

    style SHELL fill:#ede7f6,stroke:#512da8,stroke-width:1.5px
    style REMOTES fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style CATALOGO fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff
    style CHECKOUT fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style DASH fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px

📖 Fundamentos e Aplicação

A arquitetura de Micro-Frontends estende os princípios de microsserviços para a camada visual, permitindo que múltiplos times autônomos desenvolvam, testem e façam deploy de partes independentes de uma mesma aplicação web em grande escala.

1. Webpack 5 Module Federation:

  • Permite que uma aplicação JavaScript carregue dinamicamente código compilado de outra aplicação remota em tempo de execução (Runtime Integration).
  • Compartilhamento inteligente de dependências (Shared Dependencies): Garante que apenas uma única instância de bibliotecas pesadas como React ou Vue seja carregada no navegador (singleton: true).

2. Padrões de Comunicação entre Micro-Frontends:

  • Custom Events do DOM (window.dispatchEvent): Comunicação desacoplada.
  • Barramento de Eventos (Event Bus / RxJS): Para sincronização reativa de estado global (ex: tokens de login e itens do carrinho).