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!

Juri Strumpflohner
Juri Strumpflohner
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.

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í.

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
Aprenda más sobre cómo aprovechar las características predeterminadas de los espacios de trabajo de npm para ayudarlo a administrar su proyecto monorepo, mientras también explora algunas de las nuevas características de npm cli.
La filosofía de Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
La filosofía de Yarn
En los últimos años, Yarn se ha convertido en una de las herramientas más comunes utilizadas para desarrollar proyectos de JavaScript, en gran parte gracias a un conjunto de principios rectores. Pero, ¿cuáles son? ¿Cómo se aplican en la práctica a Yarn? Y, lo que es igual de importante, ¿cómo te benefician a ti y a tus proyectos?
En esta charla no nos adentraremos en pruebas de rendimiento o conjuntos de características: en su lugar, aprenderás cómo abordamos el desarrollo de Yarn, cómo exploramos nuevos caminos, cómo mantenemos nuestro código saludable y, en general, por qué creemos que Yarn se mantendrá firmemente establecido en nuestro ecosistema en los próximos años.
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
Escalar bases de código grandes, especialmente monorepos, puede ser una pesadilla en los sistemas de Integración Continua (CI). El panorama actual de las herramientas de CI tiende a ser orientado a máquinas, de bajo nivel y exigente en términos de mantenimiento. Lo peor es que a menudo están desconectadas de las necesidades y el flujo de trabajo real del desarrollador.¿Por qué es un obstáculo el CI? Porque los sistemas de CI actuales son comodines, sin una comprensión específica de tu base de código. No pueden aprovechar el contexto en el que operan para ofrecer optimizaciones.En esta charla, exploraremos el futuro del CI, diseñado específicamente para bases de código grandes y monorepos. Imagina un sistema de CI que comprenda la estructura de tu espacio de trabajo, paralelice dinámicamente las tareas en máquinas utilizando datos históricos, y haga todo esto con una configuración mínima y de alto nivel. Repensemos el CI, haciéndolo más inteligente, eficiente y alineado con las necesidades del desarrollador.
Microfrontends Federados a Gran Escala
React Summit 2023React Summit 2023
31 min
Microfrontends Federados a Gran Escala
Top Content
La charla será una historia de cómo Personio pasó de renderizar a través de una arquitectura PHP monolítica, a una aplicación Next JS orientada a microfrontends, impulsada por la Federación de Módulos y la cadena de herramientas del monorepositorio NX.
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
A medida que tu equipo crece y se convierte en múltiples equipos, el tamaño de tu base de código también crece. Llegas a las 100k líneas de código y el tiempo de compilación se acerca peligrosamente a los 10 minutos 😱 Pero eso no es todo, tus verificaciones estáticas de CI (linting, cobertura de tipos, código muerto) y pruebas también están tardando cada vez más...¿Cómo puedes mantener a tus equipos avanzando rápidamente y enviando funciones a los usuarios de manera regular si tus PRs tardan una eternidad en ser probados y desplegados?Después de explorar algunas opciones, decidimos seguir el camino de Nx. ¡Veamos cómo migrar una gran base de código a Nx y aprovechar sus compilaciones incrementales!
La Era de los Monorepos
JSNation 2022JSNation 2022
25 min
La Era de los Monorepos
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!

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
Encontrar, Hackear y solucionar las vulnerabilidades de NodeJS con Snyk
JSNation 2022JSNation 2022
99 min
Encontrar, Hackear y solucionar las vulnerabilidades de NodeJS con Snyk
WorkshopFree
Matthew Salmon
Matthew Salmon
npm y seguridad, ¿cuánto sabes sobre tus dependencias?Hack-along, hacking en vivo de una aplicación Node vulnerable https://github.com/snyk-labs/nodejs-goof, Vulnerabilidades tanto de código abierto como de código escrito. Se anima a descargar la aplicación y hackear junto con nosotros.Corrigiendo los problemas y una introducción a Snyk con una demostración.Preguntas abiertas.
Construye aplicaciones Web3 con React
React Summit 2022React Summit 2022
51 min
Construye aplicaciones Web3 con React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.
Aprende más sobre el Hyperverse aquí.
Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.