Ladle: La Historia sobre los Módulos y el Rendimiento

Rate this content
Bookmark
Slides

Cuanto más grandes son, más lento se vuelve. Estoy hablando de tus aplicaciones y el proceso de empaquetado. Afortunadamente, podría haber un futuro mejor: uno sin empaquetadores. Esta charla tratará sobre los módulos de JavaScript, Vite y cómo construimos Ladle, una herramienta rápida para tus historias de React.

16 min
24 Oct, 2022

Video Summary and Transcription

Hola a todos, mi nombre es Wojta Mikšu. Trabajo en Uber como ingeniero de infraestructura web. Hoy les hablaré sobre una nueva herramienta abierta que potencia el desarrollo y prueba de tus componentes de React. Esta charla cubre la historia de los módulos de JavaScript, la introducción de Vite y Ladle, y predicciones futuras. Ladle es una herramienta de código abierto construida sobre Vite para desarrollar y probar componentes de React a través de historias. Ofrece características como diferentes vistas, variaciones de componentes, registro de manejadores de eventos, cambio de tema y más. Ladle ha recibido comentarios positivos y muestra mejoras en el inicio del servidor de desarrollo y el reemplazo de módulos en caliente.

Available in English

1. Introducción a la Herramienta Abierta para Componentes de React

Short description:

Hola a todos, mi nombre es Wojta Mikšu. Trabajo en Uber como ingeniero de infraestructura web. Hoy les hablaré sobre una nueva herramienta abierta que potencia el desarrollo y prueba de sus componentes de React. Esta charla tiene 4 secciones. La primera es una breve lección de historia sobre las características de JavaScript que hemos estado echando de menos. Luego hablaremos sobre los módulos de JavaScript, Vite y Ladle. Finalmente, concluiremos con algunas predicciones futuras. JavaScript carecía de un concepto de modularización. Node.js adoptó CommonJS, pero tiene debilidades para los navegadores.

Trabajo en Uber como ingeniero de infraestructura web, y hoy les hablaré sobre una nueva herramienta abierta que potencia el desarrollo y testing de sus componentes de React.

Esta charla tiene 4 secciones. La primera es una breve lección de historia sobre las características de JavaScript que hemos estado echando mucho de menos durante mucho tiempo. Luego hablaremos sobre los módulos de JavaScript, también conocidos como módulos ES6 o ESM. La tercera sección presenta Vite, un nuevo tipo de bundler, seguido de una introducción a Ladle, una herramienta que construimos sobre Vite. Y finalmente, concluiremos con algunas predicciones futuras.

¿Recuerdan cómo se veían los navegadores en 1995? Yo no, pero seguramente eran muy diferentes. No es sorprendente que JavaScript careciera de algunas características cuando fue introducido. La característica relevante para esta charla es la forma en que JavaScript se carga en los navegadores. Hay que usar la etiqueta de script. El código en sí puede estar en línea o apuntar a un archivo. Esto estaba bien hace 15 o 10 años, cuando JavaScript se usaba para agregar un poco de interactividad. Pero cuando construimos aplicaciones modernas de frontend, esto causa algunos problemas graves. Los archivos se cargan y se ejecutan de forma sincrónica y su orden importa. Las variables de nivel superior terminan en el ámbito global, por lo que es fácil que dos bibliotecas no relacionadas causen colisiones de nombres. Cada vez que creamos un nuevo archivo, tenemos que cargarlo a través de una etiqueta de script adicional y vincularlo al ámbito global. No hay una forma fácil de eliminar el código no utilizado.

JavaScript carecía de un concepto de modularización. Esto fue especialmente un gran problema para el JavaScript del lado del servidor conocido como Node.js. Se necesitaba urgentemente un sistema mejor para dividir y encapsular el código. Así que, Node.js adoptó CommonJS. Esta sintaxis debería ser muy familiar para cualquiera que haya trabajado con JavaScript en los últimos años. Aborda muchos problemas, pero no todos. Introduce un concepto de proveedores y consumidores de código. También es toda una filosofía y se utilizó para crear el registro de paquetes más grande para compartir código llamado npm. Permite la carga dinámica de código. Sin embargo, hay algunas debilidades importantes que lo hacen inutilizable para los navegadores. Por ejemplo, hay referencias al sistema de archivos como el uso de dirname. Pero el mayor problema es que la resolución y carga de módulos debe hacerse de forma sincrónica.

2. Introducción a los Módulos de JavaScript y Vite

Short description:

CommonJS fue un sistema mejor que JavaScript jamás tuvo, permitiendo a los desarrolladores dividir el código en módulos sin preocuparse por el soporte del navegador. Los módulos de JavaScript fueron introducidos como un estándar oficial, soportado por todos los navegadores modernos y entornos de ejecución. Funcionan de forma asíncrona, cargan módulos adicionales cuando es necesario y pueden ser fácilmente eliminados. A pesar de algunos problemas de compatibilidad, está claro que los módulos de JavaScript son el futuro. Vite es un nuevo entorno de desarrollo que aprovecha los módulos de JavaScript sin empaquetar, lo que resulta en un inicio instantáneo del servidor de desarrollo. Vite utiliza los complementos ESbuild y Rollup para convertir las bibliotecas existentes de CommonJS y eliminar dependencias innecesarias como JSX y TypeScript.

Eso bloquearía la renderización en los navegadores y llevaría a experiencias realmente malas. CommonJS fue desarrollado de forma independiente del partido ECMAStandards, por lo que nunca se convirtió en una parte fundamental de JavaScript. Sin embargo, todavía era un sistema mejor que JavaScript jamás tuvo, y los desarrolladores querían usar código de servidor en sus aplicaciones de frontend. Así que se introdujeron los empaquetadores como Webpack. Webpack puede analizar y resolver todos los módulos de CommonJS antes de crear un solo archivo empaquetado que sirve a los navegadores. Esto fue una gran victoria. Los desarrolladores pueden usar CommonJS para dividir el código en módulos y no tienen que preocuparse por el soporte del navegador en él.

Pero aún nos faltaba una forma estandarizada oficial que funcionara en navegadores y otros entornos de ejecución sin herramientas adicionales. Se introdujeron los módulos de JavaScript. Hoy en día, son compatibles con todos los navegadores modernos y entornos de ejecución. Puedes cargarlos estableciendo el atributo type en module. Y la mejor parte es que los navegadores entienden la sintaxis de importación-exportación y cargan módulos adicionales cuando es necesario. Los módulos funcionan de forma asíncrona y no impiden que las páginas sean interactivas. Hay una API de promesas para importar módulos de forma dinámica. El código puede ser fácilmente eliminado. Solo se cargan las partes que se utilizan. Funciona en todos los navegadores y entornos. Y ahora es un estándar oficial.

No me malinterpreten. Aún hay algunos problemas en cuanto a la compatibilidad con CommonJS y el ecosistema existente, por lo que la adaptación puede ser a veces complicada. Sin embargo, está claro que este es el futuro de JavaScript.

Entonces, ¿qué es Vite? Es un nuevo entorno de desarrollo construido sobre el hecho de que los módulos de JavaScript no necesitan ser empaquetados antes de ser servidos a los navegadores. Eso era una parte importante y muy lenta de Webpack. Por lo tanto, el inicio del servidor de desarrollo puede ser instantáneo. Aún se necesita algo de empaquetado y compilación. Muchas bibliotecas existentes deben ser convertidas de CommonJS. También necesitamos eliminar cosas como JSX y TypeScript. Vite utiliza los complementos ESbuild y Rollup para eso. Comparemos el proceso de inicio de Webpack y Vite lado a lado. Este es el enfoque antiguo de Webpack.

3. Introducción a Ladle para Pruebas de Componentes React

Short description:

Es necesario analizar la base de código y resolver los módulos antes de crear un paquete. Vite inicia el servidor de inmediato y sirve el módulo de entrada al navegador. Ladle es una herramienta de código abierto construida sobre Vite para desarrollar y probar componentes React a través de historias. Proporciona una interfaz de usuario para navegar y probar diferentes historias, e incluye también verificaciones de accesibilidad y pruebas de diseño responsivo.

Es necesario analizar toda la base de código y resolver todos los módulos antes de crear un paquete. Solo entonces se puede iniciar el servidor y servir el paquete. Cuanto más grande sea tu aplicación, más tiempo tardará en iniciarse.

Por otro lado, Vite inicia el servidor de inmediato y sirve el módulo de entrada al navegador. Dado que el navegador comprende las importaciones siguientes, solo carga los módulos adicionales cuando es necesario. Vite solo necesita realizar un preprocesamiento ligero, como eliminar los tipos de typescript, antes de enviar estos archivos de vuelta al navegador. Sin embargo, no importa cuán grande sea tu base de código, el servidor siempre se inicia al instante y las reconstrucciones incrementales también son muy, muy rápidas.

Nos encantan estos nuevos beneficios de rendimiento, por lo que tenía sentido poner a prueba Vite y utilizarlo como base para una solución alternativa a storybook. Hemos creado una herramienta de código abierto llamada Ladle. Una herramienta para desarrollar y probar componentes React a través de historias, construida desde cero sobre Vite.

Hagamos una demostración. Comenzaremos con una carpeta vacía, así que inicialicemos nuestro proyecto. También necesitamos agregar algunas dependencias como react, react-dom y ladle. Por defecto, Ladle busca la carpeta source. Y específicamente busca archivos que terminen con .stories.dsx. Así que creemos el archivo welcome-stories.dsx.

Las historias también son solo componentes React, pero deben ser exportadas. Así que exportemos primero el nombre de la historia, que exporta un encabezado. Por supuesto, esto podría ser cualquier componente React, por ejemplo, un componente de tu sistema de diseño. Y ahora podemos iniciar Ladle con el comando ladleserve. Esto inicia de inmediato un servidor de desarrollo v8 y esta es la interfaz de Ladle. En el lado izquierdo puedes encontrar tu componente y en el lado derecho hay una navegación que muestra todas las historias descubiertas. Por defecto, se utilizan los nombres de archivo y los nombres de exportación para crear esta navegación. Pero esto también se puede cambiar a través del código mediante los parámetros nombre de la historia y export default título.

Agreguemos algunas historias adicionales para demostrar otras características. Esta historia tiene un botón que no es muy accesible. Como puedes ver, el contraste de color no es bueno. Puedes ejecutar una verificación de accesibilidad haciendo clic en este icono. Y ahora la verificación nos indica que hay una violación y nos proporciona detalles para que podamos depurar y solucionarlo. Otra característica útil es cuando se prueban la capacidad de respuesta y el diseño responsivo.

4. Introducción a las características de Ladle

Short description:

Ladle te permite establecer diferentes viewports y probar diferentes tamaños. Proporciona controles para mostrar y probar variaciones de un solo componente. También ofrece características para registrar los controladores de eventos, cambiar temas, previsualizar el código fuente y exportar metadatos. Ladle es un paquete de dependencia única que combina un complemento de weed, ReactUI y CLI.

Te permite establecer diferentes viewports y probar diferentes consultas de medios. A través de este complemento, puedes cambiar el viewport y probar diferentes tamaños. También puedes establecer un tamaño de viewport predeterminado a través del parámetro .meta y width.

Otra característica útil es cuando quieres mostrar y probar diferentes variaciones de un solo componente. En este caso, estamos cambiando el valor de size. Esta característica se llama controles y ahora mismo podemos cambiar esta variable llamada size y podemos elegir entre tres valores diferentes. Como puedes ver, incluso sin tocar el código, podemos ver diferentes variaciones. Y así es como lo configuras en el código a través de la API llamada arquetipos. Defines qué variables quieres hacer dinámicas, defines las opciones y luego se pasa como una prop en la historia misma cuando se puede usar dentro de tu componente. Hay otros tipos de control que puedes usar como booleanos, cadenas, radios. Por lo tanto, esto es muy flexible para cosas como sistemas de diseño cuando quieres mostrar diferentes variaciones de un solo componente, pero no quieres crear múltiples historias.

Otra característica es genial para registrar los controladores de eventos. Por ejemplo, este botón está utilizando un controlador de acción y una vez que comenzamos a hacer clic en él, obtienes esta notificación y te muestra qué evento se disparó y sus detalles. La acción es una función exportada de Ladle y puede ser simplemente pasada a tus controladores. Y hay algunas otras características, como cambiar entre temas claros y oscuros. Puedes cambiar a pantalla completa. Puedes cambiar entre izquierda y derecha y de derecha a izquierda. También puedes previsualizar el código fuente de la historia. Resalta la historia específica y las líneas de código. También muestra la ubicación de la historia. Y finalmente, Ladle expone el punto final meta.json. Esto te proporciona información estructurada sobre qué historias hay en tu instancia. Esto puede ser extremadamente útil para la automatización y las pruebas. Por ejemplo, usamos este archivo para ejecutar un script de playwright que abre cada URL y toma una captura de pantalla. Luego lo usamos para las pruebas visuales de captura de pantalla. Como puedes ver, estos metadatos también exportan información como el ancho. Cuando estableces el viewport predeterminado, no solo se muestra tu historia en este viewport, sino que también se exporta con él, junto en este archivo. Esto puede ser muy útil para la automatización y las pruebas adicionales.

¿Qué es Ladle? Ladle es un complemento de weed, ReactUI y CLI en un solo paquete. Es una dependencia única, por lo que nunca tendrás problemas de versiones entre múltiples paquetes.

5. Introducción a los beneficios y tendencias futuras de Ladle

Short description:

No requiere configuración inicial y admite completamente el formato de historia de componentes. Puede ser personalizado y funciona como un reemplazo directo de Storybook. Ladle ha recibido excelentes comentarios de la comunidad y ha mostrado mejoras significativas en el inicio del servidor de desarrollo y el reemplazo de módulos en caliente. El futuro de las herramientas de frontend se dirige hacia el dominio de los módulos, lo que nos permite omitir el procesamiento pesado y aprovechar las capacidades del navegador para la resolución y el almacenamiento en caché de módulos. El uso de otros lenguajes como Rust y Go para la compilación de JavaScript también es una tendencia que ofrece mejoras en la velocidad.

No requiere configuración inicial, pero aún puedes personalizar cosas como fuentes, agregar hojas de estilo adicionales o acceder completamente a la configuración de weed. Admite completamente el formato de historia de componentes y funciona como un reemplazo directo de Storybook.

También admite diferentes configuraciones de monorepo y tiene una excelente API programática, por lo que se puede volver a empaquetar como parte de tu biblioteca. Se lanzó a principios de este año y hasta ahora ha recibido excelentes comentarios de la comunidad. Lo hemos estado utilizando para muchos proyectos internos y públicos y hemos visto mejoras de hasta 10 veces en el inicio de los servidores de desarrollo y el reemplazo de módulos en caliente.

Entonces, ¿hacia dónde se dirige ahora el desarrollo de herramientas frontend? Está bastante claro que los módulos no van a desaparecer y con el tiempo dominarán todo. Esto es genial para nuestras herramientas. Podemos omitir algunos procesos pesados antes de enviar nuestro código a los navegadores. Los navegadores pueden hacer la resolución de módulos por nosotros. También son mucho mejores en cuanto al almacenamiento en caché. También hay una tendencia a utilizar otros lenguajes como Rust y Go para compilar JavaScript. Esa es otra gran fuente de mejoras en la velocidad. Visita ladle.dev para experimentar lo que esta nueva generación de herramientas puede hacer y gracias por escuchar.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion