¿Qué es un Micro-frontend?
Mientras que la arquitectura headless separa el frontend (interfaz de usuario) del backend (sistema de gestión de contenidos o fuente de datos), micro frontends toman esta conceptualización para ir un paso más al dividir la interfaz en componentes más pequeños que se pueden implementar de forma independiente. Esta separación permite un control aún más granular en cada parte de la interfaz de usuario (UI).
Los micro-frontends aplican los mismos principios de modularización, independencia y control descentralizado al desarrollo frontend que los microservicios han utilizado para transformar el desarrollo backend en los últimos tiempos.
A medida que avanza el 2024, espero que los micro-frontends sean cada vez más reconocidas como un enfoque valioso para el desarrollo de frontend’s. Este enfoque mejora la agilidad y la eficiencia del equipo al permitir la división de interfaces monolíticas en partes más pequeñas y manejables (similar a cómo operan los microservicios en el backend), ya que diferentes grupos pueden trabajar de forma independiente en distintas secciones de la interfaz de usuario.
Para los usuarios de CMSs como Drupal o WordPress, los micro-frontends pueden mejorar significativamente el desarrollo al introducir modularidad y flexibilidad en el diseño y la gestión de la interfaz de usuario.
¿Cómo mejorar el desarrollo con Micro-frontend’s?
La implementación de un desarrollo de interfaz de usuario modular, conocido como micro frontends, ha revolucionado la forma en que se construyen y mantienen los sitios web. Este enfoque se fundamenta en la división de la interfaz de la web en componentes o secciones más pequeñas e independientes, lo que conlleva una serie de beneficios significativos:
- Mejora en la eficiencia del desarrollo: Al dividir la interfaz en partes más pequeñas, diferentes equipos o desarrolladores pueden trabajar de manera independiente en distintos aspectos del sitio. Esto agiliza el proceso de desarrollo, aumentando la velocidad y la eficiencia en la entrega de nuevas funcionalidades.
- Flexibilidad tecnológica: Los micro frontends permiten la utilización de diversas tecnologías o frameworks en diferentes partes del sitio web. Esta flexibilidad es invaluable para aquellos sitios que requieren funcionalidades específicas o elementos de diseño más allá de las capacidades estándar del CMS utilizado.
- Optimización de actualizaciones y mantenimiento: La modularidad inherente de las micro interfaces facilita la actualización o mejora de partes específicas del sitio sin necesidad de revisar toda la interfaz. Esto hace que el mantenimiento y las actualizaciones sean más manejables y menos arriesgadas, reduciendo el tiempo y los recursos necesarios para implementar cambios.
- Mejora del rendimiento: Al aislar diferentes componentes de frontend, los micro-frontends contribuyen a optimizar la carga y el rendimiento de los sitios web, especialmente aquellos con interfaces complejas y ricas en funciones. Esto se traduce en tiempos de carga más rápidos y una experiencia más fluida para los usuarios.
- Experiencia de usuario mejorada: La capacidad de adaptar partes específicas del sitio a las necesidades y comportamientos de diferentes segmentos de usuarios se vuelve más factible con las micro interfaces. Esto permite crear interfaces de usuario más dinámicas y receptivas, lo que a su vez conduce a una experiencia general del usuario más satisfactoria y personalizada.
5 formas de crear micro-frontends
El enfoque web, la composición del lado del servidor, la composición del lado del cliente, la representación del lado del cliente y la integración en el tiempo de construcción.
La adaptación de micro-frontends fue cogiendo diferentes enfoques, ofrecieron varias implementaciones a lo largo de los años. Por lo tanto, revisemos diferentes formas en que puedes crear aplicaciones utilizando micro-frontends.
1. El enfoque web
Este es uno de los enfoques más simples para crear micro-frontends. Todo lo que tienes que hacer es crear un conjunto de páginas web, implementarlas de forma independiente y hacerlas accesibles en una sola aplicación vinculándolas.
Con este enfoque, el usuario va de un sitio web a otro utilizando enlaces que conducen a los diferentes servidores que proporcionan el contenido.
Ahora bien, este enfoque tiene su conjunto de ventajas e inconvenientes.
Algunos de sus beneficios incluyen:
- Esta es la forma más sencilla de construir una micro-frontend. Requiere menos tiempo, lo que hace que comenzar sea más rápido.
- Posee una curva de aprendizaje realmente baja, por lo que los equipos pueden adoptar rápidamente este enfoque.
- Las páginas están completamente aisladas unas de otras ya que se implementan de forma independiente en diferentes servidores.
Pero uno de los mayores inconvenientes de este enfoque es el hecho de que aumenta la infraestructura general. Esto significa que debes esforzarte más en administrar todos los servidores y mantener los diferentes desarrollos.
2. Integración en tiempo de construcción
Este enfoque pretende que puedas crear micro-frontends que se integren entre sí en el momento de la construcción. Con este enfoque, se construye en entornos independientes, pero durante el tiempo de construcción, todo se ensambla en una sola aplicación.
Puedes crear componentes independientes de React, Vue.js y Angular e integrarlos en el momento de la compilación para crear una única aplicación que proporcione el contenido.
Esto trae muchos beneficios:
- Tiene una curva de aprendizaje más corta ya que el equipo no necesita aprender un framework con el que no se siente cómodo.
- Trabajas en un ambiente independiente. Un CI/CD puede ayudarte a propagar los cambios en tu árbol de componentes automáticamente.
Sin embargo, un inconveniente clave de este enfoque es que se pierde coherencia en el diseño, ya que es posible que las bibliotecas de diseño que utiliza en un framework no ofrezcan el mismo nivel de soporte.
3. Composición en servidor
Después de comenzar con el enfoque web, se realizaron cambios en este enfoque y se creó un enfoque más "del lado del servidor" para una micro-frontend. Con este enfoque, ya no vinculas dos páginas mediante un enlace, sino que devuelve vistas compuestas de diferentes servidores con respecto a las interacciones de la interfaz de usuario.
Ahora, la única área de complejidad de este enfoque es su capa de proxy inverso. Tendrás que considerar cosas como las reglas de almacenamiento en caché y el seguimiento. Puede implementar este enfoque con una definición de proxy simple como se muestra a continuación:
La interfaz de usuario podría comenzar a volverse inconsistente en algún momento, y al mismo tiempo agregar complejidad al mantenimiento de su aplicación. Sin embargo, a pesar de este inconveniente, todavía ofrece una buena sensación de aislamiento entre las páginas, lo que te permite seguir trabajando en una naturaleza de micro-frontend. Además, en comparación con el enfoque web, el enfoque del lado del servidor hace que tu sitio parezca integrado (todas las páginas en un solo monolito), lo que podría mejorar la experiencia general del usuario de su aplicación.
4. Composición del lado del cliente
Volviendo a la Composición en servidor, ¿crees realmente que necesitamos un proxy inverso? ¿Esto no añade complejidad?
Si piensas así, simplemente puedes utilizar el enfoque de “composición del lado del cliente” para crear tus micro-frontends en su forma más simple. Todo lo que necesita es un iframe, mientras se comunica entre sus micro-frontends usando el método postMessage.
La implementación sería similar a la siguiente:
El uso de la “composición del lado del cliente” tiene sus ventajas e inconvenientes.
Algunos de sus beneficios incluyen:
- Esto te permite precargar, cargar y renderizar partes de tu aplicación según necesites, en lugar de hacerlo de una vez, lo que te permite mejorar el rendimiento de tu aplicación.
- Tus micro-frontends están completamente aislados unos de otros.
Sin embargo, uno de los mayores inconvenientes es que es posible que necesite un entorno JavaScript para que esto funcione.
5. Representación del lado del cliente
Para la representación del lado del cliente, necesitarás un framework en la aplicación. Este framework debe ser utilizado por todos los micro-frontends incorporados para que se monten correctamente.
Aunque se parezca a “Composición del lado del cliente” buscando un framework alternativo a Javascript, ña mayor diferencia es que la renderización del lado del servidor está desconectado. En lugar de ello, se intercambian datos que luego se transforman en una vista.
Dependiendo del framework, los datos pueden determinar la ubicación, el momento y la interactividad del fragmento renderizado. Lograr un alto grado de interactividad no es un problema con este patrón.
Con este enfoque, obtienes muchos beneficios:
- Reduce el acoplamiento entre sus componentes.
- Da una sensación de integridad del sistema al usuario.
Pero uno de sus mayores problemas es que requiere JavaScript. Sin JavaScript, esto no funcionará.
Conclusión
La adopción de micro-frontends representa un cambio significativo en la forma en que se desarrollan y gestionan las interfaces de usuario web, ofreciendo una mayor flexibilidad, eficiencia y rendimiento, además de una experiencia de usuario más enriquecida y adaptable.
Referencias: