Na parte 1 desta série, vimos como o Module Federation permite compartilhar componentes entre diferentes aplicações sem precisar instalar pacotes ou duplicar código. Agora, vamos dar um passo além: como enviar dados de uma aplicação para outra.
Imagine que você tem dois apps:
🔵 MF Consumer — quem consome um componente remoto
🟢 MF Provider — quem disponibiliza esse componente
conforme a imagem abaixo:
Cenário: passando dados entre apps
Vamos supor que o MF Provider tenha um componente chamado App que precisa exibir os dados de um usuário ( nome e email ). Esses dados vêm diretamente do MF Consumer.
No MF Consumer, tem o seguinte:
MF Consumer
Aqui, criei um objeto user e passei como props para o componente Provider , que está vindo do MF Provider.
No lado do MF Provider , defini o tipo das props ( ProviderProps ) e usei os dados recebidos normalmente, como faríamos em qualquer componente React, como segue:
MF Provider
Done!
Não é magia. É só React com Module Federation! Ao consumir um componente remoto, você ainda pode passar props normalmente, como se ele fosse local. Isso funciona porque, por baixo dos panos, o Webpack cuida de toda a importação remota — mas o React continua funcionando do jeito que a gente conhece.
Resultado final
Com isso, conseguimos:
Acompanhe AQUI como ficou o resultado final.
No próximo artigo, vou mostrar como esse padrão pode ser estendido para eventos e callbacks entre MF Consumer e MF Provider (ex: o usuário clica em algo no Provider e o Consumer reage).
💬 Curtiu? Me conta nos comentários como você está usando MF ou se está considerando aplicar na sua stack.
Leituras recomendadas
Microfrontend with React (e-book)
More...
Imagine que você tem dois apps:
🔵 MF Consumer — quem consome um componente remoto
🟢 MF Provider — quem disponibiliza esse componente
conforme a imagem abaixo:
Cenário: passando dados entre apps
Vamos supor que o MF Provider tenha um componente chamado App que precisa exibir os dados de um usuário ( nome e email ). Esses dados vêm diretamente do MF Consumer.
No MF Consumer, tem o seguinte:
MF Consumer
Aqui, criei um objeto user e passei como props para o componente Provider , que está vindo do MF Provider.
No lado do MF Provider , defini o tipo das props ( ProviderProps ) e usei os dados recebidos normalmente, como faríamos em qualquer componente React, como segue:
MF Provider
Done!
Não é magia. É só React com Module Federation! Ao consumir um componente remoto, você ainda pode passar props normalmente, como se ele fosse local. Isso funciona porque, por baixo dos panos, o Webpack cuida de toda a importação remota — mas o React continua funcionando do jeito que a gente conhece.
Resultado final
Com isso, conseguimos:
- Importar um componente remoto com Module Federation
- Passar dados para esse componente via props
- Exibir esses dados no MF Provider como se tudo estivesse rodando no mesmo app
Acompanhe AQUI como ficou o resultado final.
No próximo artigo, vou mostrar como esse padrão pode ser estendido para eventos e callbacks entre MF Consumer e MF Provider (ex: o usuário clica em algo no Provider e o Consumer reage).
💬 Curtiu? Me conta nos comentários como você está usando MF ou se está considerando aplicar na sua stack.
Leituras recomendadas
Microfrontend with React (e-book)
More...