Single-SPA: otimizando seu ambiente de desenvolvimento

Arrumando a ''casa'' - Apresentação

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!

Arrumando a ''casa'' - Um repositório, um código

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!

Arrumando a ''casa'' - Controle por pacote

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á!

Sobre o curso Single-SPA: otimizando seu ambiente de desenvolvimento

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:

• Arrumando a "casa"
• Turbinando nosso projeto
• Aprendendo sobre Workspaces
• Scripts personalizados
• Finalizando o projeto