Monorepos: Boosting Development Efficiency

Rate this content
Bookmark

Un monorepo puede sonar como algo grande e intimidante, pero vamos a desglosarlo hasta lo esencial. Un monorepo te ayuda a gestionar mejor las relaciones que ya existen entre tus proyectos. Una vez que entendemos esas relaciones, podemos usar herramientas para definirlas muy rápidamente y unirlas en un conjunto más cohesivo.

This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.

Philip Fulcher
Philip Fulcher
6 min
19 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Los monorepos son repositorios únicos que contienen múltiples proyectos distintos con relaciones bien definidas. Las relaciones en el código se basan en la distancia, donde el código en diferentes archivos es la relación más cercana. Al importar código de un archivo a otro, se establecen dependencias, lo que permite que los cambios en un archivo impacten inmediatamente en el otro. Esto permite una iteración y desarrollo rápidos. Cuando separamos el código en paquetes o APIs, aumenta la distancia entre las piezas de código, haciendo más lento entender el impacto de los cambios. Sin embargo, cuando se combinan múltiples proyectos en un monorepo, las relaciones entre ellos se reducen, permitiendo un desarrollo más rápido. Los monorepos hacen que las relaciones sean explícitas y proporcionan herramientas para entender su impacto. Para saber más, visita monorepo.tools o nx.dev para obtener información sobre la gestión de monorepos con NX.

1. Introducción a Monorepos

Short description:

Los monorepos son repositorios únicos que contienen múltiples proyectos distintos con relaciones bien definidas. Las relaciones en el código se basan en la distancia, donde el código en diferentes archivos es la relación más cercana. Al importar código de un archivo a otro, se establecen dependencias, lo que permite que los cambios en un archivo impacten inmediatamente en el otro. Esto permite una iteración y desarrollo rápidos.

Mi nombre es Philip Fulcher. Tengo unos cinco minutos para hablarles sobre monorepos. Así que hablemos de ello. Pero, ¿de qué hablamos cuando hablamos de monorepos? ¿Qué es siquiera un monorepo? Y algunas personas podrían decir, oh, eso es como cuando Google solo tiene un repo para toda la empresa, ¿verdad? Y eso no es de lo que estamos hablando. Esa es una escala de monorepo que es inviable para la mayoría de las personas. Probablemente no seas Google.

Tal vez un monorepo es cuando simplemente lanzas todo tu código en un solo repo y luego lo resuelves más tarde. Y eso definitivamente no es algo que queramos hacer. Eso va a causar todo tipo de problemas. Así que tengamos una buena definición práctica de un monorepo es un único repositorio que contiene múltiples proyectos distintos con relaciones bien definidas. Y de lo que realmente quiero hablarles hoy es sobre este último elemento. ¿Qué queremos decir con relaciones bien definidas?

Pensemos en las relaciones en el código en términos de distancia. Así que lo más cercano que dos piezas de tu código pueden estar relacionadas es simplemente código que está en diferentes archivos. Tienes un componente de botón. Tiene todas tus clases de Tailwind que te mantienen en la marca. Y luego vas a importar ese botón en tu formulario para poder usarlo realmente. Y ahora hay una dependencia entre el formulario y el botón. El formulario no funciona sin el botón. Y hacemos esto todo el tiempo. Y damos por sentado lo bien que funciona esta relación para nosotros. Cuando haces un cambio en el archivo del botón, puedes ver inmediatamente el cambio en el formulario. Tienes ya sea una representación en el navegador, o tienes un error de compilación. Tal vez tienes una suite de pruebas ejecutándose. Eso te va a decir que hay un problema, o incluso errores de lint. Pero puedes entender el impacto de tu cambio inmediatamente. Y debido a eso, la iteración es realmente rápida. Haces un cambio. Puedes verlo. Puedes responder a ello, arreglarlo, pasar a lo siguiente. Pero te estás moviendo rápido.

2. Benefits of Monorepos

Short description:

Cuando separamos el código en paquetes o APIs, aumenta la distancia entre las piezas de código, lo que hace más lento entender el impacto de los cambios. Sin embargo, cuando se combinan múltiples proyectos en un monorepo, las relaciones entre ellos se reducen, permitiendo un desarrollo más rápido. Los monorepos hacen que las relaciones sean explícitas y proporcionan herramientas para entender su impacto. Para saber más, visita monorepo.tools o nx.dev para obtener información sobre la gestión de monorepos con NX.

Veamos qué sucede si llevamos esa relación un paso más allá. Y pensemos en el código en paquetes. Y si importamos ese botón de un sistema de diseño que publica nuestra organización, esto se siente muy similar a lo que acabamos de hacer. Desafortunadamente, hemos aumentado la distancia entre estas dos piezas de código. Y lo que eso hace es que entender el impacto del cambio sea lento. Para hacer un cambio en el botón, hago un cambio dentro del sistema de diseño. Tengo que pasar por algún tipo de proceso de compilación o empaquetado y luego publicación, y luego tengo que consumir la última versión del paquete para ver el cambio final en mi formulario. Y eso es realmente lento, incluso cuando estás trabajando solo en una sola máquina.

Cuando hablamos de cruzar barreras de equipo allí, tu equipo de sistema de diseño tiene que hacer el cambio, fusionar, cortar una versión, publicar. Tienes que consumir la última versión. Esa es una comprensión realmente lenta del impacto del cambio del equipo de sistema de diseño. Y por lo tanto, la iteración es muy lenta. Demos un paso aún más allá en términos de relación entre códigos y pensemos en APIs. Tu front end tiene una dependencia implícita de tu back end. No funcionará sin el back end en la mayoría de los casos. Y entonces, si tienes una API que se desarrolla, es como, todos acordamos al principio del sprint que este endpoint de API se llamaría Contact Create, ¿verdad? Bueno, salió como Contact Init. No sé si alguna vez has tenido cambios en tu API de back end que suceden así a mitad de sprint. Pero ahora esta relación es aún más lenta de lo que hemos hablado antes.

Porque ahora es el mismo proceso del que hablamos de fusionar un PR, y empaquetar, y empaquetar. Pero ahora estás hablando de un despliegue completo antes de que pueda realmente interactuar con esta nueva API de back end y confirmar que los cambios realmente funcionan. Y esa iteración es increíblemente lenta. Los monorepos, cuando pones esos múltiples proyectos todos juntos en un solo repositorio, van a reducir la distancia de tus relaciones. Ese cambio que quieres hacer en tu botón o tu API de back end ahora está co-ubicado con el código de front end que lo va a consumir. Y eso solo significa que está en el mismo repo, y que podemos importarlo, y podemos usar todas las herramientas realmente buenas que nos ayudan a entender el impacto de ese cambio. Y con algunas herramientas útiles de una herramienta de monorepo, podemos entender esas relaciones y realmente rastrearlas para determinar qué ha sido afectado por nuestros cambios. Así que cuando hablamos de poner todos tus proyectos o muchos, muchos proyectos en un solo monorepo, sentimos que estamos haciendo un gran cambio. Pero en realidad no estamos cambiando las relaciones entre los proyectos que ya tenemos. Lo que estamos haciendo es hacerlas explícitas. Nos aseguramos de saber que esa relación existe y cómo entendemos el impacto de los cambios a través de esa relación. Y por eso, esas relaciones están bien definidas. Y a través de eso, los monorepos te van a ayudar a moverte más rápido. Si quieres saber más sobre monorepos, por favor visita monorepo.tools. Te ayudará a entender el concepto de monorepo así como muchas de las herramientas que están disponibles en el espacio. Creo que la mejor herramienta para que gestiones tu monorepo hoy es NX.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Elevando Monorepos con los Espacios de Trabajo de npm
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Elevando Monorepos con los Espacios de Trabajo de npm
Top Content
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
Poner fin al dolor: Repensando CI para Monorepos Grandes
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Poner fin al dolor: Repensando CI para Monorepos Grandes
Today's Talk discusses rethinking CI in monorepos, with a focus on leveraging the implicit graph of project dependencies to optimize build times and manage complexity. The use of NX Replay and NX Agents is highlighted as a way to enhance CI efficiency by caching previous computations and distributing tasks across multiple machines. Fine-grained distribution and flakiness detection are discussed as methods to improve distribution efficiency and ensure a clean setup. Enabling distribution with NX Agents simplifies the setup process, and NX Cloud offers dynamic scaling and cost reduction. Overall, the Talk explores strategies to improve the scalability and efficiency of CI pipelines in monorepos.
Microfrontends Federados a Gran Escala
React Summit 2023React Summit 2023
31 min
Microfrontends Federados a Gran Escala
Top Content
This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.
Escala tu aplicación de React sin micro-frontends
React Summit 2022React Summit 2022
21 min
Escala tu aplicación de React sin micro-frontends
This Talk discusses scaling a React app without micro-frontend and the challenges of a growing codebase. Annex is introduced as a tool for smart rebuilds and computation caching. The importance of libraries in organizing code and promoting clean architecture is emphasized. The use of caching, NxCloud, and incremental build for optimization is explored. Updating dependencies and utilizing profiling tools are suggested for further performance improvements. Splitting the app into libraries and the benefits of a build system like NX are highlighted.
La Era de los Monorepos
JSNation 2022JSNation 2022
25 min
La Era de los Monorepos
Today's Talk is about the world of monorepos, their history, benefits, and features. Monorepos address challenges in web development, such as slow build processes and unstable connections on mobile devices. Collocation in monorepos enables easy sharing of functions and components among projects. Speed and efficiency in monorepos are achieved through collocation, dependency graphs, and task orchestration. Monorepo tools like Learnr offer features such as caching and distributed task execution. Monorepos provide code sharing, consistent tooling, and automated migration, resulting in a 10x developer experience.
Remixando tu Stack en un Espacio de Trabajo Monorepo
Remix Conf Europe 2022Remix Conf Europe 2022
22 min
Remixando tu Stack en un Espacio de Trabajo Monorepo
Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.

Workshops on related topic

React a Escala con Nx
React Summit 2023React Summit 2023
145 min
React a Escala con Nx
Top Content
Featured WorkshopFree
Isaac Mann
Isaac Mann
Vamos a utilizar Nx y algunos de sus plugins para acelerar el desarrollo de esta aplicación.
Algunas de las cosas que aprenderás:- Generar un espacio de trabajo Nx prístino- Generar aplicaciones frontend React y APIs backend dentro de tu espacio de trabajo, con proxies preconfigurados- Crear librerías compartidas para reutilizar código- Generar nuevos componentes enrutados con todas las rutas preconfiguradas por Nx y listas para usar- Cómo organizar el código en un monorepositorio- Mover fácilmente las librerías alrededor de tu estructura de carpetas- Crear historias de Storybook y pruebas e2e de Cypress para tus componentes
Tabla de contenidos: - Lab 1 - Generar un espacio de trabajo vacío- Lab 2 - Generar una aplicación React- Lab 3 - Ejecutores- Lab 3.1 - Migraciones- Lab 4 - Generar una librería de componentes- Lab 5 - Generar una librería de utilidades- Lab 6 - Generar una librería de rutas- Lab 7 - Añadir una API de Express- Lab 8 - Mostrar un juego completo en el componente de detalle de juego enrutado- Lab 9 - Generar una librería de tipos que la API y el frontend pueden compartir- Lab 10 - Generar historias de Storybook para el componente de interfaz de usuario compartido- Lab 11 - Prueba E2E del componente compartido
Monorepos de Node con Nx
Node Congress 2023Node Congress 2023
160 min
Monorepos de Node con Nx
Top Content
WorkshopFree
Isaac Mann
Isaac Mann
Varias apis y varios equipos en el mismo repositorio pueden causar muchos dolores de cabeza, pero Nx te tiene cubierto. Aprende a compartir código, mantener archivos de configuración y coordinar cambios en un monorepo que puede escalar tanto como tu organización. Nx te permite dar estructura a un repositorio con cientos de colaboradores y elimina las desaceleraciones de CI que normalmente ocurren a medida que crece la base de código.
Índice de contenidos:- Laboratorio 1 - Generar un espacio de trabajo vacío- Laboratorio 2 - Generar una api de node- Laboratorio 3 - Ejecutores- Laboratorio 4 - Migraciones- Laboratorio 5 - Generar una biblioteca de autenticación- Laboratorio 6 - Generar una biblioteca de base de datos- Laboratorio 7 - Añadir un cli de node- Laboratorio 8 - Limites de módulo- Laboratorio 9 - Plugins y Generadores - Introducción- Laboratorio 10 - Plugins y Generadores - Modificación de archivos- Laboratorio 11 - Configuración de CI- Laboratorio 12 - Caché distribuida