Micro Front-end e Module Federation: Construindo Aplicações Extensíveis e Escaláveis

A arquitetura de micro front-end representa uma evolução natural para aplicações web complexas, trazendo os princípios de microserviços para o front-end. Essa abordagem permite dividir grandes sistemas em módulos independentes, desenvolvidos e implantados por equipes diferentes, sem comprometer a coesão da aplicação.

Uma das tecnologias centrais que torna isso possível é o Module Federation, recurso do Webpack 5 que permite compartilhar módulos JavaScript entre aplicações de forma dinâmica. Neste artigo, vamos explorar desde conceitos básicos até práticas avançadas, incluindo exemplos completos em Angular, rotas dinâmicas, integração com Web Components, segurança, monitoramento e tendências futuras.

Parte 1 – Introdução ao Micro Front-end

1.1 O que são Micro Front-ends

Micro front-ends (MFE) aplicam a filosofia de microserviços no front-end:

• Cada módulo é uma aplicação independente.
• Equipes podem trabalhar de forma isolada e implantar sem interferir no restante da aplicação.
• Integração via Module Federation ou Web Components.

Vantagens:

• Escalabilidade: aumenta a produtividade de equipes distribuídas.
• Deploy independente: novos módulos podem ser lançados sem impactar a aplicação principal.
• Extensibilidade: permite adição de funcionalidades como plugins ou dashboards.

1.2 Diferença para Aplicações Monolíticas

Parte 2 – O que é Module Federation

Module Federation é um recurso do Webpack 5 que possibilita:

• Compartilhar módulos entre diferentes aplicações.
• Carregar módulos dinamicamente.
• Atualizar partes da aplicação sem redeploy total.

2.1 Conceitos Principais

• Host Application: aplicação que consome módulos de outras aplicações.
• Remote Application: aplicação que expõe módulos que podem ser consumidos por outras aplicações.

Exemplo de consumo de módulo remoto:

import { loadRemoteModule } from '@angular-architects/module-federation';

loadRemoteModule({
  type: 'module',
  remoteEntry: 'http://localhost:4201/remoteEntry.js',
  exposedModule: './Component',
}).then(m => m.AppComponent);

Parte 3 – Implementando MFE com Angular

3.1 Preparando o Ambiente

Requisitos:

• Angular 18
• Node 20.17.0
• Bibliotecas: @angular-architects/module-federation, chart.js

3.2 Criando a Aplicação Host

ng new mfe-app-host
ng add @angular-architects/module-federation --project mfe-app-host --port 4200 --type host --skip-confirmation

Exemplo de HomeComponent:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  templateUrl: './home.component.html',
  styleUrl: './home.component.css',
})
export class HomeComponent {}

3.3 Configuração de Rotas

Exemplo de app.routes.ts:

import { Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/module-federation';
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  {
    path: 'dashboard-one',
    loadComponent: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './Component',
      }).then(m => m.AppComponent),
  },
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

Detalhes:

• loadRemoteModule() carrega o remote sob demanda.
• type: 'module' indica carregamento via ES Module.
• exposedModule define qual componente será consumido.

3.4 Configuração do Webpack

const { shareAll, withModuleFederationPlugin } = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  remotes: {
    mfeDashboardOne: "http://localhost:4201/remoteEntry.js",
  },
  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: "auto" }),
  },
});

• remotes: remotes federados disponíveis.
• shared: dependências compartilhadas, evitando duplicação.

Parte 4 – Criando Micro Front-ends Remotos

4.1 Dashboard One

ng new mfe-dashboard-one
ng add @angular-architects/module-federation --project mfe-dashboard-one --port 4201 --type remote --skip-confirmation
npm install chart.js

AppComponent com Chart.js:

import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js/auto';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  ngOnInit() { this.createBarChart(); }

  createBarChart() {
    new Chart('barChart', {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [{ label: 'Vendas', data: [12, 19, 3], backgroundColor: 'rgba(75,192,192,0.6)' }],
      },
    });
  }
}

4.2 Dashboard Two (Gráfico Pizza)

import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js/auto';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  ngOnInit() { this.createPieChart(); }

  createPieChart() {
    new Chart('pieChart', {
      type: 'pie',
      data: {
        labels: ['Vermelho', 'Azul', 'Amarelo'],
        datasets: [{ label: 'Cores', data: [300, 50, 100], backgroundColor: ['#f00','#00f','#ff0'] }],
      },
    });
  }
}

Parte 5 – Rotas Dinâmicas e Carregamento via API

• Crie routes.json no servidor que fornece remotes:

[
  {
    "path": "mfe-app-01",
    "type": "module",
    "remoteEntry": "http://localhost:3000/extensions/mfe-app-01/remoteEntry.js",
    "exposedModule":"./Component"
  }
]

• Serviço para carregar rotas dinamicamente:

@Injectable({ providedIn: 'root' })
export class RouteLoaderService {
  constructor(private http: HttpClient) {}

  loadRoutes(): Observable<Routes> {
    return this.http.get<any[]>('http://localhost:3000/routes.json').pipe(
      map(routes => routes.map(route => ({
        path: route.path,
        loadComponent: () =>
          loadRemoteModule({
            type: route.type,
            remoteEntry: route.remoteEntry,
            exposedModule: route.exposedModule,
          }).then(m => m.AppComponent),
      })))
    );
  }
}

Parte 6 – Futuro e Tendências

• Web Components: remotes compatíveis com qualquer framework.
• SSR federado: server-side rendering para remotes independentes.
• Edge computing: pré-renderização para reduzir latência global.
• AI-driven loading: carregamento de módulos baseado em perfil do usuário.

Parte 7 – Boas Práticas e Checklist Final

1. Isolamento de remotes
2. Shared dependencies e singleton
3. Lazy loading e otimização de performance
4. Monitoramento centralizado
5. Segurança: CORS, SRI, JWT
6. CI/CD independente por remote
7. Documentação detalhada

Conclusão

O uso de micro front-ends com Module Federation permite que aplicações complexas se tornem modulares, escaláveis e resilientes. Com as práticas corretas, pipelines eficientes e monitoramento adequado, equipes podem entregar novas funcionalidades de forma ágil e segura, mantendo consistência e performance.

Este guia consolidou conceitos, exemplos práticos, boas práticas, segurança, performance, rotas dinâmicas, tendências futuras e recursos avançados. Ele serve como referência definitiva para profissionais que desejam adotar arquiteturas modernas e escaláveis.

Club heritage and international football give every shirt its own connection to a place, era, and group of supporters. Selecting a Real Madrid football shirt can be a natural way to represent an enduring love of the game.