npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Define remotes here, e.g., 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Add other exposed modules here
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Widget Remoto
  
Este é um widget da Aplicação Remota (RemoteApp).
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Aplicação Anfitriã
  
Esta é a aplicação anfitriã.
  {isWidgetLoaded ? (
   Carregando Widget...
}>
   
   
  ) : (
   
Carregando...
  )}
  

Explicação:

• React.lazy(() => import('RemoteApp/Widget')): Isso importa dinamicamente o módulo Widget da RemoteApp. O nome RemoteApp corresponde ao nome definido na seção remotes da configuração Webpack do anfitrião. Widget corresponde ao nome do módulo definido na seção exposes da configuração Webpack da aplicação remota.
• React.Suspense: É usado para lidar com o carregamento assíncrono do módulo remoto. A prop fallback especifica um componente a ser renderizado enquanto o módulo está carregando.

6. Execute as Aplicações:

Inicie tanto a aplicação anfitriã quanto a remota usando npm start (ou seu método preferido). Certifique-se de que a aplicação remota esteja rodando *antes* da aplicação anfitriã.

Agora você deve ver o widget remoto renderizado dentro da aplicação anfitriã.

Técnicas Avançadas de Module Federation

Além da configuração básica, o Module Federation oferece várias técnicas avançadas para construir arquiteturas de micro-frontend sofisticadas.

1. Gerenciamento e Compartilhamento de Versão:

Lidar com dependências compartilhadas de forma eficaz é crucial para manter a estabilidade e evitar conflitos. O Module Federation fornece mecanismos para especificar intervalos de versão e instâncias singleton de módulos compartilhados. Usar a propriedade shared na configuração do Webpack permite controlar como os módulos compartilhados são carregados e gerenciados.

Exemplo:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: Garante que apenas uma instância do módulo seja carregada, evitando duplicação e reduzindo o tamanho do pacote. Isso é especialmente importante para bibliotecas como React e ReactDOM.
• requiredVersion: Especifica o intervalo de versão que a aplicação requer. O Webpack tentará carregar uma versão compatível do módulo.
• eager: true: Carrega o módulo imediatamente, em vez de preguiçosamente (lazily). Isso pode melhorar o desempenho em alguns casos, mas também pode aumentar o tamanho inicial do pacote.

2. Module Federation Dinâmico:

Em vez de codificar as URLs das aplicações remotas, você pode carregá-las dinamicamente de um arquivo de configuração ou de um endpoint de API. Isso permite que você atualize a arquitetura de micro-frontend sem reimplantar a aplicação anfitriã.

Exemplo:

Crie um arquivo de configuração (por exemplo, remote-config.json) que contenha as URLs das aplicações remotas:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

Na aplicação anfitriã, busque o arquivo de configuração e crie dinamicamente o objeto remotes:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... other configurations
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Error reading remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Error parsing remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

Nota Importante: Considere usar um método mais robusto para buscar a configuração remota em um ambiente de produção, como um endpoint de API ou um serviço de configuração dedicado. O exemplo acima usa fs.readFile por simplicidade, mas geralmente não é adequado para implantações de produção.

3. Estratégias de Carregamento Personalizadas:

O Module Federation permite que você personalize como os módulos remotos são carregados. Você pode implementar estratégias de carregamento personalizadas para otimizar o desempenho ou lidar com cenários específicos, como carregar módulos de uma CDN ou usar um service worker.

O Webpack expõe ganchos (hooks) que permitem interceptar e modificar o processo de carregamento do módulo. Isso permite um controle refinado sobre como os módulos remotos são buscados e inicializados.

4. Lidando com CSS e Estilos:

Compartilhar CSS e estilos entre micro-frontends pode ser complicado. O Module Federation suporta várias abordagens para lidar com estilos, incluindo:

• CSS Modules: Use CSS Modules para encapsular estilos dentro de cada micro-frontend, prevenindo conflitos e garantindo consistência.
• Styled Components: Utilize styled-components ou outras bibliotecas CSS-in-JS para gerenciar estilos dentro dos próprios componentes.
• Estilos Globais: Carregue estilos globais de uma biblioteca compartilhada ou CDN. Tenha cuidado com essa abordagem, pois pode levar a conflitos se os estilos não tiverem namespaces adequados.

Exemplo usando CSS Modules:

Configure o Webpack para usar CSS Modules:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... other rules
],
}

            

              
                Copy
              
            
          

Importe CSS Modules em seus componentes:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Widget Remoto
  
Este é um widget da Aplicação Remota (RemoteApp).
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. Comunicação Entre Micro-Frontends:

Micro-frontends frequentemente precisam se comunicar uns com os outros para trocar dados ou disparar ações. Existem várias maneiras de conseguir isso:

• Eventos Compartilhados: Use um barramento de eventos global (event bus) para publicar e se inscrever em eventos. Isso permite que os micro-frontends se comuniquem de forma assíncrona sem dependências diretas.
• Eventos Personalizados (Custom Events): Utilize eventos DOM personalizados para comunicação entre micro-frontends na mesma página.
• Gerenciamento de Estado Compartilhado: Empregue uma biblioteca de gerenciamento de estado compartilhada (por exemplo, Redux, Zustand) para centralizar o estado e facilitar o compartilhamento de dados.
• Importações Diretas de Módulos: Se os micro-frontends estiverem fortemente acoplados, você pode importar módulos diretamente uns dos outros usando o Module Federation. No entanto, essa abordagem deve ser usada com moderação para evitar a criação de dependências que minem os benefícios dos micro-frontends.
• APIs e Serviços: Micro-frontends podem se comunicar entre si através de APIs e serviços, permitindo um acoplamento fraco e maior flexibilidade. Isso é particularmente útil quando os micro-frontends são implantados em domínios diferentes ou têm requisitos de segurança distintos.

Benefícios de Usar o Module Federation para Micro-Frontends

• Escalabilidade Aprimorada: Micro-frontends podem ser escalados independentemente, permitindo que você aloque recursos onde são mais necessários.
• Manutenibilidade Aumentada: Bases de código menores são mais fáceis de entender e manter, reduzindo o risco de bugs e melhorando a produtividade do desenvolvedor.
• Ciclos de Implantação Mais Rápidos: Micro-frontends podem ser implantados independentemente, permitindo ciclos de iteração mais rápidos e liberação mais ágil de novas funcionalidades.
• Diversidade Tecnológica: As equipes podem escolher as tecnologias e frameworks que melhor atendem às suas necessidades, fomentando a inovação e permitindo o uso de habilidades especializadas.
• Autonomia da Equipe Aprimorada: Cada micro-frontend é de propriedade de uma equipe dedicada, promovendo a apropriação e a responsabilidade.
• Integração Simplificada (Onboarding): Novos desenvolvedores podem se familiarizar rapidamente com bases de código menores e mais gerenciáveis.

Desafios do Uso do Module Federation

• Complexidade Aumentada: Arquiteturas de micro-frontend podem ser mais complexas do que as arquiteturas monolíticas tradicionais, exigindo planejamento e coordenação cuidadosos.
• Gerenciamento de Dependências Compartilhadas: Gerenciar dependências compartilhadas pode ser desafiador, especialmente quando diferentes micro-frontends usam versões diferentes da mesma biblioteca.
• Sobrecarga de Comunicação: A comunicação entre micro-frontends pode introduzir sobrecarga e latência.
• Testes de Integração: Testar a integração de micro-frontends pode ser mais complexo do que testar uma aplicação monolítica.
• Sobrecarga na Configuração Inicial: Configurar o Module Federation e a infraestrutura inicial pode exigir um esforço significativo.

Exemplos do Mundo Real e Casos de Uso

O Module Federation está sendo usado por um número crescente de empresas para construir aplicações web grandes e complexas. Aqui estão alguns exemplos do mundo real e casos de uso:

• Plataformas de E-commerce: Grandes plataformas de e-commerce frequentemente usam micro-frontends para gerenciar diferentes partes do site, como o catálogo de produtos, carrinho de compras e processo de checkout. Por exemplo, um varejista alemão pode usar um micro-frontend separado para exibir produtos em alemão, enquanto um varejista francês usa um micro-frontend diferente para produtos em francês, ambos integrados em uma única aplicação anfitriã.
• Instituições Financeiras: Bancos e instituições financeiras usam micro-frontends para construir aplicações bancárias complexas, como portais de online banking, plataformas de investimento e sistemas de negociação. Um banco global pode ter equipes em diferentes países desenvolvendo micro-frontends para diferentes regiões, cada um adaptado às regulamentações locais e preferências dos clientes.
• Sistemas de Gerenciamento de Conteúdo (CMS): Plataformas de CMS podem usar micro-frontends para permitir que os usuários personalizem a aparência e a funcionalidade de seus sites. Por exemplo, uma empresa canadense que fornece serviços de CMS pode permitir que os usuários adicionem ou removam diferentes micro-frontends (widgets) em seu site para personalizar sua funcionalidade.
• Dashboards e Plataformas de Análise: Micro-frontends são bem adequados para construir dashboards e plataformas de análise, onde diferentes equipes podem contribuir com diferentes widgets e visualizações.
• Aplicações de Saúde: Provedores de saúde usam micro-frontends para construir portais de pacientes, sistemas de prontuário eletrônico (EHR) e plataformas de telemedicina.

Melhores Práticas para Implementar o Module Federation

Para garantir o sucesso da sua implementação do Module Federation, siga estas melhores práticas:

• Planeje com Cuidado: Antes de começar, planeje cuidadosamente sua arquitetura de micro-frontend e defina limites claros entre as diferentes aplicações.
• Estabeleça Canais de Comunicação Claros: Estabeleça canais de comunicação claros entre as equipes responsáveis pelos diferentes micro-frontends.
• Automatize a Implantação: Automatize o processo de implantação para garantir que os micro-frontends possam ser implantados de forma rápida e confiável.
• Monitore o Desempenho: Monitore o desempenho da sua arquitetura de micro-frontend para identificar e resolver quaisquer gargalos.
• Implemente um Tratamento de Erros Robusto: Implemente um tratamento de erros robusto para prevenir falhas em cascata e garantir que a aplicação permaneça resiliente.
• Use um Estilo de Código Consistente: Imponha um estilo de código consistente em todos os micro-frontends para melhorar a manutenibilidade.
• Documente Tudo: Documente sua arquitetura, dependências e protocolos de comunicação para garantir que o sistema seja bem compreendido e sustentável.
• Considere as Implicações de Segurança: Considere cuidadosamente as implicações de segurança da sua arquitetura de micro-frontend e implemente medidas de segurança apropriadas. Garanta a adesão às regulamentações globais de privacidade de dados como GDPR e CCPA.

Conclusão

O JavaScript Module Federation com Webpack 5 fornece uma maneira poderosa e flexível de construir arquiteturas de micro-frontend. Ao dividir grandes aplicações em unidades menores e implantáveis de forma independente, você pode melhorar a escalabilidade, a manutenibilidade e a autonomia da equipe. Embora existam desafios associados à implementação de micro-frontends, os benefícios muitas vezes superam os custos, especialmente para aplicações web complexas. Seguindo as melhores práticas descritas neste guia, você pode aproveitar com sucesso o Module Federation para construir arquiteturas de micro-frontend robustas e escaláveis que atendam às necessidades da sua organização e dos usuários em todo o mundo.