Single SPA: orquestrando micro-frontends

Configurando o projeto - Apresentação

Pensou que não teríamos conteúdo de micro front-end aqui na Alura? Pensou errado, estudante! Boas-vindas a mais um curso de React aqui na plataforma da Alura. Este curso será ministrado pelo Pedro Mello.

Audiodescrição: Pedro é uma pessoa de pele clara, cabelos e barba escura, vestindo uma camiseta preta. Ao fundo, há uma estante e objetos diversos de decoração iluminados por uma luz azulada.

Queremos dar as boas-vindas a este curso, onde vamos aprender os fundamentos de micro front-end. Este curso está recheado de conteúdo interessante.

O que vamos aprender

Vamos aprender muitas coisas e iniciar o desenvolvimento de um projeto voltado para automação residencial. Este projeto é o Home Hub e estamos compartilhando agora no nosso navegador o Figma desse projeto contendo o design que vai servir de base para o nosso desenvolvimento.

Como ele será baseado nesse projeto, é bem importante que você o deixe com a sua cara, então talvez seja interessante que você já tenha um conhecimento prévio em algumas tecnologias.

Mas antes de falarmos sobre isso, veja só como esse projeto está. Ele tem uma navbar (barra de navegação), ele tem alguns cards (cartões), menus e um gráfico.

Temos certeza de que esse conteúdo vai agregar muito, não só na sua carreira profissional, mas também nos seus projetos pessoais, aquele projeto que você deixou guardado, que você quer melhorar e personalizar.

Imagine apresentar esse projeto como micro front-end, utilizando essa arquitetura que tem sido muito discutida hoje em dia no mercado de trabalho.

Pré-requisitos do curso

Vamos utilizar o Single SPA para desenvolvimento do nosso orquestrador e também dos micro front-ends. Vamos utilizar componentes do Material UI para agilizar e facilitar o nosso desenvolvimento e estilização. E também vamos utilizar conceitos do React e do TypeScript.

Então, é interessante que você já tenha um conhecimento aprofundado de como funciona o ciclo de vida de um componente, de como é o gerenciamento de estado interno de componentes e também saiba como mexer em dependências no projeto, como fazer instalações de dependência.

Isso tudo nós vamos ver juntos e na prática, do zero. Vamos desde a criação da pasta até o layout final, bem próximo daquele que estamos usando de referência no Figma.

Nós vemos você no próximo vídeo para começar com o pé direito a implementação desse grande projeto do Home Hub, combinado Aguardamos você, estudante!

Configurando o projeto - Iniciando um novo repositório

Vamos iniciar o desenvolvimento do nosso projeto Home Hub. Antes de começarmos com os conceitos de Micro Front-End e entender as dependências, vamos analisar a página do Figma, onde temos o design desse projeto disponível.

Não se preocupe, o link do Figma estará disponível para consulta e para seguir a implementação desse projeto da maneira que preferir.

Neste primeiro curso, nosso foco será a visão geral da aplicação. Temos uma navbar (barra de navegação), um menu flutuante lateral, tanto à direita quanto à esquerda do nosso site, e no centro temos alguns cards com informações da nossa casa automatizada.

Criando a pasta do projeto

Primeiro, vamos abrir o terminal. Estamos utilizando o macOS, mas se preferir criar uma pasta manualmente, não tem problema. Vamos criar uma pasta neste diretório utilizando o comando mkdir e nomeá-la home-hub.

Agora, vamos navegar para dentro dessa pasta utilizando o comando cd, seguido do nome da pasta, home-hub. Dentro dessa pasta, vamos digitar o comando npm init para iniciar um package.json com algumas informações que utilizaremos no nosso projeto.

Ao rodar o npm init, a primeira opção que ele apresenta é o nome do pacote. Vamos deixar como home-hub, que é a sugestão dele. A versão, vamos deixar padrão como 1.0, não vamos alterar a versão aqui no terminal.

Ele permite adicionar uma descrição, mas por enquanto vamos deixar em branco. Como entry point, ele está sugerindo como index.js, mas isso não importa no momento, pois será um diretório vazio que preencheremos depois.

Também não vamos passar nenhum comando de teste, pois não estamos configurando nenhum caso de teste para esse projeto no momento. O repositório do Git também não foi criado, faremos isso futuramente.

As keywords também vou deixar em branco. No campo autor, vamos colocar o meu nome do instrutor, mas sinta-se à vontade para colocar o seu. A licença, vamos deixar a padrão que o npm init está fornecendo.

Ele vai passar o resumo de todos aqueles prompts que ele foi passando, só para ter certeza de que está tudo certo. Agora vamos apertar Enter novamente para confirmar.

Agora vamos abrir esse diretório, utilizamos o VS Code na versão Insiders, por conta de alguns plugins instalados, já que usamos a versão beta de desenvolvimento.

Então, o comando que utilizamos para abrir o meu Visual Studio Code é o code - Insiders . para abrir dentro desse diretório. Caso utilize a versão padrão do Visual Studio Code, e caso esteja utilizando o Visual Studio Code, o atalho será code . para abrir no diretório que está.

Ou pode fazer o caminho tradicional de abrir o editor de texto de sua preferência e encontrar essa pasta.

Estamos abrindo agora o diretório. Ele abriu a janela do Visual Studio Code. Aqui está o package.json que criamos para esse projeto, seguindo as informações do nosso terminal, enquanto estávamos passando os dados.

Agora vamos voltar para o nosso navegador para conversarmos um pouco sobre a arquitetura de micro front-ends. Se já tem uma experiência também com o desenvolvimento back-end, talvez esse micro front-end traga a ideia de uma palavra conhecida: microservices.

Como funciona o micro front-end

Se formos ilustrar como seria esse desenvolvimento de micro front-end (micro interface de usuário), ele é muito próximo da arquitetura utilizada em microservices (microsserviços), que é, na verdade, abstrair a lógica de um back-end grande, que teria várias regras de negócio.

Por exemplo, um sistema de desenvolvimento de cadastro, juntamente com uma visualização de dashboard, como temos aqui, seria extrair essa lógica em pequenos serviços.

Então, teríamos um serviço específico para cuidar de cadastro, um para cuidar do login do usuário, um para cuidar de cadastrar, por exemplo, novos dispositivos autônomos na casa, ou até mesmo um serviço para cuidar das pessoas usuárias que fazem parte da família desse mesmo usuário.

Portanto, na visão do back-end, seria essa arquitetura de microservices. Ou seja, quebrar um grande back-end em serviços pequenos, que podem facilitar na hora de dar manutenção, na hora de desenvolver, inclusive possibilitando que vários times trabalhem simultaneamente na mesma base de código, sem interferir no trabalho um do outro.

Agora, se trouxermos isso para o front-end, suponhamos que temos dois times de desenvolvimento front-end na equipe, que foram escalados para desenvolver o projeto do Home Hub.

E suponhamos que, por exemplo, a tela de login e cadastro vai ser desenvolvida por um time e a tela de visão geral vai ser desenvolvida por um outro time.

Se pensarmos que dois times estão utilizando a mesma base de código, estão desenvolvendo ao mesmo tempo, isso é um pouco problemático na hora de fazer commits e merge de código.

Então, qual é a ideia do micro front-end? Nós abstrairmos essas lógicas. Termos projetos separados de front-end, onde, por exemplo, tenhamos essa parte de login separada dessa parte de visão geral. Mas, ao mesmo tempo, elas funcionam integradas dentro do mesmo projeto.

Pode parecer um pouco confuso à primeira vista. E é justamente esse o objetivo do curso: irmos devagar, dando pequenos passos para entender como que funciona essa arquitetura de micro front-ends.

Chegamos até aqui com bastante informação nova, já criamos o repositório inicial do nosso projeto. Vamos combinar o seguinte, vamos aguardar você no nosso próximo vídeo, para entendermos um pouco mais sobre como funciona essa arquitetura do micro front-ends.

Vamos introduzir alguns outros conceitos, como o arco orquestrador, e entender como vamos utilizar um framework para lidar com isso. Nos vemos no próximo vídeo para entendermos um pouco mais sobre o funcionamento da arquitetura de micro front-ends.

Configurando o projeto - Criando o orquestrador

Falando de forma mais aprofundada sobre a arquitetura de micro-front-ends, para auxiliar nosso desenvolvimento, vamos utilizar esse framework chamado Single SPA.

Talvez seja um pouco redundante o nome, e eles, inclusive, fazem uma brincadeira sobre essa questão da redundância do nome na documentação.

Esse framework é uma das formas de trabalharmos com arquitetura de micro-front-ends em um projeto. E por que uma das formas? Porque hoje já existem diversos outros mecanismos de lidar com isso.

Temos monorrepositórios. Um exemplo deles seria o NX, que talvez seja um dos mais utilizados hoje. E o próprio NX já tem o seu próprio pacote para poder lidar com implementação de micro-front-ends dentro desse monorrepositório.

Também temos, por exemplo, o Workspaces, tanto do YARN quanto do NPM, que lidariam com monorrepositórios. Porém, seria necessário a utilização de algumas configurações específicas do Webpack para trabalharmos com uma arquitetura de micro-front-ends.

Só assim seria possível ter projetos separados dentro desse monorrepositório e que eles se comuniquem entre si e juntem, vamos dizer assim, as informações de um com o outro.

Para fazermos isso manualmente, talvez seja muito trabalhoso fazer do zero a configuração do Webpack, sendo que temos frameworks e outras ferramentas que auxiliam nesse desenvolvimento.

Olhando para a documentação, talvez um ponto muito interessante dessa arquitetura de micro-front-ends é que ela permite que utilizemos qualquer framework front-end de nossa preferência.

Então, vamos supor que tenhamos um micro-front-end separado para essa página de visão geral e ele esteja rodando em React e essa página de login e cadastro esteja utilizando Angular ou Vue, qualquer que seja o framework front-end da preferência de quem desenvolveu. Isso é possível através dessa arquitetura de micro-front-ends, se bem implementado.

Voltando para a documentação do Single SPA, ele menciona que é possível utilizarmos dentro desse framework qualquer que seja o framework front-end que quisermos. Então, ele cita o Angular, o React, o Ember, o Vue. Ele tem suporte para qualquer uma dessas bibliotecas front-end para o desenvolvimento.

Descendo mais um pouco, temos o link para a página de exemplos e demonstrações do Single SPA funcionando (Demos and Examples) e aqui ele dá um resumo de como funciona essa arquitetura micro-front-end dentro do Single SPA.

Porém, vamos ver isso aqui na prática. É muito bom termos a documentação para tirar uma dúvida, porém talvez seja mais interessante criarmos manualmente para entendermos como o desenvolvimento de micro-front-ends funciona dentro do framework Single SPA.

Implementando o Single SPA

Vamos abrir o VS Code e o terminal integrado no VS Code. Vamos rodar o seguinte comando para podermos utilizar o Single SPA: npx create-single-spa.

Ele deu um warning sobre um problema de estar depreciado, mas esse aqui não tem problema. Estamos usando o Node na versão 21.5.0, a é a versão LTS stable, ou seja, é a versão estável e recomendada a ser utilizada no momento que gravamos este curso.

Então, vamos rodar de novo, npx create-single-spa. Primeira informação que ele está pedindo é o diretório para esse novo projeto que estou criando (Directory for new project).

Como vamos criar primeiro o orquestrador, que vai fazer toda essa parte de configuração e integração dos nossos micro front-ends, vamos chamá-lo de root.

Normalmente, o orquestrador é chamado de root ou config, varia muito do padrão de projeto. Para esse caso, de acordo com o que temos visto muito em projetos micro front-ends, o root é o mais utilizado.

Então, vamos passar como root e agora ele me deu três opções, se queremos criar um single-spa do tipo application ou /parcel, se queremos criar uma aplicação do tipo do browser, na forma de um módulo utilitário (um style-guide, um cache de API etc.) ou se queremos criar um single-spa do tipo root config, que é justamente o tipo de orquestrador que queremos criar nesse momento.

Então, vamos selecionar o single-spa root-config. Ele pergunta qual o gerenciador de pacote que queremos utilizar (Which package manager do you want to use?). Vamos usar o npm, mas fique à vontade para utilizar o da sua preferência, isso não vai impactar a forma que o nosso projeto vai ser configurado e vai rodar.

Ele segue perguntando se queremos usar o Typescript, vamos confirmar com o y e pressionando Enter. Em seguida, ele pergunta se queremos utilizar o novo layout Engine do single-spa, ele muda um pouco a forma que configuramos alguns imports, alguns mapeamentos dos nossos micro front-ends dentro do orquestrador, então vou selecionar não, por ser uma feature muito nova.

É bem provável que projetos que você encontra dentro do mercado de trabalho, ou algum projeto que você queira atuar de forma open-source, eles estejam utilizando a forma padrão de configuração, dessa questão de import e tudo mais. Então, vou passar o n e apertar Enter.

Ele pergunta qual é o nome da organização, então vamos passar home-hub. Agora, ele está fazendo a criação do nosso orquestrador, enquanto isso, vamos entender um pouco mais do que é o nosso orquestrador.

Para que serve o orquestrador?

Temos vários projetos micro front-ends (a página de login e a página principal, por exemplo). O orquestrador é como se fosse um maestro regendo esse coral.

É o orquestrador que cuida para que os projetos estejam em harmonia, compartilhando informação, da mesma forma que o maestro vai conduzir um coral.

O papel do orquestrador é fazer com que esses projetos se comuniquem entre si e compartilhem as informações corretamente.

O nosso orquestrador foi criado, a pasta root, vamos expandi-la no meu Visual Code, e no terminal vamos entrar dentro dessa pasta, então vamos usar o comando cd root e executar o npm start. Por padrão, ele está rodando na porta 9000, fez já o type checking para nós, e temos alguns arquivos, uma pasta source que ele criou, e algumas outras coisas que vamos ver no nosso próximo vídeo.

Fizemos essa instalação do orquestrador seguindo o passo a passo que ele deu para nós no terminal, e aguardamos você para vermos com mais detalhes sobre essas configurações de cada um desses arquivos do orquestrador na nossa próxima aula. Aguardamos você lá!

Sobre o curso Single SPA: orquestrando micro-frontends

O curso Single SPA: orquestrando micro-frontends possui 143 minutos de vídeos, em um total de 45 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:

• Configurando o projeto
• Utilizando o single-spa
• Trabalhando com MFEs
• Estilizando a Navbar
• Construindo a Dashboard