Efficient Package Management with pnpm

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Aprenderás sobre uno de los gestores de paquetes más populares para JavaScript y sus ventajas sobre npm y Yarn.

  • Una breve historia de los gestores de paquetes de JavaScript
  • La estructura aislada de node_modules creada por pnpm
  • Qué hace que pnpm sea tan rápido
  • Qué hace que pnpm sea eficiente en el uso del espacio en disco
  • Soporte para monorepos
  • Gestión de versiones de Node.js con pnpm

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

FAQ

pnpm es un gestor de paquetes para JavaScript que optimiza el uso del espacio en disco y aumenta la velocidad de las operaciones. Es único porque crea una estructura de módulos de nodo aislada, donde cada paquete solo tiene acceso a sus dependencias declaradas, lo que previene errores y mejora la eficiencia.

pnpm utiliza un almacenamiento direccionable por contenido, guardando archivos por un código hash basado en su contenido. Esto significa que los archivos idénticos entre diferentes paquetes solo se almacenan una vez, reduciendo significativamente la cantidad de espacio en disco utilizado.

pnpm ofrece instalaciones más rápidas al manejar las dependencias de manera independiente y paralela, y utiliza menos espacio en disco gracias a su sistema de almacenamiento direccionable por contenido. Además, su estructura de módulos aislada evita problemas de dependencias no declaradas.

Para migrar de Yarn a pnpm, puedes usar el comando 'pnpm import' que convierte el archivo de registro de Yarn a un archivo de registro de pnpm. Después, es necesario actualizar los scripts en el CI de Yarn a pnpm, usualmente reemplazando 'yarn' por 'pnpm' en los comandos.

pnpm significa 'npm de rendimiento'. Fue creado por Rico Sta. Cruz de Filipinas, y su primera versión fue notablemente más rápida que npm en ese momento.

Si los proyectos y el almacenamiento están en diferentes discos, pnpm puede crear un almacenamiento separado para cada disco. Si no es posible usar hardlinks debido a sistemas de archivos distintos, pnpm copiará los archivos, lo que puede reducir la eficiencia del uso del espacio en disco.

Zoltan Kochan
Zoltan Kochan
31 min
24 Mar, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
pnpm es un gestor de paquetes rápido y eficiente que ha ganado popularidad en 2021 y es utilizado por grandes empresas de tecnología como Microsoft y TikTok. Tiene una estructura única de módulos de nodo aislados que evita conflictos entre paquetes y garantiza que cada proyecto solo tenga acceso a sus propias dependencias. pnpm también ofrece un soporte superior para monorepos con su estructura de módulos de nodo. Resuelve el problema del uso del espacio en disco mediante el uso de un almacenamiento direccionable por contenido, reduciendo el consumo de espacio en disco. pnpm es increíblemente rápido debido a su proceso de instalación y su estructura determinista de módulos de nodo. También permite la vinculación de archivos mediante enlaces duros en lugar de enlaces simbólicos.

1. Introducción a pnpm y su popularidad

Short description:

Hola, mi nombre es Zoltan Kochan y hoy voy a hablar sobre pnpm, que es un gestor de paquetes rápido y eficiente en el uso del espacio en disco. Permítanme presentarme. Trabajo de forma remota para BIT, una empresa que ayuda a los desarrolladores a implementar el desarrollo basado en componentes. Antes de eso, trabajé para Just Answer durante nueve años y he estado desarrollando y manteniendo npm-pm desde 2016. npm, yarn y pnpm son los gestores de paquetes más populares de JavaScript. npm tuvo problemas en el pasado, pero se crearon alternativas como yarn y pnpm. pnpm es un proyecto independiente que soluciona los problemas de npm v3 y ahora es compatible con bit. Tuvo un aumento en popularidad en 2021 y es utilizado por grandes empresas de tecnología como Microsoft y TikTok. pnpm es único porque solo eleva las dependencias necesarias a la raíz de los módulos de nodo.

Hola, mi nombre es Zoltan Kochan y hoy voy a hablar sobre pnpm, que es un gestor de paquetes rápido y eficiente en el uso del espacio en disco.

Antes de eso, permítanme presentarme. Soy Zoltan Kochan. Nací y crecí en Ucrania. Actualmente vivo en Ucrania también. Por ahora estoy a salvo. Trabajo de forma remota para BIT. BIT es una empresa que ayuda a los desarrolladores a implementar el desarrollo basado en componentes. Antes de BIT, trabajé para Just Answer durante nueve años y, al mismo tiempo, desde 2016, he estado desarrollando y manteniendo npm-pm constantemente. Antes de hablar sobre npm-pm, hablemos brevemente sobre otros gestores de paquetes de JavaScript. El gestor de paquetes más popular de node.js o JavaScript es npm, que es el gestor de paquetes oficial del registro de npm. Se envía con node.js y en el pasado npm tuvo muchos problemas, como ser lento, no ser determinista, a veces dar resultados extraños, por lo que se crearon algunas alternativas. Una de las alternativas fue creada por Facebook, probablemente hayas oído hablar de yarn, que es el segundo gestor de paquetes más popular después de npm. Ahora es mantenido por la comunidad y resolvió muchos de los problemas que npm tenía en las versiones 3 y 4. Desde entonces, en la versión 2, yarn ha cambiado para usar plug and play de forma predeterminada, por lo que aunque admite la instalación clásica de módulos de nodo, ahora prefiere usar plug and play, lo cual a muchos les gusta y a muchos no. Personalmente, creo que es una característica genial. Y yarn se envía actualmente con la última versión de Node.js. El tercer gestor de paquetes más popular es pnpm. Es un proyecto completamente independiente, fue creado por colaboradores de código abierto para solucionar los problemas de npm v3. Al mismo tiempo que yarn 2, por lo que pnpm no es como un proyecto nuevo, existe desde que yarn existe, básicamente. Y ahora es compatible con bit, porque trabajo en bit y pnpm se utiliza mucho en bitcli para la gestión de paquetes y pnpm también se envía con nodjs a través de la función corepack de nodjs. Si comparamos estos gestores de paquetes por popularidad, obviamente npm es actualmente el más popular, luego yarn y pnpm es el menos popular, aunque pnpm salió al mismo tiempo que yarn, pero por supuesto Facebook tenía mucho poder de marketing para hacer que yarn fuera muy popular al principio. Sin embargo, aunque pnpm es menos popular por ahora, tuvo un gran aumento en popularidad el año pasado, por lo que en 2021 se descargó pnpm tres veces más que en 2020. Tenemos muchas grandes empresas de tecnología que ya utilizan pnpm, incluso Microsoft utiliza pnpm en algunos de sus proyectos, y el equipo de frontend de TikTok utiliza pnpm. Así que pnpm funciona muy bien y está listo para producción.

Veamos qué hace que pnpm sea único. Cuando instalas una dependencia con npm o Yarn Classic, todas las subdependencias se elevan a la raíz de los módulos de nodo. Como puedes ver en este ejemplo, aunque solo Express está en las dependencias, todos esos otros paquetes también se elevan a la raíz de los módulos de nodo. Por el contrario, pnpm solo coloca Express en la raíz de los módulos de nodo. Por lo tanto, aunque cookie no es una dependencia de tu proyecto, importarla funcionará. Esta es una situación peligrosa.

2. Estructura de módulo de nodo aislado con PMPM

Short description:

Pero, ¿qué sucederá si se lanza una nueva versión de Express y cookie ya no está en sus dependencias? Tu paquete se romperá. PMPM evita este tipo de errores. Con PMPM, tu código solo tiene acceso a los paquetes que se declaran como dependencias de tu proyecto. En este ejemplo, Express es una dependencia directa y KUKI es una dependencia de Express. La ubicación real de Express está dentro de la carpeta .pmpm. Por lo tanto, node.js buscará KUKI en la carpeta de nodemodules dedicada, que se encuentra en .pmpm/express en 4.17.3/nodemodules. Cada paquete está en su propia carpeta aislada con sus propias dependencias.

Tu paquete funcionará bien localmente e incluso funcionará cuando lo instales como una dependencia. Pero, ¿qué sucederá si se lanza una nueva versión de Express y cookie ya no está en sus dependencias? Tu paquete se romperá. PMPM evita este tipo de errores.

Con PMPM, tu código solo tiene acceso a los paquetes que se declaran como dependencias de tu proyecto. ¿Cómo puede PMPM crear una estructura de módulo de nodo aislada?

En este ejemplo, puedes ver que Express es una dependencia directa y KUKI es una dependencia de Express. Como puedes ver, solo Express se coloca en la raíz de la carpeta de nodemodules del proyecto. Y KUKI y en realidad ese Express dentro de nodemodules, es un enlace simbólico, es simplemente un enlace simbólico a una carpeta dentro de la carpeta .pmpm.

Esto funciona porque al buscar dependencias, el algoritmo de resolución de node.js utiliza la ubicación real del paquete como punto de partida para buscar sus dependencias. La ubicación real de Express está dentro de la carpeta .pmpm. Por lo tanto, node.js buscará KUKI en la carpeta de nodemodules dedicada, que se encuentra en .pmpm/express en 4.17.3/nodemodules. Y, por supuesto, puedes ver que KUKI dentro de los nodemodules de Express también es solo un enlace simbólico a una carpeta con la ubicación real de KUKI.

Permíteme mostrarte una demostración rápida. Tengo un proyecto vacío. Ejecuto npm add express. La instalación se ha completado. Veamos qué tenemos aquí. Ignora esto. Esto es algo que elevamos por defecto para solucionar algunos problemas. Pero puedes ver que Express solo se eleva y es un enlace simbólico. La ubicación real de Express está aquí. Y aquí también están todas las demás dependencias directas de Express.

Entonces, puedes ver aquí cookie. Pero cookie en realidad es un enlace simbólico a una carpeta aislada dedicada para el paquete cookie. Puedes verlo aquí. En realidad, cookie está aquí. Y esto es un enlace simbólico. Esto también es un enlace simbólico a esta carpeta del paquete accept. Entonces, esta es la ubicación real de accept. Y estos son las dependencias de accept. Por lo tanto, puedes ver que cada paquete está en su propia carpeta aislada con sus propias dependencias. Volvamos a las diapositivas.

3. Soporte superior de Monorepo con QNPM

Short description:

QNPM tiene un soporte superior de Monorepo debido a su estructura de módulo de nodo. En un Monorepo, todas las dependencias de todos los proyectos se elevan a la raíz, lo que permite acceder a las dependencias de otros proyectos. Esto puede causar problemas cuando se instala fuera del Monorepo. La estructura de módulo aislado de pnpm garantiza que los proyectos solo tengan acceso a sus propias dependencias. En un Monorepo, pnpm crea una única carpeta .pnpm en la raíz, enlazando los proyectos con sus dependencias directas.

QNPM también tiene un soporte muy bueno de Monorepo, gracias a su estructura de módulo de nodo superior. La estructura de directorio de los módulos de nodo elevados es aún peor en un Monorepo. Esto se debe a que en un Monorepo, cuando se utiliza la estructura de módulo de nodo elevado, todas las dependencias de todos los proyectos se elevan a la raíz del Monorepo. Por lo tanto, los proyectos tienen acceso incluso a las dependencias de otros proyectos. Entonces, en este ejemplo, hay un Monorepo con dos proyectos, de viento bar. Foo tiene una dependencia, que es foo. Como puedes ver en su archivo packages.sam. Y bar también tiene una dependencia, que es bar. Si se utiliza un Monorepo elevado, ambas dependencias se elevan a la raíz del Monorepo. Entonces, foo tiene acceso a la dependencia de bar, y bar tiene acceso a la dependencia de foo. Si accidentalmente requieres la profundidad de bar en foo, este código funcionará localmente. Sin embargo, foo se romperá cuando se instale como una dependencia fuera del Monorepo. Esto es aún peor que en un escenario de proyecto único. Porque en un escenario de proyecto único podría romperse en el futuro, pero en este caso se romperá después del primer lanzamiento del paquete. Con la estructura de módulo aislado de pnpm, los proyectos solo tienen acceso a sus propias dependencias. En un Monorepo, pnpm crea una única carpeta .pnpm en la raíz del Monorepo y los proyectos del espacio de trabajo solo enlazan sus dependencias directas. Entonces, tanto foo como bar solo tienen acceso a sus propias dependencias.

4. Enfoque de npm y Solución de pnpm

Short description:

npm está trabajando en una configuración para admitir un directorio de módulos con estilo pnpm. Algunas herramientas y paquetes en el ecosistema están rotos debido a esta arquitectura de módulos elevados. pnpm proporciona una solución al permitir la creación de módulos clásicos sin usar enlaces simbólicos.

Es posible que te preguntes por qué npm no utiliza el mismo enfoque. Bueno, en realidad lo hará, porque están trabajando en una configuración para admitir un directorio de módulos con estilo pnpm. Pero la razón por la que no lo utilizan como predeterminado es porque algunas herramientas aún no admiten enlaces simbólicos, como por ejemplo reactmetio, y muchos paquetes en el ecosistema están básicamente rotos debido a esta arquitectura de módulos elevados. Y dependen de dependencias no declaradas. Pero pnpm realmente tiene una solución para estos casos, porque pnpm también puede crear módulos clásicos sin usar enlaces simbólicos, y con elevación clásica, solo configura la configuración del enlace de nodos en elevado. Y tienes una solución alternativa.

5. Uso eficiente del espacio en disco con pnpm

Short description:

pnpm resuelve el problema del uso del espacio en disco mediante el uso de un almacenamiento direccionable por contenido. Los archivos se guardan mediante un código hash, lo que permite un almacenamiento eficiente. Cada archivo en los módulos de nodo es simplemente un enlace rígido al almacenamiento direccionable por contenido, lo que reduce el consumo de espacio en disco. Las dependencias en nuevos proyectos consumen mucho menos espacio en disco que con npm o Yarn.

pnpm también resuelve el problema del uso del espacio en disco. Si tienes muchos proyectos de Node.js en tu computadora, es posible que hayas notado que los módulos consumen mucho espacio en disco. pnpm resuelve este problema mediante el uso de un almacenamiento direccionable por contenido. Un almacenamiento direccionable por contenido es básicamente un almacenamiento que guarda archivos mediante un código hash que se calcula a partir del contenido del archivo. Por lo tanto, puedes ver en este ejemplo que en realidad hay un archivo de código en diferentes versiones del mismo paquete, pero aunque sean diferentes versiones, el archivo de código es el mismo, no tiene cambios. En este caso, este archivo tendrá el mismo hash en cada paquete por lo que se creará un solo archivo para él en el almacenamiento. Por lo tanto, aunque tengas 3 paquetes, solo guardas este archivo una vez, en un lugar en el disco.

Cada archivo en los módulos de nodo es simplemente un enlace rígido al almacenamiento direccionable por contenido. Solo en sistemas que lo admiten, no se utilizan enlaces rígidos, sino copias y escritura de archivos, probablemente en Linux y Mac. Estos archivos no consumen espacio adicional en disco, solo son referencias a archivos en el almacenamiento. Esto significa que si dos proyectos en tu computadora tienen el mismo archivo en los módulos, en ambos proyectos ese archivo se vinculará desde el mismo lugar en el disco. No tendrás dos copias del mismo paquete. Solo tendrás enlaces rígidos al almacenamiento direccionable por contenido global. Como resultado, las dependencias en nuevos proyectos consumen mucho menos espacio en disco que con npm o Yarn.

6. ¿Por qué pnpm es tan rápido?

Short description:

¿Por qué es pnpm tan rápido? npm y Yarn instalan dependencias en etapas, mientras que pnpm ejecuta las etapas de instalación por separado para cada dependencia. Esto hace que pnpm sea increíblemente más rápido. Algunas de estas optimizaciones de velocidad son posibles gracias a la estructura única de módulos de nodo determinista creada por pnpm y el uso del almacenamiento direccionable por contenido. Sin embargo, estas optimizaciones hacen que el código de los gestores de paquetes sea más difícil de entender, por lo que es un compromiso.

Tengo una diapositiva mezclada, no hay problema. ¿Por qué otros gestores de paquetes no admiten el almacenamiento direccionable por contenido? Creo que en la próxima versión lo activarán de forma predeterminada. Hablemos de por qué pnpm es tan rápido. En la mayoría de los casos, pnpm es más rápido que npm y Yarn. Pero, ¿por qué es así? Npm y Yarn instalan dependencias en etapas. En la primera etapa, se resuelven todos los paquetes. Luego, se obtienen todos los paquetes del registro. Y cuando se obtienen todos los paquetes, las dependencias se escriben en los modules de nodo. Por otro lado, pnpm ejecuta las etapas de instalación por separado para cada dependencia. Mientras algunos paquetes aún se están resolviendo, otros ya se están obteniendo. Y más adelante, algunos paquetes se escriben en los modules de nodo, mientras que otros aún se están obteniendo. Esto hace que pnpm sea increíblemente más rápido que otros gestores de paquetes. Entonces, podrías preguntar, ¿por qué otros gestores de paquetes no hacen lo mismo? En realidad, algunas de estas optimizaciones de velocidad solo son posibles gracias a la estructura única de módulos de nodo determinista creada por pnpm dentro de la carpeta .pmpm. Algunas de estas optimizaciones de velocidad son posibles gracias al uso del almacenamiento direccionable por contenido y algunas de las optimizaciones hacen que el código de los gestores de paquetes sea difícil de entender, por lo que es un compromiso. Si eliges hacer estas optimizaciones, será más difícil contribuir a tu gestor de paquetes.

7. Funciones de Pnpm y Enlace de Archivos

Short description:

Pnpm se empaqueta en un ejecutable, lo que te permite usarlo incluso sin tener Node.js preinstalado. También puedes usar Pnpm para instalar y cambiar entre diferentes versiones de Node.js. Al elegir un gestor de paquetes, considera las funciones de Pnpm, Yarn y Npm. Visita el sitio web de Pnpm y sigue las cuentas de Pnpmjs y mi cuenta de Twitter para obtener más información. Los archivos del almacenamiento direccionable por contenido en Pnpm se enlazan utilizando hardlinks, no solo symlinks. Un symlink es una referencia a otro lugar en el disco, mientras que un hardlink es otro archivo con su propia ubicación.

Y la última función de la que quiero hablar es que Pnpm se empaqueta en un ejecutable, por lo que puedes usarlo en tu sistema incluso si no tienes Node.js preinstalado. Y luego puedes usar Pnpm para instalar Node.js y cambiar entre diferentes versiones de Node.js. Básicamente, puedes usar Pnpm en lugar de nvm, nvs o volta.

Entonces, ¿qué gestor de paquetes deberías usar? Depende. Debes conocer cada gestor de paquetes, debes conocer las funciones de Pnpm, Yarn y Npm. Los tres gestores de paquetes son maduros, son utilizados por grandes empresas de tecnología, tienen muchos colaboradores y son confiables. Por lo tanto, realmente necesitas aprender qué funciones ofrecen, y en cada proyecto, probablemente debas elegir el que mejor se adapte a tus necesidades.

Gracias por asistir a mi presentación. Por supuesto, visita el sitio web de Pnpm para obtener más información y sigue la cuenta de Twitter de Pnpmjs, y sígueme en Twitter también. ¡Gracias! Fue bastante interesante. Me encantaron todos los detalles que compartiste. Así que, gracias por eso.

Entonces, hiciste la pregunta ¿cómo se enlazan los archivos del almacenamiento direccionable por contenido a los módulos de Node? Y los resultados están aquí. Así que el 63% dice que se usan symlinks, mientras que el 38% dice hardlinks. ¿Y tú qué dices? Sí, es algo que muchas personas por error piensan que solo usamos symlinks. Pero en realidad usamos tanto symlinks como hardlinks en pnpm. Y específicamente para este propósito, para enlazar archivos del almacenamiento direccionable por contenido, usamos hardlinks. Es importante. Podemos usar hardlinks, podemos copiar archivos o podemos usar copiar y escribir archivos. Pero no podemos usar symlinks para este propósito, porque rompería el algoritmo de resolución de Node.js.

Genial. Así que el 38% de todos ustedes lo acertaron. Son hardlinks. Así que solo para ampliar un poco, tal vez si te gustaría dar una breve diferencia entre symlinks y hardlinks para la audiencia. Sí. Un symlink es básicamente solo una referencia a otro lugar en el disco. Entonces, básicamente, si un módulo de Node está enlazado, Node.js resuelve esta ubicación a la ubicación real del archivo. Entonces, cuando busca las dependencias de este módulo, busca desde la ubicación real del archivo. Un hardlink es diferente. Básicamente, es otro archivo con su propia ubicación.

8. Hardlinks, Migration, and Multiple Drives

Short description:

Puedes tener muchos hardlinks en el disco en diferentes ubicaciones. Para Node.js, son como archivos separados. Estos archivos apuntan a la misma ubicación en el disco físico. Estos archivos no consumen espacio adicional en tu disco. Así que vamos a tomar algunas preguntas de la audiencia. ¿Qué tan difícil es migrar la base de código de YARN a pnpm, por ejemplo? Si es solo un repositorio de paquetes, es realmente fácil. ¿Cuál es el significado completo de pnpm? ¿Qué representa? Este nombre fue inventado antes que yo. El primer mantenedor de pnpm fue Rico Stacrus de Filipinas. Significa simplemente npm de rendimiento. Quería hacer una pregunta. ¿Cómo funciona pnpm en computadoras que pueden tener múltiples discos o sistemas de archivos múltiples? ¿Cómo funciona todo en eso? La desventaja de los hardlinks es que un hardlink solo puede estar en el ámbito de un disco. Entonces no puedes tener tu almacenamiento direccionable por contenido en el disco C y tu proyecto en el disco D, si estás usando Windows, por ejemplo.

Puedes tener muchos hardlinks en el disco en diferentes ubicaciones. Para Node.js, son como archivos separados. Estos archivos apuntan a la misma ubicación en el disco físico. Estos archivos no consumen espacio adicional en tu disco.

Genial, eso es útil. Sí, y así es como se hace eficiente la secuencia. Sí, usamos menos espacio en disco. Sí, correcto. Eso es perfecto.

Así que vamos a tomar algunas preguntas de la audiencia. Tenemos una pregunta. ¿Qué tan difícil es migrar la base de código de YARN a pnpm, por ejemplo? Es... Si es solo un repositorio de paquetes, entonces es realmente fácil. Hay un comando de importación. Así que solo tienes que ejecutar pnpm import y convertirá tu archivo de registro de YARN a un archivo de registro YAML de pnpm, y solo necesitas eliminar el archivo de YARN y confirmar el nuevo archivo de registro. Luego, tal vez actualices tus scripts de CI de YARN install a pnpm install, de YARN run a pnpm run. En la mayoría de los casos, todo lo que necesitas hacer es cambiar YARN por pnpm y funcionará como un reemplazo directo. Para un espacio de trabajo, necesitas cambiar cómo enumeras los paquetes globales. YARN usa un campo en el package.json y pnpm usa un archivo separado, pnpm-workspace.

¿Cuál es el significado completo de pnpm? ¿Qué representa? Este nombre fue inventado antes que yo. El primer mantenedor de pnpm fue Rico Stacrus de Filipinas. Significa simplemente npm de rendimiento. La primera versión era 10 veces más rápida que npm en ese momento. Eso es increíble.

Quería hacer una pregunta. ¿Cómo funciona pnpm en computadoras que pueden tener múltiples discos o sistemas de archivos múltiples? ¿Cómo funciona todo en eso? La desventaja de los hardlinks es que un hardlink solo puede estar en el ámbito de un disco. Entonces no puedes tener tu almacenamiento direccionable por contenido en el disco C y tu proyecto en el disco D, si estás usando Windows, por ejemplo. En ese caso, pnpm crea un almacenamiento separado para cada disco. Entonces, si tienes proyectos en el disco C, tendrás un almacenamiento para esos proyectos en el proyecto C y si tienes un proyecto en el disco D, tendrás un almacenamiento separado para esos proyectos. O alternativamente, puedes usar un almacenamiento, pero si el almacenamiento está en el disco C, entonces en el disco C se usarán hardlinks a ese almacenamiento, pero en el disco D, los archivos se copiarán. Entonces no obtendrás los beneficios de la eficiencia del espacio en disco. Eso es interesante, sí. Gracias por esta respuesta. No veo más preguntas, pero para la audiencia, si aún tienen más preguntas, siempre pueden hacerlas en el canal de preguntas y respuestas y obtendrán las respuestas de Zoltan allí. Y no tenemos ninguna sala de oradores para Zoltan, así que asegúrate de hacer las preguntas en el canal de preguntas y respuestas. Gracias una vez más, Zoltan, por unirte a nosotros hoy para esta magnífica charla y también por responder estas buenas preguntas. Muchas gracias. Gracias. Gracias por tenerme.

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

Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Yarn 4 - Gestión Moderna de Paquetes
JSNation 2022JSNation 2022
28 min
Yarn 4 - Gestión Moderna de Paquetes
Top Content
Yarn is a package manager that focuses on stability, performance, and security. It offers unique features like plug and play installation, support for nonmodules, and the exec protocol. Yarn is committed to being a good citizen in the open-source community and contributes to fixing dependencies. It is part of the Node.js Loader's working group and advocates for Corepack. Yarn is still experimental but is improving its user experience and security features. Contributions are welcome, and switching to Yarn can improve performance in large projects.
Más allá de las listas virtuales: Cómo renderizar 100K elementos con 100s de actualizaciones/seg en React
React Advanced 2021React Advanced 2021
27 min
Más allá de las listas virtuales: Cómo renderizar 100K elementos con 100s de actualizaciones/seg en React
Top Content
The Talk discusses optimizing rendering of big tables using Flipper, a new version that is ten times faster with improved user interaction and richer data. It explores optimizing rendering with React, virtualization, filtering, sorting, and windowing techniques. The introduction of the Flipper Datasource packet simplifies handling updates, inserts, and removals. The performance of the Flipper data source package is excellent, even in a debug build of React, with minimal CPU usage. The Q&A session covers incremental sorting, dynamic row height, and the potential for two-dimensional virtualization in the future.
Durable Objects - Todo En Todas Partes Todo De Una Vez Por No Mucho Dinero
React Day Berlin 2023React Day Berlin 2023
31 min
Durable Objects - Todo En Todas Partes Todo De Una Vez Por No Mucho Dinero
Top Content
Durable Objects is a versatile programming paradigm by Cloudflare that allows for stateful and uniquely addressable server environments. It simplifies feature development, enables real-time updates through WebSocket connections, and provides a built-in key-value store for long-term storage. It can be used to create collaborative applications, manage data storage efficiently, and explore co-located compute and data at the edge. Other companies like Azure also offer similar technologies. Deno's KV and fly.io's Flame are innovative products that eliminate the need for provisioning databases and Kubernetes clusters.
Depuración con Chrome DevTools
JSNation Live 2021JSNation Live 2021
11 min
Depuración con Chrome DevTools
Top Content
Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
De Todo App a B2B SaaS con Next.js y Clerk
React Summit US 2023React Summit US 2023
153 min
De Todo App a B2B SaaS con Next.js y Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
WorkshopFree
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.
Construyendo Pinia desde cero
Vue.js Live 2024Vue.js Live 2024
70 min
Construyendo Pinia desde cero
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.
Masterclass de Desarrollo Web 3D con el ecosistema de TresJS: Un taller de Vue.js
Vue.js Live 2024Vue.js Live 2024
119 min
Masterclass de Desarrollo Web 3D con el ecosistema de TresJS: Un taller de Vue.js
Workshop
Alvaro Saburido
Alvaro Saburido
Presentamos "Masterclass de Desarrollo Web 3D con TresJS", un taller especializado creado para desarrolladores de Vue.js ansiosos por explorar el mundo de la gráfica 3D en sus aplicaciones web. TresJS, un potente renderizador personalizado para Vue, está diseñado específicamente para funcionar perfectamente con el sistema reactivo de Vue. Este taller ofrece una inmersión profunda en la integración de visualizaciones 3D sofisticadas y experiencias interactivas directamente en aplicaciones Vue, aprovechando las fortalezas únicas de los ecosistemas de Vue y TresJS.
Este taller está diseñado para desarrolladores de Vue.js que buscan ampliar sus habilidades en la tercera dimensión, diseñadores de UI/UX interesados en incorporar elementos 3D en aplicaciones web, y desarrolladores front-end curiosos sobre el potencial de la gráfica 3D para mejorar las experiencias de usuario. Debes estar familiarizado con Vue.js para aprovechar al máximo este taller.
Lo que Aprenderás- Introducción a TresJS: Descubre los fundamentos de TresJS y cómo se integra con el ecosistema de Vue para dar vida a la gráfica 3D.- Creación de Escenas 3D con Vue: Aprende a construir escenas 3D complejas utilizando componentes Vue, mejorando tus interfaces de usuario con visuales dinámicos e inmersivos.- Interactividad y Animación: Domina las técnicas para hacer tus escenas 3D interactivas, respondiendo a las entradas del usuario para una experiencia cautivadora.- Integración con Funcionalidades de Vue: Explora la integración avanzada de TresJS con la reactividad, los composables y la tienda Vuex de Vue para gestionar el estado en aplicaciones web 3D.- Rendimiento y Mejores Prácticas: Obtén información sobre la optimización de tus escenas 3D para el rendimiento y las mejores prácticas para mantener aplicaciones web fluidas y receptivas.