¿Qué es una arquitectura micro-frontend?
La arquitectura micro-frontend, es un tipo de diseño aplicado en el frontend que nos permite dividirlo en aplicaciones más pequeñas, individuales y semi independientes que trabajan de forma conjunta. Este concepto de frontend está muy inspirado en los microservicios utilizados mayormente en el backend.
El objetivo de esta arquitectura es ver las aplicaciones web como una composición de funcionalidades donde cada una es trabajada por equipos independientes. Cada equipo tiene un área de negocio específica y el desarrollo se realiza de forma end-to-end, desde la base de datos hasta la interfaz de usuario.
Sin embargo, esta idea no es algo nuevo, este concepto apareció sobre el 2016, pero antes ya se usaba este tipo de arquitectura y se le llamaba “Integración de frontend para sistemas verticales” o “Sistemas autocontenidos”. Sin duda micro-frontends tiene la capacidad de ser más “trendy”.
En la siguiente imagen se pueden ver diferentes estructuras donde el frontend siempre es monolítico.
En esta otra imagen se puede ver una estructura vertical donde el frontend no es monolítico.
Conceptos clave
Detrás de esta arquitectura hay unos conceptos clave sobre los cuales se sustenta este concepto y que se debe aplicar teniéndolos en cuenta. A continuación te los explicamos.
- Independencia tecnológica: Cada equipo puede tener stacks tecnológicos diferentes sin depender entre sí.
- Separación de equipos: Este punto está más relacionado con la metodología de trabajo. Ya que te permite tener un foco más específico en cada equipo y poder hacer una gestión más específica y detallada dirigida al objetivo.
- Nomenclaturas por equipos: Hay ciertos recursos que deberán de ser compartidos entre equipos y cada equipo ha de tener una nomenclatura específica para evitar mezclar recursos.
- Diseño web resiliente: Cada equipo trabajará en una sección aislada del sistema y esto ayudará a solucionar los problemas más rápido y ser adaptativo.
- Usar eventos nativos del navegador: La mejor opción es usar los eventos nativos del navegador que permiten comunicarse entre equipos, en el caso de que no sea suficiente sé tratará de mantener una API común lo más básica posible.
Buenas prácticas
En el mundo de los micro-frontends también hay buenas prácticas y es necesario aplicarlas para que el resultado tenga la calidad esperada. A continuación, os presentamos algunas de las buenas prácticas que se deben aplicar cuando usamos una arquitectura basada en micro-frontends.
Organización del flujo
Tal y como hemos comentado en el apartado anterior esta arquitectura nos permite tener diferentes equipos independientes entre sí. Justo por este motivo hemos de tener en cuenta que cada equipo tiene unos objetivos y unos retos diferentes pero que han de estar acordados entre todos. Para poder lograr todos estos objetivos es muy importante que los contratos entre todas las partes y la API estén muy bien definidos para que la comunicación sea lo más fluida posible.
De esta manera tu equipo se va a poder mover de forma independiente para lograr sus objetivos.
También es importante poder hacer entregas de forma modular. Si tus requisitos de negocio te impiden hacerlo quiere decir que esta arquitectura no se adecua a tu organización, que es monolítica.
Automatización
La automatización es importante en todos los sistemas pero en los micro-frontends es algo vital, ya que si no tienes una buena automatización se pueden crear bloqueos con ciertas funcionalidades.
La automatización de tests es muy importante porque permite asegurar la compatibilidad de un micro-frontend con los demás componentes del sistema y que en el momento de hacer la integración con producción va a funcionar sin problemas.
No sobre usar los micro-frontends
Si fragmentas demasiado tu sistema es muy posible que al final te quedes con fragmentos que no aporten valor a tu objetivo. Es importante que haya un motivo por el que se divide ese sistema, por ejemplo por la forma en que se hace el deploy o la estrategia que sigue cada parte. Si sobre usas esta arquitectura al final carece de sentido.
Encontrar la medida correcta para tu micro-frontend
La manera de encontrar la medida perfecta para tu micro-frontend es parecida a la usada en los microservicios, ya que si es demasiado grande tu aplicación tendrá mucho acoplamiento y si son muy pequeños tendrás una aplicación fragmentada.
Lamentablemente, no hay una regla de oro para hacer esta división. Aun así, sí que es importante recordar que cada propósito de negocio ha de estar aislado.
La mejor manera es decidir tu división con antelación para poder planificar todos los contratos y la interacción entre todas las partes antes de empezar.
Wrap up
Al final, depende mucho del caso de negocio al que te enfrentes para saber si valdrá la pena usar esta arquitectura o no. Ya que esta arquitectura no es válida para equipos pequeños o proyectos pequeños. Mayormente, es aplicada en grandes proyectos con diferentes equipos distribuidos y que cuentan con una gran infraestructura. Por este motivo este sistema es utilizado por las compañías más grandes, ya que son las que le sacan el mayor partido posible.
Algunas de estas empresas son Ikea, DAZN, Spotify , Zalando y muchas otras.
Espero que hayas aprendido sobre esta arquitectura que sin duda alguna ya es el presente de las grandes corporaciones y está marcando la forma de trabajar.
