Micro frontends, divide y vencerás

Índice

1. Introducción
2. ¿Qué son los micro frontends?
3. ¿Como implementar los micro frontends?
4. Beneficios de utilizar los micro frontends
5. Desventajas de utilizar los micro frontends
6. Conclusiones

Introducción

En este tutorial, hablaremos sobre el mundo de los micro frontends y descubriremos cómo esta arquitectura puede mejorar la modularidad y la escalabilidad de nuestras aplicaciones frontend. Esta aproximación es ideal si alguna vez has pensado desarrollar componentes frontend independientes que se puedan combinar para formar una aplicación completa.

A medida que las aplicaciones web se vuelven cada vez más complejas, surge la necesidad de un enfoque más flexible y modular en el desarrollo frontend. Aquí es donde los micro frontends entran en juego. Siguiendo este enfoque, podemos desarrollar aplicaciones frontend de manera independiente y luego unirlas como piezas de un rompecabezas para formar una aplicación completa.

En este tutorial, hablaremos sobre los conceptos básicos de los micro frontends. Aprenderemos qué son, cómo se implementan y cómo pueden beneficiar a nuestras aplicaciones en términos de escalabilidad, flexibilidad y colaboración entre equipos de desarrollo.

¿Qué son los micro frontends?

Los micro frontends son un patrón arquitectónico de desarrollo de software en el cual las aplicaciones frontend se desarrollan de forma independiente y luego se componen para crear una aplicación completa. Este enfoque contrasta con la arquitectura frontend monolítica tradicional, donde todo el código de una sola aplicación se desarrolla en conjunto.

Los micro frontends ofrecen varias ventajas sobre los frontends monolíticos, incluyendo:

Mejor escalabilidad

Los micro frontends permiten escalar de manera más fácil y efectiva que los frontends monolíticos. En un enfoque monolítico, cuando la aplicación crece y se vuelve más compleja, es necesario escalar todo el frontend, lo que puede ser costoso y poco eficiente. En cambio, con los micro frontends, cada aplicación puede escalarse de forma independiente según sus necesidades. Esto significa que se puede asignar más recursos a los micro frontends que requieren un mayor rendimiento o capacidad, mientras que los que tienen menor demanda pueden mantenerse en una escala más pequeña. La capacidad de escalar cada micro frontend de forma independiente permite una mejor optimización de recursos y una mayor eficiencia en el uso de la infraestructura.

Mayor flexibilidad

Los micro frontends ofrecen una mayor flexibilidad. En un enfoque monolítico, realizar cambios o actualizaciones en una parte de la aplicación puede ser complicado y puede requerir la implementación de cambios en todo el código base. Esto puede llevar a un proceso de desarrollo lento y costoso, especialmente cuando hay múltiples equipos trabajando en diferentes funcionalidades. En cambio, con los micro frontends, cada aplicación se desarrolla y se despliega de manera independiente. Esto significa que se pueden actualizar o reemplazar aplicaciones individuales sin afectar al resto de la aplicación. Esto brinda una mayor agilidad en el desarrollo y permite una respuesta más rápida a los cambios de requisitos o a las necesidades del mercado.

Resistencia a fallos

Los micro frontends ofrecen una mayor resistencia a fallos en comparación con las aplicaciones monolíticas. Si un micro frontend falla o experimenta problemas, el resto de la aplicación puede seguir funcionando correctamente. Esto se debe a que cada micro frontend es independiente y puede manejar sus propios errores y excepciones sin afectar a los demás.

Esta capacidad de aislamiento de errores ayuda a evitar que un problema en una parte de la aplicación afecte a todo el sistema, lo que hace que la aplicación sea más robusta y confiable.

Reutilización de componentes

Los micro frontends fomentan la reutilización de componentes en diferentes aplicaciones. Al dividir la interfaz de usuario en múltiples micro frontends, es posible crear componentes compartidos que se pueden utilizar en diferentes contextos. Esto no solo ahorra tiempo de desarrollo al no tener que crear componentes desde cero, sino que también mejora la consistencia y la experiencia del usuario al mantener un diseño coherente en todas las aplicaciones.

Mejor colaboración

Los micro frontends facilitan la colaboración entre diferentes equipos en una sola aplicación. En un enfoque monolítico, los equipos suelen tener que coordinarse y trabajar en el mismo código base, lo que puede generar conflictos y dificultades de comunicación. Con los micro frontends, cada equipo puede enfocarse en desarrollar su propia aplicación de forma independiente, utilizando tecnologías y herramientas que sean más adecuadas para su contexto. Esto promueve la autonomía y la responsabilidad de los equipos, y permite una colaboración más fluida y eficiente. Cada equipo puede iterar y desplegar sus cambios sin tener que esperar por otros equipos, lo que agiliza el proceso de desarrollo y reduce las posibles fricciones entre equipos.

¿Como implementar los micro frontends?

Ahora que entendemos qué son los micro frontends y cuáles son sus beneficios, es hora de sumergirnos en la implementación práctica. A continuación, te explicaré cuáles son los pasos para implementar micro frontends en tu aplicación.

Definir los límites de los micro frontends

El primer paso es identificar las partes de tu aplicación que pueden desarrollarse de manera independiente y convertirse en micro frontends. Estas partes pueden ser módulos funcionales, secciones de la interfaz de usuario o incluso componentes específicos.

Por ejemplo, imaginemos que estamos construyendo una aplicación de banca electrónica. Podríamos identificar vista general de cuentas y balance, prestamos bancarias y el área de inversión financiera como posibles candidatos para convertirse en micro frontends independientes.

Elegir un framework web para cada micro frontend

Una vez que hayas definido los límites de tus micro frontends, es hora de seleccionar un framework web para cada uno. Los frameworks como Angular, React y Vue.js son opciones populares que admiten la implementación de micro frontends.

Por ejemplo, si hemos elegido React como framework, podemos crear un micro frontend para la sección de vista general de cuentas y balance utilizando React y sus herramientas asociadas.

Con los frameworks web seleccionados, es hora de desarrollar los micro frontends de manera independiente. Cada micro frontend se desarrollará como una aplicación separada, con su propio código, estilos y recursos.

Componer los micro frontends

Una vez que hayas desarrollado los micro frontends, debes combinarlos para crear una aplicación completa y coherente. Para ello, puedes utilizar el framework web seleccionado que admita la composición de micro frontends.

Voy a ponerte un ejemplo utilizando Module Federation.

Module Federation es una característica introducida en Webpack 5 que permite compartir módulos entre diferentes aplicaciones o proyectos de frontend de manera eficiente. Esta funcionalidad es especialmente útil en arquitecturas de micro frontends, donde se desea componer varias aplicaciones frontend independientes en una sola aplicación.

Siguiendo con nuestro ejemplo de banca electrónica primero tendremos que configurar un archivo de tipo host-config.js en la aplicación que va a contener o usar estos micro frontends.

module.exports = { 
// Otras configuraciones...
  plugins: [ 
    new ModuleFederationPlugin({ 
      name: 'host', 
      remotes: { 
        Overview: 'overview@http://localhost:3001/remoteEntry.js', 
        Loans: 'loans@http://localhost:3002/remoteEntry.js', 
        Investment: 'investment@http://localhost:3003/remoteEntry.js', 
      }, 
    }), 
  ], 
};

En la configuración del host, estamos utilizando el plugin ModuleFederationPlugin de Webpack para configurar la federación de módulos. Definimos tres micro frontends remotos: Overview, Loans e Investment. Especificamos la URL de acceso remoto para cada uno de ellos.

Cada uno de estos micro frontends son aplicaciones de React independientes con sus propias dependencias, en este caso apuntamos a localhost porque están levantadas en nuestra máquina, en producción estarán subidas en un servidor por lo que deberemos apuntar a esa dirección.

Ahora en cada uno de los micro frontends debemos realizar cierta configuración, este sería el ejemplo en Overview

module.exports = { 
  // Otras configuraciones... 
  plugins: [ 
    new ModuleFederationPlugin({ 
      name: 'overview', 
      filename: 'remoteEntry.js', 
      exposes: { 
        './Overview': './src/Overview', 
      }, 
    }), 
  ], 
};

En la configuración del micro frontend Overview, estamos utilizando el plugin ModuleFederationPlugin para exponer el componente Overview y generar el archivo remoteEntry.js.

Una vez tengamos todas las configuraciones es hora de usarlos en nuestra aplicación host:

import React, { lazy, Suspense } from 'react';

const Overview = lazy(() => import('Overview/Overview'));
const Loans = lazy(() => import('Loans/Loans'));
const Investment = lazy(() => import('Investment/Investment'));

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Overview />
        <Loans />
        <Investment />
      </Suspense>
    </div>
  );
};

export default App;

En el componente App del host, estamos utilizando la función lazy de React para cargar dinámicamente los micro frontends Overview, Loans e Investment. Estos componentes se importan utilizando los nombres definidos en la configuración de Module Federation.

Además, hemos envuelto los componentes en un componente Suspense para mostrar un indicador de carga mientras se cargan los micro frontends de forma asíncrona.

Y este sería un ejemplo básico.

Desplegar los micro frontends

Finalmente, llegamos al paso de despliegue de los micro frontends. Cada una de estas aplicaciones pueden ser desplegadas de forma independiente, ya sea en servidores diferentes o en contenedores separados.

Puedes utilizar herramientas de implementación como Docker y Kubernetes para facilitar el despliegue de los micro frontends y garantizar su escalabilidad.

Un ejemplo de esto sería el siguiente:

1. Configuración de Docker Compose:

Crea un archivo docker-compose.yml en la raíz de tu proyecto y define los servicios para cada uno de los micro frontends. Por ejemplo:

version: '3' 
services:
  frontend1:
    build: 
      context: ./frontend1
      dockerfile: Dockerfile
    ports: - 3001:3000
  frontend2:
    build:
      context: ./frontend2
      ...
    ports: - 3002:3000 
  frontend3:
    build:
      context: ./frontend3
      ...
   ports: - 3003

2. Configuración de Dockerfile:

Para cada uno de los micro frontends, crea un archivo Dockerfile en sus respectivas carpetas con las instrucciones necesarias para construir la imagen Docker. Por ejemplo:

# Dockerfile para el micro frontend frontend1 
FROM node:14 as build 
WORKDIR /app 
COPY package.json package-lock.json ./ 
RUN npm install 
COPY . . 
RUN npm run build 
FROM nginx:alpine 
COPY --from=build /app/build /usr/share/nginx/html 
EXPOSE 3000

Repite este proceso para cada uno de los micro frontends, asegurándote de ajustar los nombres de los servicios y los puertos en los archivos Docker Compose y los Dockerfiles.

3. Despliegue de los micro frontends:

Abre una terminal en la raíz del proyecto y ejecuta el siguiente comando para construir y desplegar los micro frontends:

Esto construirá las imágenes Docker para cada micro frontend y los desplegará en contenedores separados. Cada micro frontend estará disponible en su respectivo puerto (por ejemplo, localhost:3001, localhost:3002, localhost:3003).

Beneficios de utilizar los micro frontends

Los micro frontends ofrecen una serie de beneficios, que incluyen:

1. Mayor agilidad: Los micro frontends ayudan a los equipos a ser más ágiles al permitirles trabajar de forma independiente en sus propios micro frontends. Esto puede conducir a tiempos de desarrollo más rápidos y ciclos de lanzamiento más cortos.
2. Mejor escalabilidad: Los micro frontends mejoran la escalabilidad de las aplicaciones al facilitar su distribución en múltiples servidores.
3. Reducción de la complejidad: Los micro frontends ayudan a reducir la complejidad de las aplicaciones al hacerlas más fáciles de mantener y actualizar.
4. Mejor seguridad: Los micro frontends ayudan a mejorar la seguridad de las aplicaciones al facilitar el aislamiento de las diferentes partes de la aplicación.

Desventajas de utilizar los micro frontends

Aunque los micro frontends ofrecen varios beneficios, también tienen algunas desventajas, que incluyen:

1. Mayor complejidad: Los micro frontends pueden aumentar la complejidad de las aplicaciones al introducir comunicación y coordinación adicional entre diferentes equipos.
2. Mayor costo: Los micro frontends pueden aumentar el costo de desarrollo y mantenimiento de las aplicaciones al requerir infraestructura y herramientas adicionales.
3. Reducción del rendimiento: Los micro frontends pueden reducir el rendimiento de las aplicaciones al introducir una latencia de red adicional entre diferentes partes de la aplicación.

Conclusiones