Potenciando Tu Experiencia de Desarrollo Con Turborepo

Rate this content
Bookmark
Slides

Monorepos es un tema candente en la comunidad TypeScript/JavaScript en estos días, pero conseguir una configuración de monorepo de alto rendimiento desde cero puede ser un desafío. En esta charla, veremos cómo Turborepo puede ayudarte a mover tus tareas de monorepo a la velocidad de la luz.

This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

Un monorepo es un enfoque de organización del código donde todas las aplicaciones, paquetes y bibliotecas se encuentran en un único repositorio. A diferencia de los multirepos, donde cada proyecto o equipo puede tener su propio repositorio, los monorepos facilitan la reutilización de código, la colaboración y el mantenimiento de standards consistentes a lo largo de todos los proyectos.

Las ventajas de usar un monorepo incluyen la facilidad para compartir código entre equipos, la gestión de dependencias centralizada, la implementación de standards de código compartidos, la colaboración mejorada a través de revisiones de código más contextualizadas y la posibilidad de realizar cambios atómicos en múltiples proyectos simultáneamente.

Tuburepo es un sistema de construcción diseñado específicamente para los ecosistemas de JavaScript y TypeScript, creado por Jared Palmer. Ayuda a optimizar la gestión de tareas en monorepos mediante la ejecución eficiente de tareas en paralelo y el uso de caché inteligente para no repetir trabajos innecesarios.

Los monorepos se refieren a un enfoque de desarrollo donde todo el código, incluidos microservicios y bibliotecas, se almacena en un único repositorio. Por otro lado, un monolito es un tipo de arquitectura de software donde una aplicación se desarrolla como una única unidad indivisible, lo cual es diferente del concepto modular que puede seguirse en un monorepo.

Tuburepo optimiza la ejecución de tareas utilizando la caché para evitar repetir tareas ya realizadas y programando tareas en paralelo según la disponibilidad de CPU. También gestiona dependencias entre tareas para asegurar un orden de ejecución correcto y eficiente.

En los monorepos, el aislamiento de código se logra mediante el uso de espacios de trabajo, que permiten que cada paquete o aplicación maneje sus propias dependencias de forma autónoma. Esto facilita la independencia de los proyectos mientras se mantiene organizado en un único repositorio.

Bruno Paulino
Bruno Paulino
26 min
05 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla explora los beneficios de usar TuberApple, una herramienta para potenciar la experiencia de desarrollo. Destaca las ventajas de los monorepos, como la reutilización de código, los estándares compartidos, la mejora de la colaboración en equipo y los cambios atómicos. TuberApple, específicamente Tuburepo, ofrece una ejecución de tareas eficiente a través de la caché y la programación optimizada. Simplifica el desarrollo de monorepo permitiendo la ejecución paralela de tareas y la coordinación sin fisuras de los cambios. Tubo, otra herramienta dentro de TuberApple, permite la ejecución inteligente de tareas, la declaración de dependencias de tareas y el almacenamiento en caché eficiente en monorepos.

1. Introducción a TuberApple

Short description:

Hola a todos. Gracias por acompañarme hoy. Vamos a hablar de cómo potenciar tu experiencia de desarrollo con TuberApple. Un poco sobre mí. Mi nombre es Bruno Paulino. Soy líder técnico en Any26, una empresa que construye una plataforma para que los ingenieros construyan aplicaciones web y bibliotecas. Discutiremos sobre monorepo, multirepos y cómo las empresas organizan su código.

Hola a todos. Gracias por acompañarme hoy. Vamos a hablar de cómo potenciar tu experiencia de desarrollo con TuberApple. Un poco sobre mí. Mi nombre es Bruno Paulino. Soy líder técnico en esta genial empresa llamada Any26. Estamos construyendo el banco que nos encanta usar. Y soy un ingeniero de software centrado en la web. Y allí, en Any26, estamos construyendo la plataforma para que todos los ingenieros construyan aplicaciones web en ella. No solo aplicaciones web, sino también bibliotecas web. Podrías pensar en componentes del sistema de design, por ejemplo. Y allí, no me gusta llamarnos DevOps. Realmente nos gusta llamarnos DevOps. Así que realmente ayudamos a los ingenieros web a enviar estos lo más rápido posible al navegador. También soy bpaulino0 en Twitter. Así que si usas Twitter y quieres seguirme, por favor hazlo. Estoy allí. Así que vamos a entrar en materia. Esta presentación está dividida en dos partes. En la primera, vamos a hablar sobre monorepo, multirepos y cómo puedes usarlos. Y en la segunda parte, vamos a hablar realmente sobre tuberepo. Y luego para cerrar, vamos a ver una agradable demostración en vivo. Pero antes de empezar, quiero hablar sobre multirepos, monorepos y cómo las empresas realmente organizan su code. El enfoque más común es tener multirepos, ¿verdad? Vas a una empresa y luego tienen varios proyectos diferentes y organizan los proyectos en diferentes repositorios. Esa es la forma más sensata de hacerlo. Tienes varios equipos diferentes trabajando en diferentes proyectos. Tienen sus propias herramientas, tienen sus propios standards y así sucesivamente, y eso es bastante común y muy razonable, ¿verdad? Quieres dar a los equipos la independencia de usar sus propias herramientas, sus propias formas de construir software y enviarlo lo más rápido posible. Pero hay otra forma, ¿verdad? Hay una forma de organizar tu

2. Beneficios de los Monorepos

Short description:

Aún puedes tener un monorepo y puedes tener microservicios, por ejemplo, dentro del monorepo. La primera razón es la reutilización de código, facilitando compartir código con compañeros de equipo. La segunda razón son los estándares compartidos, permitiendo una configuración y adopción consistentes en todos los proyectos. La colaboración en equipo también mejora, ya que los ingenieros pueden compartir fácilmente pull requests y trabajar juntos sin configuración adicional. Finalmente, se pueden hacer cambios atómicos, asegurando que todas las aplicaciones y paquetes funcionen juntos sin problemas.

code en el mismo repositorio. Existen los monorepos. No confundas los monorepos con los monolitos. Así que aún puedes tener un monorepo y puedes tener microservices, por ejemplo, dentro del monorepo. La única diferencia de un monorepo a un enfoque multirepo es realmente que tienes todas tus aplicaciones o paquetes, bibliotecas dentro del mismo repositorio. Pero entonces tú podrías preguntarte, ¿por qué necesito tener un monorepo? ¿Por qué necesito poner todo mi code junto en el mismo repositorio en lugar de tenerlos separados en repositorios individuales? Debe haber una buena razón para que otras empresas hagan eso, ¿verdad? Como por qué los monorepos son tan populares en esas empresas, por ejemplo, Google, Netflix, Facebook y Twitter, todos ellos usan monorepos de alguna forma u otra. Y debe haber muy buenas razones para que ellos no opten por el enfoque multirepo, ¿verdad? Y hablemos de ellas. Así que la primera es realmente la reutilización de code. Si tienes todo en el mismo repositorio, entonces es mucho más fácil para ti compartir code con tus compañeros de equipo. Piénsalo, podrías tener un paquete de modules donde tienes todos tus database modules, y también puedes tener un paquete allí con tus componentes de UI. Y entonces todos los demás en tu equipo pueden simplemente reutilizarlos sin tener que reinventar nada o reimportar nada o instalar ningún paquete extra.

Otra razón por la que podrías querer considerar un monorepo es tener standards compartidos. En un monorepo, puedes tener verdaderos standards compartidos en toda tu base de code. Porque piensa en ello, podrías tener una configuración de yeslin que se comparte completamente en todos los paquetes, y luego puedes actualizarla en un solo lugar. Y entonces todos los demás paquetes pueden beneficiarse de ello inmediatamente. Así que si estás usando TypeScript, por ejemplo, puedes tener una sola configuración de TypeScript compartida en todos tus proyectos. Así que también fue muy fácil adoptar y compartir cosas entre los paquetes dentro del monorepo. Volviendo al ejemplo que di antes, también puedes tener un modelo de database compartido con consultas allí y luego puedes simplemente reutilizarlo en toda tu configuración de monorepo, donde necesites acceso a la database, por ejemplo. Otra cosa que funciona muy bien en la configuración del monorepo es la colaboración en equipo. Así que si tienes todo en el mismo repositorio, puedes compartir fácilmente un pull request con otros ingenieros y obtener feedback porque ellos ya tienen todo el contexto alrededor de la base de code. No tienen que configurar nada. No tienen que instalar una versión diferente de node. No tienen que configurar ningún SDK en la máquina o algo así porque han estado trabajando en la misma base de code. Ya tienen todas las herramientas instaladas. Así que no tienen que averiguar nada. Si necesitas hacer una sesión de programación en pareja, por ejemplo, es mucho más fácil hacerlo. Puedes simplemente compartir una pantalla, iniciar el servidor de desarrollo, y entonces todo está allí. No necesitas clonar nada. No necesitas hacer ninguna configuración. Es mucho más fácil y rápido para un equipo grande.

Otro gran punto de venta para el monorepo son los cambios atómicos. Pero, ¿qué quiero decir con eso? Así que si tienes un solo repositorio, puedes cambiar varias aplicaciones y paquetes diferentes al mismo tiempo, en el mismo pull request.

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

Vite: Repensando las Herramientas de Frontend
JSNation Live 2021JSNation Live 2021
31 min
Vite: Repensando las Herramientas de Frontend
Top Content
Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
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.
Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Principios para Escalar el Desarrollo de Aplicaciones Frontend
React Summit 2023React Summit 2023
25 min
Principios para Escalar el Desarrollo de Aplicaciones Frontend
Top Content
This Talk discusses scaling front-end applications through principles such as tearing down barriers, sharing code in a monorepo, and making it easy to delete code. It also emphasizes incremental migration, embracing lack of knowledge, and eliminating systematic complexity. The Talk highlights the use of automation in code migration and the importance of removing barriers to enable smoother code migration.
Automatizando Todo el Código y las Pruebas con GitHub Actions
React Advanced 2021React Advanced 2021
19 min
Automatizando Todo el Código y las Pruebas con GitHub Actions
Top Content
We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.

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
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.
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.