Microfrontend é uma abordagem que divide uma grande aplicação em pequenos pedaço ou pequeno apps, esse conceito segue a ideia de “microserviço”, porém no lado do frontend. Resumidamente, o gráfico apresentado mostra como funciona uma aplicação que possui uma arquitetura microfrontend.

Conceitos

Antes de entrarmos na implementação é preciso entender alguns termos e conceitos. Existem dois termos que são bastante utilizados Host e Remotes.

Host é à aplicação principal e funciona com um container da aplicação. É nele que renderizamos todos os nossos microfrontends.

Remotes são os microfrontends. Aqui podemos fazer implementações de usando frameworks distintos e se preocupando somente em expor o que for necessário para o Host renderizar.

Module federation

É um plugin que permite compartilhar dependências entre as aplicações definindo quais módulos podem ser expostos ou consumidos.

Implementação

Para exemplificar essa implementação, estarei usando o react + viteJs.

Setup inicial do projeto ainda não muda! Esse será o Host (container)

Vamos fazer uma configuração no projeto no arquivo vite.config.ts

Para o module federation estamos usando uma dependência do vite para fazer essa gestão @originjs/vite-plugin-federation. Fazemos um remote para consumir os microfrontends referenciando os arquivos que estão com os módulos exportados. No exemplo, no microfrontend está no link http://localhost:4173/assets/remoteEntry.js que é o app login.

Agora é só adicionar o app no seu arquivo de renderização do host.

Fazemos a importação do microfrontend no projeto e carregamos da maneira que já conhecemos no react.

Agora que temos nossa configuração do host finalizada, agora precisamos fazer montar um pequeno app que seria nosso remote.

Vamos criar um outro projeto com vite e modificaremos o arquivo vite.config.ts

Agora com uma novidade, adicionamos o filename, exposes e shared.

Filename é o nome do arquivo que ficará nossos módulos exportados.

Exposes é são os componentes que queremos exportar para microfrontend.

Shared são dependências que queremos compartilhar.

Mais informações estão na biblioteca originjs/vite-plugin-federation.

Após esses ajustes, precisamos realizar um build no projeto e executar com algum servidor para conseguimos pegar o arquivo.js exportado.

Link da implementação completa código fonte

Conclusão

É uma arquitetura escalável e com boas possibilidades para fazer uma modernização em projetos legados sem que precise parar toda aplicação que está em produção. É um forte aliado para os devs que tem surgido em propostas de desenvolvimento.