Micro Frontends Single Spa 2021 05 18

Micro-Frontends: combinando frameworks com Module Federation e Single-SPA

Nesta aula, falaremos novamente sobre Micro-Frontends apresentando o framework single-spa que é responsável por orquestrar nossos MFEs vamos aprender como conectar diferentes frameworks dentro de single page aplications, permitindo que você divida o código por funcionalidade criando uma estrutura semelhante aos microsserviços, também iremos use a federação de módulo para compartilhar nosso código entre projetos, finalmente, usaremos redux para conectar nosso estado com todos as outras estruturas.

No final desta lição, você será capaz de aplicar esses conceitos para criar Micro-Frontends com diferentes frameworks se comunicando usando redux para gerenciar nosso estado.

Primeiros passos 🏁

Clone o repositório.

gh repo clone [email protected]:rocketseat-experts-club/Micro-Frontends-Single-SPA-2021-05-18.git
react-single-spa

cd no diretório.

cd react-single-spa

Instale as dependências do projeto:

yarn install

obs pra esse projeto nos estamos utilizando yarn workspces, por isso o yarn se torna obrigatorio

Inicie o servidor de desenvolvimento:

yarn start

Finalmente, vá para localhost: 3001 no navegador de sua escolha e você está pronto para ir 🚀.

💡 Dica profissional use o branch final como guia de referência final, este branch contém o projeto final para que você possa acompanhar.

Ferramentas 🧰

• Svelt como framework de UI
• Single-spa como orquestrador
• React como uma linguagem de IU
• Redux como gerenciador de state
• Webpack5 como module bundler + module federation plugin
• TailwindCss UI como nosso kit de ferramentas de design

  Estrutura do Projeto 🏗

Na pasta packages, temos os nossos micro front-end's:

• home: projeto principal onde todos os MFE's vão se conectar
• nav : MFE feito com react e exportado para o home
• summary : MFE utilizando svelt tambem sendo exportado para o home
• product-list: MFE utilizando vanilla JS sendo exportado para o home
• store : MFE compartilhando a redux store sendo utilizado por todos os outros MFE's

Expert

Vitor Alencar

Licença

Projetado com ♥ por vitormalencar. Licenciado sob a Licença MIT.