Micro FrontEnds

Enfoque de microservicios para el desarrollo web front-end

Publicado el: 24 de Julio 2017 por Victor de Andrés Archivado en: WebApps
micro frontends

En la actualidad las aplicaciones web se estan volviendo cada vez más grandes y complejas. Además de la parte visual, en muchas ocasiones se incluye la lógica o las reglas de negocio que anteriormente se incluían en la parte backend.

Y a lo anteriormiente indicado hay que añadir que las aplicaciones web también cambian con el tiempo, al igual que las técnicas y frameworks de desarrollo. Esto requiere dar soporte para permitir coexistir diferentes frameworks y técnicas. Por ejemplo, módulos más antiguos construidos en JQuery o AngularJS 1.x, combinados con módulos más nuevos construidos en Angular 2+ o Vue.

El enfoque monolítico no funciona para aplicaciones web más grandes

Por todo ello mantener un enfoque monolítico para una gran aplicación web se vuelve complicado de desarrollar y mantener. Para solucionar este problema vamos a dividir nuestra web en módulos más pequeños que pueden actuar independientemente.

Por ejemplo imaginemos que tenemos una aplicación web, la cual estaría modulariza de la siguiente manera:

  • myapp.com/ - página de destino construida con HTML estático.
  • myapp.com/settings - antiguo módulo de configuración construido en AngularJS 1.x.
  • myapp.com/dashboard - nuevo módulo de panel integrado en VUE.

Por tanto la estructura de esta aplicación web debería contener:

  • Un de código compartido parar realizar la gestión de enrutamiento y controlar las sesiones de usuario.
  • También necesitaremos algunas hojas de estilo comunes, nuestra aplicación tiene un único estilo.
  • Por supuesto una colección de módulos separados, "mini-apps", construidos en distintos frameworks. Los cuales los tendremos almacenados en distintos repositorios de código.
  • Y finalmente un sistema de despliegue que agrupa todos los módulos de los diferentes repositorios y los implemente en un servidor, siempre que se actualice un módulo.

Implementación de Micro FrontEnds

Para implementar este tipo de solución tenemos distintas posibilidades, a continuación te indico algunas sugerencias:

  • "Meta-framework" de Single-SPA para combinar múltiples frameworks en la misma página sin refrescar la página.

  • "Mosaic" de Zalando, es un conjunto de servicios, bibliotecas y especificaciónes que define cómo sus componentes interactúan entre sí, para apoyar una arquitectura de estilo de microservicios para sitios web.

  • Y finalmente hacer los que los diferentes modulos se comuniquen a través de un bus de eventos compartidos, por ejemplo "Eev" de chrisdavies.
Comentarios
Escribe tu comentario