Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...

Rate this content
Bookmark
La charla trata sobre TurboPack, un sucesor de Webpack, con el objetivo de crear una herramienta independiente del framework, flexible y extensible para la comunidad de código abierto. Aborda los desafíos de rendimiento mediante la integración de SWC en Next.js. Los desafíos con Next.js y Webpack incluyen problemas de orquestación, limitaciones de compatibilidad hacia atrás y problemas de invalidación de caché. TurboEngine y TurboPack proporcionan un rendimiento constante en compilaciones incrementales, aprovechando el rendimiento y la paralelización predecibles de Rust. La charla también aborda temas como el seguimiento de dependencias, los gráficos de tareas, la invalidación de caché, los gráficos de activos perezosos y la integración de TurboPack con Next.js. Los planes futuros implican reconfigurar Webpack y TurboEngine, trasladar los cálculos a la nube, proporcionar información sobre las compilaciones y facilitar la migración e integración con proyectos de JavaScript.

From Author:

FAQ

TurboPack es una herramienta diseñada para ser el sucesor de Webpack, con la misión de alinearse con los objetivos de Webpack y crear una herramienta similar que sea flexible y extensible. Su objetivo es ser un bloque de construcción clave para el desarrollo web en los próximos diez años.

TurboPack busca ofrecer un sistema más avanzado de gestión de caché y compilaciones incrementales independientes del tamaño de la aplicación, utilizando un modelo de paralelismo y un sistema de entornos mixtos en sus gráficos de activos. Está diseñado para ser más eficiente y menos susceptible a errores de invalidación de caché.

Rust fue elegido por su rendimiento predecible, facilidad para manejar paralelismo y seguridad en la gestión de memoria, características ideales para abordar los desafíos de rendimiento y seguridad en el desarrollo de TurboPack.

No, TurboPack está diseñado para ser independiente del marco de trabajo y no específico para Versil. Aunque puede usarse eficientemente con Next.js, está destinado a ser utilizable con múltiples frameworks en la comunidad de código abierto.

TurboPack intenta superar limitaciones como la arquitectura antigua de Webpack, problemas de rendimiento con compilaciones incrementales a gran escala y desafíos con la invalidación de caché demasiado sensible.

Se espera que TurboPack alcance una versión beta a principios del próximo año, con la mayoría de las funciones implementadas, aunque no necesariamente estará listo para producción inmediata.

Tobias Koppers
Tobias Koppers
32 min
02 Dec, 2022

Comments

Sign in or register to post your comment.

Video Transcription

1. Introducción a TurboPack

Short description:

Comencé con el desarrollo web hace 10 años, fundé y mantuve Webpack durante 10 años. Ahora estoy trabajando en TurboPack, el sucesor de Webpack, con la misión de crear una herramienta similar a Webpack que se alinee con sus objetivos. Nuestro objetivo es construir algo independiente del marco de trabajo, para la comunidad de código abierto, y tan flexible y extensible como Webpack. Nuestra meta es crear un bloque de construcción para los próximos diez años de desarrollo web.

Gracias por recibirme. Mi nombre es Tobias Cauras, soy de Alemania, y les voy a contar algo sobre TurboPack. Comencé con el desarrollo web hace 10 años, cuando empecé a fundar Webpack y lo mantuve durante 10 años, así que ahora es bastante antiguo.

Hace casi 2 años me uní a Versil y trabajé con el equipo de Next.js en Next.js e integración con Webpack y cosas de rendimiento y cosas así. Y luego, durante 10 meses, he estado trabajando en TurboPack y les voy a contar algo sobre eso.

En primer lugar, ¿cuál es nuestra misión con TurboPack? Nuestra misión es crear el sucesor de Webpack. Queremos alinearnos con los objetivos de Webpack, queremos crear una herramienta que sea realmente como Webpack, similar a Webpack y que cumpla al menos los objetivos de Webpack. Sé que es una misión realmente ambiciosa y llevará años o mucho tiempo lograrlo, pero al menos esa es la dirección hacia la que estamos tratando de avanzar. Y esto básicamente nos motiva para nuestros objetivos de proyecto.

No queremos construir algo que sea solo para Next.js. Queremos construir algo que sea independiente del marco de trabajo. No queremos construir algo que sea solo para Versil. Queremos hacer algo para la comunidad de código abierto, que es un esfuerzo comunitario, y queremos alinearnos con los objetivos y la motivación detrás de Webpack. También queremos asegurarnos de construir algo tan flexible y extensible como Webpack. Queremos seguir los pasos de Webpack en ese sentido. En realidad, queremos crear un bloque de construcción para el desarrollo web de los próximos diez años.

2. Creación de TurboPack y Desafíos de Rendimiento

Short description:

Queríamos resolver algunos desafíos en la experiencia del desarrollador, uno de los cuales era el rendimiento. Next.js, al estar principalmente construido en herramientas basadas en JavaScript, enfrentaba desafíos para aprovechar toda la potencia de la computadora. Para abordar esto, integramos SWC en Next.js, lo que resultó en un mejor rendimiento. Sin embargo, se hicieron compromisos en términos de rendimiento, como asumir que las solicitudes de módulos y los módulos de Node no cambian. El equipo de Next.js también enfrentó desafíos de implementación.

De acuerdo. Veamos qué ha llevado a la creación de TurboPack en el pasado y también cómo funciona, y cuál es exactamente nuestra visión con TurboPack. Comencé cuando me uní a Versa y trabajé con el equipo de Next.js, y básicamente queríamos resolver algunos desafíos en la experiencia del desarrollador, y uno de estos desafíos era el rendimiento. Funciona bastante bien, pero hay algunos desafíos con el rendimiento, especialmente porque Next.js está principalmente construido sobre herramientas basadas en JavaScript, y las herramientas basadas en JavaScript para trabajos intensivos en cómputo tienen dificultades para aprovechar toda la potencia de tu computadora, por lo que aprovechar múltiples CPUs y realmente JavaScript puede que no sea el mejor lenguaje para trabajos intensivos en cómputo o para tareas de construcción. El equipo de Next.js y yo comenzamos a trabajar en la migración de una parte de Next.js o de la infraestructura del compilador del desarrollo web al mundo de Rust, por lo que se integró SWC en Next.js, y realmente tiene muchos beneficios en términos de rendimiento. Pero también hay algunos cambios en la integración. Siempre hay un límite entre el mundo de JavaScript y el mundo de Rust, y tienes los problemas de serialización. Aún así, hay desafíos al trabajar en eso. También hubo algunos compromisos que tuvimos que hacer en Next.js por el rendimiento. Un ejemplo fue que estamos resolviendo las solicitudes de módulos en Webpack, y tuvimos que ser realmente optimistas al respecto para que fuera similar en términos de rendimiento. Una vez que resolvimos algo con éxito, asumimos que no ha cambiado. También asumimos que los módulos de Node generalmente no cambian, y esto funciona bien para el 99 por ciento de los casos, pero es un compromiso y no queremos estar obligados a elegir eso. Pero también hay algunos desafíos de implementación en el equipo de Next.js.

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 Conference 2023React Advanced Conference 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.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.

Workshops on related topic

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.