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

Rate this content
Bookmark

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 Summary and Transcription

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.

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 es una nueva herramienta de construcción que pretende proporcionar un flujo de trabajo más delgado, rápido y sin fricciones para la construcción de aplicaciones web modernas. Esta charla se sumergirá en el trasfondo del proyecto, la justificación, los detalles técnicos y las decisiones de diseño: qué problema resuelve, qué lo hace rápido y cómo encaja en el panorama de las herramientas JS.
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
React ofrece un contrato a los desarrolladores: cumple ciertas reglas y React puede actualizar eficiente y correctamente la interfaz de usuario. En esta charla exploraremos estas reglas en profundidad, entendiendo el razonamiento detrás de ellas y cómo desbloquean nuevas direcciones como la memoización automática.
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
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Solid captó la atención de la comunidad frontend al popularizar la programación reactiva con su convincente uso de Señales para renderizar sin re-renderizaciones. Los hemos visto adoptados en el último año en todo, desde Preact hasta Angular. Las Señales ofrecen un conjunto poderoso de primitivas que aseguran que tu interfaz de usuario esté sincronizada con tu estado, independientemente de los componentes. Un lenguaje universal para la interfaz de usuario frontend.
Pero, ¿qué pasa con lo Asíncrono? ¿Cómo logramos orquestar la carga y mutación de datos, el renderizado en el servidor y la transmisión? Ryan Carniato, creador de SolidJS, echa un vistazo a una primitiva diferente. Una que a menudo se malinterpreta pero que es igual de poderosa en su uso. Únete a él mientras muestra de qué se trata todo este Suspense.
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
Todos amamos GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡No más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, verás lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas Redwood Easy!
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
Jotai es una biblioteca de gestión de estado. La hemos estado desarrollando principalmente para React, pero conceptualmente no está vinculada a React. En esta charla, veremos cómo funcionan los átomos de Jotai y aprenderemos sobre el modelo mental que deberíamos tener. Los átomos son una abstracción agnóstica del marco para representar estados, y básicamente son solo funciones. Comprender la abstracción de átomo ayudará a diseñar e implementar estados en sus aplicaciones con Jotai

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.