M

MLOG

Português

Desbloqueie o poder dos micro-frontends com a Federação de Módulos JavaScript no Webpack 5. Aprenda a construir aplicações web escaláveis, sustentáveis e independentes.

Federação de Módulos JavaScript com Webpack 5: Um Guia Abrangente para Micro-frontends

No cenário em constante evolução do desenvolvimento web, construir aplicações grandes e complexas pode ser uma tarefa assustadora. As arquiteturas monolíticas tradicionais frequentemente levam a um aumento no tempo de desenvolvimento, gargalos na implantação e desafios na manutenção da qualidade do código. Os Micro-frontends surgiram como um poderoso padrão de arquitetura para enfrentar esses desafios, permitindo que as equipes construam e implantem partes independentes de uma aplicação web maior. Uma das tecnologias mais promissoras para implementar micro-frontends é a Federação de Módulos JavaScript, introduzida no Webpack 5.

O que são Micro-frontends?

Micro-frontends são um estilo de arquitetura onde uma aplicação de frontend é decomposta em unidades menores e independentes, que podem ser desenvolvidas, testadas e implantadas de forma autônoma por equipes diferentes. Cada micro-frontend é responsável por um domínio de negócio ou funcionalidade específica, e eles são compostos em tempo de execução para formar a interface de usuário completa.

Pense nisso como uma empresa: em vez de ter uma única equipe de desenvolvimento gigante, você tem várias equipes menores focadas em áreas específicas. Cada equipe pode trabalhar de forma independente, permitindo ciclos de desenvolvimento mais rápidos e manutenção mais fácil. Considere uma grande plataforma de e-commerce como a Amazon; equipes diferentes podem gerenciar o catálogo de produtos, o carrinho de compras, o processo de checkout e a gestão de contas de usuário. Todos estes poderiam ser micro-frontends independentes.

Benefícios dos Micro-frontends:

Desafios dos Micro-frontends:

O que é a Federação de Módulos JavaScript?

A Federação de Módulos JavaScript é um recurso do Webpack 5 que permite compartilhar código entre aplicações JavaScript compiladas separadamente em tempo de execução. Ela permite que você exponha partes de sua aplicação como "módulos" que podem ser consumidos por outras aplicações, sem a necessidade de publicar em um repositório central como o npm.

Pense na Federação de Módulos como uma forma de criar um ecossistema federado de aplicações, onde cada aplicação pode contribuir com sua própria funcionalidade e consumir funcionalidades de outras aplicações. Isso elimina a necessidade de dependências em tempo de compilação e permite implantações verdadeiramente independentes.

Por exemplo, uma equipe de sistema de design pode expor componentes de UI como módulos, e diferentes equipes de aplicação podem consumir esses componentes diretamente da aplicação do sistema de design, sem precisar instalá-los como pacotes npm. Quando a equipe do sistema de design atualiza os componentes, as mudanças são refletidas automaticamente em todas as aplicações consumidoras.

Conceitos Chave na Federação de Módulos:

Configurando a Federação de Módulos com Webpack 5: Um Guia Prático

Vamos percorrer um exemplo prático de configuração da Federação de Módulos com o Webpack 5. Criaremos duas aplicações simples: uma aplicação Host (Hospedeira) e uma aplicação Remote (Remota). A aplicação Remota irá expor um componente, e a aplicação Host irá consumi-lo.

1. Configuração do Projeto

Crie dois diretórios separados para suas aplicações: `host` e `remote`.

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. Configuração da Aplicação Remota

No diretório `remote`, crie os seguintes arquivos:

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Crie `public/index.html` com a estrutura HTML básica. O importante é `

`

3. Configuração da Aplicação Host

No diretório `host`, crie os seguintes arquivos:

  • `src/index.js`: Ponto de entrada para a aplicação.
  • `webpack.config.js`: Arquivo de configuração do Webpack.

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...
}>
); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Crie `public/index.html` com a estrutura HTML básica (semelhante à aplicação remota). O importante é `

`

4. Instalar o Babel

Em ambos os diretórios `host` e `remote`, instale as dependências do Babel:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. Executar as Aplicações

Em ambos os diretórios `host` e `remote`, adicione o seguinte script ao `package.json`:

```json "scripts": { "start": "webpack serve" } ```

Agora, inicie ambas as aplicações:

```bash cd remote npm start cd ../host npm start ```

Abra seu navegador e navegue para `http://localhost:3000`. Você deve ver a aplicação Host com o Componente Remoto renderizado dentro dela.

Explicação das Opções de Configuração Chave:

Técnicas Avançadas de Federação de Módulos

A Federação de Módulos oferece muitos recursos avançados que podem ajudá-lo a construir arquiteturas de micro-frontend ainda mais sofisticadas.

Remotos Dinâmicos

Em vez de codificar as URLs das aplicações remotas na configuração do Webpack, você pode carregá-las dinamicamente em tempo de execução. Isso permite que você atualize facilmente a localização das aplicações remotas sem ter que reconstruir a aplicação host.

Por exemplo, você poderia armazenar as URLs das aplicações remotas em um arquivo de configuração ou em um banco de dados e carregá-las dinamicamente usando JavaScript.

```javascript // Em webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Suponha que remoteUrl seja algo como 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // a chave da federação de módulos é que a app remota está // disponível usando o nome no remoto resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

Agora você pode carregar a aplicação host com um parâmetro de consulta `?remote=http://localhost:3001/remoteEntry.js`

Módulos Compartilhados Versionados

A Federação de Módulos pode lidar automaticamente com o versionamento e a desduplicação de módulos compartilhados para garantir que apenas uma versão compatível de cada módulo seja carregada. Isso é especialmente importante ao lidar com aplicações grandes e complexas que têm muitas dependências.

Você pode especificar o intervalo de versão de cada módulo compartilhado na configuração do Webpack.

```javascript // Em webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

Carregadores de Módulos Personalizados

A Federação de Módulos permite que você defina carregadores de módulos personalizados que podem ser usados para carregar módulos de diferentes fontes ou em diferentes formatos. Isso pode ser útil para carregar módulos de uma CDN ou de um registro de módulos personalizado.

Compartilhando Estado entre Micro-frontends

Um dos desafios das arquiteturas de micro-frontend é compartilhar o estado entre diferentes micro-frontends. Existem várias abordagens que você pode adotar para enfrentar este desafio:

Melhores Práticas para Implementar Micro-frontends com Federação de Módulos

Aqui estão algumas das melhores práticas a serem lembradas ao implementar micro-frontends com a Federação de Módulos:

Exemplos do Mundo Real de Federação de Módulos em Ação

Embora estudos de caso específicos sejam frequentemente confidenciais, aqui estão alguns cenários generalizados onde a Federação de Módulos pode ser incrivelmente útil:

Conclusão

A Federação de Módulos JavaScript no Webpack 5 fornece uma maneira poderosa e flexível de construir arquiteturas de micro-frontend. Ela permite que você compartilhe código entre aplicações JavaScript compiladas separadamente em tempo de execução, possibilitando implantações independentes, diversidade de tecnologia e autonomia aprimorada da equipe. Seguindo as melhores práticas descritas neste guia, você pode alavancar a Federação de Módulos para construir aplicações web escaláveis, sustentáveis e inovadoras.

O futuro do desenvolvimento de frontend está, sem dúvida, se inclinando para arquiteturas modulares e distribuídas. A Federação de Módulos fornece uma ferramenta crucial para construir esses sistemas modernos, permitindo que as equipes criem aplicações complexas com maior velocidade, flexibilidade e resiliência. À medida que a tecnologia amadurece, podemos esperar ver ainda mais casos de uso inovadores e melhores práticas emergirem.