3 min to read
NX
NX en Monorepos
Buenas!! como andan? Felizzz primaveraaaa! Hoy les traigo un nuevo post para presentarles una joyita: NX.
Qué es
Bueno para empezar, tenemos las arquitecturas multirepo donde cada app tiene su repo, y las monorepo, donde compartimos el mismo repositorio para distintas apps. Como suelo hacer hincapié en desarrollos con Angular, puedo destacar que desde las últimas versiones de Angular, esto ya es posible, tanto la gestión como configuración de monorepos, se pueden construir aplicaciones como projects compartiendo código y módulos entre sí. Basta con setear el angular CLI nuestros diferentes proyectos y configuraciones para que puedan buildearse y deployarse independientemente.
NX surge de algunos colaboradores de Angular, y actualmente es usada por Google, Facebook, Microsoft etc en sus proyectos. NX permite esta gestión sin importar si usas Angular, React, etc, es una herramienta que nos ayuda en la gestión de monorepos, brindando una serie de características, ventajas y formas de trabajo diferente.
NX: Empecemos
Podemos crear un workspace desde cero
npx create-nx-workspace myorg
o migrar una aplicación existente con el siguiente comando:
ng add @nrwl/workspace
Ojo al piojo: al momento de migrar sólo podemos tener una sola app configurada en nuestro repo para poder usar este comando de migración.
Si tenemos más de una app en nuestro repo, deberemos migrar manually cada una
Con NX podemos no sólo presetear la tecnología usada (Angular, React etc) sino también otras configuraciones, por ejemplo nos propone Jest como framework de testing y Cypress para nuestros e2e tests. Esto se puede modificar por otros frameworks y tecnologías de nuestro proyecto, en la config de cli y en los nuevos @schematics que tendremos de ahora en adelante. Todos los pasos para empezar a migrar acá
Otra nota super importante: Si estamos trabajando con una versión de Angular inferior a 10, deberemos igualar la version del paquete @nrwl/angular para utilizar ambas. Por ejemplo tenemos Angular 9 en nuestro proyecto, la version de @nrwl/angular deberá ser la última del 9, en este caso 9.6.0.-
Qué ventajas ofrece
Algunas ventajas que me gustaría resaltar de esta tecnología es que te brinda ayuda y te ahorra tiempo al momento de verificar y confirmar qué módulos/librerías/apps se vieron afectados por nuestros cambios en X componentes/módulos.
Y con afectados me refiero que tenemos muuuuuchooooos comandos para correr estas verificaciones.
Builds más rapidos (corriendo lo afectado) Tests más rapidos (corriendo afectados) Lint y más, sin olvidar que además, genera mucha más confianza al momento de modificar un módulo, porque tenemos transparencia y visibilidad de los posibles impactos de nuestro cambio.
NX se banca muchas tecnologías para configurar sus correspondientes @schematics, entre ellas: Angular, React, Nest, Node, Next, etccc. Y si te copa Storybook, también lo podes configurar así
Recordemos que NX NO reemplaza a Angular Cli, sino que lo usa behind de scenes para generar código y correr tasks!
Les comparto todos los comandos que nos ofrece la guía oficial para estas verificaciones acá y la guía
También nos brinda un gráfico muy copado haciendo:
nx dep-graph
Donde nos muestra un lindo diagrama de nuestras apps, librerías y como se comunican entre sí.
Otra ventaja muy pro es que si tenés tanto frontend como backend en el mismo repo, es un golazoooo de media cancha, porque podemos reutilizar y compartir interfaces, clases, validaciones etc de ambos.
Si hay varios devs en el team o si el monorepo es cross-team y se desconoce el scope de cada app, NX resulta bastaaneeeteee conveniente para este escenario.
También podemos saber y recordar dónde se usa cada componente, pero no siempre es así, y si encima tenemos que verificar la existencia de efectos colaterales de todo lo que modificamos no es tan divertido o si?
Además de crear y exportar librerías independientes, hacerlas publicables para otros repos, también se pueden agrupar según conveniencia para que cada app tenga su “set” de librerías predefinidas. Piola.
Qué estás esperando para darle una chance? Si estas ventajas no te convencieron, aca tene ma
Espero les sirva y happy codinggggg!!!
