Compartilhe este conteúdo:

Qual tecnologia utilizar, quando utilizar e por que utilizar?

Introdução

Module Federation e Single SPA são duas abordagens populares para construir micro frontends.

Arquitetura e Funcionamento

Module Federation: É uma funcionalidade introduzida no Webpack 5 que permite que várias aplicações compartilhem código e dependências de maneira dinâmica em tempo de execução. A ideia principal é expor e consumir módulos de diferentes aplicações, tornando possível o compartilhamento de partes específicas, como componentes ou bibliotecas, sem precisar de um framework específico para gerenciamento de micro frontends.

Single SPA: É um framework específico para gerenciar várias aplicações JavaScript em uma única página. Ele ajuda a orquestrar o carregamento e descarregamento de diferentes aplicações dentro da mesma interface de usuário, permitindo que cada aplicação (ou microfrontend) seja independente e use frameworks diferentes (como Angular, React, Vue, etc.).

Objetivo Principal

Module Federation: Focado no compartilhamento de módulos e código entre múltiplas aplicações em tempo de execução. Ele é ideal para aplicações que precisam dividir grandes blocos de código em diferentes bundles e compartilhar pacotes comuns, como bibliotecas de UI, sem duplicação.

Single SPA: Focado na integração e coordenação de várias aplicações ou microfrontends em uma única interface. Ele lida com a navegação entre esses microfrontends e permite que diferentes frameworks convivam na mesma página.

Suporte a Diferentes Frameworks

Module Federation: É independente de frameworks. Embora seja comumente usado com frameworks que utilizam Webpack, como React, Vue, Angular, entre outros, contudo ele não se preocupa com a maneira como você organiza suas aplicações, desde que elas sejam bundladas com Webpack.

Single SPA: Foi criado especificamente para facilitar a integração de múltiplos frameworks (como React, Angular, Vue) dentro de uma única aplicação. Ele oferece adaptadores para diferentes frameworks e orquestra o carregamento e descarregamento dessas aplicações.

Carregamento Dinâmico

Module Federation: Permite o carregamento dinâmico de módulos de outras aplicações sem a necessidade de recarregar a página. Os módulos podem ser carregados sob demanda, economizando no tamanho do bundle inicial.

Single SPA: Também suporta carregamento dinâmico, contudo o foco está em gerenciar qual aplicação (ou microfrontend) está ativa no momento, com base na navegação ou no estado da aplicação.

Complexidade e Configuração

Module Federation: Requer configuração do Webpack para definir quais módulos serão expostos e quais serão consumidos de outras aplicações. Sua complexidade está na configuração do Webpack e na gestão do compartilhamento de dependências.

Single SPA: Requer a configuração inicial do framework Single SPA para gerenciar o roteamento e a comunicação entre as diferentes aplicações. Isso pode exigir um pouco mais de trabalho para configurar as rotas e a lógica de integração entre os microfrontends.

Escopo de Aplicação

Module Federation: Melhor para aplicações que precisam compartilhar código entre si, como bibliotecas ou componentes comuns. É útil em cenários de arquiteturas monolíticas distribuídas.

Single SPA: Melhor para aplicações com múltiplos microfrontends que precisam coexistir e interagir dentro da mesma interface de usuário, especialmente quando se trata de diferentes equipes usando diferentes tecnologias de front-end.

Comunicação entre Aplicações

Module Federation: A comunicação acontece através de importações diretas dos módulos, sendo necessário lidar com a lógica de compartilhamento de estado por outros meios (como um barramento de eventos ou serviços de comunicação global).

Single SPA: Provê mecanismos para comunicação entre os diferentes microfrontends e pode utilizar estratégias como o props ou um event bus global.

Casos de Uso

Module Federation: Compartilhamento eficiente de pacotes entre diferentes aplicações, evitando a duplicação de dependências e possibilitando a modularização de aplicações grandes.

Single SPA: Constrói uma aplicação de múltiplos microfrontends, possibilitando o uso de diferentes frameworks, onde cada microfrontend é autônomo.

Quando Usar Cada Um?

Module Federation: Se o seu foco é compartilhar código entre aplicações, otimizar bundles e reduzir duplicação de bibliotecas.

Single SPA: Se você deseja criar uma aplicação com múltiplos microfrontends ou com múltiplos frameworks trabalhando juntos em uma única página.

Ambas as abordagens podem ser combinadas dependendo do caso de uso. Por exemplo, podemos utilizar o Single SPA para orquestrar os microfrontends e o Module Federation para compartilhar código entre eles.

Siga o passo a passo abaixo para criar seu primeiro app microfront-end utilizando ambas as técnologias em conjunto

Estrutura básica
Vamos dividir o projeto em:

Root-config (Single SPA): O app principal que irá carregar os microfrontends.
Vue Header App: O microfrontend em Vue que será o header.
Angular Main App: O microfrontend em Angular que será o “main”, que irá compartilhar módulos.
React Footer App: O microfrontend em React que será o footer.
Passo a passo para configuração

  1. Configurando o Single SPA (Root-config)
    Este será o app responsável por carregar os outros microfrontends.

Instale o CLI do Single SPA:

npx create-single-spa

Crie um novo projeto do tipo single-spa root config e siga as instruções do CLI para definir a estrutura. Isso criará a base do Single SPA que carregará os microfrontends.

No root-config (single-spa.config.js), registre as aplicações Vue, Angular e React. Semelhante ao padrão abaixo:

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@app/vue-header",
  app: () => System.import("@app/vue-header"),
  activeWhen: ["/"],
});

registerApplication({
  name: "@app/angular-main",
  app: () => System.import("@app/angular-main"),
  activeWhen: ["/"],
});

registerApplication({
  name: "@app/react-footer",
  app: () => System.import("@app/react-footer"),
  activeWhen: ["/"],
});

start();
  1. Criando o Vue Header App
    Crie um novo microfrontend usando o CLI do Single SPA, escolhendo Vue.js.
npx create-single-spa --module-type application --framework vue --package-manager npm

Configure seu Vue app para ser o header da aplicação. No componente App.vue, adicione o layout básico do header:

<template>
  <header>
    <h1>Client Management - Header</h1>
  </header>
</template>

<script>
export default {
  name: 'HeaderComponent',
};
</script>

<style>
header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}
</style>
  1. Criando o Angular Main App com Module Federation
    Crie um novo projeto Angular com suporte a Standalone Components e configure o Module Federation.
npx create-single-spa --module-type application --framework angular --package-manager npm
  1. Adicione a configuração de Module Federation no Angular:
  • Instale o Webpack 5 e as dependências do Module Federation no angular.json:
npm install @angular-architects/module-federation

No arquivo de configuração webpack.config.js, configure o Module Federation Plugin:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:4200/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "angular_main",
      filename: "remoteEntry.js",
      exposes: {
        "./ClientModule": "./src/app/client/client.module.ts",
      },
      shared: ["@angular/core", "@angular/common"],
    }),
  ],
};

Crie o módulo de gerenciamento de clientes no Angular que será compartilhado via Module Federation.

// client.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ClientComponent } from './client.component';

@NgModule({
  declarations: [ClientComponent],
  imports: [CommonModule],
  exports: [ClientComponent],
})
export class ClientModule {}

4. Criando o React Footer App

  1. Crie o projeto React como microfrontend:
npx create-single-spa --module-type application --framework react --package-manager npm

No componente App.js, adicione o layout básico do footer:

import React from 'react';

export default function Footer() {
  return (
    <footer style={{ backgroundColor: '#333', color: 'white', padding: '1rem', textAlign: 'center' }}>
      <p>Client Management - Footer</p>
    </footer>
  );
}

5. Executando os microfrontends

  • Inicie cada um dos microfrontends em suas portas locais (por exemplo, Angular em 4200, Vue em 8080, React em 3000).
  • O root-config irá orquestrar todos eles.

6. Testando a Aplicação

Ao acessar a aplicação (provavelmente na porta 9000, onde o Single SPA estará rodando), o header Vue, o main Angular, e o footer React serão carregados juntos, compondo o app de cadastro e gerenciamento de clientes.