Angular — Configurando e Executando aplicações micro-frontends com single-SPA
Olá pessoal como vocês estão?
Antes de iniciar nosso passo a passo de configuração e execução, gostaria de falar um pouco da motivação de se utilizar arquitetura com foco em micro-frontend.
Iremos discutir alguns conceitos e aspectos entre um frontend monolito e um frontend modular.
Então bora lá!
Antes de explicar o que é um micro-frontend vamos fazer uma simples comparação com o Monolito.
Micro-Frontend vs Monolito
Quando dizemos que um sistema é um Monolito, estamos dizendo que a aplicação segue uma arquitetura onde toda aplicação esta em uma única estrutura. Uma única aplicação trata todas as funcionalidades necessárias para um domínio, por exemplo, Sistema de Gestão de Logistica, lidando com clientes, fornecedores, depósitos, calculos de rotas, gestão de entregas, entre outras.
A aplicação Monolito é responsável por todas as camadas da solução, desde a camada de apresentação até a camada de acesso a dados.
Neste modelo de aplicação há uma grande dificuldade de escalabilidade devido ao seu alto acoplamento entre suas camadas e regras de negócios, prover manutenibilidade é muito difícil e fazer manutenção de melhoria e/ou corretiva e ainda conseguir garantir disponibilidade é um grande desafio.
Para resolver esses problemas precisamos conseguir desacoplar as responsabilidades entres os contextos em aplicações distintas, menores e independentes entre si, com responsabilidades claras e que possam se comunicar entre elas.
Pense no seguinte cenário, sua empresa trabalha utilizando a metodologia ágil e dividiu seu time de desenvolvimento em diversas squads com o intuíto de atender de forma especifica determinados domínio de negócio.
Nesse formato cada time desenvolve seu backend em serviços específicos (Microserviços) voltados para seu domínio, porém, precisam que essas novas funcionalidades sejam refletidas no portal da empresa.
Como o projeto de frontend é um monolito feito com algum framework javascript (angular, por exemplo), todos os times tem que atuar nesse projeto, imagine a confusão que é pra conseguir subir um simples commit sem quebrar o codigo do amiguinho que também está subindo uma nova feature ao mesmo tempo que você.
Conseguiu visualizar o cenário? Caótico neh?
Então, para resolver ou mesmo mitigar os problemas desse tipo de cenário, podemos criar aplicações com foco em Micro-Frontends.
O objetivo do micro-frontend é permitir que cada pedaço da aplicação seja independente. Quando digo independente, quero dizer, repositórios de codigo, pipelines, bateria de testes, deploy totalmente distintos, separados, gosto de dizer que a frase que define bem esse contexto é: “Cada um no seu quadrado” rsrs.
Há varios artigos na internet explicando o que é micro-frontend, queria dar uma pincelada sobre o tema, porém nosso foco aqui é entender e aprender os truques e macetes pra configurar sua aplicação angular a trabalhar com single-spa.
Pesquisei vários artigos na internet pra conseguir montar uma estrutura de micro-frontend com angular, porém a grande maioria dos artigos e vídeos que falam sobre o assunto, só tem exemplos utilizando React e Vue.
Pensando nisso, quero compartilhar com vocês o que descobri nessa jornada para poder criar e subir uma aplicação angular com single-spa apresentando um problema real, com cenários reais.
Preparados? Então vamos lá!.
Single-SPA
Há três tipos de projetos que podem ser criados com single-spa
- single-spa application / parcel
- in-browser utitliy module (styleguie, api cache, etc)
- single-spa root config
Caso queiram entender mais a fundo como single-spa funciona, clique aqui para ser direcionado a documentação oficial do single-spa.
Por algum motivo que desconheço, não consegui realizar essa configuração com o Angular 12, então iremos utilizar a versão 11 do angular, blz?
Mão na massa, galera!
Criando projeto single-spa
Execute o seguinte comando:
- npx create-single-spa
A principio iremos criar projeto root da nossa aplicação, este projeto terá responsabilidade de orquestrar todos os nossos outros micro-frontends.
Deveremos seguir os seguintes passos:
- Defina o diretório do projeto angular-single-spa-mfe-artigo
- Selecione o tipo do projeto, neste caso será o single-spa root config
- O tipo de gerenciador de pacotes que iremos utilizar será o npm
- Utilizaremos o Typescript
- Iremos utilizar o single-spa Layout Engine, no repositorio github do projeto terá uma explicação aprofundada sobre esse assunto, o link está disponível no final deste artigo.
- E iremos definir o nome da organização, neste exemplo será medium.
Após os passos acima será criado o projeto em alguns segundos, esperamos algo assim no prompt de comando.
Após a criação do projeto root, iremos criar uma aplicação angular do tipo single-spa application/parcel, essa aplicação irá simular uma aplicação responsável por autenticação e então iremos injetar ela no nosso root e começar ver a mágica acontecer, vamos lá!
Execute o seguinte comando:
- npx create-single-spa
Deveremos seguir os seguintes passos:
- Defina o diretório do projeto portal-angular-auth
- Selecione o tipo do projeto, neste caso será o single-spa application / parcel
- O framework a ser utilizado, selecione angular
- defina o nome do projeto portal-angular-auth
- sim para utlizar o stricter type e bundle budgets no projeto.
Isso permite realizar mais otimizações de tempo de construção e ajudar a entregar aplicativos mais rápidos com menos defeitos . - Iremos utlizar as rotas do angular
- e iremos trabalhar com CSS
- O CLI (Command Line Interface) irá pedir pra confirmar a utilização de Rotas, informe sim.
- E sim para utilizar BrowserAnimationsModule
Após criar o projeto angular com o single-spa é necessário instalar os seguintes pacotes:
- npm i -D @angular-builders/custom-webpack
- npm install -D webpack-config-single-spa webpack-merge
- npm i
- (É necessário reeinstalar os modulos para a aplicação pegar as referências da biblioteca single-spa.
Antes de tudo, abra o projeto portal-angular-auth que acabou de criar e no arquivo main.single-spa.ts e main.ts inclua a seguinte linha de código:
- import ‘zone.js/dist/zone’;
Por estarem em projeto diferentes, quando o Root injetar o projeto-angular-auth ele irá precisar identificar o timezone do projeto.
Navegue até o arquivo app.module.ts e inclua a seguinte linha de código:
- providers: [{ provide: APP_BASE_HREF, useValue: ‘/angular-auth’ }],
Essa linha de código é necessária para essa aplicação responder quando a rota /angular-auth for digitada na url do root.
O single-spa para o angular não suporta o live-reload no ambiente de desenvolvimento, então é necessário informar que o live-reload será falso, se esse comando não for configurado não será possível executar seus projetos localmante, no arquivo package.json altere o script start para o seguinte comando:
- ng serve — port 4201 — live-reload false
Execute o projeto portal-angular-auth
- npm start
Ao tentar acessar o endereço http://localhost:4201 , advinha …
Não irá apresentar nenhum tipo de informação, sacanagem neh? hehe.
Calma, que tem explicação.
Quando criamos o nosso projeto com o single-spa, ele não utiliza o builder padrão do angular.
Ele utiliza o seguinte builder: @angular-builders/custom-webpack:dev-server.
Por causa disso ele não irá executar como um projeto angular comum, se você acessar o endereço http://localhost:4201/main.js você verá a aplicação em si compilada da seguinte forma:
Vocês devem estar se perguntando, beleza Douglas ele gerou esse arquivo em javascript, como eu faço pra ver os componentes da tela?
Já iremos chegar lá jovem padawan, vamos seguir na nossa jornada que já iremos entender como as peças se encaixam.
Agora iremos executar o projeto root que criamos angular-single-spa-mfe-artigo
Execute o projeto angular-single-spa-mfe-artigo
- npm start
Ao acessar a rota http://localhost:9000 iremos visualizar a tela do single-spa root.
Até aqui ok, temos dois projeto executando simultâneamente. O root e o portal-angular-auth.
Agora iremos injetar o portal-angular-auth dentro do nosso projeto root angular-single-spa-mfe-artigo.
Seguem os passos:
É necessário importar o projeto portal-angular-auth no projeto root config no arquivo index.ejs
- <script type=”systemjs-importmap”> { “imports”: { “portal-angular-auth”: “//localhost:4201/main.js”, } } </script>
Conforme imagem abaixo:
Além disso, é necessário registrá-la no projeto root no arquivo medium-root-config.ts
- registerApplication({
name: “portal-angular-auth”,
app: () => System.import(“portal-angular-auth”),
activeWhen: (location) => location.pathname.startsWith(“/angular-auth”),
});
Dependendo da versão que estiver utilizando, terá outras configurações nesse arquivo, deixe exatamente como a imagem acima.
Após todas essa configuração, bora ver o resultado do nosso micro-frontend funcionando sendo orquestrado pelo nosso root.
Acesse o endereço http://localhost:9000/angular-auth.
Com isso temos nossa aplicação angular com single-spa configurada e rodando.
Anteriormente eu disse que iria mostrar um cenário real de utilização de microfrontends.
Para não deixar esse artigo muito extenso, eu vou apresentar abaixo um projeto onde eu aplico as configurações apresentadas acima em diversos projetos simultâneamente.
Sobre o Projeto Angular-Single-Spa-Mfe
Este projeto tem o objetivo de apresentar um cenário de corretora de investimentos, onde temos um portal com responsabilidade de gerenciar informações de Assessores, Gerenciar Informações de Clientes e Gerenciar Informações de Produtos.
Na execução do projeto utilizamos os três tipos de projeto oferecidos pelo singla-spa e irem detalhar quais projetos são de quais tipos, que seguem:
- single-spa application / parcel
- portal-angular-container (parcel)
- portal-angular-produtcs (parcel)
- portal-angular-advisor (application)
- portal-angular-customer (application)
- portal-angular-auth (application) - in-browser utitliy module (styleguide, api cache, etc)
- portal-utils (api cache)
- portal-styleguide (style guide) - single-spa root config
- portal-single-spa (root)
Arquitetura do projeto
Executando o Projeto
Para executar os projeto, é necessário entrar na pasta de cada um dos projetos e executar o comando npm start.
Abaixo iremos ver o prompt de todos os 8 projetos executando simultâneamente.
Depois que todos os projetos estiverem em execução acesse o endereço http://localhost:9001/angular-auth/auth/login vocês deveram ver a seguinte tela:
Após realizar o login com o usuario assessor e uma senha qualquer com mais de 6 caracteres voce irá ver a seguinte tela.
Na tela acima estamos vendo os seguintes projetos trabalhando em conjunto
- single-spa application / parcel
- portal-angular-container (parcel)
- portal-angular-produtcs (parcel)
- portal-angular-advisor (application)
- portal-angular-auth(application) - in-browser utitliy module (styleguide, api cache, etc)
- portal-utils (api cache)
- portal-styleguide (style guide) - single-spa root config
- portal-single-spa (root)
Ao clicar no menu cliente iremos visualizar a tela de clientes
Na tela acima estamos vendo os seguintes projetos trabalhando em conjunto
- single-spa application / parcel
- portal-angular-container (parcel)
- portal-angular-customer (application)
- portal-angular-auth(application) - in-browser utitliy module (styleguide, api cache, etc)
- portal-utils (api cache)
- portal-styleguide (style guide) - single-spa root config
- portal-single-spa (root)
Um detalhe muito importante, uma vez que seu projeto micro-frontend foi renderizado na tela, toda confiruação de rotas, por exemplo lazy loading irá funcionar como se fosse em um projeto comum do angular. Você poderá utilizar todos os recursos disponíveis no angular sem problema algum, blz.
Bom galera, era isso que eu queria dividir com vocês, vou deixar o github do projeto para vocês, fiquem a vontade pra fazer o download e utilizarem de estudo, beleza.
Para acessar o repositorio do projeto clique aqui e seja feliz hehe.
Deixe uma estrelinha no projeto no github e uma curtida aqui na página pra ajudar esse artigo a chegar em mais pessoas.
Espero que tenham curtido tanto quanto eu e estou aberto para critícas e sugestões, bora discutir mais sobre o assunto, coloca nos comentários suas experiências sobre esse tema e vamos aprender juntos.
Resumindo esse artigo, Micro-Frontend é o Presente.
Valeu galera, até a próxima =].
