Patrón arquitectónico que extiende los microservicios al frontend, permitiendo que equipos independientes desarrollen y desplieguen partes de una aplicación web de forma autónoma.
Micro frontends extienden el concepto de microservicios al frontend. En lugar de un monolito frontend, la aplicación se compone de fragmentos independientes desarrollados por equipos autónomos, integrados en runtime o build time.
| Estrategia | Integración | Ejemplo |
|---|---|---|
| Build-time | npm packages | Monorepo con packages |
| Runtime (JS) | Module Federation | Webpack/Vite MF |
| Runtime (iframe) | iframes | Legacy integration |
| Server-side | SSI/ESI | Edge composition |
La técnica más popular: cada micro frontend expone módulos que otros pueden consumir en runtime, sin necesidad de rebuild.
Los micro-frontends aplican los principios de microservicios al frontend, permitiendo que equipos independientes desarrollen, desplieguen y escalen partes de la interfaz de forma autónoma. Son la solución cuando un monolito frontend se convierte en cuello de botella organizacional.
Biblioteca de JavaScript para construir interfaces de usuario mediante componentes declarativos y reutilizables, con un ecosistema que abarca desde SPAs hasta aplicaciones full-stack con Server Components.
Estrategia de organización de código donde múltiples proyectos coexisten en un único repositorio, compartiendo dependencias, configuración y herramientas de build.
Estilo arquitectónico que estructura una aplicación como colección de servicios pequeños, independientes y desplegables, cada uno con su propia lógica de negocio y datos.
Estándares web nativos para crear componentes reutilizables y encapsulados que funcionan en cualquier framework o sin framework.
Plantilla reutilizable para crear micro frontends con React, TypeScript, Tailwind CSS y Vite. Incluye sistema de diseno, testing y CI/CD.
Shell de micro frontends con sistema de diseno completo, 24 componentes, 666 tests y cumplimiento WCAG AA. Publicado en npm como @jonmatum/react-mfe-shell.
Aplicación de demostración interactiva para el sistema de diseno React MFE Shell con PWA, métricas automatizadas y showcase de componentes.
Patrones y bibliotecas para gestionar el estado de aplicaciones frontend de forma predecible, desde estado local de componentes hasta estado global compartido.
Patrón arquitectónico donde cada tipo de cliente tiene su propio backend dedicado que adapta las APIs de microservicios a las necesidades específicas de ese cliente.