Monorepositorio Frontend: Gestión de Espacios de Trabajo con Lerna y Nx

En el panorama en constante evolución del desarrollo frontend, la gestión de proyectos grandes y complejos puede ser un desafío significativo. Las configuraciones tradicionales de múltiples repositorios, si bien ofrecen aislamiento, pueden generar duplicación de código, dolores de cabeza en la gestión de dependencias y herramientas inconsistentes. Aquí es donde la arquitectura monorepo brilla. Un monorepo es un único repositorio que contiene múltiples proyectos, a menudo relacionados, que se construyen y versionan juntos. Este enfoque ofrece numerosas ventajas, pero la gestión efectiva de un monorepo requiere herramientas especializadas. Este artículo explora dos soluciones populares: Lerna y Nx.

¿Qué es un Monorepo?

Un monorepo es un repositorio del sistema de control de versiones que contiene código para muchos proyectos. Estos proyectos pueden estar relacionados o ser completamente independientes. La clave es que comparten el mismo repositorio. Empresas como Google, Facebook, Microsoft y Uber han adoptado con éxito los monorepos para gestionar sus enormes bases de código. Piensa en Google almacenando casi todo su código, incluyendo Android, Chrome y Gmail, en un único repositorio.

Beneficios de un Monorepo

• Compartir y Reutilizar Código: Comparte fácilmente código entre proyectos sin flujos de trabajo complejos de empaquetado y publicación. Imagina una biblioteca de sistema de diseño que se puede integrar sin problemas en múltiples aplicaciones dentro del mismo repositorio.
• Gestión Simplificada de Dependencias: Gestiona las dependencias en un único lugar, garantizando la consistencia en todos los proyectos. La actualización de la dependencia de una biblioteca compartida actualiza automáticamente todos los proyectos que dependen de ella.
• Cambios Atómicos: Realiza cambios que abarcan múltiples proyectos en un único commit, garantizando la consistencia y simplificando las pruebas. Por ejemplo, una refactorización que afecta tanto al frontend como al backend se puede hacer de forma atómica.
• Colaboración Mejorada: Los equipos pueden colaborar fácilmente en diferentes proyectos dentro del mismo repositorio, fomentando el intercambio de conocimientos y el desarrollo multifuncional. Los desarrolladores pueden navegar y comprender fácilmente el código de diferentes equipos.
• Herramientas y Prácticas Consistentes: Aplica estándares de codificación, reglas de linting y procesos de construcción consistentes en todos los proyectos. Esto mejora la calidad y el mantenimiento del código.
• Refactorización Simplificada: Los proyectos de refactorización a gran escala se simplifican ya que todo el código relacionado está dentro del mismo repositorio. Se pueden utilizar herramientas de refactorización automatizadas en toda la base de código.

Desafíos de un Monorepo

• Tamaño del Repositorio: Los monorepos pueden volverse muy grandes, lo que podría ralentizar las operaciones de clonación e indexación. Herramientas como `git sparse-checkout` y `partial clone` pueden ayudar a mitigar este problema.
• Tiempos de Construcción: Construir todo el monorepo puede llevar mucho tiempo, especialmente para proyectos grandes. Herramientas como Lerna y Nx ofrecen procesos de construcción optimizados para abordar esto.
• Control de Acceso: Restringir el acceso a partes específicas del monorepo puede ser complejo. Se requiere una cuidadosa planificación e implementación de mecanismos de control de acceso.
• Complejidad de las Herramientas: La configuración y gestión de un monorepo requiere herramientas y conocimientos especializados. La curva de aprendizaje puede ser pronunciada inicialmente.

Lerna: Gestión de Proyectos JavaScript en un Monorepo

Lerna es una herramienta popular para la gestión de proyectos JavaScript en un monorepo. Optimiza el flujo de trabajo en torno a la gestión de repositorios de múltiples paquetes con Git y npm. Es particularmente adecuado para proyectos que utilizan npm o Yarn para la gestión de dependencias.

Características Clave de Lerna

• Gestión de Versiones: Lerna puede versionar y publicar automáticamente paquetes en función de los cambios realizados desde la última versión. Utiliza commits convencionales para determinar el siguiente número de versión.
• Gestión de Dependencias: Lerna gestiona las dependencias entre paquetes, asegurando que los paquetes dentro del monorepo puedan depender unos de otros. Utiliza enlaces simbólicos para crear dependencias locales.
• Ejecución de Tareas: Lerna puede ejecutar comandos en paralelo en múltiples paquetes, acelerando los procesos de construcción y prueba. Admite la ejecución de scripts definidos en `package.json`.
• Detección de Cambios: Lerna puede detectar qué paquetes han cambiado desde la última versión, lo que permite compilaciones y despliegues específicos.

Ejemplo de Uso de Lerna

Ilustremos el uso de Lerna con un ejemplo simplificado. Supongamos que tenemos un monorepo con dos paquetes: `package-a` y `package-b`. `package-b` depende de `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Inicializar Lerna:

lerna init

Esto crea `lerna.json` y actualiza el `package.json` raíz. El archivo `lerna.json` configura el comportamiento de Lerna.

2. Instalar Dependencias:

npm install
# o
yarn install

Esto instala las dependencias para todos los paquetes en el monorepo, basándose en los archivos `package.json` de cada paquete.

3. Ejecutar un Comando en los Paquetes:

lerna run test

Esto ejecuta el script `test` definido en los archivos `package.json` de todos los paquetes que lo tienen definido.

4. Publicar Paquetes:

lerna publish

Este comando analiza el historial de commits, determina qué paquetes han cambiado, incrementa sus versiones en función de los commits convencionales y los publica en npm (o en el registro que hayas elegido).

Configuración de Lerna

El archivo `lerna.json` es el núcleo de la configuración de Lerna. Te permite personalizar el comportamiento de Lerna, como:

• `packages`: Especifica la ubicación de los paquetes dentro del monorepo. A menudo se establece en `["packages/*"]`.
• `version`: Especifica la estrategia de versionado. Puede ser `independent` (cada paquete tiene su propia versión) o una versión fija.
• `command`: Te permite configurar opciones para comandos Lerna específicos, como `publish` y `run`.

Ejemplo `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Sistema de Construcción Inteligente, Rápido y Extensible

Nx es un potente sistema de construcción que proporciona funciones avanzadas para la gestión de monorepos. Se centra en las construcciones incrementales, el almacenamiento en caché de cálculos y la orquestación de tareas para mejorar significativamente los tiempos de construcción y la productividad de los desarrolladores. Si bien Lerna se centra principalmente en la gestión de paquetes, Nx proporciona un enfoque más completo para la gestión de todo el flujo de trabajo del monorepo, incluida la generación de código, el linting, las pruebas y el despliegue.

Características Clave de Nx

• Construcciones Incrementales: Nx analiza el gráfico de dependencias de tus proyectos y solo reconstruye los proyectos que han cambiado desde la última construcción. Esto reduce drásticamente los tiempos de construcción.
• Almacenamiento en Caché de Cálculos: Nx almacena en caché los resultados de las tareas, como las construcciones y las pruebas, para que puedan reutilizarse si las entradas no han cambiado. Esto acelera aún más los ciclos de desarrollo.
• Orquestación de Tareas: Nx proporciona un potente sistema de orquestación de tareas que te permite definir tuberías de construcción complejas y ejecutarlas de forma eficiente.
• Generación de Código: Nx proporciona herramientas de generación de código que pueden ayudarte a crear rápidamente nuevos proyectos, componentes y módulos, siguiendo las mejores prácticas y estándares consistentes.
• Ecosistema de Plugins: Nx tiene un rico ecosistema de plugins que admite varias tecnologías y marcos, como React, Angular, Node.js, NestJS y más.
• Visualización del Gráfico de Dependencias: Nx puede visualizar el gráfico de dependencias de tu monorepo, lo que te ayuda a comprender las relaciones entre los proyectos e identificar posibles problemas.
• Comandos Afectados: Nx proporciona comandos para ejecutar tareas solo en los proyectos que se ven afectados por un cambio específico. Esto te permite centrar tus esfuerzos en las áreas que necesitan atención.

Ejemplo de Uso de Nx

Ilustremos el uso de Nx con un ejemplo simplificado. Crearemos un monorepo con una aplicación React y una biblioteca Node.js.

1. Instalar la CLI de Nx Globalmente:

npm install -g create-nx-workspace

2. Crear un Nuevo Espacio de Trabajo Nx:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Esto crea un nuevo espacio de trabajo Nx con una aplicación React. La opción `--preset=react` indica a Nx que inicialice el espacio de trabajo con configuraciones específicas de React.

3. Generar una Biblioteca:

nx generate @nrwl/node:library my-library

Esto genera una nueva biblioteca Node.js llamada `my-library`. Nx configura automáticamente la biblioteca y sus dependencias.

4. Construir la Aplicación:

nx build my-app

Esto construye la aplicación React. Nx analiza el gráfico de dependencias y solo reconstruye los archivos necesarios.

5. Ejecutar Pruebas:

nx test my-app

Esto ejecuta las pruebas unitarias para la aplicación React. Nx almacena en caché los resultados de las pruebas para acelerar las ejecuciones de pruebas posteriores.

6. Ver el Gráfico de Dependencias:

nx graph

Esto abre una interfaz web que visualiza el gráfico de dependencias del monorepo.

Configuración de Nx

Nx se configura a través del archivo `nx.json`, que se encuentra en la raíz del espacio de trabajo. Este archivo define los proyectos en el espacio de trabajo, sus dependencias y las tareas que se pueden ejecutar en ellos.

Las opciones de configuración clave en `nx.json` incluyen:

• `projects`: Define los proyectos en el espacio de trabajo y su configuración, como su directorio raíz y objetivos de construcción.
• `tasksRunnerOptions`: Configura el ejecutor de tareas, que es responsable de ejecutar tareas y almacenar en caché sus resultados.
• `affected`: Configura cómo Nx determina qué proyectos se ven afectados por un cambio.

Ejemplo `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx: ¿Cuál Elegir?

Tanto Lerna como Nx son excelentes herramientas para gestionar monorepos frontend, pero se adaptan a necesidades ligeramente diferentes. Aquí tienes una comparación para ayudarte a elegir la correcta para tu proyecto:

Característica	Lerna	Nx
Enfoque	Gestión de Paquetes	Sistema de Construcción y Orquestación de Tareas
Construcciones Incrementales	Limitado (requiere herramientas externas)	Integrado y muy optimizado
Almacenamiento en Caché de Cálculos	No	Sí
Generación de Código	No	Sí
Ecosistema de Plugins	Limitado	Extenso
Curva de Aprendizaje	Menor	Mayor
Complejidad	Más Simple	Más Complejo
Casos de Uso	Proyectos centrados principalmente en la gestión y publicación de paquetes npm.	Proyectos grandes y complejos que requieren tiempos de construcción optimizados, generación de código y un sistema de construcción integral.

Elige Lerna si:

• Principalmente necesitas gestionar y publicar paquetes npm.
• Tu proyecto es de tamaño relativamente pequeño a mediano.
• Prefieres una herramienta más sencilla con una curva de aprendizaje más baja.
• Ya estás familiarizado con npm y Yarn.

Elige Nx si:

• Necesitas tiempos de construcción optimizados y construcciones incrementales.
• Deseas capacidades de generación de código.
• Necesitas un sistema de construcción integral con orquestación de tareas.
• Tu proyecto es grande y complejo.
• Estás dispuesto a invertir tiempo en aprender una herramienta más potente.

¿Puedes usar Lerna con Nx?

Sí, Lerna y Nx se pueden usar juntos. Esta combinación te permite aprovechar las capacidades de gestión de paquetes de Lerna al mismo tiempo que te beneficias del sistema de construcción optimizado y la orquestación de tareas de Nx. Nx se puede configurar como un ejecutor de tareas para Lerna, proporcionando construcciones incrementales y almacenamiento en caché de cálculos para los paquetes gestionados por Lerna.

Mejores Prácticas para la Gestión de Monorepos Frontend

Independientemente de si eliges Lerna o Nx, seguir las mejores prácticas es crucial para gestionar con éxito un monorepo frontend:

• Establecer una Estructura de Proyecto Clara: Organiza tus proyectos de forma lógica y coherente. Utiliza una convención de nomenclatura clara para los paquetes y bibliotecas.
• Aplicar Estándares de Codificación Consistentes: Utiliza linters y formatters para garantizar un estilo de código consistente en todos los proyectos. Herramientas como ESLint y Prettier se pueden integrar en tu flujo de trabajo.
• Automatizar los Procesos de Construcción y Prueba: Utiliza tuberías de CI/CD para automatizar los procesos de construcción, prueba y despliegue. Se pueden utilizar herramientas como Jenkins, CircleCI y GitHub Actions.
• Implementar Revisiones de Código: Realiza revisiones de código exhaustivas para garantizar la calidad y el mantenimiento del código. Utiliza solicitudes de extracción y herramientas de revisión de código.
• Supervisar los Tiempos de Construcción y el Rendimiento: Realiza un seguimiento de los tiempos de construcción y las métricas de rendimiento para identificar cuellos de botella y áreas de mejora. Nx proporciona herramientas para analizar el rendimiento de la construcción.
• Documentar la Estructura y los Procesos de tu Monorepo: Crea una documentación clara que explique la estructura de tu monorepo, las herramientas y tecnologías utilizadas y los flujos de trabajo de desarrollo.
• Adoptar Commits Convencionales: Utiliza commits convencionales para automatizar los procesos de versionado y lanzamiento. Lerna es compatible con commits convencionales de forma predeterminada.

Conclusión

Los monorepos frontend ofrecen ventajas significativas para la gestión de proyectos grandes y complejos, incluido el intercambio de código, la gestión simplificada de dependencias y la colaboración mejorada. Lerna y Nx son herramientas poderosas que pueden ayudarte a gestionar eficazmente un monorepo frontend. Lerna es una excelente opción para gestionar paquetes npm, mientras que Nx proporciona un sistema de construcción más completo con funciones avanzadas como construcciones incrementales y generación de código. Al considerar cuidadosamente las necesidades de tu proyecto y seguir las mejores prácticas, puedes adoptar con éxito un monorepo frontend y cosechar sus beneficios.

Recuerda considerar factores como la experiencia de tu equipo, la complejidad del proyecto y los requisitos de rendimiento al elegir entre Lerna y Nx. Experimenta con ambas herramientas y encuentra la que mejor se adapte a tus necesidades específicas.

¡Buena suerte con tu viaje monorepo!