Domina la arquitectura de micro-frontends para descomponer aplicaciones frontend en partes independientes. Aprende patrones de implementación, estrategias de integración y herramientas para escalar equipos y proyectos.
Diagrama de arquitectura de micro-frontends
Contenido del Artículo
Conceptos Básicos
Descomposición de frontend en aplicaciones independientes:
Independencia
Equipos autónomos por funcionalidad
Tecnologías múltiples
Vue, React, Angular en un mismo proyecto
Despliegues independientes
Actualizar partes sin afectar todo
// Ejemplo de integración básica
const loadApp = (name, container) => {
const script = document.createElement('script');
script.src = `/dist/${name}/app.js`;
script.onload = () => {
window[`render${name}`](container);
};
document.head.appendChild(script);
};
// Cargar diferentes micro-frontends
document.addEventListener('DOMContentLoaded', () => {
loadApp('Header', document.getElementById('header-container'));
loadApp('ProductList', document.getElementById('products-container'));
loadApp('Cart', document.getElementById('cart-container'));
});Patrones de Implementación
Enfoques para integrar micro-frontends:
| Estrategia | Herramientas | Complejidad |
|---|---|---|
| Build-time | NPM packages | Baja |
| Server-side | SSI, Edge Includes | Media |
| Client-side | Module Federation, Single SPA | Alta |
| Iframe | HTML estándar | Baja |
Module Federation (Webpack 5)
Compartir módulos entre aplicaciones independientes:
// Configuración remoto (app1/webpack.config.js)
new ModuleFederationPlugin({
name: 'app1',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button',
'./Header': './src/components/Header'
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true }
}
});
// Configuración host (host-app/webpack.config.js)
new ModuleFederationPlugin({
name: 'host',
remotes: {
app1: 'app1@http://localhost:3001/remoteEntry.js'
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true }
}
});
// Uso en host
const RemoteButton = React.lazy(() => import('app1/Button'));
function App() {
return (
<div>
<React.Suspense fallback="Cargando...">
<RemoteButton />
</React.Suspense>
</div>
);
}Retos y Soluciones
Gestión de desafíos comunes en micro-frontends:
Consistencia UI
Sistema de diseño compartido
Routing
Router maestro o micro-frontend routing
Comunicación
Custom events, Pub/Sub, Estado global
Performance
Lazy loading, Shared dependencies
// Comunicación entre micro-frontends
eventBus = {
events: {},
subscribe(event, callback) {
if (!this.events[event]) this.events[event] = [];
this.events[event].push(callback);
},
publish(event, data) {
if (this.events[event]) {
this.events[event].forEach(cb => cb(data));
}
}
};
// En componente de un MF
eventBus.publish('cart-updated', { items: 5 });
// En otro MF
eventBus.subscribe('cart-updated', data => {
console.log('Carrito actualizado:', data);
});