El Potencial Caprichoso de los Marcos de Trabajo de JavaScript

Entonces, debo advertirles, los primeros dos minutos van a ser inevitablemente brillantes. El resto de las diapositivas serán oscuras, pero prepárense. Soy un gran fan del trabajo que hace Stripe. Me parece realmente caprichoso y detallado. Recuerdo cuando salió este degradado de malla y fue un gran problema. Pero todas sus páginas son realmente interactivas, dinámicas. Tienes este globo 3D que primero podrías pensar que es un video, pero luego cambia a medida que te desplazas, por lo que realmente muestra que es un modelo 3D. Cosas muy, muy geniales.

Sin embargo, cuando realmente inicias sesión en el producto de Stripe, es un poco como pasar por una puerta a un universo diferente. No hay degradados de malla. No hay globos flotantes. Eso no es necesariamente algo malo. Como, ya sabes, es un producto SaaS de empresa a empresa. No necesariamente necesitas un montón de adornos caprichosos. Pero mi punto es que solo mirando entre los dos, ¿verdad? Es muy claro que es un producto diferente construido por un equipo diferente, utilizando herramientas diferentes.

Y probablemente no nos sorprenda saber que el tablero utiliza React. Entonces, si tienes las DevTools, te dirá que esta página está construida con React. Y las páginas de aterrizaje no. No utilizan React. He visto al equipo de desarrollo hablar sobre las herramientas que utilizan. Es mucho de JavaScript vainilla y, como, paquetes personalizados pero sin marco de componentes. No React, no Vue, no Angular. Creo que esto tiene sentido. Como, ya sabes, pensamos en React. Como, esto parece una aplicación React. Está impulsada por data. Es de pila completa. Es todo lo que hemos estado hablando. Y entonces podrías preguntarte razonablemente, como, ¿por qué querrías usar React para construir algo como esto? Y de eso es de lo que estoy aquí para hablar hoy. Esta charla se llama el potencial caprichoso de los frameworks de JavaScript.

Y quiero compartir cómo he estado usando React para construir algunos detalles bastante juguetones y caprichosos. También me di cuenta de que no tengo agua, así que voy a tomar una de estas mientras dejamos que mi muy divertida pantalla de título se desarrolle.

Entonces, para aquellos que no lo saben, tengo un blog. Blogueo en JoshWComo.com y cuando construí este blog, pensé que este iba a ser mi patio de recreo. Así que iba a complacer todas las ideas caprichosas que tenía. Así que si había una idea juguetona que quería hacer, iba a hacerla. Esto, me inspiró un poco esos, como virutas de hierro que obtienes con un imán y mueves el imán y las virutas de hierro se ondulan alrededor. Es exactamente el tipo de detalle pequeño pero divertido que acepto cuando es mi blog porque es mi propio patio de recreo y puedo hacer lo que quiera.

Uno de los pequeños detalles, y voy a acercar esto mucho. Oh, esta parte también, déjame, espera, modo oscuro. Este pequeño amigo aquí abajo, tiene un montón de pequeños detalles. Rastrea tu cursor, por lo que el corazón mismo rota dependiendo de la posición de tu cursor. Un poco más sutil, los ojos se mueven independientemente y no sé cuán claro es eso, pero es una pequeña cosa. Si te acercas al botón de Me gusta, pero luego te alejas, si no interactúas con él, se pone un poco triste. Porque, ya sabes, es un botón de Me gusta, a los botones de Me gusta les gusta ser clickeados, pero no se queda triste mucho tiempo, decidí hacerlo muy alegre. Y, por supuesto, puedes hacer clic en él. Me pregunto si tengo sonido, déjame ver. Está bien, hace un pequeño ruido de glug, puedes imaginar eso. Y si sigues haciendo clic en él hasta el final, eventualmente, llegas a la cima y obtienes un pequeño estallido de confeti. Un pequeño huevo de Pascua que la gente no sabe. Puedes hacer clic derecho para quitar Me gusta. Puedes divertirte con eso.

Entonces, esto es esencialmente de lo que quiero hablar. Ahí estamos. Vamos a construir esto, vamos a construir un huevo. Elegí un huevo porque es una forma un poco más sencilla. Y nos vamos a centrar en el seguimiento del cursor, por lo que la rotación de la cabeza y la traducción del ojo. Ahora, incluso antes de llegar a React, ¿verdad?, ¿qué son las cosas que tenemos que saber para construir este tipo de interacción? Bueno, necesito saber dónde en el viewport está el cursor. Y la forma en que normalmente hacemos esto es midiendo la distancia desde la esquina superior izquierda en píxeles. Entonces, a medida que te mueves más a la derecha, tu valor x se hace más alto.

A medida que te mueves hacia abajo desde la parte superior, tu valor y se hace más alto. También necesito saber esto. Necesito conocer el cuadro delimitador. Como un ángulo extraño para mirar. Necesitas saber dónde en el viewport está el elemento, ¿verdad? Porque ahora mismo está en el centro, pero no quieres asumir eso. Y si tienes esas dos piezas de información, puedes hacer los cálculos para averiguarlo.

Entonces, como si el ratón estuviera aquí, está a la izquierda del huevo. Así que los ojos tienen que desplazarse hacia la izquierda y la cabeza tiene que rotar en sentido antihorario. Hablemos de cómo haríamos esto en JavaScript puro. Así que no React. Nada de eso. Haré esto un poco más grande, también. Así que tengo un escuchador de eventos. Lo estamos poniendo en el objeto de la ventana. Eso significa que todo este código se va a ejecutar cada vez que el usuario mueva el ratón. Necesitamos averiguar la posición del ratón. Podemos obtener eso del evento que se pasa. Y luego para obtener el elemento del corazón real, lo buscamos con el selector de consulta. Y luego obtenemos el cuadro delimitador con get bounding client rect.

¿Cuántas personas han usado este método? Bien, supongo que puedo ver las manos, así que hagan ruido. Es un método muy cool. Esencialmente, si no sabes lo que es, te da un montón de información como un objeto de JavaScript sobre el elemento que has buscado. El ancho y la altura, y luego esta distancia, desde el borde izquierdo del viewport hasta el borde izquierdo del elemento y desde la parte superior del viewport hasta la parte superior del elemento. Y así con esas dos piezas de información, con la posición del ratón del usuario y con el cuadro delimitador para este elemento, puedes pasarlo a esta función de cálculo de rotación, y te dará la rotación en grados.

Ahora, yo estaba, ya sabes, siempre es un poco de debate. Quiero mostrarte exactamente lo que hace esta función. Pero nuestro tiempo juntos es limitado. Y no necesariamente creo que entrar en trigonometría sea el mejor uso de ese tiempo. Así que voy a tratar esto como una caja negra. Le doy esas dos piezas de información y escupe el ángulo al que necesita rotar.

Pero ahora es un buen momento para mencionar, de hecho, voy a compartir una diapositiva al final con un enlace a todo este código. Así que si tienes curiosidad, si quieres ver exactamente cómo funciona esto, podrás hacerlo.

Finalmente, obtenemos ese valor de rotación, y lo aplicamos como una transformación de CSS, estableciendo esencialmente un estilo en línea. Entonces, ¿qué pensamos de esto? ¿Funciona? Bueno, funciona como un prototipo. Funciona como un MVP. Pero a menudo, hay bastante distancia entre, funciona en mi máquina en localhost y está listo para producción.

Para empezar, todo este código se ejecuta mucho, como decenas y decenas de veces por segundo. Y el problema con eso es que obtener una solicitud de cliente, obtener un cuadro delimitador, es algo lento. Lo pensamos, ¿verdad? Esta caja realmente no cambia a medida que el usuario mueve su ratón. Ciertamente, lo hace. De hecho, cambia muy ligeramente debido a la rotación. Pero el centro no cambia. Y entonces, si queremos que esto sea eficiente, ¿realmente tenemos que estar recalculando esa caja decenas y decenas de veces por segundo?

Así que lo que voy a hacer es que voy a tomar estas dos líneas y las voy a mover por encima del manejador de eventos, así que ahora solo hace este trabajo cuando muevo el ratón. Pero esto tampoco funciona muy bien. Por ejemplo, necesitamos recalcular el cuadro delimitador cuando el usuario se desplaza porque ahora, cuando el usuario está en la parte superior de la página, esta es la distancia, pero a medida que se desplazan, esa distancia cambia. Entonces, ¿entiendes lo que estoy diciendo, verdad? Hay un camino entre el prototipo funcional y la versión lista para producción.

Además de todo lo que ya tenía, también tengo que agregar oyentes de eventos al evento de desplazamiento, también estoy usando un observador de redimensionamiento. Esto me dirá no solo… En realidad, no creo que te diga si la ventana se redimensiona. Te dice si el elemento se redimensiona o si uno de sus ancestros tiene un cambio en CSS que lo hace redimensionar. Entonces, esto es mejor, pero todavía falta un montón de cosas. Para empezar, debería estar limpiando estos oyentes de eventos, ¿verdad? Es una cosa comenzar ese trabajo, también queremos detenerlo. Como si el usuario se aleja de esta página, no deberíamos seguir rastreando la posición del ratón. Y tal vez queramos rebotar esto para que no lo estemos calculando en cada evento de desplazamiento, porque eso también se dispara muy, muy rápidamente.

Entonces, hablemos de cómo React puede resolver algunos de estos problemas. Y ahora lo tenemos funcionando en React. Como esta es una masterclass de React, voy a suponer que todos ustedes están algo familiarizados con los fundamentos de React. Incluso si no lo están, creo que esto tendrá sentido. Vamos a mantener las cosas bastante a nivel general. Entonces, de inmediato, vemos algo bastante interesante. Const mouse position es igual a useMousePosition.

Tengo este hook personalizado que hace lo que acabamos de hablar. Rastrea la posición del ratón del usuario. Lo almacena como una variable de estado. Lo que significa que este componente se vuelve a renderizar cada vez que cambia la posición del ratón. Y también he introducido el trabajo de limpieza. Y aunque he estado usando hooks durante tres o cuatro años ahora, esto todavía me parece muy genial. Es una línea de código que me dice no solo cuál es la posición inicial del ratón, sino cuál es en cada momento en el tiempo a medida que el usuario mueve el ratón. Y también de alguna manera mágicamente incluye el trabajo de limpieza y desmontaje.

Como, ya sabes, la reutilización no es una cosa de React. Como, JavaScript tiene funciones. Y eso ha sido típicamente nuestra herramienta para reutilizar la lógica. Pero una función simple no puede incluir el trabajo de configuración y el trabajo de desmontaje que ocurre en un momento desconocido más tarde. Así que es realmente genial. Una línea de código hace todo eso.

De manera similar, tengo esta línea para obtener el cuadro delimitador. Y esto también tiene un montón de cosas a las que hemos aludido. Como, en realidad estoy haciendo mi limpieza ahora. También estoy haciendo un poco de debouncing para que no se dispare más de lo necesario. Porque estamos haciendo el trabajo de limpieza ahora, si este componente se desmonta y vuelve a montar, vamos a eliminar el oyente de eventos, desconectar el observador de redimensionamiento. Y eso significa que evitamos la fuga de memoria de, como, apilando todos estos oyentes de eventos cada vez que el componente se vuelve a renderizar.

Ahora, esto funciona bastante bien. Se me ocurre, sin embargo, y no sé cuán obvio es esto, si me muevo muy rápido. No es super suave. Y eso es porque en realidad no estoy animando aquí. No estoy haciendo ningún tipo de transición de CSS o algo así. Es un mapeo uno a uno de la posición del ratón del usuario a la rotación del huevo y la traducción de los ojos. Si quiero que sea, como, más suave cuando hacemos este tipo de movimiento brusco, bueno, tal vez podamos usar una transición de CSS. Probemos eso. Diré que la transición es igual a transformar. No sé, 500 milisegundos. Probemos eso. También voy a comentar la transformación del ojo, porque solo me voy a preocupar por la rotación de la cabeza. En realidad, antes de hacer eso, debería terminar de mostrar cómo funciona este código. Dibujé esto como un SVG en Figma, y luego copié el SVG. Hay herramientas en las que puedes introducir tu código SVG, y te dan JSX. Honestamente, es prácticamente lo mismo, pero tienes que, como, esto tiene que ser, esto es lo que sería en un SVG, y tienes que usar camel case. Así que es realmente genial, en realidad, que los SVGs se puedan usar en React de esta manera. Pero ese es un punto completamente diferente.

Ahora tengo la transición CSS transformada en 500 milisegundos, y si me muevo de una manera muy específica, parece estar bien. Pero si sigo moviéndome, está congelado en el tiempo. Podrías pensar que tal vez eso es porque este es el valor incorrecto. Intentemos con 50 milisegundos en su lugar. Y esto es aún peor de alguna manera. No es bueno. Y la razón de eso es que las transiciones CSS no manejan las interrupciones, particularmente de manera elegante. Y entonces lo que está sucediendo aquí es que estoy volviendo a renderizar este código una y otra vez cada vez que el usuario mueve el ratón, y seguimos iniciando y cancelando estas transiciones CSS. Así que voy a deshacerme de eso. Voy a traer de vuelta la Itransform, y voy a usar una biblioteca. Voy a usar React Spring. Así que voy a importar use Spring de React Spring. También voy a corregir el error tipográfico. Ahí vamos. Y necesito esta herramienta animada que explicaré en breve. Lo que voy a hacer es que voy a pasar el CSS que quiero aplicar en esta transformación SVG a esta función, y si el valor pasa de ser, digamos, -10 grados en un fotograma a +10 grados en el siguiente fotograma, va a interpolar suavemente y esencialmente me dará un montón de valores intermedios. Y lo va a hacer utilizando la belleza y la magia de la física de Spring. Así que la forma en que funciona, voy a llamar a use Spring. Voy a pasar ese objeto, y haré lo mismo para la iTransform. Y cuando hago eso, no funciona en absoluto. Y la razón de eso es que he pasado de tomar un conjunto simple de CSS de una clave y un valor, esto solía ser una cadena, pero use Spring produce un objeto de interpolación complicado, y nuestro humilde nodo DOM SVG no sabe cómo manejar eso. Ahí es donde entra este ayudante animado. Tengo que cambiar este SVG por un SVG animado. Y por cierto, esto no cambia realmente el nodo DOM. De cualquier manera, todavía vamos a obtener un SVG renderizado en el DOM. Lo que hace es que lo envuelve en un componente que devuelve esa etiqueta subyacente. Pero también sabe cómo desempaquetar esos valores de Spring, y ahora, fíjate, no importa cuán rápido mueva el ratón, el movimiento es suave, y es tan, como, fluido y orgánico y encantador. Creo. Es divertido. Creo que lo realmente genial de esto es que piensa en cuánto código tuve que cambiar allí.

Tomé este objeto que ya tenía, lo envolví en useString, tomé este SVG que ya tenía, y agregué algunos caracteres al inicio de este. Y como vimos con mis hooks personalizados aquí, todas estas cosas, todas estas cosas complicadas ocurren bajo el capó. Esto se encarga del trabajo de limpieza, se encarga del trabajo de desmontaje, y lo obtengo gratis. Ni siquiera tengo que escribir este código complicado-ish para empezar, puedo simplemente usar esta biblioteca, y viene con todas esas cosas incluidas.

Entonces, hay un par de puntos aquí, ¿verdad? Uno es que el ecosistema React es realmente poderoso. Y eso es cierto, pero hay muchos ecosistemas que son realmente poderosos. Ya sabes, GSAP es una herramienta realmente increíble para vanilla JavaScript, pero lo que obtenemos al usar React para hacer esto es que tenemos este proceso centralizado en el que podemos engancharnos. Por eso se llaman hooks, ¿verdad? Podemos beneficiarnos del hecho de que React sabe cuando este componente se renderiza y se desmonta, para engancharnos en esos procesos.

Así que aquí es donde inicialmente planeaba terminar la charla, pero tuve una idea. Pensé, ¿no sería genial si pudiera crear como un modelo 3D de un huevo en Blender? ¿Cuánto trabajo sería actualizar este código para renderizar un huevo 3D en lugar del admitidamente un poco crudo SVG bidimensional que creé? Y la respuesta es que tal vez no es tanto problema como podrías pensar. Esperemos que el Wifi coopere. Sí, ahí vamos. Así que se ve bastante similar. Puedo hacer el mismo tipo de seguimiento del cursor, pero ahora es un modelo 3D así que puedo moverlo en el espacio 3D. Es muy divertido.

La forma en que esto funciona es usando una biblioteca llamada React3 Fiber. Y si no estás familiarizado, es esencialmente un renderizador de React para primitivas 3JS. Así como tenemos React DOM que renderiza divs y spans e inputs. Como tenemos React Native que renderiza lo que sean las primitivas en móvil. No lo sé, no soy un desarrollador móvil. Este es un renderizador para primitivas 3D. Y así si miramos, en realidad vamos a empezar aquí. Con lo que realmente estoy renderizando, tengo mis cosas de modelo 3D. Tengo una cámara. Tengo controles de órbita que es lo que me permite hacer esto. Tengo una luz de la que vamos a hablar más en un segundo. Y tengo un ambiente. Pero fíjate cuánto del código se mantuvo igual. Estoy usando el mismo hook personalizado para obtener la posición del ratón. El mismo hook personalizado para obtener un cuadro delimitador.

Incluso estoy usando la misma biblioteca. Estoy usando useSpring para animar lo mismo. Así que mi cursor frenético no se vuelve súper abrupto. Así que es increíble para mí que tanto de esto se mantenga igual, aunque estemos renderizando algo en un entorno completamente diferente.

Ahora, mencioné que quería hablar más sobre algunas cosas aquí abajo. Si hago un zoom muy adentro, ahí estamos. Imagino que esto se ve bastante genial en el planetario. Puedes ver que hay alguna textura que se refleja en los ojos. Eso viene de este entorno.

Si me deshago de él, y hago zoom hacia atrás, tenemos esta luz puntual, que es, como suena, es una luz que es un punto que emana en todas las direcciones, y la estoy haciendo animada, lo que significa que si desplazo hacia arriba por aquí, puedo animar donde está la luz, que creo que es lo más genial del mundo. Como, si quisiéramos, podríamos mover la luz debajo, y ahora es como la hora de la historia espeluznante, lo cual es genial. Sí, creo que eso es todo lo que quería decir sobre eso. Asegurarme de que no estoy olvidando nada siempre es el desafío. Así que creo que esto va un poco más allá para explicar lo que estoy diciendo.

Todo lo que estoy haciendo aquí está aprovechando este ecosistema, pero es posible gracias al hecho de que tengo este procesador centralizado de larga duración. Es un poco como si fueras a la sinfonía, todos estos músicos individuales que están tocando su instrumento, pero tienes este director, que es el que lo hace todo posible. Esto es un poco un guiño a la cabeza de React de Rachel o a la persona de React. Olvidé exactamente qué, pero sí. Así que sí creo que es una herramienta realmente útil por esa razón. Esa es mi charla. Si te gustaría ver alguno de los códigos que mencioné, puedes ir a joshwcomo.com/summit. También tengo un boletín de noticias al que puedes unirte, y enviaré algo un poco interesante a ese grupo de boletines en unos días relacionado con los cursos que tengo. Muchas gracias. Gracias. Muchas gracias, Josh. En primer lugar, gracias. Fue muy divertido ver. Fue un placer. Sí, y como te mencioné antes, solo voy a hablar sobre el tiempo mientras espero que esto se cargue. Solía trabajar en publicidad e hice muchas de estas animaciones en 2013.

Si a muchas personas les dieran esta tarea, dirían, nope. No puedo hacerlo, ¿verdad? Y es muy divertido. Les aconsejaría a todos ustedes que simplemente intenten averiguar, como, es posible. Y especialmente hoy, hay muchas cosas que puedes usar que son de código abierto.

Y sí, hay muchas cosas de animación que puedes hacer. Si estás construyendo un panel de control para Stripe, tal vez no tenga mucho sentido. Pero si tienes tiempo, tal vez tengas una semana de hackathon. Es muy divertido hacerlo, ¿verdad? Quiero decir, eso es como mencioné, la filosofía con mi blog es que es solo un lugar donde si tengo alguna idea ridícula que nunca podría obtener la aprobación de mi gerente para hacerlo en el trabajo. Bueno, tengo mi blog. Ahí es donde puedo satisfacer ese tipo de impulso. Puedo atarte desde mi ordenador. No, ya lo tengo, sí.

Entonces, ¿cuáles son algunas... No, esta es todavía una vieja pregunta. Vieja pregunta. Todavía hay muchas preguntas viejas. Lo siento, bien preparado. Bien preparado. Esta fue la responsabilidad de Josh Goldberg, el otro MC. En nombre de todos los Joshes, me resiento por eso. Sí, lo siento. Sí, pensé que debería aclarar de qué Josh estábamos hablando. ¿Alguna opinión sobre Framer Motion versus React Spring u otros paquetes de animación? Sí, esta es una gran pregunta. Entonces, para dar un resumen muy breve de ambas herramientas, porque hacen cosas similares, que es animar usando la física del resorte, pero trabajan de diferentes maneras. React Spring es esencialmente como un generador de números elegante. Le das dos valores, y te dará todos los valores intermedios, algo así como mostré allí, lo que significa que es genial en situaciones en las que necesitas un montón de control o quieres usar un valor bruto de una manera muy específica. También parece manejar interrupciones incluso un poco mejor que Framer Motion, aunque eso es casi seguro porque estoy usando Framer Motion incorrectamente. Framer Motion, por otro lado, es magia pura. Es una herramienta de nivel mucho más alto, y en parte lo que te permite hacer es animar cualquier tipo de valor CSS. Como por ejemplo, si tienes flex box, y tienes un elemento que comienza justificado al inicio, y estableces justificar contenido flex end, y se mueve al otro lado, si le lanzas una transición CSS a eso, no funcionará.

Esa no es una propiedad animable. Pero con Framer Motion, sí funciona. La forma en que funciona es que determina las dos posiciones diferentes, y de alguna manera lo mueve a la posición final de inmediato pero luego lo teletransporta de vuelta a la posición original y anima suavemente. Suena confuso cuando lo describo, pero esencialmente te permite animar prácticamente cualquier cosa, como basado en cualquier propiedad CSS. Y no es que la biblioteca tomó una acción específica para soportar flex box, porque si lo hizo, entonces podría preocuparte que no soporte como CSS grid o cualquier otra cosa. Funciona en un principio muy diferente, que es simplemente cada vez que esta cosa se mueve en la página por cualquier motivo, determina las dos posiciones y anima entre ellas.

Así que es magia pura, es increíblemente útil, pero es una herramienta de muy alto nivel. Es un poco desafortunado, porque tanto Framer Motion como React Spring son bastante grandes, como ambos están en el rango de 20 a 40 kilobytes, por lo que se siente un poco tonto tener ambos. Pero en un mundo con React Server Components y con la renderización del lado del servidor en streaming, eso es menos preocupante para mí, porque puedes tener toda la interfaz de usuario allí de inmediato. E incluso si la animación tarda un poco más en cargar, eso está bien, por lo general. Así que ambos son realmente poderosos. Diría, en general, Framer Motion es, como, si tuviera que elegir uno, sería Framer Motion, simplemente porque es mucho más poderoso. Como, puede hacer cosas que React Spring no puede hacer, y lo contrario no es necesariamente cierto. Pero React Spring sigue siendo realmente agradable en casos en los que simplemente tienes, como mostré aquí. Solo quiero tener estos dos valores, el CSSTransformRotate, y quiero que se anime suavemente desde este valor. Funciona muy bien para eso.

Sí, y no me mates cuando digo esto, pero también depende mucho, mencionaste que puede llegar a ser demasiado grande para usar en ambos, pero depende de lo que estés construyendo. Si estás trabajando en publicidad, los sitios web que construí todos tienen precargadores. Como, la gente estaba esperando 30 segundos, 40 segundos para ver mis animaciones. De hecho, lo primero que construí en esta agencia de publicidad tenía un precargador para el precargador porque la animación del precargador era muy grande. Pero fue increíble. Fue súper divertido construir. Totalmente. Y iba a decir esto durante el panel, ya sabes, porque había esa pregunta en el panel alrededor, si estás construyendo un panel de control interno para la empresa, ¿vale la pena usar React server components? Y creo que sí. Pero creo que esa pregunta se formula desde la perspectiva de, ¿importa el rendimiento de la misma manera que lo hace para un sitio de e-commerce donde tienes un segundo para tener todo listo? De lo contrario, la persona va a hacer clic en el botón de retroceso y va al siguiente resultado de búsqueda. Estás buscando comprar un nuevo futón. No necesariamente necesitas este resultado en particular. Ese es como el mayor ejemplo de donde el rendimiento realmente importa en términos del tiempo hasta la primera pintura, para interactuar con todas las diferentes mediciones que tienes. Y entonces sí, exactamente. Si estás construyendo algo, una herramienta interna, en realidad no es tan importante que se cargue súper rápido porque no es como si estuvieras visitando tu panel de control de Stripe.

No se está cargando lo suficientemente rápido. Voy a registrarme con otro comerciante. Realmente no tiene el mismo impulso. Pero hay muchas otras razones por las que los React server components son geniales. Así que no quiero usar eso como una razón para no usar RSC.

Así que la siguiente pregunta, no estoy seguro si es una pregunta o más bien una afirmación, pero... Oh, esas son las mejores preguntas. Sí. La afirmación es que el gigantesco huevo 3D se llevará tu alma. Así que solo para que lo sepas, la gente tiene miedo. Esta es la mejor pregunta de todas.

¿Extrañas ActionScript? Así que hice algunas animaciones Flash. Nunca hice ningún scripting en Flash. Así que nunca usé ActionScript. Creo que me perdí de algo. Te lo perdiste. Go to and learn era un buen recurso. Oh hombre, extraño esos días. Muy bien.

¿Cómo encuentras estas bibliotecas? Quiero decir, creo, y esto se relaciona con lo que estaba diciendo en la masterclass, es tan, tan poderoso que porque están conectados a React, puedes hacer tanto con tan poco código. Creo que estamos un poco mimados cuando se trata de, como, nuestro ecosystem. Como mencioné, hay muchas buenas herramientas. Svelte tiene un montón de otras cosas incorporadas, lo cual es realmente genial. GSAP es una gran biblioteca también. Pero realmente, no tengo quejas. Creo que, ya sea que elijas React Spring o Frame o Motion, ambas son herramientas súper poderosas. Y puedes hacer mucho con esas herramientas. Supongo que realmente tienes que adentrarte en esta madriguera de conejo para llegar al punto donde las herramientas que tenemos no son capaces de hacer lo que quieres hacer.

¿Alguna vez has usado GSAP dentro de una aplicación React? Yo no lo he hecho. Ha estado en mi lista de cosas por hacer durante mucho tiempo.

Pero como digo, las herramientas que tengo ya son totalmente competentes. Por lo tanto, no he sentido la urgencia de ver qué más hay. Sí, supongo que puedes usar una referencia, y luego pasarla a GSAP y debería funcionar. No conozco lo suficiente GSAP para saberlo. ¿Pero cómo funciona la limpieza? Puede que tengas que lanzar un useEffect allí para asegurarte de que detienes la animación si el componente se desmonta a mitad de la animación. Quizás. No lo sé. Lo que es tan agradable del React ecosistema es que todo está conectado.

Hago clic en el botón de bloqueo. Muy bien, preguntamos esto. Tenemos tiempo para una pregunta más. Y esa es una pregunta antigua. Todas las preguntas. Correcto, son todas preguntas antiguas. No tengo tiempo para filtrarlas. Pero si hay alguien aquí que dice, normalmente estoy construyendo paneles de control, pero quiero construir alguna animación caprichosa allí. ¿Por dónde pueden empezar? Sí, y es gracioso porque usé el panel de control de Stripe como ejemplo. Como, no hay mucho capricho allí, pero podría haberlo. Como, no querrías las mismas cosas. Una oportunidad está en, como, la creación de gráficos y diagramas. Como, si tienes algún tipo de gráfico, no es realmente funcional en este punto, ¿verdad? Tener una transición entre la actualización de un gráfico es útil porque te da el contexto. Esto es algo de lo que Rachel Neighbors ha hablado mucho. La animación tiene muchos propósitos diferentes. Uno de esos propósitos puede ser el capricho, como cosas divertidas superfluas. Pero hay un montón de valor de comunicación, ¿verdad? Ciertas animaciones te ayudan a entender cosas porque en realidad las cosas no se teletransportan de la manera que a menudo lo hacen en la web. Tienes esta suave interpolación que te da el contexto para seguir algo. Muchas veces, como, una animación puede hacer el mismo trabajo que un párrafo de texto para explicar algo. Y lo hace mucho mejor porque el texto es, tienes que desempaquetarlo en tu mente. La animación, puedes verla. Entonces, sí, creo que si estás construyendo un panel de control, las bibliotecas de gráficos son una excelente manera de comenzar a encontrar lugares donde la transición de una cosa a otra puede ser suavizada por el movimiento. Es un buen lugar para empezar. Sí. Muy bien. Suena como un plan. Entonces, todos, comencemos con algunas animaciones caprichosas después de haber dado a Josh un cálido aplauso. Gracias. Gracias.