Micro-frontends

Micro-frontends permitem dividir grandes aplicações frontend em partes menores e independentes, facilitando escalabilidade e manutenção.

Module Federation

// webpack.config.js (Host)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: 'host',
            remotes: {
                mfHeader: 'header@http://localhost:3001/remoteEntry.js',
                mfFooter: 'footer@http://localhost:3002/remoteEntry.js',
            },
        }),
    ],
};

Usando Remote Components

// Host App
import React from 'react';
import Header from 'mfHeader/Header';
import Footer from 'mfFooter/Footer';

function App() {
    return (
        <div>
            <Header />
            <main>Conteúdo principal</main>
            <Footer />
        </div>
    );
}

Comunicação entre Apps

// Event Bus simples
class EventBus {
    constructor() {
        this.events = {};
    }
    
    on(event, callback) {
        this.events[event] = [...(this.events[event] || []), callback];
    }
    
    emit(event, data) {
        (this.events[event] || []).forEach(callback => callback(data));
    }
}

export const eventBus = new EventBus();