Monorepos basados en paquetes: Aceleración en menos de 7 minutos

Rate this content
Bookmark
SlidesGithub

¡Solo me dieron 7 minutos! ¡Así que esta es una charla sin diapositivas, solo código! Voy a mostrarte una implementación de monorepo basada en espacios de trabajo de Yarn/NPM/PNPM y cómo podemos acelerarla. En particular, estoy utilizando Nx para obtener una mejor paralelización, la capacidad de definir tuberías de tareas, caché y más. ¿Curioso? ¡Acompáñame!

9 min
01 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla trata sobre cómo acelerar MonrayBus en un espacio de trabajo pmpm mediante la organización de paquetes y la consideración de dependencias. Cubre la instalación y configuración del paquete nx, incluida la elección de scripts cacheables. Se introduce el comando nx-graph para analizar las dependencias y optimizar el proceso de compilación.

Available in English

1. Introducción a MonrayBus en un espacio de trabajo pmpm

Short description:

Quieren hablar sobre cómo acelerar MonrayBus en un espacio de trabajo pmpm. Los paquetes se organizan en una carpeta con sus propios módulos de nodo, definiciones de paquete JSON, archivos de entrada y scripts. Es posible tener dependencias entre paquetes. El paquete puede estar ubicado en la carpeta de ejemplos o en la carpeta de paquetes. Al construir, se deben considerar las dependencias entre paquetes. La interfaz de usuario, la lista de productos y la aplicación deben construirse en orden.

Entonces, me dijeron que tengo siete minutos, así que sin código, solo diapositivas, solo código, sin diapositivas, y lo que quiero hablar un poco en esta breve charla es cómo podemos acelerar MonrayBus, ¿de acuerdo?

Entonces, lo que tengo aquí es un espacio de trabajo pmpm, y utiliza pmpm como el sistema de gestión de paquetes. Es casi lo mismo que para npm o YARN workspaces, así que no hay una gran diferencia allí. Entonces, lo que puedes ver aquí en este archivo, especificamos dónde viven nuestros paquetes, que es aquí en esta carpeta de paquetes, donde cada uno de los paquetes básicamente tiene sus propios módulos de nodo, tienen sus propias definiciones de paquete JSON, también sus propios archivos de entrada, y lo más importante aquí abajo, incluso pueden tener dependencias entre ellos, ¿verdad?

Entonces, en un escenario de MonrayBus, y este es un caso especial donde se usa muy a menudo en bibliotecas de código abierto donde quieres publicar múltiples paquetes y pueden tener algunas Si miras el repositorio de React, VEET, Vue, Angular, muchos de ellos usan estos tipos de enfoques. Entonces, ¿cómo funciona esto? Ahora, en PMPM específicamente, hay este prefijo, y eso significa que debes resolver el paquete localmente dentro de Monray pero no buscar en algún registro de MMPM, y en tu espacio de trabajo MMPM no necesitas eso, pero esa estrella allí será la misma, y eso simplemente significa que siempre quiero depender de la última versión porque está localmente en mi espacio de trabajo, ¿verdad? No hagas esto para aplicaciones de producción. Esto es solo dentro del repositorio de Monray.

Entonces, ¿dónde vive este paquete? Ahí es donde esto vuelve a entrar en juego porque puede averiguar si puede vivir en esta carpeta de ejemplos o en una carpeta de paquetes. En este caso, esta biblioteca de UI aquí. Y nuevamente, este es un paquete con algunos scripts de construcción, scripts de prueba y potencialmente autores también, y luego tenemos aquí arriba algunas aplicaciones de ejemplo. Ahora, si desarrollas esto como tu repositorio de Monray de aplicación, esto podría ser la producción real. En repositorios de Monray basados en paquetes de código abierto, esto suele ser páginas de ejemplo donde pruebas tu producto o tus paquetes, o incluso podría implementarse junto con tu documentación para algunas demostraciones en vivo. Entonces, ¿cómo ejecutas cosas en un repositorio de Monray de este tipo? Bueno, obviamente podrías ingresar a la carpeta de paquetes y simplemente ejecutar estos scripts, ¿verdad? Eso funcionaría perfectamente. Sin embargo, no es muy práctico.

Entonces, por ejemplo, PMPM tiene un concepto llamado filtros. Por ejemplo, puedo filtrar todos los paquetes en esta carpeta de paquetes y ejecutar ese script aquí, que es ese script de construcción. Así que recorre recursivamente estos paquetes. Ahora, en este caso, es una configuración simple. Así que solo tenemos dos y los construiría. Ahora, también puedo ir y construir solo uno. Por ejemplo, tengo aquí ese remix allá arriba, y apunto al script de desarrollo. Entonces eso lanzaría mi aplicación remix, y luego puede servirla en local 3,000. Y puedo navegar por mi aplicación remix aquí, ¿verdad? Así que tengo, simplemente renderiza los componentes que están aquí. Sí. Es genial. De acuerdo. Entonces, podrías preguntarte, ¿qué hay de malo en esta configuración? Y realmente no hay nada mal aquí, ¿verdad? Porque funciona, y especialmente en una configuración más pequeña, funciona perfectamente bien y escala bien. Sin embargo, ya hay algunas cosas que podríamos optimizar. Por ejemplo, estos paquetes pueden depender potencialmente entre sí. Entonces, por ejemplo, el siguiente, nuestra aplicación remix importó la lista de productos, que internamente hemos visto que depende de la biblioteca de UI. Entonces, ¿qué sucede, por ejemplo, si elimino esta carpeta, porque consumieron esta carpeta, porque en el paquete json referenciamos estos archivos, que es la salida compilada de nuestros archivos typescript. Luego, si sirvo, por ejemplo, nuevamente la aplicación remix, se rompería, porque no puede resolver esos puntos de entrada, y así se rompe, ¿verdad? Y tendría que volver a ejecutar ese filtro, reconstruirlo, y luego funcionaría. Las cosas que debo tener en cuenta para ordenar cómo construirlos, debo construir primero el UI, luego la lista de productos y luego la aplicación.

2. Instalación y configuración del paquete nx

Short description:

Para instalar nx, puedes ejecutar nx add latest init o agregar el paquete manualmente. Ejecutar el script ayuda a configurar la estructura del espacio de trabajo. Elige el script de construcción ya que necesita respetar el orden. Determina qué scripts en el paquete monorepo son cachables. Omite las salidas ya que ya están capturadas.

Además, si vuelvo a ejecutar este filtro, siempre se ejecutaría, ¿verdad, aunque no hayamos tocado nada, no hayamos cambiado nada? Y aquí es donde, por ejemplo, un paquete como nx entra en juego, que puede ayudarte a acelerar algunas de estas cosas.

Entonces, ¿cómo puedes instalar nx? En primer lugar, puedes simplemente ejecutar nx add latest init o agregar el paquete por tu cuenta. La ventaja de ejecutar este script aquí es que analiza tu espacio de trabajo y su estructura, y te guía a través de algunos pasos para intentar configurarlo por ti.

Por ejemplo, una de las primeras preguntas aquí es qué scripts deben ejecutarse en orden. Y acabamos de aprender que el script de construcción debe ejecutarse en orden porque necesitamos respetar ese orden de esas cosas. Así que elegiría el script de construcción aquí. A continuación, me pregunta qué tipo de scripts de esos aquí en tu paquete monorepo son cachables. Y aquí, por ejemplo, probablemente el script de construcción sería cachable. El linting, la comprobación de tipos y las pruebas, potencialmente. Por lo general, el servidor de desarrollo y los scripts de inicio no son cachables porque eso es el entorno de desarrollo que quieres iniciar. Y luego me pregunta por las salidas. Podemos omitirlas porque ya captura la mayoría de las salidas comunes, como dist y build, y ya las supervisaría para la salida allí.

3. Descripción general del comando nx-graph y su uso

Short description:

Puedes ejecutar el comando nx-graph para obtener una descripción general de la estructura del monorepo. Analiza las dependencias y proporciona un gráfico útil. NX utiliza este gráfico para ordenar y optimizar el proceso de construcción.

Antes de sumergirnos, lo que ya podemos hacer ahora es ejecutar el comando nx-graph. Y esto nos da una descripción general de cómo se ve ahora ese monorepo. De hecho, puedes ejecutar esto incluso en una configuración de monorepo que no tenga una x. Así que simplemente ejecutas npx nx-graph y analizará las dependencias y te dará un gráfico como este, que es realmente útil para razonar sobre cómo se ve la estructura del monorepo. Luego puedes filtrar y realizar algunas operaciones interesantes aquí, pero la parte más interesante es que este gráfico es solo para visualización, pero detrás de escena, NX obviamente utiliza esto también para determinar el orden y cómo construir las cosas, para optimizarlas. Entonces, ¿qué ha sucedido cuando ejecutamos esa instalación de NX? Básicamente, lo que obtuvimos es un único paquete NX aquí y un archivo NX.json. El archivo NX.json es como tu configuración, una especie de metadatos para NX, y principalmente contiene las operaciones de caché, porque obviamente estas pueden depender en gran medida de tus propias aplicaciones y tus propias estructuras. Algunos scripts pueden no ser cachéables. Y también define una tubería donde sabe en realidad ese orden de construcción. Así que aquí le estamos diciendo que cuando ejecutes un comando de construcción, ejecuta todas sus dependencias, que es ese guion antes, para construir primero antes de ejecutarlo para el paquete en sí. Y así es como puedo ejecutar los comandos, pero puedo ejecutarlos con NX en lugar de usar los comandos de filtro de PMPM, a través de la tubería de NX. Así que puedo hacer NX, por ejemplo, construir productos de carritos increíbles. Ese es el nombre de mi paquete de productos aquí. Entonces, si entramos aquí en la lista de productos, puedes ver aquí en la parte superior este es mi nombre aquí. Y para ejecutar esa construcción aquí para nosotros. Ya puedes ver esto si me desplazo un poco hacia arriba, esta tarea de ejecutar un producto dependiente primero, que se completó correctamente, ¿verdad? Y luego está nuestra biblioteca de interfaz de usuario. No me muestra la salida porque no me interesa realmente. Así que PMPM anteriormente me mostraba toda la salida porque simplemente ejecuta las tareas. Pero en realidad solo me interesa esta construcción de productos. Ahora esto resulta ser un efecto secundario que primero necesito construir esa biblioteca de interfaz de usuario. Y de manera similar, obviamente también puedo ejecutar, hagamos la ejecución múltiple, digamos ejecutar múltiples tareas en todos los paquetes que tengo. Por ejemplo, construir, lintear y testing, y qué otros tipos podría tener potencialmente. Y si ejecuto eso, también puedes ver que muestra una buena salida de iterar sobre las cosas sin mostrarte cada salida detallada. Porque realmente no estás interesado en eso a menos que falle. Si falla, te lo mostraría, ¿verdad? Y además, aquí arriba puedes ver que ya ejecutamos la construcción de productos y la interfaz de usuario anteriormente. Así que no las ejecuta de nuevo, sino que las almacena en caché, por lo que es más rápido. De hecho, si vuelvo a ejecutar esto desde cero, las almacenaría en caché desde el principio. Y eso es todo. Solo estamos rascando la superficie, obviamente. Así es como puedes agregar NX en un monorepo basado en paquetes simples. Y a partir de ahí puedes expandirte aún más. Así que puedes agregar automatización encima. Una cosa común es, a menudo, una vez que tienes una estructura de paquetes como esta, quieres generar varios de ellos porque no quieres copiar y pegar cada vez. Y NX también ofrece opciones en ese sentido. Eso suena interesante. Conéctate conmigo aquí. También tenemos un stand afuera, así que ven y también podemos profundizar en este tipo de cosas. Gracias.

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

DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
End the Pain: Rethinking CI for Large Monorepos
Scaling large codebases, especially monorepos, can be a nightmare on Continuous Integration (CI) systems. The current landscape of CI tools leans towards being machine-oriented, low-level, and demanding in terms of maintenance. What's worse, they're often disassociated from the developer's actual needs and workflow.Why is CI a stumbling block? Because current CI systems are jacks-of-all-trades, with no specific understanding of your codebase. They can't take advantage of the context they operate in to offer optimizations.In this talk, we'll explore the future of CI, designed specifically for large codebases and monorepos. Imagine a CI system that understands the structure of your workspace, dynamically parallelizes tasks across machines using historical data, and does all of this with a minimal, high-level configuration. Let's rethink CI, making it smarter, more efficient, and aligned with developer needs.
React Summit 2022React Summit 2022
21 min
Scale Your React App without Micro-frontends
As your team grows and becomes multiple teams, the size of your codebase follows. You get to 100k lines of code and your build time dangerously approaches the 10min mark 😱 But that’s not all, your static CI checks (linting, type coverage, dead code) and tests are also taking longer and longer...How do you keep your teams moving fast and shipping features to users regularly if your PRs take forever to be tested and deployed?After exploring a few options we decided to go down the Nx route. Let’s look at how to migrate a large codebase to Nx and take advantage of its incremental builds!
JSNation 2022JSNation 2022
25 min
The Age of Monorepos
The history of the web can be divided into evolutionary development leaps. The age of inline scripts, the age of jQuery, the age of SPAs, the age of JAMStack...We are now entering the next stage that has been carefully prepared in the past few years. Let me invite you to the world of modern monorepo solutions and share with you the benefits you will reap by using them in every project size and setup. It's time you automate those boilerplate tasks and reduce the bottlenecks so you can focus on what truly matters.Get ready for the next leap! Welcome to the age of monorepos!

Workshops on related topic

React Summit 2023React Summit 2023
145 min
React at Scale with Nx
Featured WorkshopFree
We're going to be using Nx and some its plugins to accelerate the development of this app.
Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components
Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component
Node Congress 2023Node Congress 2023
160 min
Node Monorepos with Nx
WorkshopFree
Multiple apis and multiple teams all in the same repository can cause a lot of headaches, but Nx has you covered. Learn to share code, maintain configuration files and coordinate changes in a monorepo that can scale as large as your organisation does. Nx allows you to bring structure to a repository with hundreds of contributors and eliminates the CI slowdowns that typically occur as the codebase grows.
Table of contents:- Lab 1 - Generate an empty workspace- Lab 2 - Generate a node api- Lab 3 - Executors- Lab 4 - Migrations- Lab 5 - Generate an auth library- Lab 6 - Generate a database library- Lab 7 - Add a node cli- Lab 8 - Module boundaries- Lab 9 - Plugins and Generators - Intro- Lab 10 - Plugins and Generators - Modifying files- Lab 11 - Setting up CI- Lab 12 - Distributed caching
JSNation 2022JSNation 2022
99 min
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
WorkshopFree
npm and security, how much do you know about your dependencies?Hack-along, live hacking of a vulnerable Node app https://github.com/snyk-labs/nodejs-goof, Vulnerabilities from both Open source and written code. Encouraged to download the application and hack along with us.Fixing the issues and an introduction to Snyk with a demo.Open questions.
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.