Decidir si usar el patrón de microfrontends es un tema relevante a nivel de arquitectura que tiene implicaciones relevante en varios aspectos de la estrategia de ingeniería de software que implementemos. En la web https://micro-frontends.org/ nos explican de forma muy detallada lo que son los microfrontends. Justamente de esta referencia he extraído las características que deberán tener los microfrontends como tal.
Los navegadores permite añadir tags personalizados al DOM. Estos tags pueden usarse como microfrontend que se comporta por un iframe sin serlo.
- Se Agnostico a la Tecnologia
- Aislar el código del equipo
- Establecer prefijos de equipo
- Favorece las funciones nativas del navegador sobre las API personalizadas
- Construir un sitio resiliente
Teniendo en cuenta estas características, tenemos claro que los microfrontend son porciones tecnológicamente independientes, mantenidas por equipos autónomos que se agrupan en una pantalla servidora de microfrontends. Al facilitar el desacople se augmentan las integraciones por lo que, nuevamente el problema es la granularidad.
Por lo tanto, a nivel práctico, podemos tener una web que cargue 2 microfrontends que cada uno tenga diferentes versiones de una misma librería.
Úsalo cuando tu complejidad orgánica y aplicativa te impida establecer unas reglas del juego claras que puedas controlar.
Es buena idea usar microfrontend cuando cumples con 3 puntos básicos:
- Tienes diferentes equipos desarrollando tu aplicación.
- Cada equipo tiene responsabiliad sobre un dominio funcional cuyo backend tiene forma de microservicio.
- Las funcionalidades pueden compartir páginas pero la interacción entre los componentes es nula a nivel de interface de usuario.
El ejemplo clásico que ponen siempre es el del carrito de la compra. En el caso de un carrito de la compra se puede plantear como microservicio. Este microservicio será completamente independiente y cuando añadas un elemento al carrito, la info del carrito te la regresará el backend.
Después de comprender bien el concepto, uno se da cuenta que el valor principal de de los microfrontends es básicamente el de independizar los equipos de desarrollo. Además te permite la reutilización e intergación de las funcionalidades en otra página de forma sencilla.
Si tienes una arquitectura de microservicios, significa que tienes un conjunto de servicios que te proporcionan una API y a los que deberás de dotar de uno o varios fronts. Los microfrontends sólo son una propuesta más para dotar de front las aplicaciones web que necesites construir.
Los microfrontends son sólo una de las posibilidades de dotar a un microservicio de frontend.
Dependiendo de la naturaleza del front, se puede crear un equipo específico que se encargue del mantenimiento del mismo. Esto se suele usar cuando la api es bastante estable y se necesita trabajar independientemente diferentes frontends.
Esta limitación facilita mucho la inclusión de gente de UX en los equipos y permite trabajar mucho el prototipado rápido. Por contra suele tener límites de escalabilidad y requiere cierta estabilidad en la API que sirven los Microservicios.
Una solución que funciona bastante bien es la creación de componentes funcionales para cada uno de los microservicios. Estos componentes los mantendrá el equipo del propio microservicio. Desde una capa superior más de layout, se hace la composición de las páginas agregando componentes relativos a los microservicios. De esta forma se salvan los problemas de integración entre el front y el back sin perder flexibilidad de integración en el front.
Veamos un ejemplo, si tienes un microservicio que sea carrito de la compra, puedes montar sus componentes de front en un proyecto de componentes "carrito de la compra". En tu paleta de componentes tendrás el icono del carrito que contiene un indicador de cuantos elementos tiene y que cuando pasas por encima te muestra los elementos de la lista, tendrás otro con el botón de añadir al carrito, tendrás un componente listado de elementos del carrito, otro que tenga un formulario para guardar el carrito de la compra a favoritos y otro que te permite administrar tus carritos guardados. Cuando construyas el layout de la lista de productos, simplemente tendrás que integrar el botón de añadir al del carrito para que la interacción sea vía UI.
Este sistema no afecta a la escalabilidad y organización de los equipos orientados a microservicios, te da cierta flexibilidad de integración en el front y facilita la integración del equipo de UX en el equipo de desarrollo.
La diferencia de hacerlo así a hacerlo con microservicios, es que en este modelo, todo se construye basándose en el mismo stack tecnológico y requiere que todo el equipo de desarrollo conozca unas reglas de desarrollo.
Como siempre en ingeniería, dependerá del caso. Si estas creando un software con un equipo de desarrolladores no excesivamente grande (menos de 200 personas), usar un catálogo de componentes suele ser una muy buena solución.
Otra opción es decidir que, en aquellos casos en los que se requiera una integración con sistemas externos al que desarrollas, los puntos de integración se construirán como microfrontend, ofreciendo ese microfrontend como un punto más de integración a nivel de interfaz de usuario.