Arquitectura Micro-frontend

Compartir esta publicación

¿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.

Esquema1EN

En esta otra imagen se puede ver una estructura vertical donde el frontend no es monolítico.

Esquema2EN

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Suscríbete a nuestro boletín de noticias

Recibe actualizaciones de los últimos descubrimientos tecnológicos

Acerca de Apiumhub

Apiumhub reúne a una comunidad de desarrolladores y arquitectos de software para ayudarte a transformar tu idea en un producto potente y escalable. Nuestro Tech Hub se especializa en Arquitectura de Software, Desarrollo Web & Desarrollo de Aplicaciones Móviles. Aquí compartimos con usted consejos de la industria & mejores prácticas, basadas en nuestra experiencia.

¿Tienes un proyecto desafiante?

Podemos trabajar juntos

Secured By miniOrange