Historia de Dos Repositorios

Rate this content
Bookmark
Slides

Nem todos os monorepos são iguais, e nem todas as equipes são iguais.

Gerenciar um monorepo é muito mais do que apenas "vamos selecionar essa ferramenta ou aquela ferramenta". Envolve muitas decisões de design que você precisa tomar para o produto e para os desenvolvedores.


Nesta palestra, vou abordar os principais desafios dos monorepos - instalação e vinculação de pacotes, processos de desenvolvimento e implantação - e descrever as possibilidades que existem para cada etapa.


No final da palestra, você terá um modelo simples e poderoso que o ajudará a fazer a escolha certa de ferramentas e processos para o seu monorepo.

This talk has been presented at Node Congress 2023, check out the latest edition of this JavaScript Conference.

FAQ

ECMAScript 6, también conocido como ES6, es una versión de JavaScript que introdujo muchas características nuevas en 2015, mejorando significativamente la capacidad de escritura de código con adiciones como Operadores de propagación, Función de error, const y let.

Sebastian Mackenzie es un desarrollador que en 2014 comenzó un proyecto para aprender más sobre JavaScript y adaptar código ES6 a navegadores que solo soportaban ES5, lo que eventualmente se convirtió en el conocido transpilador Babel.

Un Monorepo es un único repositorio que contiene múltiples artefactos como paquetes, servicios backend o aplicaciones frontend, facilitando la gestión y colaboración en proyectos grandes.

La popularidad creciente de JavaScript llevó a la introducción de tecnologías como Node.js y frameworks como Angular y React, además de la evolución del lenguaje mismo con la actualización a ECMAScript 6.

Las estrategias clave incluyen la instalación y vinculación de paquetes, la ejecución de pruebas y linter, la organización del proceso de construcción y la estrategia de lanzamiento y versionado de los artefactos dentro del Monorepo.

Lerna es una herramienta que ayuda a administrar proyectos con múltiples paquetes en un Monorepo, facilitando tareas como la instalación de dependencias y la publicación de paquetes.

Yarn y NX son herramientas que ayudan a gestionar Monorepos pero de formas diferentes. Yarn utiliza espacios de trabajo para manejar paquetes individuales, mientras que NX considera el espacio de trabajo como todo el Monorepo.

Los desafíos incluyen la gestión de dependencias, la configuración de la construcción y pruebas de los paquetes, y la toma de decisiones estratégicas sobre la inclusión de artefactos y la estrategia de lanzamiento.

Tally Barak
Tally Barak
24 min
17 Apr, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
JavaScript se tornou popular em meados de 2010 com a introdução do Node e frameworks avançados como Angular e React. Monorepos, que são repositórios únicos contendo vários artefatos, são uma abordagem popular para gerenciar projetos JavaScript. A vinculação de pacotes internamente em um monorepo pode ser feita por meio de instalação local ou global, ou publicando-os em um registro de artefatos. O gerenciamento de monorepos se tornou mais complexo com a introdução de ferramentas como TypeScript e Babel. O processo de desenvolvimento de aplicações web envolve um processo de compilação, testes e linting, que podem ser facilitados por ferramentas como Yarn Workspace e NPM Workspace. A estratégia de lançamento para monorepos pode ser unificada ou distribuída, e é importante selecionar ferramentas que estejam alinhadas com a estratégia escolhida.
Available in English: Tale of Two Repos

1. The Rise of JavaScript and Monorepos

Short description:

JavaScript se hizo popular a mediados de la década de 2010 con la introducción de Node y frameworks avanzados como Angular y React. En 2015, ECMAScript 6 (ES6) trajo nuevas características, pero los motores que ejecutaban el lenguaje no las admitían. Sebastian MacKenzie comenzó un proyecto para convertir el código ES6 para que pudiera ser utilizado en navegadores que admitieran ES5. El proyecto creció y se convirtió en Babyl, una decisión controvertida. Lerna, inicialmente sinónimo de Monorepos, se creó para gestionar los complementos del proyecto. Sin embargo, la forma en que usamos los Monorepos en 2015 puede no ser adecuada para el JavaScript moderno. Yarn y NX utilizan el término `workspace` de manera diferente. Tengo experiencia con Monorepos desde 2017.

Era el mejor de los tiempos, era el peor de los tiempos. Alrededor de la última década, JavaScript comenzó a volverse muy popular, a mediados de 2010. Y la introducción de Node fue una de las cosas, y frameworks avanzados como Angular y React fueron introducidos, y se volvió realmente popular.

En 2015, JavaScript realmente despertó de un profundo sueño de unos años y tuvo muchas características nuevas. Esto se conoció como ECMAScript 6, o como nos gusta llamarlo, ES6. Pero también hubo algunos problemas, porque los motores que ejecutaban el lenguaje, es decir, Node, y esto es un navegador diferente, y especialmente un navegador que ya no está con nosotros, no sabían cómo manejar esas cosas.

Cosas como Operadores de propagación, Función de error, Const y Let eran extremadamente útiles al escribir código JavaScript, pero simplemente aún no eran compatibles. Y nosotros, los desarrolladores, queremos esas características ahora mismo. En 2014, un joven llamado Sebastian MacKenzie comenzó un proyecto para aprender más sobre el funcionamiento de JavaScript y estaba tratando de convertir el código de ES6, para que pudiera ser utilizado en el navegador que admitía ES5. Así que Sebastian creó un repositorio y construyó el núcleo de un proyecto, pero como había tantas características para ES6 y seguían llegando más todo el tiempo, decidieron construirlo de forma extensible y utilizando complementos.

Así que abrieron un repositorio para cada uno de los complementos para que pudieran ser instalados por separado. Y el proyecto creció y creció y creció porque había tantos complementos. Así que decidieron juntar todos los repositorios de los diferentes complementos en un solo complemento. Y por cierto, al mismo tiempo, también cambiaron el nombre del proyecto. Ya no lo llamaban 6to5 como antes, y cambiaron el nombre a Babyl. Así que pusieron todos sus complementos en un repositorio que podía publicar muchos paquetes. Y esta decisión fue muy, muy controvertida en ese momento, no estaba muy clara en absoluto. Y fue tan controvertida que tuvieron que escribir en su repositorio de GitHub una explicación de por qué lo estaban haciendo. Y también construyeron algunas utilidades para ayudarles a gestionar los diferentes paquetes. Más tarde, extrajeron todas estas utilidades en un repositorio separado, nuevamente, otro repositorio, y lo llamaron Lerna. Y en ese entonces y durante mucho tiempo, tal vez incluso hasta hoy, Lerna era sinónimo de usar Monorepos. Pero creo que la forma en que usamos JavaScript y Monorepos en 2015 no es realmente lo que necesitamos hacer hoy en 2023 y la forma de manejar un JavaScript moderno.

El problema es que a veces pasamos por alto eso y llegamos al punto en que simplemente decimos la palabra mágica Monorepos y asumimos que todos están hablando de lo mismo. Pero la realidad es que Monorepos es algo grande y todos significan algo completamente diferente. Solo para darte un ejemplo. Si miramos dos herramientas populares, Yarn y NX, usan el mismo término pero para cosas opuestas. En Yarn, un workspace es un solo paquete. En NX, cuando dicen workspace se refieren a todo el Monorepo. Así que soy Talib Barak y he estado jugando con Monorepos desde 2017. Así que eso es bastante tiempo.

2. Decisions and Strategies for Monorepos

Short description:

Y no voy a hablar de esa herramienta o esa herramienta, Yarn o NX o TurboRepo. Al mover o tener un Monorepo, las decisiones y estrategias impactan en el proceso de desarrollo, la calidad del producto, la velocidad y la formación del equipo. Un Monorepo es un único repositorio que contiene múltiples artefactos como paquetes, servicios backend y aplicaciones frontend. La primera pregunta que debemos hacernos es qué incluir. No tiene que ser todo el código de la empresa. Otra decisión es si optar por un Monorepo. Si se elige, el repositorio incluirá múltiples artefactos con archivos package.json separados. La primera decisión se refiere a la instalación y al enfoque de agrupar los paquetes en la raíz del repositorio.

Y no voy a hablar de esa herramienta o esa herramienta, Yarn o NX o TurboRepo. Quiero aprovechar esta oportunidad y estos pocos minutos para explicar cuáles son las decisiones, cuáles son las estrategias que debemos tomar cuando nos mudamos o tenemos un Monorepo. Porque estas decisiones, que a veces tomamos sin preocuparnos realmente por ellas, las tomamos como ideas implícitas, en realidad tienen un impacto en todo nuestro proceso de desarrollo. Impactarán en la calidad de nuestro producto, en la velocidad de desarrollo, en la formación que debemos brindar al equipo, y así sucesivamente.

No hay una respuesta correcta o incorrecta aquí de la que vaya a hablar y decir, mira, esta es una forma de hacerlo, pero más bien, cuáles son las consideraciones, en qué cosas debes pensar. Entonces, si volvemos atrás, ¿qué es un Monorepo? Un Monorepo es un único repositorio que contiene múltiples artefactos, cosas que deseas compartir, cosas que deseas publicar. Esto puede ser un paquete, un servicio backend, una aplicación frontend, y así sucesivamente.

Y la primera pregunta importante que debes hacerte cuando te pasas a un Monorepo es qué quiero incluir en mi Monorepo. Esto puede ser muchas cosas diferentes. Pueden ser las diferentes herramientas que estamos utilizando. Puede ser una aplicación frontend, microservicios, paquetes, servidores backend, y así sucesivamente. Esta es como la decisión de punto cero. ¿Qué pongo? Y no significa que tengas que poner todo el código de la empresa dentro de un solo Monorepo. Definitivamente puede ser solo una parte del código que tienes.

La otra decisión es si realmente debería optar por un Monorepo. Hay muchos artículos, deberías buscar si debería usar un Monorepo, y luego hay una respuesta, no deberías usar un Monorepo, y así sucesivamente. Entonces, en tercer lugar, porque hay diferentes consideraciones y diferentes cosas en las que debes pensar cuando tienes un Monorepo. Pero digamos que decidiste que sí, queremos ir con el Monorepo. Tu repositorio incluirá múltiples artefactos, y en el mundo de JavaScript y Node.js, esto significa que tendrá múltiples archivos package.json. Cada archivo package.json está relacionado con un artefacto que deseas publicar.

Y lo primero que tenemos dentro de nuestro archivo package.json es qué artefactos, qué dependencias y qué dependencias necesita este artefacto para funcionar. Y esto nos lleva a nuestra primera decisión, que es la instalación. Así es como se ven nuestros paquetes. De acuerdo. En cada archivo package.json, tenemos un conjunto de dependencias. Y cómo vamos a instalar. Entonces, si seguimos el mismo enfoque que usamos en un repositorio políglota cuando teníamos múltiples repositorios, significa que bajo cada paquete tendré un módulo de nodo que... No puedo hacer eso. Que tendrá todos los paquetes que necesita. Pero como sabemos que node_modules es algo realmente grande, y no queremos replicarlo múltiples veces para cada una de las dependencias, en realidad tenemos otro enfoque que podemos usar. Y este enfoque es agrupar los paquetes. En lugar de instalar cada paquete en su propio espacio de trabajo, podemos mover todo a la raíz de nuestro proyecto, de nuestro repositorio, e instalarlos una vez allí. Y la razón por la que esto funcionará, conocemos el algoritmo de búsqueda de node.

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

Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
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.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
pnpm: un gestor de paquetes rápido y eficiente para JavaScript
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
pnpm: un gestor de paquetes rápido y eficiente para JavaScript
pnpm is a fast and efficient package manager that gained popularity in 2021 and is used by big tech companies like Microsoft and TikTok. It has a unique isolated node module structure that prevents package conflicts and ensures each project only has access to its own dependencies. pnpm also offers superior monorepo support with its node module structure. It solves the disk space usage issue by using a content addressable storage, reducing disk space consumption. pnpm is incredibly fast due to its installation process and deterministic node module structure. It also allows file linking using hardlinks instead of symlinks.
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.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
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
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
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
De Todo App a B2B SaaS con Next.js y Clerk
React Summit US 2023React Summit US 2023
153 min
De Todo App a B2B SaaS con Next.js y Clerk
WorkshopFree
Dev Agrawal
Dev Agrawal
Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.