Olá, meu nome é Pedro, sou instrutor na Alura.
Audiodescrição: Pedro é um homem branco, com cabelos escuros, barba escura, e olhos castanhos, e usa piercings no nariz. Ele está em um ambiente iluminado pelas cores rosa e azul. Ao fundo, há uma estante com vários bonecos, e alguns quadros pendurados.
Boas-vindas a mais um curso! Vamos abordar o projeto chamado HomeHub, que estou demonstrando no navegador. Trata-se de uma dashboard de automação residencial, onde já temos alguns módulos pré-desenvolvidos. Ele utiliza a arquitetura de micro-frontends com o auxílio do Single SPA, um framework excelente para orquestrar, criar e integrar aplicações de micro-frontends.
Nosso foco será na parte de ambiente de desenvolvimento. Um exemplo que teremos ao final do curso é a construção de todos os nossos micro frontends dentro de uma arquitetura de monorepositório regida pelo Turborepo em apenas 260 milissegundos. Isso é incrível!
Além disso, vamos automatizar algumas tarefas neste projeto, incluindo aspectos do webpack, npm Workspaces, e também explorar o Husky e o pre-commit. Há muito conteúdo interessante neste curso para explorarmos juntos.
Como este conteúdo é um pouco mais avançado, abordaremos conceitos de monorepositório e npm Workspaces, além de trabalhar com o Turborepo. Haverá alguns pré-requisitos e recomendações para que você estude antes de iniciá-lo. Desde a primeira aula, vamos progredir juntos, passo a passo, até chegarmos à aula final, com este projeto incrível e sua arquitetura poderosa, destacando o potencial do Turborepo que aprenderemos em nosso ambiente de desenvolvimento.
Prepare-se! Aperte o cinto, hidrate-se e, em seguida, começaremos com o pé direito neste universo do desenvolvimento de aplicações de micro-frontends e no ambiente de desenvolvimento com o Turborepo. Nos encontramos na sequência!
Vamos começar a discutir sobre o ambiente de desenvolvimento de projetos que utilizam a arquitetura de micro-frontend. Além de corrigir bugs e implementar funcionalidades, é essencial termos um ambiente de desenvolvimento que facilite nosso dia a dia. Vamos abordar questões como monorepositórios e suas configurações para esteiras de desenvolvimento, e inteligência artificial, como o editor de texto que estamos utilizando, o Cursor, ou o Microsoft Copilot.
A tecnologia de micro-frontend deriva dos microsserviços, bastante discutidos no back-end. Atualmente, algumas empresas estão migrando de volta para o monolito, enquanto outras adotam o micro-frontend. Nosso objetivo é oferecer perspectivas variadas, entendendo como o mercado de trabalho está funcionando.
Vamos iniciar rodando nosso projeto. Caso seja sua primeira vez no HomeHub, identifique o projeto micro-frontend no editor de texto, localizando o orquestrador, que no caso está na pasta "root", o projeto chamado root. No arquivo index.ejs da pasta "source", temos o import map dos projetos nas linhas 48 a 59 e dos utilitários nas linhas 32 a 41. Utilizaremos apenas o home-hub-react-utils.js localmente, pois os outros já estão hospedados no CDN.
No import map das linhas 49 a 58, que são as aplicações, rodaremos apenas as das linhas 51 a 54. O react-parcel e o vue-demo não precisam ser rodados. Caso não saiba o que é parcel, temos conteúdo na Alura sobre isso. Recomendo procurar entre as indicações na página introdutória do curso, ou na aba de busca.
Vamos começar rodando os projetos: primeiro o orquestrador, depois a navbar, o dashboard, o login e, por último, nosso módulo utilitário na porta 8080. As portas aparecem logo após o nome dos projetos: root-config (orquestrador) na porta 9000, react-navbar na porta 8500, e assim por diante.
Agora, vamos discutir sobre o modo manual de rodar os projetos e como podemos melhorar nosso trabalho com a arquitetura de micro-frontend. No Google Chrome, com o HomeHub aberto, acessaremos a documentação do single-spa. Traduziremos o conteúdo usando ferramentas do próprio navegador para facilitar a compreensão.
O single-spa não lida diretamente com a forma de implantar, distribuir e cuidar do código, mas oferece estratégias para isso. A abordagem padrão é um repositório de código e uma compilação, semelhante ao conceito de monolito. Nosso projeto atual foi construído como um monolito, o que facilita o controle de versionamento e compartilhamento de código entre equipes. No entanto, ao escalar o projeto, a reutilização entre equipes pode se tornar complexa.
Vamos discutir mais formas de implementação na sequência. Até mais!
O monolito traz como vantagem algo muito importante: a facilidade de versionamento. Muitas empresas utilizam o esquema de monolito para projetos, mesmo quando trabalham com arquitetura de micro-frontend, justamente por este motivo. Estamos falando, às vezes, de estruturas de equipes enxutas, não de times muito grandes que precisam ter muitas equipes com acesso à mesma base de código. Nesse sentido, é importante usar o bom senso ao escolher como desenvolver o ambiente de desenvolvimento e a arquitetura do projeto.
Existe a arquitetura do projeto em si, que no caso do HomeHub é a arquitetura de micro-frontend. No entanto, estamos falando de um conceito diferente de arquitetura. Estamos emprestando a palavra "arquitetura" para descrever a organização do projeto e do ambiente de desenvolvimento, tema deste curso. Ao considerarmos o ambiente de desenvolvimento, devemos incluir o motivo pelo qual estamos organizando dessa forma.
Na prática, ao rodar o projeto, trabalhamos em diferentes locais, consultando diversas fontes. Essa é a forma padrão do nosso Single SPA, da maneira como o utilizamos e executamos as tarefas. Na documentação, temos também a opção de pacotes, ou NPM Packages, que envolve criar um aplicativo raiz que fará a instalação de todos os aplicativos single-spa no repositório. Cada um desses aplicativos possui seu próprio nível de publicação e atualização de código, mas o gerenciamento é feito pelo aplicativo "pai", localizado na raiz do projeto.
Exemplificando no código, no editor de texto, temos várias pastas, então, de "react-dashboard", do "root", que é nosso orquestrador, até "vue-demo", são nossos micro-frontends. Poderíamos criar um projeto chamado, por exemplo, config, dentro do qual teríamos um package.json com informações padrão, como nome, versão e descrição. Também teríamos scripts para rodar os projetos dentro da pasta "apps", onde estariam todos os micro-frontends do tipo aplicativo, como a "react-dashboard", o "react-login", a "react-navbar", e o "react-parcel".
Além disso, teríamos scripts para rodar o projeto de configuração, que seria o nosso root, e scripts para rodar os projetos utilitários. Poderíamos compilar esses scripts em um só, chamado npm run project ou npm setup, para automatizar tarefas manuais como abrir terminais e digitar portas.
Outra etapa importante é a configuração do webpack. Nossos aplicativos SPA têm controle individual do babel e do webpack para compilação e publicação. No entanto, como estamos tratando de um projeto raiz que controla isso, precisaríamos de uma configuração customizada de babel ou webpack na pasta "config", para publicação e atualização de todos os outros projetos.
Assim, no editor de texto, criaríamos um webpack.config.js em "config" com configurações para o projeto de configuração e utilitários, além de scripts para publicação e atualização de todos os pacotes. Essa é a parte chave ao tratar de um esquema de monolito, onde teríamos um repositório para todos os códigos. A abordagem pode ser interessante, dependendo do contexto e do tamanho da equipe.
Essa abordagem pode ser menos interessante do que a padrão, de rodar manualmente. Não esperamos que uma arquitetura de micro-frontend escale de forma absurda. Se isso ocorrer, talvez estejamos fazendo algo errado. Essa é uma discussão comum sobre a utilização de microsserviços, mas não entraremos nela agora.
Adiante, abordaremos o conceito de monorepo para controle, e acredito que as coisas ficarão mais interessantes. Até lá!
O curso Single-SPA: otimizando seu ambiente de desenvolvimento possui 117 minutos de vídeos, em um total de 37 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Assine o PLUS e garanta:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Transforme a sua jornada com benefícios exclusivos e evolua ainda mais na sua carreira.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.