Microfrontends: Una arquitectura modular para el desarrollo web

¿Sabes que son los microfrontends?

Estamos en una época en la que poder simplificar y optimizar lo más mínimo tu proyecto puede significar una gran ayuda en tu trabajo y ver unos mejores resultados.

Es aquí donde aparecen los microfrontends, una arquitectura emergente en el desarrollo web que se asemeja al enfoque de los microservicios, pero aplicado al lado del cliente.

Está ganando popularidad por su enfoque modular y su escalabilidad eficiente en aplicaciones web.

1. ¿Qué son los Microfrontends?

Los microfrontends son una estrategia de diseño que dividen una aplicación web en módulos o funciones individuales (partes mas pequeñas y manejables).

Cada microfrontend es un módulo independiente que se encarga de una funcionalidad específica, y cada uno de ellos representa un subdominio empresarial y evita compartir lógica con otros subdominios.

Imagina una agencia de viajes con diferentes funcionalidades como reservas, búsqueda y blog.

Pues con esta arquitectura es posible que diferentes equipos trabajen en diferentes áreas de la aplicación, desarrollando, probando y desplegando de forma autónoma.

Incluso poder usar tecnologías y frameworks diferentes. Luego, se acoplan a una aplicación general.

2. Ventajas

– Tecnología Agnóstica:

Los microfrontends permiten utilizar diferentes tecnologías y frameworks para cada parte de la aplicación.

Esto es útil cuando trabajamos con grandes equipos en un dominio empresarial y queremos reducir la complejidad.

Cada equipo puede elegir su stack tecnológico que mejor se adapte a sus necesidades, trabajando cómodamente sin afectar al resto.

– Escalabilidad y Flexibilidad:

Al igual que los microservicios en el backend, los microfrontends ofrecen escalabilidad y adaptabilidad.

Puedes desarrollar y desplegar partes de la aplicación específicas según se requiera en el momento sin afectar al resto.

Además, para cambiar o actualizar una funcionalidad solo debes modificar el microfrontend correspondiente sin riesgo de estropear otra parte de la aplicación y sin sobrecargar la comunicación entre equipos.

– Composición Modular:

Imagina que estás construyendo un sitio web para una tienda en línea.

Puedes tener microfrontends para la página de inicio, el catálogo de productos, el carrito de compras y el blog.

Cada uno de estos módulos se compone de manera independiente en la aplicación anfitriona.

Esto facilita la colaboración entre equipos y el mantenimiento a largo plazo.

3. Tipos de Microfrontends

– Monorrepositorio:

Son aplicaciones en las que todos los proyectos se encontrarán al final dentro del mismo repositorio.

Aunque esto pudiera parecer algo contradictorio con la teoría de microfrontends, donde se buscan generar proyectos que sean independientes, para integrarlos luego.

En este caso se tiene para todos los proyectos un sistema único de dependencias y subcarpetas para cada uno de estos proyectos.

– Multirrepositorio:

En este tipo están los proyectos en diferentes repositorios.

Esto implica tener los proyectos más aislados, con un sistema de dependencias independiente para cada proyecto.

– Metarrepositorio:

Se refiere a la estrategia que busca adoptar los dos tipos anteriores.

Así, en este tipo se tendrán múltiples repositorios, pero además se tendrá uno donde todos ellos se integrarían.

Cada uno de estos tipos tiene sus ventajas y desventajas, teniendo cada uno sus propios métodos de rebajar esas desventajas.

4. Gestión de Proyectos con Microfrontends

– Divide en Subdominios:

Identifica las partes independientes de tu aplicación y crea subdominios para cada una.

Por ejemplo, podrías tener ‘catalogo.app.com’, ‘carrito.app.com’ y ‘blog.app.com’.

Cada subdominio tendrá su propio microfrontend.

– API Gateway:

Utiliza un API gateway para manejar la comunicación entre los microfrontends y la aplicación general.

El gateway manejará la carga de los módulos y la navegación entre ellos.

– Coordinación entre Equipos:

Asegúrate de que los equipos trabajen de manera independiente en sus áreas específicas.

Define interfaces claras entre los microfrontends para evitar conflictos y garantizar la cohesión del sitio web final, puesto que aunque sean módulos independientes, siguen formando parte de la misma aplicación general.

En resumen, los microfrontends ofrecen una forma modular y flexible de construir aplicaciones web, y no solo para una empresa, sino que esto da la posibilidad de crear una aplicación entre varias empresas.

Es cierto que requieren una planificación cuidadosa y una buena coordinación entre equipos, pero sus beneficios a largo plazo pueden quitar mas de un calentamiento de cabeza.