Micro-frontends e desvio do sistema de design: mantendo a interface do usuário consistente entre as equipes
Como as equipes que usam microfrontends mantêm uma UI consistente: tokens e componentes compartilhados como pacotes versionados, isolamento CSS, políticas de atualização e verificações de regressão visual.
Ponto principal
Micro-frontends permitem que as equipes implantem partes de um produto de forma independente, o que torna provável o desvio da interface do usuário: versões diferentes de componentes, CSS conflitantes e estilos duplicados. Mantenha a consistência compartilhando tokens de design e componentes como pacotes versionados, isolando o CSS de cada equipe, concordando com uma política de atualização e detectando diferenças com testes de regressão visual.
Por que a deriva acontece
O site de Martin Fowler descreve micro-frontends como aplicativos front-end entregues de forma independente, compostos em um todo maior, com implantação independente como um benefício principal. A mesma independência causa desvios: as equipes atualizam o sistema de design em momentos diferentes, copiam componentes para se moverem mais rapidamente e escrevem CSS que vaza para outras partes da página. O artigo também alerta que algumas implementações duplicam dependências e que CSS, por ser global e em cascata, precisa de isolamento deliberado.
Compartilhe o sistema como pacotes
Publique tokens e componentes como pacotes versionados, não como código copiado e colado. Tokens em um formato padrão, como o formato W3C DTCG, podem ser criados para cada estrutura que uma equipe usa, de modo que uma equipe React e uma equipe Vue ainda compartilhem as mesmas cores, espaçamento e movimento.
Isolar CSS
Evite o vazamento de estilos entre equipes com uma abordagem consistente: convenções de nomenclatura como BEM, módulos CSS, CSS-in-JS ou Shadow DOM para componentes da web. Escolha uma convenção para todo o produto e faça um fiapo para ela.
Uma política de atualização
Combine até que ponto uma equipe pode ficar, por exemplo, não mais do que uma versão principal, e use o versionamento semântico para que as equipes saibam quando as alterações estão falhando. Acompanhe qual versão cada microfrontend usa em um painel compartilhado.
Capturar deriva automaticamente
Testes de regressão visual em telas principais, regras de lint que proíbem cores brutas e valores de espaçamento e revisões de design em superfícies compartilhadas (cabeçalhos, navegação, checkout) detectam inconsistências antes que os usuários as vejam.
Princípios-chave para lembrar
- A implantação independente torna provável o desvio da IU
- Compartilhe tokens e componentes como pacotes versionados
- Isole CSS com uma abordagem consistente
- Combine uma política de atualização e rastreie versões
- Use testes de regressão visual e regras de lint
Perguntas frequentes
Fontes
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org