Pular para o conteúdo principal

Introdução aos Micro Front-End's

Características

A arquitetura de micro front-ends traz uma ideia parecida com microserviços para o front-end, com algumas características:

  • Maior independência entre os módulos;
  • Arquitetura mais agnóstica a frameworks;
  • Lógica pulverizada em vários projetos;
  • Pipeline de build, test e deploys mais rápida;
  • Assim como a arquitetura de micro serviços, adiciona uma complexidade a mais no projeto.

Os micro front-ends podem ser definidos, em [1], como:

"An architectural style where independently deliverable frontend applications are composed into a greater whole"


Exemplo Ilustrado

WireframeMicro front-end
Exemplo, em wireframe de baixa fidelidade, de um navegador web. Mostra um cabeçalho, com uma logo de garfo e faca e o nome Feed me. Uma barra de navegação horizontal com os links Browse Restaurants, Surprise me e My Profile. Logo abaixo, vem uma barra de busca, marcação de range de preços, botão de limpar. Abaixo desses itens vem um grid com 4 colunas com a exibição de 4 elementos, um quadrado marcado com X, devido a baixa fidelidade.Exemplo, em wireframe de baixa fidelidade, de um navegador web, separando o contexto de micro front-end's. Mostra um cabeçalho, com uma logo de garfo e faca e o nome Feed me. Uma barra de navegação horizontal com os links Browse Restaurants, Surprise me e My Profile. Logo abaixo, vem uma barra de busca, marcação de range de preços, botão de limpar. Abaixo desses itens vem um grid com 4 colunas com a exibição de 4 elementos, um quadrado marcado com X, devido a baixa fidelidade. A página web toda está marcada com uma caixa azul e com o label de container application. A parte de busca e grid estão marcados de verde com o label "Browse" micro frontend. Os links são marcados como links para outros micro frontends.

Micro front-end's devem ter:

  • Baixo ou nenhum acoplamento entre os micro front-ends;
  • Alta coesão;
  • Não deve assumir responsabilidades de outro micro front-end;
  • Não deve interferir ou ser interferido por outro micro front-end;
  • Base de código independente;
  • Pipeline de build, test e deploy separados e independentes.
  • Times autônomos.
Pipeline de build, test e deploy separados e independentes
Diagrama mostrando três micro front-end's (Micro frontend A, B e C), mostra que cada micro frontend deve ter uma pipeline própria de build e de testes e vai pra produção em ambientes separados, mas que compoem um único app em produção.
Times autônomos
A imagem mostra que cada tive deve ser dono de um micro frontend. Times horizontais, que atuam em vários micro frontends não devem ser utilizados.

Referências