Curso de Arquitectura de Microfrontends en React hasta 100% Bonificable a través de FUNDAE
Tu bonificación paso a paso
Forma a tu equipo sin costes mediante la bonificación estatal. Este programa de Arquitectura de Microfrontends en Reactpara empresas es subvencionable hasta el 100%.
Potencia las habilidades de edición y automatización de tus profesionales.
Accede a una formación avanzada en Arquitectura de Microfrontends en React práctica y orientada a resultados.
Prepara a tu equipo para los retos documentales del entorno laboral actual.
Gestionamos gratis tu bonificación de este curso corporativo de Arquitectura de Microfrontends en React ante FUNDAE.
Grandes plataformas como Amazon y Spotify confían en Microfrontends en React para maximizar su rendimiento
Acelera tu equipo con Arquitectura de Microfrontends en React A Medida mejora calidad, agiliza despliegues, bonificable por FUNDAE. Diseñamos el plan formativo.
Reduce el tiempo de desarrollo y lanzamiento de nuevas características en tu empresa mediante la implementación efectiva de Microfrontends, lo que permite a los equipos trabajar de forma autónoma y eficiente.
1
Mejora la escalabilidad de tus aplicaciones,
Personaliza el temario al 100% para tu equipo
Diseñamos una formación a medida utilizando los documentos y flujos de trabajo reales de tu empresa.
Nueva Plataforma de E-learningFormación en directo con plataforma de apoyo para reforzar el aprendizaje
Acceso a las grabaciones
Los alumnos podrán revisar las sesiones grabadas para repasar conceptos clave, recuperar explicaciones concretas o reforzar aquellos contenidos que necesiten después de la clase en directo.
Recursos formativos
Materiales, sesiones grabadas y documentación de apoyo quedan centralizados en la plataforma para que el equipo pueda consultarlos durante y después de la formación.
Confirmación de asistencia
La plataforma permite registrar y confirmar la asistencia de los participantes, facilitando el seguimiento de la formación y la gestión documental necesaria para la bonificación FUNDAE.
Programa formativo
Temario del curso
Encuentra todo el temario del curso aquí.
Temario
¿Qué es un Microfrontend y por qué usarlo?
Diferencias con SPA monolíticas
Beneficios y retos principales
Casos de uso reales en empresas
Patrones de integración técnica
Revisión de enfoques: build-time, runtime, iframe, web components
Microfrontends vs componentes compartidos
Comunicación y sincronización entre módulos
Reglas de diseño para microfrontends exitosos
Práctica: análisis de una arquitectura real basada en microfrontends
¿Qué es un Microfrontend y por qué usarlo?
Diferencias con SPA monolíticas
Beneficios y retos principales
Casos de uso reales en empresas
Patrones de integración técnica
Revisión de enfoques: build-time, runtime, iframe, web components
Microfrontends vs componentes compartidos
Comunicación y sincronización entre módulos
Reglas de diseño para microfrontends exitosos
Práctica: análisis de una arquitectura real basada en microfrontends
Revisión de enfoques: build-time, runtime, iframe, web components
Microfrontends vs componentes compartidos
Comunicación y sincronización entre módulos
Reglas de diseño para microfrontends exitosos
Práctica: análisis de una arquitectura real basada en microfrontends
Tema 2: Principios de diseño y separación por dominio
Separación por verticales funcionales
Fractura según equipos, flujo o contexto
Diseño de bounded contexts visuales
Identificación de puntos de acoplamiento
Routing distribuido o centralizado
Jerarquía de responsabilidad entre shells y remotes
Autonomía vs consistencia visual
Catálogo de UI compartido vs duplicación controlada
Control de estilo y naming para evitar conflictos
Práctica: diseño modular de una app e-commerce multiequipo
Tema 3: Creación del Shell Host en React
¿Qué es un Shell y qué debe contener?
Renderizado principal y layout general
Separación del Router vs Microfrontends
Tipos de integración: remota, embed, iframe
Base de navegación y breadcrumbs
Control de login y autenticación en Shell
Paso de props y eventos a remotes
Integración de librerías compartidas globales
Gestión del estado general
Práctica: creación de Shell base con React Router y layout compartido
Tema 4: Implementación con Module Federation (Webpack 5)
Introducción a Module Federation
`ModuleFederationPlugin`: configuración de host y remotes
Tipos de exposición: componentes, hooks, utilidades
`shared` entre microfrontends: React, ReactDOM, etc.
Carga dinámica de código (`loadRemoteModule`)
Aislamiento de dependencias por versión
Comunicación entre MFEs mediante props
Sincronización de rutas y estados
Resolución de errores comunes de integración
Práctica: integración de 3 microfrontends con Webpack MF
Tema 5: Alternativas a Module Federation: Web Components, iframe y más
Integración mediante Web Components
Cómo usar Shadow DOM para aislar estilos
Iframes controlados con eventos custom
Carga de microapps desde CDN
Inclusión de microapps en SSR o Next.js
HTML `<script type="module">` para import remoto
Limitaciones de comunicación entre sandboxes
Registro de componentes globales
Estrategias de fallback y desconexión
Práctica: integración de un microfrontend por Web Component
Tema 6: Comunicación entre microfrontends
Tipos de comunicación: global, directa, eventos
EventBus, Pub/Sub, CustomEvents
Contexto compartido o descentralizado
Librerías: RxJS, EventEmitter3, mitt
Comunicación unidireccional vs bidireccional
Cross-window messaging (`postMessage`)
Sincronización de rutas entre shells y MFEs
Autenticación y paso de tokens
Gestión de errores y estados compartidos
Práctica: sistema de eventos para interacción entre microfrontends
Tema 7: Gestión del estado compartido y aislamiento
¿Debemos compartir estado global?
Context API, Redux, Zustand entre microfrontends
State lifting o replicación deliberada
Centralización de estado en el Shell
Persistencia con localStorage o sessionStorage
BroadcastChannel API
Compartición de contexto autenticado
Compatibilidad entre versiones de librerías de estado
Renderizado reactivo vs polling
Práctica: compartición de contexto de usuario entre MFEs
Tema 8: Routing distribuido y navegación
Enrutamiento controlado desde el Shell
React Router DOM y sincronización de URLs
`MemoryRouter` vs `BrowserRouter` por microfrontend
Routes hijack y fallback visual
Reenvío y sincronización de navegación
Control de scroll y anchor inter-MFE
Hash routing como solución técnica
Historias compartidas por servicio central
Actualización del título y metadatos
Práctica: sincronización de rutas entre 2 microfrontends con React Router
Tema 9: Carga dinámica y fallback
Suspense + lazy para carga bajo demanda
Loading states inteligentes
Evitar carga duplicada de librerías
Errores en la carga remota: control de fallback
Gestión del retry automático
Precarga anticipada de microfrontends críticos
División de bundles y chunks por dominio
Control de prioridades y estrategias
Análisis de bundle size individual
Práctica: carga dinámica segura con fallback por error 404
Tema 10: Monorepo vs repos independientes
¿Cuándo elegir monorepo?
Herramientas: Nx, Turborepo, Lerna
Monorepos con PNPM workspaces o Yarn
Repos separados con Git submodules o GitHub Packages
Problemas de CI/CD por acoplamiento
Versionado independiente con semver
Reutilización de código entre módulos
Scope de dependencias por microapp
Limitación de acceso a rutas compartidas
Práctica: configuración de monorepo híbrido para microfrontends
Tema 11: Autenticación y seguridad entre MFEs
Autenticación centralizada desde Shell
JWT, OAuth2 y almacenamiento local
Renovación de tokens y expiración
Seguridad en comunicación entre apps
Login unificado y logout sincronizado
Control de acceso por microfrontend
Protección contra XSS entre dominios
CORS y headers de seguridad
Seguridad con subdominios
Práctica: login centralizado con paso de JWT entre MFEs
Tema 12: Testing y validación de Microfrontends
Testing unitario por microfrontend
Testing E2E con Cypress/Playwright
Mocking de contexto y eventos globales
Test de integración del Shell
Visual Regression Testing entre versiones
Validación de rutas, errores y estado
Pruebas en dispositivos y navegadores
Integración de testing en CI/CD
Estrategias de rollback
Práctica: test de integración entre Shell y 2 MFEs
Tema 13: Observabilidad, logging y métricas distribuidas
Logging centralizado por microfrontend
Correlación de errores y trazas
Log structured y compatibilidad con Sentry/LogRocket
Recolección de métricas con Web Vitals
Trazas distribuidas entre MFEs
Instrumentación con OpenTelemetry
Dashboards por microfrontend
Alertas por error rate o tiempo de carga
Visualización en Grafana/Datadog
Práctica: trazabilidad de errores entre Shell y microfrontend externo
Tema 14: CI/CD y despliegue independiente
Pipelines independientes por microfrontend
Despliegue por entorno (QA, UAT, prod)
CDN, S3, Vercel o Azure Static Web Apps
Versionado con cache busting
Registro de microfrontends en tiempo real
Rollback automático por error
Sincronización de cambios en rutas
Monitoreo post-deploy
Coordinación con equipos DevOps
Práctica: despliegue de microfrontend aislado en entorno QA
Tema 15: Proyecto final: Plataforma escalable con 3 microfrontends
Diseño de arquitectura basada en dominio
Creación de Shell + layout común
Implementación de MFE de catálogo
Implementación de MFE de usuario
Comunicación y navegación entre MFEs
Autenticación unificada en el Shell
Carga dinámica + fallback inteligente
Observabilidad distribuida
Despliegue en Vercel o local con Docker
Documentación técnica + flujo CI/CD
Perfiles profesionales
Pensado para quienes deben dominar Arquitectura de Microfrontends en React en su día a día
Gerentes de TI
Encargados de implementar arquitecturas adaptables en aplicaciones corporativas.
Ingenieros de Software
Interesados en dominar la escalabilidad mediante microfrontends en grandes proyectos.
Arquitectos de Software
Buscan innovar en el diseño modular avanzado y mejorar la colaboración entre equipos.
Líderes de Equipos de Desarrolladores
Quieren adoptar nuevas formas de integración en proyectos React de gran tamaño.
Preguntas frecuentes
Resolvemos todas tus dudas sobre nuestra formación en Arquitectura de Microfrontends en React
Explora las respuestas a las preguntas que guian a nuestra comunidad. Aqui encontraras claridad sobre como funciona todo, desde el acceso hasta los detalles de los cursos. Si buscas respuestas, este es el lugar para comenzar.
Este curso proporciona conocimientos avanzados en arquitecturas de Microfrontends, esenciales para desarrollar aplicaciones web escalables, flexibles y mantenibles. Los participantes aprenderán a coordinar aplicaciones complejas de manera eficiente, mejorando la productividad y permitiendo una mejor gestión por equipos.
Sí, el curso es 100% bonificable a través de FUNDAE, lo que facilita a las empresas obtener apoyo financiero para cubrir el coste del curso. Adicionalmente, si gestionamos la bonificación, se aplica un cargo del 10% más IVA, también bonificable según el crédito anual de FUNDAE.
El curso se presenta mediante un Aula Virtual Personalizada, utilizando videoconferencias a través de Zoom. Esto ofrece a las empresas una formación adaptable y práctica, con acceso a las grabaciones para revisión posterior cuando sea necesario.
Los participantes desarrollarán habilidades en implementación de Microfrontends, integración con Module Federation, gestión del estado compartido, y manejo de la comunicación entre módulos. Además, aprenderán a adecuar el diseño de interfaces a equipos distribuidos y gestionar despliegues eficientes.
Puedes inscribirte en el curso completando el formulario de inscripción disponible en nuestro sitio web. Asegúrate de llenar toda la información requerida para facilitar el procesamiento de tu inscripción y activar la bonificación si corresponde.
Este curso proporciona conocimientos avanzados en arquitecturas de Microfrontends, esenciales para desarrollar aplicaciones web escalables, flexibles y mantenibles. Los participantes aprenderán a coordinar aplicaciones complejas de manera eficiente, mejorando la productividad y permitiendo una mejor gestión por equipos.
Sí, el curso es 100% bonificable a través de FUNDAE, lo que facilita a las empresas obtener apoyo financiero para cubrir el coste del curso. Adicionalmente, si gestionamos la bonificación, se aplica un cargo del 10% más IVA, también bonificable según el crédito anual de FUNDAE.
El curso se presenta mediante un Aula Virtual Personalizada, utilizando videoconferencias a través de Zoom. Esto ofrece a las empresas una formación adaptable y práctica, con acceso a las grabaciones para revisión posterior cuando sea necesario.
Los participantes desarrollarán habilidades en implementación de Microfrontends, integración con Module Federation, gestión del estado compartido, y manejo de la comunicación entre módulos. Además, aprenderán a adecuar el diseño de interfaces a equipos distribuidos y gestionar despliegues eficientes.
Puedes inscribirte en el curso completando el formulario de inscripción disponible en nuestro sitio web. Asegúrate de llenar toda la información requerida para facilitar el procesamiento de tu inscripción y activar la bonificación si corresponde.
Diseñemos hoy el curso que tu empresa necesita
Cuéntanos tus objetivos de negocio y prepararemos una propuesta formativa bonificable totalmente ad hoc
permitiendo una gestión más ágil y flexible de los recursos, lo cual es esencial para las empresas en crecimiento que buscan mantenerse competitivas en el mercado.
2
Optimiza la colaboración entre equipos distribuidos, facilitando el mantenimiento del código y permitiendo que cada equipo se enfoque en su dominio de especialidad, disminuyendo la dependencia y los cuellos de botella.
3
Aumenta la resiliencia y robustez de tu infraestructura tecnológica, garantizando una mínima interrupción del servicio y potenciando la experiencia del usuario final, con un diseño modular orientado al negocio.
Después de la formación en directo, los alumnos podrán acceder a ejercicios prácticos para aplicar lo trabajado en clase y consolidar el aprendizaje con actividades guiadas.
Acceso a las grabaciones
Los alumnos podrán revisar las sesiones grabadas para repasar conceptos clave, recuperar explicaciones concretas o reforzar aquellos contenidos que necesiten después de la clase en directo.
Recursos formativos
Materiales, sesiones grabadas y documentación de apoyo quedan centralizados en la plataforma para que el equipo pueda consultarlos durante y después de la formación.
Confirmación de asistencia
La plataforma permite registrar y confirmar la asistencia de los participantes, facilitando el seguimiento de la formación y la gestión documental necesaria para la bonificación FUNDAE.
Ejercicios prácticos
Después de la formación en directo, los alumnos podrán acceder a ejercicios prácticos para aplicar lo trabajado en clase y consolidar el aprendizaje con actividades guiadas.
Practica y mejora con nuestra plataforma
Una plataforma practica, con IA integrada y pensada para que mejores desarrollando. Se adapta a tu ritmo, te corrige al instante y te muestra tu progreso real.
Correccion magica
Feedback inteligente
Aprende de cada acierto y fallo con explicaciones claras
