Aplicaciones web escalables con el Patrón Arquitectónico "MicroFrontEnds"

La mayoría de las personas que estéis leyendo este artículo, habréis oído hablar o incluso trabajado con microservicios que llegaron para dividir la estructura de monolito en la parte BackEnd. Una división en partes más pequeñas que simplifican el despliegue, aumentan la escalabilidad de la aplicación y permiten la adopción de nuevas tecnologías dentro de un proyecto.

Figura 1: Aplicaciones web escalables con el Patrón Arquitectónico

Sabemos que es complejo realizar un desarrollo FrontEnd adecuado, y más aún cuando se trata de escalar un proyecto extenso y complejo donde trabajan varios equipos con una estructura frontal monolítica. Es en este punto donde ha llegado el patrón de tendencia este año, MicroFrontEnds, para dar solución a este tipo de problema. Este patrón arquitectónico bebe directamente de la filosofía de estructuración y tratamiento de los microservicios aunque está orientado al desarrollo FrontEnd. 

Figura 2: Evolución del patrón de arquitectura

MicroFrontEnds aparece en el radar de tecnología de ThoughtWorks en noviembre de 2016 como una técnica que surge de la necesidad de eliminar el monolito de la parte frontal de una aplicación web. En noviembre de 2017 se denomina esta técnica en estado de prueba. Por último, entre abril de 2019 y mayo de 2020 esta técnica termina por asentarse como un Patrón Arquitectónico.  

Figura 3: Libro de Hacking Web Technologies 2ª Edición en 0xWord de
Chema Alonso, Enrique Rando, Amador Aparicio, Pablo González y Ricardo Martín

Este patrón surge de la descomposición de un monolito frontal en partes más pequeñas y simples que pueden ser desarrolladas, probadas e implementadas de manera independiente. De tal forma, se observa una aplicación web como una composición de funcionalidades que se comunican entre sí. Dichas funcionalidades están desarrolladas por equipos independientes que conocen punto a punto la lógica de estas con las que están trabajando.

Figura 4: Organigrama de trabajo con MicroFrontEnds

Por lo tanto, los equipos tienen una base de código más pequeña que tratar y como resultado se obtiene una aplicación más sostenible y fácil de probar. Además de una mayor tolerancia a fallos y brechas de seguridad, ya que este patrón se desarrolla bajo la filosofía DevOps, aunque siempre se puede mejorar con prácticas de desarrollo de código seguro y seguir la corriente de las SecDevOps.

Figura 5: Libro de Docker:SecDevOps de 0xWord
escrito por Fran Ramírez, Rafael Troncoso y Elias Grande

Para entender mejor todo, estas sería las situaciones que resuelve este patrón:

- En determinados proyectos se requiere de la implementación de una aplicación web y puede que en el código de tu proyecto no encuentres el sitio adecuado para dicha implementación.

- Puede que quieras utilizar nuevas features de JavaScript en tu proyecto, pero estas no encajen con las herramientas utilizadas hasta el momento.

- Escalar tu desarrollo haciendo que varios equipos de trabajo puedan desarrollar en el mismo proyecto de forma simultánea.

Dada la independencia de estos MicroFrontEnds se obtienen resultados como mejores tiempos de carga, código con mayor accesibilidad, acotación de errores y, a mi parecer, la característica más interesante, despliegues independientes de las distintas funcionalidades. Lo que resulta una experiencia de usuario mejorada de cara a las actualizaciones en la aplicación web, ya que solo se actualizaría la funcionalidad en cuestión y no toda la aplicación. Este proceso, resultará transparente de cara al usuario final.

Técnicas de implementación.

Se utilizan varias formas de implementar este patrón a la hora de desarrollar una aplicación web, aunque existe un enfoque general entre todas las vías de implementación en el que un contenedor renderiza todos los elementos comunes de la página y orquesta aspectos como la autenticación y la navegación con los microfrontend. Estas son algunas de las implementaciones utilizadas con mayor frecuencia:

Iframes:

Dentro del contenedor principal cada microfrontend se alojará dentro de un iframe que puede residir en otro servidor. Aunque, puede resultar complejo realizar un diseño adaptativo al utilizar este tipo de elementos.

Figura 6: Implementación de MicroFrontEnds con iframes

Múltiples SPA alojadas en distintas URL:

La idea es alojar distintas SPA en las páginas de nuestra aplicación, esto hará que podamos introducir de forma sencilla esta arquitectura en proyectos ya iniciados, aunque la implementación de este patrón requerirá módulos externos para compartir las distintas funcionalidades de la aplicación.

 

Figura 7: Implementación de MicroFrontEnds con múltiples SPA en distintas URL

Single-SPA “Meta framework”:

Consiste en implementar varios frameworks trabajando en la misma página. Esto requiere de un constructor global para transpilar y orquestar las distintas funcionalidades.

Figura 8: Implementación de MicroFrontEnds con Single-SPA "Meta framework"

Aunque es una tecnología bastante reciente, el patrón de arquitectura basado en MicroFrontEnds es una solución que aporta muchas ventajas al ciclo SecDevOps y beneficios en aspectos como la escalabilidad, sostenibilidad, seguridad y despliegue de una aplicación de gran tamaño. 

Figura 9: Implementación del patrón de diseño MicroFrontEnds

Seguramente en un futuro próximo escuchemos hablar más acerca de este tipo de arquitecturas.  Aquí os dejamos un vídeo de cómo utilizar este patrón.

Referencias:

https://martinfowler.com/articles/micro-frontends.html

https://samnewman.io/patterns/architectural/bff/

https://martinfowler.com/articles/microservices.html

https://www.thoughtworks.com/es/radar

Autor: Luis E. Álvarez (@luisedev) es desarrollador y miembro del equipo Ideas Locas CDCO de Telefónica.