Micro-frontend

Buscando separar os serviços mais robustos do front-end, de forma que facilite a manutenção dos mesmos e o tornem mais estáveis, implementamos o micro-frontend na KOR.

O primeiro projeto criado para ser um micro front foi o mf-emailflux. Ele serviu de base para a criação de um template para os próximos micro fronts, que foram o mf-mensageiro e o mf-cadastro, respectivamente.

Basicamente, ele é possível por conta de um plugin do vite chamado vite-plugin-federation, que nos permite expor componentes em um repositório e consumí-los em outro repositório, desde que ambos possuam o plugin.

Com esse funcionamento em mente, nos micro-frontend’s construímos todo o fluxo necessário para que aquele serviço funcione corretamente, e após o desenvolvimento, configuramos a exposição das páginas necessárias, criando um arquivo de exposição em cada página e adicionando aquele arquivo na listagem de componentes expostos do plugin.

No repositório principal, o plugin é configurado para conseguir acessar essas páginas expostas, e são criados componentes nas rotas necessárias para baixar a página e renderizá-la, como se aquela página fizesse parte do repositório principal, e não de um micro front-end.

Com isso, separamos o código, evitamos problemas com versões de bibliotecas, facilitamos futuras manutenções e a implementação de novas features, e não dificultamos a vida do usuário final.

Abaixo é possível ver um diagrama exemplificando o funcionamento do micro-frontend: