Implementando micro front-end com Single SPA e React

Muito se fala em micro front-end, mas, como podemos de fato aplicá-lo e começar utilizá-lo na prática em nosso dia-a-dia? Nesse video eu mostro como realizar algumas implementações e resolver alguns problemas com micro front-end utilizar a biblioteca Singla SPA e React.

Durante o vídeo vamos realizar as seguintes implementações:
- Carregar micro front-end por rota
- Carregar micro front-end dentro de outro micro front-end
- Compartilhar estado entre micro front-end
- Realizar comunicação entre micro front-end
- Carregar micro front-end com rotas internas
- Compartilhar dependências comuns entre micro front-end
- Carregar micro front-end com lazy loading e code splitting
- Compartilhar um componente header entre todos os micro front-end
- Registrar micro front-end de forma dinâmica
- Publicar micro front-ends e o orquestrador principal

# Links:

» O que é micro front-end?:

» Single SPA:

» ReactJS:

» React Router DOM:

» UNPKG:

» Digital Ocean:

» SystemJS:

» Import Map:

» Netlify:

# Projeto:

---------------------------------------------------------------------------------------------------------------------

# Veja também:

» Buscando dados de API com React, Hooks e SWR:

» O que é micro front-end?:

» Simplificando testes de integração com React e Redux:

» Personalizando páginas em aplicações React:

» Publicando aplicação React na Netlify:

---------------------------------------------------------------------------------------------------------------------

# Doações:

---------------------------------------------------------------------------------------------------------------------

# Me siga nas redes sociais:

[felipeog]

1:45 Apresentando o single-spa
5:26 Criando o orquestrador
8:55 Explicando o *index.ejs*
12:40 Explicando o *mc-root-config.js*

13:45 Criando o micro frontend 1
20:10 Adicionando dependências externas ao *importmap*
22:25 Explicando o *activeWhen*
24:25 Explicando o *lifecycles* com *single-spa-react*

26:55 Criando o micro frontend 2: rotas internas
29:20 Criando rotas com o *react-router-dom*
31:20 Definindo o *basename* no *BrowserRouter*

33:50 Criando o micro frontend 3: usando um parcel dentro de um micro frontend
40:09 Explicando o *Parcel*
42:15 Configurando a comunicação entre o micro frontend e o parcel com *CustomEvents*
46:38 Recapitulando
49:00 Criando o *utility module* que compartilha funções de comunicação entre micro frontends e parcels
51:55 Explicando o *mc-utils.js*
54:45 Explicando *lazy loading* e *code splitting*

56:20 Criando o micro frontend 4: *lazy loading* e *code splitting*
59:12 Aplicando *lazy load* às rotas
1:00:00 Usando o *Suspense*
1:01:20 Explicando o *set-public-path.js*

1:02:09 Criando o micro frontend 5: barra de navegação compartilhada entre micro frontends
1:05:20 Configurando a rota
1:07:43 Explicando a configuração *externals* do webpack
1:10:04 Adicionando o *react-router-dom* ao *importmap* para compartilhá-lo entre vários micro frontends

1:11:48 Publicando tudo
1:17:55 Hospedando o *importmap* na CDN e configurando CORS
1:21:42 Hospedando micro frontends na CDN
1:24:28 Testando os micro frontends hospedados
1:25:15 Hospedando o orquestrador
1:26:15 Explicando os benefícios
1:26:40 Explicando como lidar com aplicações existentes
1:27:37 Falando sobre outros frameworks

[canaldevclub]

Cara, só encontrei um grande problema no seu vídeo, que é eu poder curtir apenas uma vez. Matheus, que conteúdo sensacional. Salvou minha vida, valeu mano!

[lotfinajim]

Thanks a lot for this video I don't speak your language but I understood how it's working just by watching it many thx

[backforstreets]

Devo dizer que é um dos melhores tutoriais que já vi na internet. Super bem explicado! Muito obrigado por disponibilizar!

[edsonmateus]

Ainda vou chegar no nível desse cara, olha essa didática que incrível

[pinheirovisky]

Sempre gosto de exaltar o quão importante é ter um vídeo com esta qualidade em português br. Parabéns por democratizar ainda mais esse conteúdo! Vc é o cara!

[joalisonpereiradev]

Vídeo excelente, é realmente difícil encontrar um vídeo que abranja tanto conteúdo sobre esse tema.

[pmapkiranch]

Although I don't understand Portuguese I managed to understand what you are saying, excellent content and the way you covered topics is really good I mean end to end, lot of tutorials leave it in the middle. I searched so many videos but this is very useful with respect to single-spa framework. Thank you very much.

Embora eu não entenda português consegui entender o que você está dizendo, um conteúdo excelente e a maneira como você abordou os tópicos é muito boa, quer dizer, de ponta a ponta, muitos tutoriais deixam no meio. Pesquisei tantos vídeos, mas isso é muito útil no que diz respeito à estrutura de spa único. Muito obrigado.

[viniciuscredendio]

Obrigado Matheus, me ajudou bastante a entender alguns conceitos, estarei compartilhando o vídeo com nossa equipe de devs, muito obrigado!

[kevinka]

cara que video rico de informacao! parabens pelo conteudo

[givanilson.pereira]

Top demais, cara! Parabés mesmo! Sou dev backend já com uma certa bagagem, mas iniciei um novo desafio numa pegada mais full stack, justamente com micro front-ends, e esse vídeo me ajudou muito!

[GabrielOliveira-olpw]

Obrigado, e parabéns pelo vídeo, um dos melhores sobre single-spa

Fica como sugestão fazer um vídeo sobre o outro framework, o Webpack Module Federation e a forma de fazer a montagem com ele.

[Canal_do_Zerinha]

Cara esse video é sensacional, você basicamente tem uma didatica fenomenal e indo direto ao ponto, quando alguem me pedir uma ajuda com microfront só passo esse video.

[CristianoCastroWeb]

Fiquei até emocionado. Parece mágica! huahuauh Parabéns pelo vídeo.

[dfealves]

Ainda não terminei de assistir o vídeo, mas estou conseguindo seguir mesmo utilizando angular. O vídeo aborda tudo o que eu realmente estava precisando, parabéns pelo vídeo, está me salvando !!!

[kevinfonseca]

Excelente vídeo! Muito didático e bem desenvolvido. Parabéns!

[mayconreisrosario]

Conteúdo simplesmente incrível! Parabéns!!

[BrasilEmFatos]

Cara muito obrigado e meus parabéns!!! Conteúdo igual ao seu n tem na net! Assunto complexo e muito bem explicado. Por favor, continua trazendo conteudo foda pra gente!

[_reinaldoferreira]

Tutorial sensacional… muito bom 🤯🤯🤯…

Vou rever algumas vezes com ctz

[leologeify]

Conteúdo sensacional !!! Muitíssimo obrigado, era o que eu estava precisando pro meu novo trampo !!!