Microfrontends ¿Qué son y cuándo usarlos?

DESARROLLO WEB, OPERACIONES.

Muchos desarrolladores han oído hablar de la arquitectura de microservicios, pero son menos conocidos los Microfrontends (También escrito como Micro-frontend). Este término apareció por primera vez en 2016, en la guía ThoughtWorks Technology Radar, donde se establecen los cambios que se creen interesantes en el desarrollo de software.

En las nuevas aplicaciones web que se desarrollan actualmente, el frontend es cada vez más grande y el backend se va haciendo menos importante. Para estas aplicaciones grandes no funciona el enfoque monolítico tradicional, porque se hace bastante difícil de manejar.

Por tanto, inspirado en el modelo de los microservicios, el microfrontend es la respuesta a las complejas aplicaciones web modernas, permitiendo dividir la aplicación en módulos más pequeños que actúan de forma independiente.

¿Qué son los Microfrontends?

Actualmente, para separar los diferentes componentes de una aplicación se utilizan los microservicios, funcionando perfectamente en la parte del backend, pero ¿qué se hace con el frontend?

Los microservicios son un modo de arquitectura utilizado para construir una aplicación distribuida, estructurando ésta como una colección de servicios. Es decir, los microservicios dividen el backend en diferentes servicios.

Así, cada función de la aplicación se maneja como un servicio independiente, evitando cuellos de botella en la base de datos.

Los microfrontends tienen un concepto similar a los microservicios, es decir, son la extensión del concepto de microservicio al mundo del frontend.

El microfrontend es un tipo de arquitectura donde se divide una aplicación web en diferentes módulos o funciones individuales, implementados de manera autónoma, permitiendo a los equipos de frontend el mismo nivel de flexibilidad y velocidad que los microservicios brindan a los equipos de backend.

Fuente: Harness

Su finalidad es eliminar la dependencia entre los equipos de trabajo, que ralentiza el desarrollo e incrementa la complejidad del producto digital.

Aplicaciones web modernas

Los usuarios son muy exigentes con las aplicaciones web actuales. Estas deben estar accesibles las 24 horas del día, los 7 días de la semana, desde cualquier lugar del mundo. Además, deben poder utilizarse en cualquier dispositivo.

Una aplicación web moderna es un software alojado en un servidor, que debe seguir todos los estándares modernos en el desarrollo web para poder ser totalmente segura, adaptable y escalable, satisfaciendo siempre a los usuarios.

Arquitectura micro-frontend

Frontends monolíticos

En la imagen se observan las diferentes arquitecturas con frontends monolíticos.

Fuente: Micro-Frontends

El Monolito tiene un único equipo de trabajo para crear y mantener una aplicación completa, compartiendo bases de datos, backend y frontend.

El Front & Back divide la aplicación monolítica en dos, dividiéndo también el equipo de trabajo para adueñarse de su monolito backend o front end.

Con los microservicios, la arquitectura del backend evolucionó a una arquitectura más escalable, al pertenecer cada microservicio a un equipo de trabajo diferente.

Aunque la división del backend es transparente para el usuario, se presentan problemas al querer integrar los microservicios en el frontend monolítico, pasando éste a ser el cuello de botella de la aplicación, con las desventajas de un sistema monolítico:

  • Demasiado grande y complejo para que alguien lo entienda totalmente y pueda hacer cambios rápida y correctamente.

  • Un cambio en el código frontend podría afectar a todo el sitio web.

  • Toda modificación en el código frontend debe volverse a implementar, aumentando el tiempo de compilación.

Organización vertical

Fuente: Micro-Frontends

Así llega la organización vertical, con una arquitectura menos compleja gracias a los microfrontends, que dividen la aplicación en pequeñas funciones independientes, implementando simultáneamente cada una, desde el backend hasta el frontend, por un equipo de trabajo.

Este enfoque se ha hecho popular debido a los problemas que presenta el enfoque monolítico. El frontend ha crecido rápidamente y con una arquitectura monolítica se hace más difícil de mantener.

Con los microfrontends se garantiza la misma escalabilidad, flexibilidad y adaptabilidad que tiene la arquitectura de microservicios del backend. La aplicación creada es menos engorrosa y más amigable. Además, cada micro frontend puede desarrollarse con diferentes frameworks.  

Ideas centrales de microfrontend:

  • Ser independiente de la tecnología: Cada equipo de trabajo tiene la libertad de adoptar la pila tecnológica que desee, sin tener que coordinarse con otros equipos.

  • El código de la aplicación de cada equipo está aislado: No se comparte tiempo de ejecución entre los diferentes equipos de trabajo, aun cuando utilicen el mismo framework. Por tanto, en las aplicaciones no existen variables globales ni estados compartidos.

  • Diseño web resistente: Las funciones de la aplicación deben ser útiles. Se pueden utilizar las metodologías “Universal Rendering” y “Progressive Enhancement” para mejorar el rendimiento.  

Ventajas de la arquitectura microfrontend

  • Implementaciones independientes: Con la arquitectura micro frontend, las funciones de una aplicación monolítica son separadas para convertirlas en diferentes sub-aplicaciones que son implementadas de forma independiente por diferentes equipos de trabajo, en lugar de implementar todas las funciones de una vez.

  • Mayor rendimiento: En una aplicación monolítica debe cargarse siempre toda la aplicación, aunque no todas sus partes sean utilizadas, haciendo que su tiempo inicial de carga sea alto. Con la arquitectura micro frontend se carga bajo demanda un módulo específico de la aplicación, con lo cual se reduce el tiempo inicial de carga.

  • Implementación más rápida: Al implementarse cada función de forma independiente, la velocidad de desarrollo se incrementa significativamente. Para corregir o agregar algo dentro de una función no hay que ejecutar toda la aplicación.

  • Confiabilidad: Si uno de los módulos presenta fallas, los otros seguirán funcionando. Esto es muy importante para una aplicación grande, por tener múltiples funciones independientes.  

¿Cuándo usar microfrontends?

Los microfrontends resultan adecuados para aplicaciones de gran tamaño con varias funciones. Si se considera que el proyecto tendrá problemas de escalabilidad, se debe utilizar la arquitectura microfrontend.

El mejor enfoque es dividir la aplicación en conjuntos aislados de funciones y pantallas, tal como un teléfono móvil, que posee diferentes aplicaciones con diferentes funciones. Así, hay una aplicación para marcar el teléfono, una de contactos para almacenar números telefónicos y una de mensajería para enviar mensajes de texto.

Aunque estas aplicaciones interactúan entre sí, cada una tiene una finalidad muy específica, por lo cual están implementadas como aplicaciones independientes.

Otro ejemplo es un sistema administrativo para una universidad. Allí se tendrá una página para administrar los perfiles de los estudiantes, una para los perfiles del personal, otra para los horarios de los cursos, para los resultados de los exámenes, etc.

Modyo, microfrontends y Aplyca

Modyo es un framework con el cual los desarrolladores pueden trabajar en Microfrontend mediante el uso del concepto de Widgets, que son bloques de construcción para productos digitales, realizados con la plataforma Modyo.

Los desarrolladores pueden seleccionar entre las plantillas existentes en la biblioteca de Widgets de Modyo y modificar el código si lo desean, adaptándolo a sus propias necesidades, conectando luego cada Microfrontend a la plataforma.

Adicionalmente, Modyo tiene a disposición una herramienta para crear Widgets, que los desarrolladores pueden utilizar para construir, publicar y mantener Widgets desde la plataforma.

Desde hace unos años Modyo es uno de los partners de Aplyca. Somos especialistas en desarrollo y consultoría de tecnologías cloud, y le ayudamos a crear experiencias digitales óptimas para sus clientes. Lo invitamos a conocer nuestros casos de éxito y a contactarnos para discutir las necesidades de sus proyectos.