David (ダビッド ) | hace un mes | 5 min read

Nx: Por qué se ha convertido en mi herramienta favorita para proyectos TypeScript

Llevo casi 20 años diseñando y desplegando software. En ese camino, me he encontrado una y otra vez con un desafío clásico: ¿cómo gestionamos proyectos compuestos por múltiples partes (un backend, un frontend, librerías comunes) sin volvernos locos?

Básicamente hay dos maneras de organizar nuestro código en git: multi-repositorio, donde tradicionalmente cada servicio, aplicación y librería tiene su propio repositorio, y monorepo, donde todo esta en un único repositorio. En el post donde hablo de estos tipos de organización puedes tener más información.

Volviendo a la pregunta anterior, la respuesta corta es "con un monorepo" aunque una respuesta más inteligente sería “con una herramienta que potencie ese monorepo". Hoy quiero hablaros de esa herramienta: Nx. Este post es una introducción basada en mi propia experiencia, la primera de una serie donde exploraremos todo su potencial.

El Caos Organizado: ¿Por Qué un Monorepo?

Imagina este escenario: estás construyendo una aplicación web moderna. Tienes una API REST en NestJS y un frontend en React. Ambas partes necesitan compartir las mismas interfaces de datos (los famosos DTOs), la misma lógica de validación o incluso funciones de utilidad.

El enfoque tradicional sería tener dos repositorios distintos. Pronto empiezan los problemas:

Actualizas una interfaz en el backend y te olvidas de replicar el cambio en el frontend.
Mantener las dependencias sincronizadas es un trabajo manual y propenso a errores.
La configuración de build, tests y linting está duplicada y diverge con el tiempo.

Un monorepo ataca este problema guardando todo el código en un único repositorio. Pero un monorepo sin herramientas es como una ciudad sin carreteras. Y aquí es donde brilla Nx.

¿Qué es Exactamente Nx?

Nx no es solo un gestor de monorepos. Es un sistema de build extensible e inteligente diseñado para que trabajar con monorepos sea rápido, coherente y escalable.

Piensa en Nx como el cerebro que entiende toda tu base de código. Sus conceptos clave son:

Workspace (Espacio de trabajo): Es el monorepo en sí, el contenedor de todos tus proyectos.
Projects (Proyectos): Dentro de un workspace, tienes proyectos. Nx distingue entre aplicaciones (apps), que son ejecutables (tu API, tu web), y librerías (libs), que son trozos de código reutilizables (componentes de UI, lógica compartida, etc.).
Dependency Graph (Grafo de Dependencias): Este es el superpoder de Nx. Analiza tu código y crea un mapa de qué proyecto depende de qué otro. Puedes visualizarlo con el comando nx graph, y es una maravilla para entender arquitecturas complejas.

Las Joyas de la Corona: ¿Qué te ofrece Nx?

Caching Inteligente: Nx recuerda el resultado de las tareas que ejecuta (builds, tests...). Si no has cambiado el código de un proyecto o sus dependencias, Nx no volverá a ejecutar la tarea. Te devolverá el resultado desde la caché en milisegundos. Esto acelera los pipelines de CI/CD de una forma espectacular.
Generadores de Código: Con nx generate @nx/react:component MiComponente creas un nuevo componente con toda su configuración, ficheros de test y estilos, siguiendo las mejores prácticas. Te ahorra tiempo y mantiene la coherencia.
Executors: Son los encargados de ejecutar las tareas. Nx te da ejecutores para construir, testear y servir tus aplicaciones, pero también puedes crear los tuyos.

El Ecosistema de Plugins: Nx no viene solo

La funcionalidad de Nx se expande con plugins. Para un stack como el que uso en mi proyecto de ejemplo (React + NestJS), los plugins esenciales son:

@nx/js: Para gestionar librerías de TypeScript/JavaScript puras.
@nx/react: Soporte completo para aplicaciones React, incluyendo Vite.
@nx/nest: Todo lo necesario para construir APIs robustas con NestJS.

Fortalezas vs. Debilidades

✅ Fortalezas:

Velocidad endiablada: El caching es, simplemente, revolucionario.
Coherencia y Escalabilidad: Impone una estructura que facilita el trabajo en equipo y el crecimiento del proyecto.
Seguridad en el Stack de TypeScript: Al trabajar con TypeScript tanto en frontend como en backend, tener todo bajo el paraguas de Nx te da una confianza enorme en la gestión de tipos y dependencias.

⚠️ Debilidades (basadas en mi propia experiencia):

Curva de aprendizaje inicial: Al principio, la estructura de Nx, sus ficheros de configuración (project.json, nx.json) y la cantidad de opciones pueden abrumar. Hay que acostumbrarse.
Dominar los plugins: Lo que más me costó fue familiarizarme con el manejo de todos sus plugins y las opciones que ofrece cada uno. Una vez superas esa barrera, se vuelve muy intuitivo.
Requisito previo: Para sacarle todo el jugo, necesitas tener una base sólida de TypeScript y entender bien cómo funcionan los ficheros de configuración tsconfig.json. Este conocimiento te ahorrará muchos dolores de cabeza con la resolución de rutas y la configuración del monorepo.

Caso Práctico: Mi Proyecto Full-Stack con Nx

Para poner a prueba todo esto, he desarrollado una aplicación full stack:

Stack:
- Frontend con React (Vite),
- Backend con NestJS, y TypeORM para interactuar con la base de datos PostgreSQL. Todo preparado para funcionar con Docker y un pipeline de CI/CD en GitHub Actions.
El problema: Quería que los objetos comunes (interfaces, DTOs, validadores) entre el frontend y el backend fuesen una única fuente. Tener toda la plataforma en un único sitio para poder moverme por el código y su configuración mucho más rápido.
La solución con Nx: Para el uso compartido de clases y demás la estrategia fue crear una librería compartida (libs/tds-bm-common) dentro del monorepo. Y para el resto, el propio monorepo ya me da la organización que necesito.

Gracias a la configuración de tsconfig.json que Nx gestiona, tanto la app de React como la de NestJS pueden importar estos tipos de forma limpia y segura:

// Ejemplo en un fichero del backend (NestJS)
import type { CreateFolderDto, UpdateFolderDto } from '@tds/tds-bm-common';

// ¡El mismo import funciona en el frontend (React)!
import type { CreateFolderDto, UpdateFolderDto } from '@tds/tds-bm-common';

Se acabaron las duplicidades y los desajustes. La organización que me proporciona Nx es, sencillamente, el pilar de todo el proyecto.

En el siguiente repositorio puedes encontrar cómo estoy trabajando con este sistema:

Conclusión y Próximos Pasos

Mi viaje con Nx empezó por curiosidad tecnológica, hace ya varios años, pero rápidamente vi las ventajas prácticas que ofrecía para el desarrollo y mantenimiento de proyectos JavaScript/TypeScript. La inversión de tiempo inicial en aprender su filosofía es asumible ya que tiene un retorno a largo plazo en la mantenibilidad y escalabilidad del proyecto.

Este post es solo la punta del iceberg. Para que veas el potencial completo, incluyendo su integración con CI/CD y las nuevas funciones de IA, el equipo de Nx ha preparado este vídeo resumen que es oro puro.

Como has podido ver, el verdadero poder de Nx se revela cuando lo integramos con otras herramientas. Por eso, en próximos artículos de esta serie nos meteremos de lleno en ellas.

Ahora te toca a ti: ¿Usas Nx en tu día a día? ¿Qué herramienta para monorepos es tu favorita? ¿Te has enfrentado a los mismos problemas? ¡Me encantaría leer tu experiencia en los comentarios!