Single-SPA: integrando micro-frontends com Parcels

Criando um Parcel - Apresentação

Boas-vindas a mais um curso na plataforma da Alura! Meu nome é Pedro Mello e serei seu instrutor!

Audiodescrição: Pedro se descreve como um homem branco, com cabelos e barba escuros. Usa um brinco na orelha direita, um piercing no nariz e outro no septo. Está vestindo uma camiseta preta e usa uma corrente fina e prateada no pescoço. Ao fundo, uma estante com itens decorativos à direita e baixos e guitarras à esquerda. O ambiente é iluminado por uma luz azul.

O que vamos aprender?

Neste curso, abordaremos um tema muito interessante: micro front-ends. Vamos explorar como essa arquitetura funciona, com foco no conceito mais importante: o de parcels (código parcela compartilhado).

Com o navegador aberto no projeto do HomeHub, que será nosso foco durante este curso, podemos observar que ele já possui outros micro front-ends implementados, como uma página de login, um dashboard com alguns widgets, e uma seção de edição de usuário e controle de dispositivos da casa automatizada.

Vamos implementar um parcel, que será um componente compartilhado entre os outros micro front-ends. Dentro desse parcel, veremos as propriedades customizadas e únicas que ele possui, dependendo do framework em que foi implementado. Também abordaremos conceitos de feedback, ou seja, user experience, na aplicação do HomeHub.

Para dar uma ideia do que vem por aí, vamos apresentar a documentação do Material UI, biblioteca de componentes que utilizaremos em nossa aplicação. Introduziremos um Dialog como o principal mecanismo de feedback do HomeHub.

Além disso, implementaremos a Snackbar, que é fantástica para fornecer feedback em tempo real ao usuário. Na seção Snackbar da documentação, podemos clicar em "Open Snackbar" para exibir a Snackbar funcionando no canto inferior esquerdo.

Vamos explorar a documentação de parcels do Single SPA, o framework que utilizamos para lidar com a arquitetura de micro front-ends. Nos aprofundaremos nos detalhes de parcels, implementando-os em React, e demonstrando como utilizá-los em um projeto com Vue. Há muita coisa interessante, e tenho certeza de que aprenderemos muito juntos!

Pré-requisitos

Este é um conteúdo mais avançado sobre micro front-ends, então é interessante conferir o curso de conhecimentos básicos em React, além de conteúdos sobre micro front-ends disponíveis na plataforma da Alura. No entanto, se você já tem conhecimento em React, uso de hooks, ciclo de vida de componentes e instalação de dependências, já pode iniciar este curso. Vamos evoluir juntos, passo a passo, até a última aula!

Prepare-se, hidrate-se bem, e vamos começar a implementação e criação do nosso parcel!

Criando um Parcel - Utilizando o Single-Spa para criar um Parcel

Olá, estudante!

Vamos abrir o projeto do HomeHub no Visual Studio Code. Este projeto é um dashboard de automação residencial e já possui algumas funcionalidades implementadas, como vimos no vídeo anterior.

Nosso objetivo, agora, é implementar o conceito de parcels nas próximas aulas. Mas antes de começarmos essa implementação, vamos discutir o conceito de parcels e o que vamos trabalhar e implementar.

Criando o Parcel

No Visual Studio Code, com o terminal aberto na raiz do projeto, digitamos o comando:

npx create-single-spa

Estamos utilizando o framework Single SPA para lidar com toda a arquitetura de micro front-end do nosso projeto. Dentro do projeto HomeHub, já temos o orquestrador, que é a pasta root, configurada com todos os micro front-ends cadastrados, suas rotas e particularidades. Temos os micro front-ends de react-dashboard, react-login, react-navbar e react-utils. Os três primeiros (react-dashboard, react-login e react-navbar), além do orquestrador, são do tipo application, enquanto react-utils é nosso módulo utilitário.

Nomeando e Selecionando o Tipo do Micro Front-End

No terminal, nomeamos o diretório deste novo projeto como react-parcel. A segunda opção que o terminal nos fornece é indicar o tipo de micro front-end. Temos as seguintes opções: single-spa application / parcel, in-browser utility module (módulos utilitários como um style-guide, uma API-cache ou gerenciamento de estado) e root config, que é o nosso orquestrador.

Para o parcel, utilizaremos a primeira opção, application / parcel, a mesma utilizada para criar os outros micro front-ends como react-dashboard, react-login e react-navbar. O que mudará na utilização do parcel são algumas configurações que veremos ao longo das aulas. Então, selecionamos a primeira opção, single-spa application / parcel.

No terceiro prompt do terminal, podemos escolher o framework a ser utilizado. A grande vantagem do parcel é permitir a reutilização do micro front-end independentemente do framework escolhido. Por exemplo, podemos criar um componente de modal que será reutilizado entre nossos micro front-ends do tipo application.

Se quisermos desenvolver esse micro front-end parcel em Angular ou Vue, podemos utilizá-lo em um micro front-end do tipo React. Esse é o grande diferencial de trabalhar com essa arquitetura de micro front-end.

Selecionamos o framework React, que é o foco deste curso, e, em seguida, escolhemos o npm como gerenciador de pacotes. Depois, respondemos "y" para confirmar o uso do TypeScript no projeto.

Configurando a Organização

Em seguida, o terminal solicita o nome da organização. É importante que todos os micro front-ends utilizem o mesmo nome de organização. Caso haja dúvida, basta abrir a pasta do orquestrador, que no nosso caso é a pasta root/src, e verificar no arquivo home-hub-root-config.ts as linhas que contêm o nome da organização, que é @home-hub. Sendo assim, digitamos home-hub no terminal. O terminal então pergunta o nome do projeto. Por padrão, utilizamos o mesmo nome do diretório, que neste caso é react-parcel.

Instalando o Babel Manualmente

Durante a instalação e configuração inicial, pode haver um problema com o Babel, mas isso não interfere na criação da pasta react-parcel no Visual Studio Code. Então, faremos a instalação manual do Babel navegando até a pasta react-parcel e executando:

npm install

Após a instalação das dependências, estamos prontos para seguir com a configuração do parcel dentro do nosso orquestrador.

Conclusão e próximos passos

Neste vídeo, entendemos o conceito de parcel, a razão pela qual estamos implementando-o e como realizar a configuração inicial. Com a instalação das dependências concluídas, nos vemos na próxima etapa para continuar explorando o mundo dos micro front-ends. Até mais!

Criando um Parcel - Configurando o Parcel no orquestrador

Vamos prosseguir com a configuração do nosso micro front-end do tipo Parcel. Iniciaremos de forma um pouco diferente, discutindo as diferenças, e não as semelhanças, que precisaremos configurar no orquestrador.

Diferenças na Configuração do Orquestrador

A primeira diferença está no arquivo home-hub-root-config.ts do nosso orquestrador. Nas 3 ocorrências de registerApplication(), estamos registrando as aplicações dentro do nosso orquestrador. No entanto, um Parcel, apesar de ser uma aplicação, é considerado uma parcela, ou seja, um pacote separado. Não o registraremos como uma aplicação. Ele terá sua rota específica, rodando dentro do orquestrador junto com outros micro front-ends, mas não é um projeto com uma rota específica.

Um Parcel é utilizado dentro de outro micro front-end, ou seja, é um micro front-end rodando diretamente dentro de outro. Isso nos permite reutilizar código, semelhante ao conceito de um Web Component, reutilizando código de um framework em um ambiente agnóstico de framework, ou até mesmo em outro framework, como exemplificaremos aqui. Por isso, não registramos a aplicação da forma exibida no Visual Studio Code.

Configurando o importmap

Abriremos o arquivo index.ejs dentro do nosso orquestrador, na pasta src. Ao acessar esse arquivo, dentro do importmap, por volta da linha 48, precisaremos cadastrar o nosso Parcel. O importmap está configurado para rodar a aplicação e indicar ao orquestrador que essa aplicação faz parte do conjunto de micro front-ends da mesma arquitetura.

Duplicaremos a última linha, "@home-hub/react-login": "//localhost:8502/home-hub-react-login.js", e a encerraremos com uma vírgula, devido à semântica de objeto. Na duplicata, onde está home-hub/react-login, substituiremos por home-hub/react-parcel. Ao final desta linha, onde está react-login.js, colocaremos react-parcel.js. Por enquanto, não mudaremos a porta que está rodando esse projeto, faremos isso em breve.

<script type="systemjs-importmap">
    {
      "imports": {
        "@home-hub/root-config": "//localhost:9000/home-hub-root-config.js",
        "@home-hub/react-navbar": "//localhost:8500/home-hub-react-navbar.js",
        "@home-hub/react-dashboard": "//localhost:8501/home-hub-react-dashboard.js",
        "@home-hub/react-login": "//localhost:8502/home-hub-react-login.js",
        "@home-hub/react-parcel": "//localhost:8502/home-hub-react-parcel.js"
      }

Vamos salvar esse arquivo, lembrando que precisaremos voltar nele mais tarde.

Configurando o react-parcel

Na sequência, faremos algumas configurações dentro do nosso react-parcel. No vídeo anterior, fizemos a instalação e uma pré-configuração, onde foi necessário entrar na pasta e instalar manualmente as dependências devido a um erro no Babel. Então, entramos na pasta do react-parcel e rodamos o comando npm install, conforme o gerenciador de pacotes escolhido durante a instalação.

Agora, começaremos removendo alguns arquivos. Dentro da pasta react-parcel, removeremos primeiro o arquivo .eslintrc devido a conflitos entre a configuração local e as configurações pré-determinadas do Single SPA. Por enquanto, manteremos o jest.congif.js, mesmo que não utilizemos testes neste curso. Dentro da pasta src, removeremos o arquivo root.component.test.tsx.

Renomeando e Modificando o root.component.tsx

No arquivo root.component.tsx, para não confundir com o conceito de Parcel e de componente que temos nos outros micro front-ends React, que são do tipo application, renomearemos na linha 1, onde está export default function Root, para Parcel. Na linha 2, onde está {props.name} is mounted, colocaremos um Hello World!. Isso é uma prática comum, e se você já acompanhou algum curso na plataforma da Alura, sabe que é importante ter um "Hello World!" na tela para garantir que tudo está funcionando corretamente.

export default function Parcel(props) { 
    return <section>Hello World!</section>;
}

Salvaremos esse arquivo e o renomearemos de root.component.tsx para parcel.component.tsx.

Ajustando o Arquivo home-hub-react-parcel.tsx

Agora, abriremos o arquivo home-hub-react-parcel.tsx. Dentro desse arquivo, por volta da linha 4, onde estamos importando o Root do "./parcel.component", alteraremos para import Parcel from "./parcel.component"'.

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import Parcel from "./parcel.component";

Em seguida, por volta da linha 9, faremos a substituição correspondente de rootComponent: Root para rootComponent: Parcel:

rootComponent: Parcel

Assim, garantimos que, ao utilizar esse componente ou referenciá-lo, ele estará claramente diferenciado das outras aplicações de micro front-end que temos em React. É importante manter essa diferenciação, pois em um projeto que escala, com vários micro front-ends em React, pode ser difícil distinguir entre uma aplicação e um Parcel apenas olhando o arquivo de configuração. Embora seja fácil detectar isso no orquestrador, com tantas pastas e arquivos, podemos nos perder. Essa é uma estilização que gostamos de fazer, mas você pode optar por outra abordagem, pois não interfere na execução, apenas facilita o entendimento.

Salvaremos esse arquivo e, por enquanto, nossa configuração inicial estará concluída.

Ajustando a Porta no importmap

Agora, vamos consultar o arquivo index.ejs, que está configurado para a porta 8502. Verificaremos se há mais alguma porta sendo utilizada nesse arquivo. Temos a porta 8080 no react-utils, responsável pelo nosso micro front-end utilitário. Na linha 55, deixaremos a porta do localhost como 8503.

<script type="systemjs-importmap">
    {
      "imports": {
        "@home-hub/root-config": "//localhost:9000/home-hub-root-config.js",
        "@home-hub/react-navbar": "//localhost:8500/home-hub-react-navbar.js",
        "@home-hub/react-dashboard": "//localhost:8501/home-hub-react-dashboard.js",
        "@home-hub/react-login": "//localhost:8502/home-hub-react-login.js",
        "@home-hub/react-parcel": "//localhost:8503/home-hub-react-parcel.js"
      }

Próximos passos

Vamos rodar todo o projeto na sequência, junto com o orquestrador e os outros micro front-ends, para ver o "Hello World!" e continuar com nossos estudos sobre o Parcel. Até já!

Sobre o curso Single-SPA: integrando micro-frontends com Parcels

O curso Single-SPA: integrando micro-frontends com Parcels possui 119 minutos de vídeos, em um total de 38 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:

• Criando um Parcel
• Aprofundando em Parcels
• Estilizando o Parcel
• Refatorando notificações na aplicação
• Finalizando o projeto