La Era de los Monorepos

Rate this content
Bookmark

La historia de la web se puede dividir en saltos evolutivos en el desarrollo. La era de los scripts en línea, la era de jQuery, la era de las SPAs, la era de JAMStack...

Ahora estamos entrando en la siguiente etapa que ha sido cuidadosamente preparada en los últimos años. Permíteme invitarte al mundo de las soluciones modernas de monorepo y compartir contigo los beneficios que obtendrás al usarlas en proyectos de cualquier tamaño y configuración. Es hora de automatizar esas tareas de boilerplate y reducir los cuellos de botella para que puedas centrarte en lo que realmente importa.

¡Prepárate para el próximo salto! ¡Bienvenido a la era de los monorepos!

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Los monorepos son repositorios que contienen múltiples proyectos, como aplicaciones y bibliotecas, en un único repositorio. Son importantes porque facilitan la gestión de dependencias, mejoran la sincronización entre equipos y potencian la reutilización de código, acelerando así el desarrollo y despliegue de software.

La web comenzó con páginas estáticas y simple HTML. Con el tiempo, se introdujo dinamismo con tecnologías como JavaScript, lo que llevó a la creación de aplicaciones web más complejas, incluidas las aplicaciones de una sola página (SPA) con frameworks como AngularJS, React y Vue.

Los monorepos resuelven problemas de coordinación entre diferentes partes de un proyecto, como el frontend y el backend, evitando desincronizaciones y errores debido a cambios no comunicados entre equipos. Facilitan la visibilidad y el seguimiento de todas las partes del proyecto en un solo lugar.

Los monorepos permiten generar gráficos de dependencias y llevar a cabo una orquestación de tareas eficiente, lo que reduce el tiempo de compilación y despliegue solo a los proyectos afectados por cambios. Esto resulta en ciclos de desarrollo más rápidos y menor uso de recursos.

NX ofrece una integración y configuración simplificadas para manejar monorepos, con características como caché distribuida y ejecución de tareas distribuidas. Además, permite una fácil migración y actualización de proyectos, y proporciona herramientas consistentes a través de diferentes frameworks.

Las restricciones de código en los monorepos son reglas que limitan cómo los diferentes proyectos dentro del repositorio pueden interactuar entre sí, evitando que se generen dependencias no deseadas y manteniendo una arquitectura limpia y gestionable.

Miroslav Jonas
Miroslav Jonas
25 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy trata sobre el mundo de los monorepos, su historia, beneficios y características. Los monorepos abordan desafíos en el desarrollo web, como procesos de compilación lentos y conexiones inestables en dispositivos móviles. La colocación en monorepos permite compartir fácilmente funciones y componentes entre proyectos. La velocidad y eficiencia en los monorepos se logran a través de la colocación, los gráficos de dependencia y la orquestación de tareas. Herramientas de monorepo como Learnr ofrecen características como el almacenamiento en caché y la ejecución distribuida de tareas. Los monorepos proporcionan compartir código, herramientas consistentes y migración automatizada, lo que resulta en una experiencia de desarrollo 10 veces mejor.
Available in English: The Age of Monorepos

1. Introducción a los Monorepos

Short description:

Gracias a todos por unirse a mi charla. Hoy voy a hablar sobre el increíble mundo de los monorepos. Pero antes de sumergirnos en eso, tengo un importante aviso legal. En esta diapositiva, verán algunos ejemplos de un diseño web extremadamente malo. Verán algunos colores parpadeantes que podrían causar ataques de felicidad. Y finalmente, verán algunas características que cambiarán sus vidas.

Desafortunadamente, el MC decidió renunciar en el último momento, así que tengo que presentarme yo mismo, pero está bien. Hoy voy a hablar sobre el increíble mundo de los monorepos. Pero antes de sumergirnos en eso, tengo un importante aviso legal. En esta diapositiva, verán algunos ejemplos de un diseño web extremadamente malo. Verán algunos colores parpadeantes que podrían causar ataques de felicidad. Y finalmente, verán algunas características que cambiarán sus vidas. Así que, si tienen antecedentes médicos con alguno de estos síntomas, tal vez sea mejor cambiar de tema. De lo contrario, asumo que asumen la plena responsabilidad de estar aquí.

2. Introducción a la Historia del Desarrollo Web

Short description:

Y con esa nota formal, permítanme presentarme. Mi nombre es Miroslav Janas. Trabajo para Narval en la herramienta llamada nX. Antes de sumergirnos en lo que son los monorepos, hagamos un viaje al pasado para entender cómo llegamos aquí. Al principio, la web era estática. Las páginas eran aburridas, pero luego los lenguajes de programación como JavaScript trajeron dinamicidad. A medida que los sitios web se volvieron más complicados, surgieron las aplicaciones de una sola página. Sin embargo, el auge de los teléfonos inteligentes trajo nuevos desafíos con conexiones inestables.

Y con esa nota formal, permítanme presentarme. Mi nombre es Miroslav Janas. Trabajo para Narval en la herramienta llamada nX, de la que escucharán mucho hoy. También coorganizo dos encuentros en Viena, ViennaJS y AngularVienna.

Ahora, antes de sumergirnos en lo que son los monorepos, para entender cómo llegamos al punto en el que se necesitan los monorepos, debemos hacer un viaje al pasado, hasta los inicios de la web, para rastrear nuestros pasos y ver cómo llegamos aquí. Abróchense los cinturones, es hora de la historia.

Al principio, como todos saben, la web era estática. Era simplemente una colección de páginas HTML enlazadas con hipervínculos. Las primeras páginas web se veían algo así como esta página de Yahoo. Tenían mucho texto, muchos enlaces, imágenes muy pequeñas, era la época de la conexión dial-up, por lo que las cosas tenían que ser pequeñas y rápidas. Por lo general, tenían una elección de colores contrastantes, pero las páginas eran aburridas. Eran demasiado estáticas, así que la gente ideó un formato gráfico que daría un poco de vida. ¿Quién recuerda a este bebé bailarín? Algunas páginas llevaron esto a un nivel completamente nuevo, donde toda la página estaba girando en animations. Pero verán, aún no era lo que necesitábamos porque esto se ejecutaba en un bucle, no era una animación controlada, no era un movimiento controlado. Entonces, a Brendan Eich de Netscape, una empresa que producía el navegador popular en ese momento, se le asignó la tarea de crear un lenguaje en solo dos semanas que recogiera algunas ideas de Java y que finalmente llevara dinamicidad al navegador. Y dos semanas después, nació LiveScript, que luego se renombró a JavaScript, para deleite de generaciones de reclutadores y cazatalentos desde entonces.

Y así comenzó la era de la programación de scripts y con esto finalmente tuvimos páginas con galerías de imágenes elegantes, teníamos efectos de menú locos, botones que huían de nuestro cursor, pero las páginas, bueno, todavía podían verse muy feas, pero al menos tenían movimiento controlado finalmente. Y a medida que el número de scripts en una página crecía, comenzamos a encontrar ciertos patterns para reconocer ciertas cosas que se repetían. Al mismo tiempo, este fue un momento de famosas guerras de navegadores entre Microsoft y Netscape y había muchas inconsistencias entre los estándares en estos dos navegadores, por lo que los desarrolladores generalmente tenían que implementar cosas para ambos navegadores. Afortunadamente, ahora teníamos bibliotecas de ayuda, especialmente jQuery, que superaría estas diferencias y crearía una envoltura alrededor de la manipulación del DOM. Esto te permitiría crear rápidamente tus sitios web. Y a medida que los sitios web se volvieron más y más complicados, comenzamos a llamarlos aplicaciones web, no sitios web.

Pero encapsular el DOM y las animations no era la única plantilla. Todavía había mucho por encapsular, como el enrutamiento, la gestión de eventos, la gestión del estado, y esto fue lo que llevó a las aplicaciones de una sola página. El primer framework popular que implementó aplicaciones de una sola página fue AngularJS, y pronto le siguieron React y Vue. Todos ellos todavía se usan hoy en día en algunas variaciones y juntos cambian nuestra forma de pensar en el desarrollo web. Establecieron el desarrollo web tal como lo conocemos hoy. Desafortunadamente para ellos, este también fue el momento en que nuestros teléfonos se volvieron inteligentes y ahora de repente ya no navegamos por Internet en nuestras computadoras de escritorio, sino que comenzamos a navegar por Internet en nuestros teléfonos móviles mientras estábamos sentados en bancos de parques o en transporte público o sentados en un asiento de inodoro. En estos lugares, la conexión no era realmente estable. Podíamos esperar como máximo 3G con muchas interrupciones.

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.
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.
Monorepos Rápidos de React con una Alta Calidad DX
React Summit 2022React Summit 2022
22 min
Monorepos Rápidos de React con una Alta Calidad DX
Welcome to a talk about fast React monorepos with high quality DX. Monorepos allow for collaboration and code sharing between packages, providing a more organized development environment. Leveraging caching and distribution in CI can improve speed and efficiency. NX provides a feature-rich monorepo setup for React, improving developer experience. Monorepo tools like NX console extension and project graph visualization enhance capabilities and enforce code quality.

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