El Potencial Caprichoso de los Marcos de Trabajo de JavaScript

Rate this content
Bookmark

Cuando se trata de construir interfaces caprichosas, React es un aliado sorprendentemente capaz. En esta charla, te mostraré cómo uso React para orquestar interacciones complejas al profundizar en algunos ejemplos de mi blog.

28 min
13 Nov, 2023

Comments

Sign in or register to post your comment.

AI Generated Video Summary

El orador discute el trabajo caprichoso y detallado de Stripe, particularmente sus páginas interactivas y dinámicas. Explican el uso de React para construir detalles caprichosos y rastrear la posición del mouse. El orador introduce React Spring para una animación suave y React3 Fiber para crear un modelo de huevo 3D. También mencionan el uso de Framer Motion y los componentes del servidor React para animar las propiedades de CSS.

1. Introducción al Potencial Caprichoso de Stripe

Short description:

El orador discute el trabajo caprichoso y detallado de Stripe, particularmente sus páginas interactivas y dinámicas. El orador compara la página de inicio de sesión del producto de Stripe con el resto de las páginas, destacando la ausencia de adornos caprichosos. Se revela que el tablero utiliza React, mientras que las páginas de aterrizaje no. El orador explica el razonamiento detrás del uso de React para una aplicación de pila completa y basada en datos.

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.

2. Construyendo Detalles Caprichosos con React

Short description:

El orador comparte su uso de React para construir detalles caprichosos, como un corazón rastreado por el cursor y un botón de Me gusta juguetón. Explican la inspiración detrás de estos detalles y discuten el concepto de su blog como un patio de recreo personal. El orador también introduce la idea de construir una forma de huevo y se centra en el seguimiento del cursor para la rotación de la cabeza y la traducción del ojo.

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.

3. Determinando el Ángulo de Rotación con Bounding Box

Short description:

Para determinar el ángulo de rotación de un elemento, necesitas conocer su posición en el viewport y la posición del ratón. Al utilizar el método getBoundingClientRect, puedes obtener el cuadro delimitador del elemento, incluyendo su ancho, altura y posición relativa al viewport. Con esta información, puedes pasarla a una función de cálculo de rotación para obtener el ángulo de rotación en grados.

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.

4. Optimizando el Rendimiento e Introduciendo React

Short description:

Voy a compartir una diapositiva con un enlace al código. El código se ejecuta decenas de veces por segundo, lo cual es lento para obtener un cuadro delimitador. Para mejorar el rendimiento, el código se mueve para que solo se ejecute cuando se mueve el ratón. Sin embargo, todavía es necesario volver a calcular el cuadro delimitador cuando el usuario se desplaza. Se utilizan oyentes de eventos y un observador de redimensionamiento, pero todavía queda trabajo por hacer, como limpiar los oyentes de eventos y rebotar los cálculos. React puede ayudar a resolver estos problemas.

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.

5. Rastreo de la Posición del Ratón con un Hook Personalizado

Short description:

El orador presenta un hook personalizado que rastrea la posición del ratón del usuario y la almacena como una variable de estado. Expresan su entusiasmo por la simplicidad y funcionalidad del hook, que proporciona actualizaciones en tiempo real de la posición del ratón e incluye limpieza automática y desmontaje. La implementación del hook muestra el poder y la conveniencia de usar hooks en React.

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.

6. Reutilización y Animación en React

Short description:

La reutilización en React no es tan sencilla como usar funciones de JavaScript. Aunque las funciones son una herramienta para reutilizar la lógica, no pueden manejar el trabajo de configuración y desmontaje. Sin embargo, React proporciona una solución concisa para esto. El orador también discute el proceso de obtener el cuadro delimitador y la importancia de la limpieza y el debouncing. Destacan la necesidad de eliminar los oyentes de eventos y desconectar el observador de redimensionamiento para evitar fugas de memoria. Luego, el orador explora la posibilidad de usar transiciones CSS para mejorar la suavidad de las animaciones y explica el proceso de uso de SVGs en React.

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.

7. Movimiento Suave con React Spring

Short description:

Las transiciones CSS no manejan las interrupciones de manera elegante, lo que provoca un movimiento congelado. Para resolver esto, el orador introduce React Spring, una biblioteca que interpola suavemente los valores CSS utilizando la física de Spring. Al utilizar el ayudante animado, la transformación SVG puede envolverse en un componente SVG animado, proporcionando un movimiento suave y orgánico. Esta solución requiere cambios mínimos en el código.

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í.

8. Creando un Modelo 3D de Huevo con React3 Fiber

Short description:

Tomé un objeto existente, lo envolví en useString y agregué algunos caracteres a un SVG. Con los hooks personalizados, el trabajo complicado se maneja automáticamente, incluyendo la limpieza y el desmontaje. El proceso centralizado de React nos permite engancharnos en la renderización y desmontaje. Tuve la idea de crear un modelo 3D de un huevo usando Blender. Actualizar el código para renderizar un huevo 3D no es tan difícil como parece. La biblioteca React3 Fiber sirve como un renderizador de React para primitivas 3D, permitiendo el seguimiento del cursor y el movimiento en el espacio 3D.

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.

9. Animando en un Entorno Diferente

Short description:

Estoy usando useSpring para animar lo mismo. Gran parte de esto se mantiene igual, aunque estemos renderizando algo en un entorno completamente diferente. La luz puntual está animada, permitiendo el movimiento y creando diferentes efectos. Todo lo que estoy haciendo aquí aprovecha el ecosistema y el procesador centralizado de larga duración. Es como un director en una sinfonía, lo hace todo posible. React es una herramienta útil para esto. Si quieres ver el código o unirte a mi boletín de noticias, visita joshwcomo.com/summit.

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.

10. Diversión con Paquetes de Animación y Código Abierto

Short description:

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. ¿Alguna opinión sobre Framer Motion versus React Spring u otros paquetes de animación? 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. 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.

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á.

11. Animando con Framer Motion y React Spring

Short description:

Framer Motion permite animar cualquier propiedad CSS al determinar dos posiciones y animar suavemente entre ellas. Es una herramienta de alto nivel que es más poderosa que React Spring. Sin embargo, React Spring sigue siendo útil para animar suavemente valores CSS específicos. La elección entre los dos depende de los requisitos del proyecto. Si el rendimiento no es una preocupación importante, se pueden utilizar los componentes del servidor React para herramientas internas.

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.

QnA

Componentes de Servidor React y Bibliotecas

Short description:

No se está cargando lo suficientemente rápido. Voy a registrarme con otro comerciante. Hay muchas otras razones por las que los componentes de servidor React son geniales. El gigantesco huevo 3D se llevará tu alma. ¿Extrañas ActionScript? ¿Cómo encuentras estas bibliotecas? Ya sea que elijas React Spring o Frame o Motion, ambas son herramientas súper poderosas. ¿Alguna vez has usado GSAP dentro de una aplicación React? Yo no lo he hecho.

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.

Creando Animaciones Caprichosas en Paneles de Control

Short description:

El ponente discute el uso de herramientas y el ecosistema de React para crear animaciones caprichosas. Mencionan la posibilidad de usar GSAP y la necesidad de limpieza usando useEffect. El ponente sugiere comenzar con bibliotecas de gráficos para crear animaciones caprichosas en paneles de control, destacando el valor de comunicación de las animaciones y su capacidad para transmitir información de manera más efectiva que el texto.

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.

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

JS GameDev Summit 2023JS GameDev Summit 2023
27 min
JavaScript Haikus: My Adventures in Tiny Coding
Discover the art of crafting extremely small JavaScript programs. In this talk you’ll learn principles and techniques behind crafting compact yet powerful scripts that are shorter than this description! Dive into the captivating world of minimalist coding, where we use these scripts to conjure art, games, tools, and a myriad of intriguing experiments.
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
Vue.js London 2023Vue.js London 2023
20 min
Proven Pinia Patterns
With Vue's new-and-improved state management library, Pinia, we gain a much more modular tool. While being more flexible, leaner, and lacking the Mutations of Vuex, Pinia presents us with more opportunities to be creative, for better or worse, with our app architecture and how state management is conducted and organized within it.This talk explores some @posva-approved best practices and architectural design patterns to consider when using Pinia in production.
Vue.js London 2023Vue.js London 2023
18 min
Component Design Patterns
How do you write a good component? In this talk we’ll explore several different patterns for writing better components. We’ll look at techniques for simplifying our components, making them easier to understand, and getting more out of the components we’ve already got.
JSNation Live 2021JSNation Live 2021
33 min
Keep Scrolling
Wait! Not so fast - Stop scrolling and hang out with me for a while! When done right, scroll based animations can add polish to a site, and make online storytelling feel more immersive. GreenSock's ScrollTrigger enables you to achieve buttery smooth scroll based animations with minimal code. Let's dig in to some of it's features together.

Workshops on related topic

JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
WorkshopFree
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.