Micro-frontends: Escalando Interfaces com Arquitetura Modular
////////////// 上原
MERGULHE EM TECNOLOGIA_
Kevin Uehara
Staff Engineer na @Arco Educação
Instrutor na Alura
Google Developer Expert
3x Microsoft MVP
Autor, Palestrante e Criador de Conteúdo
SOBRE MIM
Contact
Micro Frontends
Agenda
Module Federation
Show me the code
Q&A
alura
Introdução aos
Micro Frontends
////////////// 上原
O que são Micro Frontends?
Contact
alura
Contact
Aplicações web complexas, monolito, grande, com builds demorados e deployments acoplados
Problema
Base de código enorme e difícil de manter, com muitas equipes no mesmo repositório.
Rollbacks afetam toda a aplicação
alura
Um Microfrontend é uma abordagem de arquitetura que divide o frontend em fragmentos menores, funcionais e independentes, onde cada fragmento é desenvolvido e implementado por uma equipe separada.
Contact
alura
Contact
Build Time Sharing - o código é compartilhado durante o processo de build — tudo é empacotado (bundle) junto antes do deployment.
Build Time Sharing x Runtime Sharing
Runtime Time Sharing - Código é compartilhado após o deployment, diretamente no browser em runtime.
alura
Contact
alura
Contact
alura
Contact
Entrega independente
Principais ideias sobre Micro-Frontends
Ser Agnóstico a Tecnologia
Arquitetura Escalável
Codebases Isoladas
alura
Então, Eu devo sempre usar Micro-Frontends, certo?
Contact
alura
E como tudo na tecnologia... depende
Contact
alura
Contact
Alta Complexidade Arquitetural- build complexa, roteamento e setup de comunicação
Trade Offs
Altos Custos Iniciais - mais repos, mais pipelines, mais manutenção, infra
Risco de Over-engineering - Nem todo projeto precisa de MFEs e times pequenos ou apps podem sofrer mais do que se beneficiar
Performance Overhead - Vários pacotes aumentam o tamanho de carregamento da página e exigem cache inteligente e dependências compartilhadas.
alura
Module Federation
////////////// 上原
O Module Federation é um padrão arquitetural que permite que aplicações JavaScript construídas independentemente compartilhem código e dependências em tempo de execução. Isso possibilita uma abordagem de micro-frontend, onde grandes aplicações podem ser divididas em partes menores e implantáveis independentemente.
Contact
alura
Contact
Grandes Aplicações: Para aplicações de grande porte, você pode dividir a aplicação em vários micro-frontends e usar o Module Federation para compartilhar código e recursos entre eles.
Casos de Uso
Arquitetura de Micro-frontend: Module Federation é uma ferramenta ideal para construir arquitetura de micro-frontends.
Multi-Times de Desenvolvimento: Module Federation pode auxiliar várias equipes no desenvolvimento colaborativo de grandes aplicações.
alura
Contact
História do Module Federation
2014
WebPack foi lançado
2018
Webpack 4.20 foi lançado, introduzindo o module hooks, que lançou as bases para o desenvolvimento do Module Federation
2019
Webpack 5 foi lançado, introduzindo oficialmente a funcionalidade do Module Federation.
2024
Module Federation v2.0 foi lançado com mais funcionalidades e incluindo o Rspack como uma opção de ferramenta de build
alura
Contact
https://module-federation.io/index.html
alura
Show me the code!
////////////// 上原
Contact
Nós vamos usar o Rspack para criar nosso projeto
O que vamos criar?
Vamos criar um Micro-frontend (remote e host)
Rodar ambas aplicações
Demo do Projeto
alura
Contact
alura
Contact
Estrutura do Projeto
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Muito obrigado!
E fiquem bem, sempre!
////////////// 上原
REDES SOCIAIS
Vamos nos conectar, me marquem e dêem feedback sobre a palestra!
APONTE A CÂMERA
Q&A
Tem alguma dúvida ou curiosidade? Vamos conversar sobre isso!
PERGUNTE O QUE QUISER