Desenho de microfrontends com Single-spa

A lógica de negócios de um aplicativo da web está diretamente ligada às funcionalidades de back-end na estrutura de microsserviços. Isso permite ter times de desenvolvimento semi-independentes, já que no Frontend Development eles ainda são considerados monólitos, o que traz consigo pouca autonomia entre os times. Já imaginou ter um framework de desenvolvimento que permite que cada equipe cuide de uma funcionalidade do início ao fim, ou seja, desde a persistência dos dados até a interface do usuário?

A arquitetura de microfrontends é um conjunto de estratégias e boas práticas que vão permitir que você implemente cada funcionalidade da sua aplicação web de forma independente, tendo a liberdade de implementar e implantar aquela lógica de negócio sem afetar as demais, que estarão sendo trabalhadas por outras equipes. Existem vários ambientes para aplicar a arquitetura de microfrontend: neste artigo falarei sobre Single-SPA.

Single-SPA é um framework de desenvolvimento para criação de aplicações web baseadas na linguagem JavaScript, implantado em uma única interface. O objetivo do Single-SPA é ser agnóstico, ou seja, não importa qual biblioteca ou framework a equipe utiliza ao desenvolver a aplicação web: React, Angular, Angular.js ou Ember podem coexistir na mesma aplicação.

Convido você a revisar a documentação do Single-SPA.

Projeto com Single-SPA

Aqui você vai desenvolver uma interface web composta por tres microfrontends, além de uma barra de navegação que fará o gerenciamento dos demais microfrontends por meio de roteamento.

A estrutura de SPA único fornece um assistente de criação de spa único para gerar o código do aplicativo. Pode ser criar uma aplicação em React, Angular ou Vercel, além do projeto raiz que conterá todos os microfrontends.

Instalação com NPM

npm install --global create-single-spa

Criação do microfrontend da barra de navegação

Ao digitar o seguinte comando em seu terminal, você pode começar a configurar seu projeto:

create-single-spa

1) Inicie o comando create-single-spa para o microfrontend da barra de navegação com as seguintes configurações:

$ create-single-spa
? Directory for new project 
? Select type to generate single-spa application / parcel
? Which framework do you want to use? angular
? Project name (can use letters, numbers, dash or underscore) navbar
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

The package single-spa-angular@7.1.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
? Does your application use Angular routing? Yes
? What port should your project run on? 4201

2) É necessário modificar o arquivo app-routing.module.ts com o seguinte código, para o correto funcionamento do microfrontend:

import { APP_BASE_HREF } from "@angular/common";
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { EmptyRouteComponent } from "./empty-route/empty-route.component";

const routes: Routes = [{ path: "**", component: EmptyRouteComponent }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: APP_BASE_HREF, useValue: "/" }],
})
export class AppRoutingModule {}

3) Adicione o EmptyRouteComponent ao módulo (app.module.ts):

4. Como sugestão adicional, renomeie os arquivos a seguir para identificar cada microfrontend. Por exemplo, o microfrontend navbar será mf-navbar.

Resulta em um projeto Angular com algumas configurações para se comportar como um micro frontend. Mas não funcionará de forma autônoma, ou seja, ao executar ng-serve não será possível observá-lo, ele precisa do contêiner que se encarregará de exibi-lo no navegador da web.

Crie o contêiner de layout dos microfrontends

Existe um orquestrador que irá gerar a interface do container para todos os microfrontends. A estrutura de SPA único oferece um projeto raiz que gerenciará todos os microfrontends com base em diferentes condições, como rotas, armazenamento de sessão, cookies ou qualquer outro elemento DOM.

1. Inicie a CLI novamente com o comando create-single-spa
2. O assistente permite gerar o código do contêiner raiz com a seguinte configuração:

? Directory for new project .
? Select type to generate single-spa root config
? Which package manager do you want to use? npm
? Will this project use Typescript? Yes
? Would you like to use single-spa Layout Engine Yes
? Organization name (can use letters, numbers, dash or underscore) Example

Este projeto consiste principalmente em dois arquivos:

O primeiro é o arquivo de modelo JavaScript index.ejs, no qual o microfrontend pode ser registrado por meio de seu endereço IP:

O segundo arquivo é o microfrontend-layout.html onde ficará o layout da interface da aplicação web, dependendo do caminho para mostrar ou ocultar os microfrontends:

<single-spa-router>
  <route default>
    <nav>
      <application name="@Example/mf-navbar"></application>
    </nav>
    <main>
      <section class="content" style="display: flex; flex-direction: row">
        <route path="micro1">
          <application name="@Example/mf-one"></application>
        </route>
        <route path="micro2">
          <application name="@Example/mf-two"></application>
        </route>
      </section>
    </main>         
  </route>
</single-spa-router>

Execute todo o aplicativo

Como pode ser observado, cada microfrontend é implantado de forma independente. Ao fazê-lo localmente, ele o expõe em uma determinada porta, de acordo com sua configuração.

Dentro de cada projeto, execute:

npm run serve:single-spa:navbar

Cada projeto será hospedado em sua porta correspondente. Dessa forma, o contêiner raiz ou projeto acessará essas portas, o arquivo main.js e exibirá a interface do microfrontend.

Após cada projeto executado com sucesso, abra o navegador e acesse: http://localhost:9000/.

Conclusão

Agora você já sabe o básico de como fazer sua aplicação baseada na arquitetura de microfrontend. Você pode ver o código no repositório.

Por experiência própria, digo a vocês que essa arquitetura tem sido uma ótima ferramenta para toda a minha equipe de desenvolvimento. Com base no framework SCRUM, é possível pegar uma história de usuário e desenvolvê-la completamente (back-end e front-end) de forma independente.

O objetivo da utilização desse framework é a flexibilidade que a tecnologia apresenta para as equipes, pois podem utilizar seu framework preferido para desenvolver. No entanto, considere um sistema de design para compartilhar as melhores práticas, recursos e convenções entre as equipes.

Portanto, recomendo gerar uma biblioteca Angular que permita estender a funcionalidade. Em projetos extensos e escaláveis, será necessário o reaproveitamento de funcionalidades ou componentes. Um caso de uso, no qual trabalhei, é repetir formulários em vários microfrontends.

Convido você a revisar as boas práticas do princípio DRY e a metodologia de design Atomic Design.

Até logo!