Arquitetura de microsserviços de frontend

Micro frontends estendem a ideia de microsserviços à interface do usuário: um aplicativo web grande é dividido em partes desenvolvidas, testadas e implantadas de forma independente. Cada parte pertence a uma equipe diferente e é combinada em uma única experiência em tempo de execução.

Um único aplicativo Angular gigante (um “frontend monolítico”) vincula todas as equipes a um único ciclo de lançamento, uma única compilação e uma única implantação. À medida que as equipes crescem, isso torna todos mais lentos. Os micro frontends permitem que as equipes entreguem suas partes em seu próprio ritmo.

A principal característica é a possibilidade de implantação independente: a equipe de finalização da compra pode implantar um novo fluxo de checkout sem recompilar nem reimplantar o catálogo de produtos. Cada remoto é um artefato separado por trás de seu próprio fluxo de trabalho.

Arquiteturalmente, há um host (shell) que carrega um ou mais remotos. O shell gerencia o roteamento e o layout de nível superior; os remotos fornecem áreas funcionais carregadas sob demanda.

Os remotos podem ser combinados em tempo de compilação, no servidor (SSI/edge) ou em tempo de execução no navegador. A composição em tempo de execução com Module Federation é a mais comum no Angular, pois preserva a implantação independente.

O Module Federation permite que um aplicativo compilado exponha módulos que outro aplicativo compilado carrega por HTTP em tempo de execução, compartilhando bibliotecas comuns para que elas não sejam duplicadas. Ele é o mecanismo por trás da maioria dos micro frontends Angular.

Cada micro frontend deve corresponder a um domínio de negócio claro (catálogo, checkout, conta). Limites de domínio bem definidos minimizam o acoplamento entre equipes, que é justamente o objetivo. Responsabilidades compartilhadas (autenticação, sistema de design) tornam-se contratos explícitos.

Os micro frontends acrescentam complexidade real: divergência de versões entre remotos, dependências duplicadas se estiverem configuradas incorretamente, depuração mais difícil entre limites e falhas de carregamento em tempo de execução. Adote-os somente quando a escala da equipe justificar essa sobrecarga.

Para uma equipe pequena ou um único produto, um monólito bem estruturado com rotas carregadas de forma tardia é mais simples e rápido. Os micro frontends compensam quando várias equipes precisam implantar de forma independente no mesmo aplicativo.

Para evitar uma interface Frankenstein, as equipes compartilham uma biblioteca de sistema de design e estilos globais. A consistência é um contrato deliberado, não um acidente, pois cada remoto é compilado separadamente.

Os remotos Angular devem compartilhar uma única cópia do framework Angular em tempo de execução; carregar duas versões do Angular rompe a injeção de dependências e aumenta o tamanho do pacote. Ferramentas como o Native Federation gerenciam esse compartilhamento para você.

Qual é o principal benefício dos micro frontends?

Os micro frontends dividem um aplicativo grande em remotos que podem ser implantados de forma independente e são carregados por um shell host, cada um associado a um domínio de negócio. A composição em tempo de execução por meio do Module Federation é padrão no Angular, que precisa compartilhar uma única cópia do framework. Eles resolvem o acoplamento em escala de equipe, mas acrescentam custos operacionais reais.