Microfrontends Architecture

✅ Los desafíos de las aplicaciones monolíticas

📌 Cuándo y Por Qué Usar Microfrontends: Resolviendo la Complejidad en el Desarrollo de Software.

📌 Cuando una aplicación web se vuelve grande y monolítica, cada cambio que un equipo de desarrollo realiza requiere una gran cantidad de coordinación y puede causar problemas imprevistos. Mantener la aplicación se convierte en un desafío constante.

📌 Un equipo de desarrollo puede considerar la arquitectura de Microfrontends. Esta arquitectura tiene el potencial de transformar la aplicación en partes más pequeñas y manejables, cada una de las cuales puede ser desarrollada, probada e implementada de forma independiente.

📌 El proceso de cambio presenta desafíos y obstáculos. Sin embargo, a medida que el equipo resuelve problemas, la aplicación se vuelve más fuerte y más eficiente. Con la implementación de cada microfrontend, la aplicación se transforma de una gran aplicación monolítica a una serie de módulos más pequeños, más manejables y más eficientes.

📌 Logrando así que la aplicación sea un modelo de eficiencia y escalabilidad. El equipo ha logrado acelerar el tiempo de desarrollo, mejorar la calidad del código y aumentar su satisfacción, todo gracias a la arquitectura de Microfrontends.

📣 La arquitectura de Microfrontends puede ofrecer una transformación significativa. Si estás luchando con una aplicación web grande y monolítica, considera esta arquitectura. Podrías sorprenderte con la diferencia que pueden hacer.

✅ Implementando microfrontends: caso práctico

Presento un proyecto práctico de implementación de microfrontends: un sistema multilingüe desarrollado con Vite, React, Redux y i18next...

📌 Este proyecto incluye un host principal y dos proyectos remotos que muestran personajes de series o películas. Cada proyecto tiene independencia completa, con su propio sistema de estado con Redux y lógica aislada.

✅ Lo más importantes y destacados de este proyecto es:

⭐ Uso de Vite Module Federation para la integración de microfrontends: Esta es la característica principal que permite juntar múltiples aplicaciones frontend independientes.

⭐ Comunicación entre host y microfrontends con eventos: Implementa un sistema de eventos custom para compartir estado y reaccionar a cambios de forma desacoplada.

⭐ Independencia completa de cada microfrontend: Cada uno maneja su propio estado con Redux, internacionalización y recursos estáticos, facilitando la escalabilidad.

⭐ Carga bajo demanda de microfrontends: El host los integra cuando se necesitan, mejorando tiempos de carga.

⭐ Cambio global de idiomas sincronizado: Se actualiza en todo los frontends por medio de los eventos compartidos.

⭐ Consistencia visual con Styled Components y BEM: Las convenciones de estilos ayudan a la cohesión.

✅ La estructura que use para los componentes es:

📁 components
└── 📁 Component
    ├── 📁 lang
    │       🌐 en.json
    │       🌐 es.json
    │       📄 index.js
    │
    ├── 📁 styles
    │       🎨 componentStyles.js
    │
    └──   📄 index.js
          📄 Component.jsx

✅ ¡Echen un vistazo a los repositorios en GitHub!

➡️ Proyecto Host:
https://github.com/dennysjmarquez/MultiLingual-MicroFrontends-vite-react-redux-Host

➡️ Proyecto Remoto 1
https://github.com/dennysjmarquez/MultiLingual-MicroFrontends-vite-react-redux-Remote1

➡️ Proyecto Remoto 2:
https://github.com/dennysjmarquez/MultiLingual-MicroFrontends-vite-react-redux-Remote2

✅ Si quieren pueden ver la 𝗗𝗘𝗠𝗢 del host aquí:
https://demo-multilingual-microfrontends-vite-react-redux-host.vercel.app

📌 Para probar la demo, sigan estos pasos:

➡️ Ir al [demo del host].
➡️ Abrir la consola del navegador con Ctrl + Shift + I o F12.
➡️ Ir a la pestaña ‘Network’ y borra lo grabado.
➡️ Interactuar con la demo. Ver la actividad de los Microfrontends en ‘Network’, haciendo clic en los botones de las series o películas.

--END--