Envía tu interfaz de usuario más rápido con Turborepo

Rate this content
Bookmark

La velocidad de iteración es la clave para desbloquear el potencial de tus equipos técnicos y de negocio. En esta masterclass, construiremos los cimientos para un monorepo altamente escalable utilizando Turborepo y hablaremos sobre las filosofías detrás de la arquitectura de bases de código para equipos de todas las escalas. A través del poder del almacenamiento en caché remoto, nunca haremos el mismo trabajo dos veces y entregaremos tus aplicaciones a la velocidad de Turbo.

This talk has been presented at DevOps.js Conf 2024, check out the latest edition of this JavaScript Conference.

FAQ

TurboPak es un empaquetador incremental optimizado para JavaScript y TypeScript, diseñado para realizar la menor cantidad de trabajo posible en la creación de paquetes de aplicación. Utiliza caché a nivel de función, permitiendo un embalaje más rápido y eficiente que los métodos tradicionales utilizados en Webpack.

TurboRepo es un sistema de compilación de alto rendimiento que utiliza técnicas como la compilación incremental, caché remoto y ejecución en paralelo para acelerar las compilaciones, lints, pruebas y otras tareas necesarias, reduciendo significativamente el tiempo que los servidores de CI/CD necesitan trabajar.

TurboRepo facilita la gestión de monorepos al hacer que la compilación y otras tareas sean más rápidas y eficientes, aprovechando la caché distribuida y la ejecución en paralelo, lo que permite a los equipos ahorrar tiempo y recursos significativos en sus procesos de desarrollo.

Para integrar TurboPak en un proyecto de Next.js, simplemente puedes utilizar la versión 14 de Next.js y agregar '//Turbo' en el script de desarrollo. Esto permite probar TurboPak en el entorno de desarrollo y beneficiarse de sus optimizaciones.

TurboPak optimiza la creación de paquetes utilizando una caché a nivel de función, lo que reduce drásticamente el trabajo repetitivo al comprender mejor los gráficos de módulos y enfocarse solo en los elementos necesarios para el empaquetado.

Un monorepo es un repositorio que contiene múltiples proyectos o paquetes en un solo lugar, facilitando la compartición de código y recursos entre ellos. Beneficia a los equipos al simplificar la gestión de dependencias, mejorar la coherencia y permitir optimizaciones a través de herramientas como TurboRepo.

TurboRepo mejora la eficiencia durante el desarrollo y el despliegue al permitir una compilación y linting en paralelo, aprovechar la caché distribuida y minimizar el tiempo requerido para las pruebas y otras tareas, acelerando el ciclo de lanzamiento y la colaboración entre equipos.

TurboRepo ayuda a mantener la salud a largo plazo de un monorepo al utilizar prácticas como uso limitado de dependencias en la raíz, gestión eficiente de versiones y configuraciones predeterminadas robustas con flexibilidad para adaptaciones, asegurando así un mantenimiento más sencillo y eficiente.

Anthony Shew
Anthony Shew
21 min
14 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El Turboverse se enfoca en hacer que el proceso de desarrollo sea más rápido y eficiente. TurboPak es un empaquetador incremental con almacenamiento en caché a nivel de función, y TurboRepo es un sistema de compilación de alto rendimiento con características como compilación incremental, almacenamiento en caché remoto y ejecución paralela. TurboRepo puede optimizar los ejecutores de tareas, configurar monorepos y acelerar el tiempo de desarrollo. vclink-repo permite una integración perfecta con la caché remota de Vercel, y Conformance y Codoners proporcionan análisis estático y revisiones de código automatizadas. TurboPak y TurboRepo ofrecen procesos de CI más rápidos y avances emocionantes en el empaquetado web.

1. Introducción a Turboverse

Short description:

Estás escribiendo, construyendo y enviando más código que nunca. Pero tus tiempos de CI están aumentando y tu experiencia de desarrollo local empeora. Bienvenido a Turboverse, donde nos enfocamos en hacer que tu proceso de desarrollo sea más rápido y eficiente, desde el principio hasta el final.

Estás escribiendo, construyendo y enviando más código que nunca. Es genial construir un producto que tus clientes aman, pero tus tiempos de CI han estado aumentando lentamente. Tu experiencia de desarrollo local sigue empeorando un poco, y la complejidad de tu CI sigue aumentando. El tiempo que tarda desde la idea hasta el envío ha ido aumentando lentamente. Eso se debe a que tienes que sentarte y esperar por las cosas. Mucho como estos barcos. Pero ¿y si eso no tuviera que ser así? Hola y bienvenido a Turboverse. Soy Anthony. Soy TurboDX. Me gusta bromear diciendo que soy un comediante de pila completa, pero en realidad soy TurboDX. Estos problemas que describí son cosas en las que pienso mucho en mi trabajo. ¿Cómo podemos asegurarnos de que nunca hagas el mismo trabajo dos veces? Cuando necesitas hacer un trabajo nuevo, ¿cómo nos aseguramos de que sea rápido y que sea la menor cantidad de trabajo posible? ¿Cómo nos aseguramos de que desde el desarrollador individual hasta las aplicaciones enterprise más grandes del mundo, tengas una gran experiencia desde el principio hasta el final? En Turboverse, tenemos dos herramientas para lograr estos objetivos, TurboPak y TurboRepo.

2. Explorando TurboPak y TurboRepo

Short description:

Vamos a explorar TurboPak, un empaquetador incremental optimizado para JavaScript y TypeScript. Cuenta con caché a nivel de función para una creación de paquetes más rápida. TurboPak se está probando actualmente con el servidor de desarrollo de Next.js y ha logrado una tasa de aprobación del 93,9% para las pruebas de Next.js. TurboRepo es un sistema de compilación de alto rendimiento para bases de código de JavaScript y TypeScript, aprovechando los conocimientos de organizaciones como Meta y Google. Ofrece características como compilación incremental, caché remoto y ejecución en paralelo para acelerar tus compilaciones. Nuestro equipo de Vercel ha ahorrado más de 8.500 horas en las últimas dos semanas utilizando TurboRepo.

Vamos a explorar TurboPak y hablar un poco sobre la arquitectura subyacente. Luego, nos sumergiremos en una demostración y utilizaremos ambas herramientas para enviar nuestro primer conjunto de aplicaciones con una capa de caché completamente distribuida. También hablaremos sobre cómo funciona este repositorio mecánicamente, los beneficios de los monorepos y las cosas a tener en cuenta a un nivel más alto al diseñar un monorepo.

Primero, sumerjámonos en TurboPak. TurboPak es un empaquetador incremental optimizado para JavaScript y TypeScript. Estamos escribiendo en Rust para obtener velocidades de metal desnudo, liderado por el creador de Webpack, Tobias Koppers. Además de esa velocidad bruta, también lo estamos haciendo más inteligente. Si me muevo aquí a los conceptos principales, verás información sobre el TurboEngine. Con el TurboEngine, estamos haciendo la menor cantidad de trabajo posible, como mencionamos antes. El TurboEngine cuenta con caché a nivel de función para que podamos hacer la menor cantidad de trabajo posible para crear los paquetes de tu aplicación. Anteriormente, en Webpack, solo podíamos hacer esto a nivel de módulo, a nivel de archivo. Pero con la caché a nivel de función, podemos comprender más profundamente los gráficos de tus módulos. Debido a que podemos analizar las relaciones en todo tu código de manera más profunda, podemos ser más rápidos y dirigirnos directamente a las cosas que necesitamos empaquetar, examinar y analizar, en lugar de crear un gráfico mucho más grande. Además, Webpack está diseñado de manera que crea primero un gráfico no optimizado y luego lo optimiza. En TurboPak, simplemente estamos haciendo ese gráfico optimizado la primera vez, como puedes imaginar, un poco más rápido. En el momento de esta grabación, estamos utilizando el servidor de desarrollo de Next.js como terreno de prueba para TurboPak. Puedes visitar areweterboyet.com para ver que no, aún no somos completamente Turbo. Estas son todas las pruebas que están en el empaquetador Webpack. Además, hemos agregado algunas más ahora que tenemos una mejor cobertura para TurboPak, para averiguar si el servidor de desarrollo de Next.js con TurboPak está listo para ser lanzado de la versión beta a la estable. Puedes ver que actualmente tenemos un 93,9% de aprobación en esas pruebas de Next.js. Pero una vez que terminemos allí, en realidad tendremos un buen comienzo para compilar para producción esas aplicaciones de Next.js con TurboPak. Puedes probar esto hoy en tu proyecto de Next.js 14 usando //Turbo en el script de desarrollo de tu aplicación de Next.js. Esperamos escuchar tu experiencia y agradeceríamos que si encuentras algún problema, informes esos errores en el repositorio de Next.js en GitHub.

Pero tu empaquetador es solo una parte de la historia. Ahora hablemos de TurboRepo y hagamos un poco de demostración y hablemos sobre algunos aspectos mecánicos. TurboRepo es un sistema de compilación de alto rendimiento para bases de código de JavaScript y TypeScript. Estamos aprovechando algunos de los conocimientos de las organizaciones de monorepo más grandes del mundo, como Meta y Google, y haciendo que esas técnicas sean amigables, utilizables y productivas para todos. A través de características como compilación incremental, caché remoto, ejecución en paralelo y mucho más, podemos hacer que tus compilaciones, linters, pruebas y cualquier otra tarea que necesites se realicen lo más rápido posible. Como prueba, aquí tienes una captura de pantalla rápida que tomé de Vercel.com para nuestro equipo de Vercel, que muestra cuánto tiempo hemos ahorrado en las últimas dos semanas. Parece que hemos ahorrado más de 8.500 horas.

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

Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...
React Day Berlin 2022React Day Berlin 2022
32 min
Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...
The Talk discusses TurboPack, a successor to Webpack, aiming to create a framework-independent, flexible, and extensible tool for the open-source community. It addresses performance challenges by integrating SWC into Next.js. The challenges with Next.js and Webpack include orchestration issues, backward compatibility constraints, and cache invalidation problems. TurboEngine and TurboPack provide constant performance in incremental builds, leveraging Rust's predictable performance and parallelism. The Talk also covers topics like dependency tracking, task graphs, cache invalidation, lazy asset graphs, and the integration of TurboPack with Next.js. The future plans involve reconfiguring Webpack and TurboEngine, moving computations to the cloud, providing insights into builds, and facilitating migration and integration with JavaScript projects.
El Núcleo de Turbopack Explicado (Codificación en Vivo)
JSNation 2023JSNation 2023
29 min
El Núcleo de Turbopack Explicado (Codificación en Vivo)
Tobias Koppers introduces TurboPack and TurboEngine, addressing the limitations of Webpack. He demonstrates live coding to showcase the optimization of cache validation and build efficiency. The talk covers adding logging and memorization, optimizing execution and tracking dependencies, implementing invalidation and watcher, and storing and deleting invalidators. It also discusses incremental compilation, integration with other monorepo tools, error display, and the possibility of a plugin system for Toolpag. Lastly, the comparison with Bunn's Builder is mentioned.
Menos desorden, más poder: Aprovecha el poder de la plataforma web
C3 Dev Festival 2024C3 Dev Festival 2024
30 min
Menos desorden, más poder: Aprovecha el poder de la plataforma web
This talk focuses on the powerful features of CSS and HTML that can level up developer skills and enhance web UI. Scroll-driven animations, popover API, and anchor positioning are explored as ways to create dynamic effects, improve performance, and increase accessibility. The talk also emphasizes the benefits of building presentations with CSS and HTML, separating logic from styling, and leveraging core platform features. Wishlist features for the web platform and the challenges of pushing updates across browsers are discussed.
JavaScript en la Gran Pantalla: Creando Apps de TV
JSNation 2024JSNation 2024
22 min
JavaScript en la Gran Pantalla: Creando Apps de TV
JavaScript is widely used in web, mobile, and backend development, and now it is also being used to create TV apps. TVs with web-based operating systems can be targeted with JavaScript applications, and React is commonly used for TV app development. React Native allows for cross-platform TV app development, except for Roku. User interactions and focus management are important considerations in TV app development. Performance optimization is crucial for TV apps, as TVs have lower device scores and limited RAM. Spatial virtualization can significantly improve TV app performance.
Kit de UI de la App de Canva: Empoderando a los Desarrolladores con Tecnologías Web Modernas
React Summit US 2023React Summit US 2023
8 min
Kit de UI de la App de Canva: Empoderando a los Desarrolladores con Tecnologías Web Modernas
Welcome to the Canva Tech talk where the Canva tech stack, React component structure, and UI kit for developers are discussed. Canva uses Java, Go, Bash, TypeScript, and React for development. TypeScript, MobX, and React were chosen to enable hundreds of developers to work on the code base productively. Canva's internal component library was explored and released under a semi-open source license, allowing for quick delivery and sharing of improvements with the community. The developer community has added numerous app integrations accessible to Canva's 150 million monthly active users.
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
React Summit 2024React Summit 2024
9 min
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
Nested Interactive Elements in Nightmare Accessibility can cause issues with screen readers and other assistive tools, making it difficult for users to interact with websites. Mitigation strategies include unnesting elements, using CSS overlay, and being cautious when modifying roles. It is recommended to involve users of assistive tools in focus groups and share solutions online.