✅ 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--
Top comments (0)