Lecciones aprendidas de la construcción de aplicaciones interactivas en React

Hola, soy Sid y hago muchas cosas aquí y allá, así que lo he puesto todo en la pantalla para ti. Pero lo que quiero hablar contigo es el trabajo que he realizado en Code Sandbox durante el último año y medio. La mayor parte de ese trabajo se centró en el frente del front-end y me enfoqué en las animations, el design, los gestos, el arrastrar y soltar, ese tipo de cosas. Y quiero hacerles esta pregunta. ¿Qué hace que una interfaz sea fácil de use? Esto es lo que he estado explorando durante el último año. Y hay respuestas comunes, como que debe estar bien diseñada, debe ser minimalista, sin desorden en la pantalla. Debe ser rápida para que cuando uses la interfaz, se sienta ágil, se cargue rápidamente, haya retroalimentación. Pero algo que a menudo se pasa por alto es el uso del movimiento o las animations para ayudarte. Y las animations se clasifican en esta categoría donde se utilizan para sitios web caprichosos o, ya sabes, si estás haciendo un sitio web de películas o juegos, entonces podrías usarlas. Pero estoy aquí para decirte que las animations se pueden utilizar para dar contexto al usuario cuando se usan con buen gusto, y definitivamente las quieres en tus sitios web profesionales también. Así que suficiente charla. Voy a mostrarte a qué me refiero. Así que construí esta especie de sitio web de redes sociales. Se llama Saturday, y la lógica es que solo está abierto los sábados. Y esta es mi, esta es mi feed. Tengo algunas publicaciones de mis amigos, y permíteme mostrarte cómo se ve eso. Así que cuando hago clic en una publicación, simplemente se abre. Simplemente aparece. Y luego aparece esta respuesta. Y si hago clic en la segunda, va a la página de feed. Va a la página de la publicación y puedes ver cómo cambia la URL y simplemente aparece. Así que eso se ve un poco extraño. Permíteme ir a pantalla completa en esto. Y luego las respuestas también simplemente aparecen. Entonces, eso realmente no da la sensación de que esta es una interfaz con la que estás interactuando. No se siente suave. Así que lo primero que haremos es desvanecerlos. Y eso, creo que es bastante común.

cosa en la web. Lo ves bastante a menudo. Y puedes, por supuesto, hacer cualquiera de los ejemplos que te muestro con CSS animaciones. Pero voy a usar frame y motion para mis ejemplos solo porque es lo que he estado usando durante un tiempo. Y si ya estás en el mundo de React, definitivamente deberías echar un vistazo a frame of motion si no lo has hecho.

Entonces, la forma en que funciona frame of motion es que puedes tomar cualquier elemento y puedo decir motion.div. Y si usas styled components o algo similar, la API es similar a eso. Donde básicamente puedes obtener cualquier elemento de motion y usarlo. Solo voy a usar motion.div porque eso es lo que era. Y como estoy usando una biblioteca de componentes aquí, voy a pasarlo como prop 'as' y eso es solo para mostrar que frame of motion se puede combinar bien con tus bibliotecas de componentes. Entonces me da acceso a estas dos props. La primera es 'initial' y la segunda es 'animate'. Y puedo decir cuál es el estado inicial y a qué debe animarse. Por supuesto, hay muchas otras props, pero esto es suficiente para comenzar. Ahora, cuando abro una publicación, se desvanece en lugar de simplemente aparecer, lo que te da esta sutil sensación de que algo ha cambiado. Hay algún contexto aquí. Incluso la primera publicación, aunque esté en su lugar, solo ese pequeño destello que se desvanece te da la sensación de que has navegado a un lugar diferente. Así que hagamos eso también con nuestros comentarios. Porque ahora mismo los comentarios o respuestas simplemente aparecen, como si nada. Así que voy a cambiar de rama porque ya he escrito el código para ello. Permíteme guardar esto y cambiar a esta rama, solo desvanecer. Así que esta es mi rama donde todo se desvanece. Y puedes ver cuando paso de una publicación a otra, las respuestas se desvanecen sutilmente. Y esto está bien. Aún no es genial. Otro lugar donde puedes ver esto es si tienes nuevas publicaciones, entonces se desvanecen y te da una sensación de que algo ha cambiado aunque hayas perdido tu posición allí. Así que hagamos algo al respecto primero. Voy a recargar. Y este es un patrón común que también se ve en Twitter y estoy seguro de que tienen sus razones para ello. Cuando cargas más publicaciones o cuando eligen cargar más publicaciones para ti, las publicaciones aparecen al frente o

se desvanecen, pero pierdes un poco tu posición de dónde estabas. Y es especialmente molesto cuando fuiste tú quien lo inició. Así que básicamente perdiste tu posición en el feed. Así que voy a ir a mi feed y sugerir este cambio. Ya tengo frame of motion aquí. Todos estos elementos, cada uno de estos elementos de la lista ya es un motion.li y voy a eliminar este feed de opacidad cero a uno y en su lugar usar la propiedad de diseño y eso es todo. Solo digo dame una animación de diseño y lo que hace con frame of motion es que le dice a frame of motion que todos los elementos que son hermanos o tienen la propiedad de diseño, anímalos juntos. Es difícil de decir. Así que déjame mostrarte lo que eso significa. Ahora, cuando hay nuevas publicaciones, fíjate qué sucede con estas tarjetas. Ves que se desplazaron. Permíteme mostrarte de nuevo, porque es fácil pasarlo por alto. Así que cuando hay nuevas publicaciones, todos los elementos se desplazan hacia abajo para hacer espacio para este nuevo elemento. Y eso es más o menos lo que las animaciones de diseño te dan. Así que cuando cargo más publicaciones, la publicación original se desplaza hacia abajo. Permíteme mostrarte eso de nuevo, porque esta animación es realmente gratificante. Cuando hay nuevas publicaciones, la publicación original se desplaza hacia abajo, se mueve hacia abajo. Y creo que eso es una forma brillante de hacerlo porque te da el contexto de que estas publicaciones han venido desde arriba y simplemente han desplazado tus publicaciones originales. Así que si quieres, puedes desplazarte hacia abajo y aún encontrar tus publicaciones. Y es especialmente agradable si la primera publicación que estaba antes todavía es visible. Pero incluso cuando no lo es, solo la animación de desplazamiento te da el contexto de que puedes desplazarte hacia abajo y encontrar tu lugar nuevamente. Así que eso es, eso es realmente una buena mejora según mi opinión. Ahora hablemos de estos comentarios por un momento. Así que estos se desvanecen, lo cual es agradable. Y luego puedo agregar un nuevo comentario, nuevo comentario, y simplemente se desvanece después de un tiempo. ¿Ves este retraso extraño allí? No estoy seguro por qué. Y quiero decir, sí sé por qué. Estoy tratando de simular que hay una solicitud a la API en curso. Entonces agregas un comentario, lo envías a una API y cuando tiene éxito, luego agregas el comentario. Y este es un patrón bastante común en la web de esperar la validación del servidor y luego insertarlo. Lo malo es que realmente no conduce a una buena interacción para el usuario casi nunca porque al usuario realmente no le importa cuál es la validación de tu servidor.

o cuál es tu lógica allí. Lo que quieren es dejar un comentario en esta publicación. Así que cuando dejo un comentario, dejo un comentario, quiero que aparezca instantáneamente porque quiero estar en el camino feliz. Ya he terminado aquí. Y te das cuenta de que esto es lo que hacen las aplicaciones móviles. Siempre insertan tu comentario o tu interacción primero y luego lo sincronizan con el fondo. No hay espera para la validación, generalmente es una sincronización en segundo plano más tarde. Y creo que eso es lo que deberíamos hacer aquí y hay un nombre para ello, que son las actualizaciones optimistas, lo que significa que sea cual sea la actualización que debamos hacer, vamos a asumir que va a pasar, eso es el optimismo y si no pasa, entonces hacemos la tarea más complicada de cómo mostrar el error de validación. Así que el caso de error es más difícil de manejar, pero el camino feliz siempre es bueno. En realidad no tengo un backend para esto. Lo estoy simulando utilizando la propiedad de retraso de Framer Motion, que es útil si estás haciendo animaciones en dos animaciones donde una debe venir después de la otra. Así que en este caso, simplemente voy a eliminar el retraso y esto es cómo debería verse. Así que cuando agregas un comentario, eso no es el retraso correcto. Este. Así que cuando ahora cuando agrego un comentario de nuevo, debería verse

Simplemente aparecen sin más. Así está bien. Me gusta la aparición. Pero allí, ¿recuerdas cómo vimos este movimiento? Estamos utilizando el cambio de posición para dar contexto al usuario. Probablemente deberíamos hacer lo mismo aquí. Así que déjame revisar eso. Voy a guardar esto de nuevo. Cambiar a pre-final. Así que, bien, ahí vamos. Eso es mucho movimiento. Voy a recargar. Entonces, lo que estoy tratando de hacer aquí es, ¿ves estas respuestas? Estas respuestas salen de esta publicación. Y eso te da la sensación de que son parte de la publicación. Y luego se extienden desde ella con un retraso. Entonces, el código para esto se ve así, tengo una posición inicial de menos 40 en el eje Y. Y esta posición de menos 40 se convierte en una animación de transformación con un desplazamiento en Y, lo cual es bueno para animar porque es más eficiente. Y cuando pasas de menos 40, que es su posición final, Framer Motion calcula su posición final, luego va de menos 40 y lo anima hasta ese punto. Así que estoy haciendo menos 40 hasta una posición de 0. Y también tengo una animación de altura automática, lo cual es genial. Y cuando abres esta publicación, los comentarios salen de la publicación. Viene de la dirección de la publicación, lo que te da la sensación de que estos dos son contenido relacionado. Entonces, la publicación viene primero. Y luego los comentarios salen de ella. Ahora, mira lo que sucede cuando agrego un nuevo comentario. Entonces, si no hago nada, también vendrá desde arriba, como las otras respuestas. Pero eso no tiene mucho sentido porque, quiero decir, ¿por qué vendría de las otras respuestas? Entonces, en cambio, lo que he hecho es, déjame mostrarte cómo se vería si no hago nada. Entonces, cuando agrego un nuevo comentario, proviene del comentario anterior, lo cual no tiene sentido. Entonces, en cambio, le agrego un más 20 y trato de hacer que parezca que viene de la respuesta, del cuadro de entrada. Así que aquí vamos. Nuevo comentario, y ves que esto se desplaza hacia abajo y el nuevo comentario ocupa su lugar. Te lo voy a mostrar. Lo siento,

Permíteme recargar y mostrártelo de nuevo. Nueva respuesta. La nueva respuesta proviene del cuadro de entrada y se agrega a la lista. Así que aquí estamos utilizando varias animaciones. La primera es para la publicación. La segunda es para las respuestas que salen de la publicación y la tercera es para una nueva respuesta que va desde el formulario hasta la lista de respuestas. Y este es un buen ejemplo de cómo se puede realmente utilizar el movimiento de varias formas para siempre, siempre pensar en dónde viene esto para dar contexto al usuario. Y honestamente, esto es, este tipo de cosas es lo que hace que las aplicaciones nativas se sientan más nativas, las hace más suaves y agradables de usar cuando las usas con el pulgar, y podemos hacer todo eso también en la web.

Bien, ahora me salté algo de lo que debería hablar. Hay este patrón. En realidad, ¿sabes qué? Permíteme primero mostrarte Twitter. Así que lo siento, voy a abrir una nueva pestaña y hay esta cosa que es bastante común en la web, que es cuando abres una nueva publicación. Así que voy a abrir esta. Ves este botón de retroceso, ¿verdad? Y cuando presionas este botón de retroceso, vuelves atrás en el historial. Y todos sabemos lo que eso significa. También saludo a Michael. Pero esta flecha apunta hacia la izquierda. Ahora, no hay nada en el lado izquierdo, ¿verdad? Aquí tengo este vocabulario compartido de tres puntos. Significa que hay un menú aquí. Hay más. Entonces hay un menú y un corazón significa que vas a darle me gusta a esta publicación y una flecha izquierda significa retroceso. Ahora, aunque en realidad no se va a la izquierda en absoluto. Así que en la web, tenemos una especie de mezcla interesante de símbolos, que realmente no dicen lo que significan. Y compara eso con, esta es la aplicación en, esta es la aplicación de Twitter en dispositivos móviles. Grabé el video. Y así, cuando cargas una publicación, voy a cargar la primera publicación. Viene desde la derecha, y luego cuando presionas la flecha izquierda, en realidad va hacia la izquierda, ¿verdad? Así que ellos tienen esta noción de que hay dos pantallas. Cuando haces clic en una de las publicaciones, la otra pantalla viene desde la derecha, y luego cuando presionas el botón de retroceso, vuelve allí. Así que en realidad están utilizando el movimiento y la dirección para crear un nuevo contexto, literalmente. Y luego, cuando haces clic en la izquierda, revela lo que está en el lado izquierdo.

Así que ese es un buen ejemplo de cómo utilizar el movimiento. Otro que me gusta mucho es Instagram. Entonces, cuando haces clic en el botón de la cámara en Instagram, eso fue demasiado rápido. Así que cuando haces clic en el botón de la cámara en Instagram, no aparece de inmediato. En realidad, se desliza desde la izquierda y están tratando de hacer lo mismo, tratando de decir que hay una cámara en la pantalla izquierda. Entonces, en realidad, puedes arrastrarla y volver a arrastrarla allí para cerrarla. Y creo que eso es un gran uso del movimiento para darle al usuario una pista de que hay cosas en el lado izquierdo para que puedas arrastrarla. De lo contrario, en una pequeña pantalla móvil, ¿cómo le dices a la gente que puede arrastrar? Por supuesto, no todo es color de rosa. Mira este botón. Así que esto sigue siendo Instagram. Esto es la parte del perfil. Aquí hay una flecha, ¿verdad? Apunta hacia abajo. Y solo con este vocabulario compartido, sabemos que una flecha hacia abajo significa un menú desplegable o más opciones. Y cuando haces clic en esto, esperaba que apareciera un menú desplegable aquí o algo que viniera desde arriba porque la flecha está hacia abajo. Pero lo que sucede es que obtienes un interruptor en la parte inferior de la pantalla. Entonces no hay relación con por qué está en la parte inferior. Pero debido a que las pautas de iOS dicen que debe estar en la parte inferior para que esté más cerca de tu pulgar, lo cual tiene mucho sentido. Pero luego la flecha pierde su significado. Entonces, para Saturday, lo que decidí hacer fue crear una vista de detalles que es una vista de publicación e intentar hacer zoom en una publicación y hacer zoom fuera de una publicación. Y déjame mostrarte cómo funciona esto. Entonces tengo un componente de publicación seleccionada y la idea principal aquí es que en cualquier publicación, puedes hacer clic en ella y ahora estás en esa publicación. No puedes desplazarte fuera de ella, es una cosa de pantalla completa. Y cuando la cierras, vuelve a su posición original. Incluso esta, que está fuera de la pantalla, hago clic en ella, baja, se convierte en una página completa y luego cuando la cierro, va y se queda debajo del encabezado en su posición original. Y déjame mostrarte cómo funciona eso. Entonces hay varias formas de hacer animaciones de diseño compartido. La forma que me gusta es un poco antigua, que es tener un componente de publicación seleccionada, que es diferente al componente de publicación. Entonces, cuando haces clic en una publicación, se renderiza un componente de publicación seleccionada absolutamente encima de la publicación original. Entonces hay, esta es la publicación y esta es la publicación seleccionada. Y esta es la que, la publicación seleccionada es la que se anima y se resalta. Y cuando la cierras, vuelve a la posición original.

y luego deja de renderizar. Así que parece que es el mismo componente. Y la forma en que me gusta hacer esto es calcular la posición Y inicial de la publicación. Por ejemplo, esta publicación, obtener el elemento, obtener la posición Y. Esta es la posición Y inicial. La posición Y final, por supuesto, es Y cero, porque es la parte superior de la pantalla. Y luego, cuando la cierras, la salida debería volver a su posición Y inicial. Así que hago esto de manera muy imperativa. Obtengo el cuadro delimitador y obtengo la posición Y inicial, y luego con el marco de movimiento, digo que la posición inicial es la posición Y inicial, animada hasta Y cero. Tengo una duración, tengo un retraso. Tengo una salida, que vuelve a la posición inicial.

Y. Y aquí tienes un pequeño consejo sobre las animaciones. Quieres que tu animación de entrada. En este caso, dura 300 milisegundos. Quieres que tu animación de salida sea más corta que la de entrada, porque cuando entras, quieres dar contexto, pero cuando la cierras, quieres que desaparezca rápidamente de la pantalla. Aún quieres devolverla a su posición, pero no quieres mostrar al usuario una animación larga. La cancelaron, quieren seguir adelante. Así que quieres sacarla rápidamente de allí. Ese es un pequeño consejo. La animación de salida siempre debe ser un poco más corta.

que tu animación de entrada. Ahora, sí. Entonces, la parte que realmente me gusta de este enfoque es que incluso cuando está fuera de la pantalla, puedes hacer clic en él y vuelve a su posición y recuerda la posición inicial en Y. Entonces se vuelve a colocar allí. Muy bien. Dos pensamientos aquí. Si puedes abrirlo así, si haces clic en él y vuelve a la parte superior de la pantalla, ¿no deberías poder empujarlo hacia atrás? Y aquí es donde se vuelve realmente interesante en dispositivos móviles porque usas tus dedos. Entonces, si vas a saturday.wursel.app, que es donde se encuentra alojada esta aplicación en este momento. Entonces, si la abres en tu teléfono móvil, puedes arrastrarla junto conmigo. Y esto es lo que quiero mostrarte. Entonces, Favorite Motion ya tiene soporte para arrastrar y soltar o al menos arrastrar. Entonces puedo decir arrastrar y, que establece la dirección del arrastre. Ahora puedo arrastrarlo y simplemente enviarlo a donde quiera. Pero también puedo cambiar el impulso y las restricciones. Entonces, lo que esto hace es que puedo intentar arrastrar un componente pero siempre volverá a su posición original. Entonces, cuando lo arrastro, volverá atrás. Y dependiendo de cuánto arrastre, la velocidad se ajustará según la distancia. Y esto se debe a que Favorite Motion utiliza animaciones de resorte. Entonces, si lo arrastro muy lejos, la velocidad será más rápida que si lo arrastro un poco porque quiero que tome el mismo tiempo. Y finalmente, cuando deja de arrastrar, si ha arrastrado más de 100 píxeles, si el desplazamiento es superior a 100 píxeles en cualquier dirección, quiero que vuelva a su posición original. Y estoy manejando el desplazamiento, en realidad estoy almacenando el desplazamiento y el estado para poder cambiar también la opacidad de su fondo. Así que mira, mira, mira cómo se ve eso. Entonces, cuando comienzo a arrastrar, verás que puedes ver el fondo lentamente según el movimiento. Y esto es para darle al usuario una pista de que cuando comienzas a arrastrar, esto es lo que se espera que suceda, que volverás al feed y tu tarjeta volverá a su posición. Pero también estamos utilizando, uh, estamos usando el desplazamiento del arrastre para calcular la opacidad. Entonces, la retroalimentación que recibe el usuario se basa en ese movimiento. Y eso crea una interacción suave realmente. Realmente se siente como si estuvieras interactuando con la interfaz de usuario. Así que voy a arrastrarlo más de cien píxeles, lo que significa

volverá a su posición. Permíteme hacerlo de nuevo. Ahí lo tienes. Y sí, esto es lo que tenía en ejemplos de movimiento para mostrarte. Un par de cosas para recordar aquí. Aunque estamos tratando de inventar nuevos patrones aquí, como este es un acercamiento y un alejamiento. Realmente ayuda hacerlos más cercanos a las semánticas que ya están disponibles en la web. Entonces por ejemplo, esto, si lo piensas, se parece mucho a cómo se ve un diálogo. ¿Verdad? Y ya tenemos estas semánticas de accesibilidad para ello. Por ejemplo, si presiono escape, debería cerrarlo y enfocarse automáticamente en esta respuesta. Pero si presiono tabulador, debería ir al botón de salida, la cruz. Y cuando presiono tabulador nuevamente, debería volver. Entonces hay una trampa de enfoque en este modelo y eso se debe a que no deberías comenzar a pasar por las publicaciones siguientes y siguientes y llegar hasta el pie de página. Aunque las únicas cosas visibles aquí son estas dos. Así que estoy usando un patrón que ya existe para obtener beneficios de accesibilidad. Y la otra cosa de accesibilidad a tener en cuenta es la idea de que no todos quieren movimiento. Hay personas que tienen enfermedades vestibulares que en realidad, uh, ¿cuál es lo opuesto a beneficiarse? En realidad, odiarían cuando ocurre la animación porque les hace sentir enfermos. Un buen ejemplo de esto está en Mac. Entonces puedes arrastrar entre ventanas. Estoy seguro de que has visto esto con los dedos peleando. Pero si vas a la configuración de accesibilidad y dices que quieres movimiento reducido, ahora cuando intento hacer lo mismo, no se mueve. En realidad, solo se desvanece entre los dos y los navegadores nos exponen esto. Entonces, uh, Frame of Motion ya tiene un gancho para ello. Así que voy a usar el gancho de movimiento reducido. Y lo que puedo hacer con esto es nuestra animación que se expande y se cierra. Voy a decir que si el usuario tiene movimiento reducido, entonces no debería hacer esta expansión. Debería simplemente desplazarse a la siguiente posición y lo mismo para la salida. Y sería bueno si hacemos un pequeño desvanecimiento aquí, pero ese no es el punto. Así que ahora, si tengo movimiento reducido activado, puedo hacer clic y va hacia arriba. No hay movimiento en la publicación. Deberíamos hacer lo mismo con las respuestas, pero si desactivo el movimiento reducido, entonces obtengo las mismas animaciones. Entonces todo esto para decir que, um, con el movimiento, también debemos recordar las preocupaciones de accesibilidad que vienen con el movimiento. Y quiero decir que es realmente posible tener ambas cosas y hacerlo útil y accesible para todo tipo de usuarios porque las APIs y

la tecnología y la configuración y todo está ahí. Depende de ti cómo los uses. Muy bien. Creo que eso es todo lo que tengo. Entonces, uh, si ya tienes la URL, genial. Um, tengo el repositorio al final de la última publicación, y puedes abrir este repositorio, tiene los ejemplos y las ramas múltiples por las que salté. Así que tiene un ejemplo de desvanecimiento y los ejemplos de movimiento. Uh, la última publicación trata sobre un curso que estoy haciendo sobre los temas. Entonces, si tienes curiosidad por profundizar más, no dudes en consultar eso. Y, uh, sí, eso es todo. Muchas gracias por escuchar.

¡Hola Sid, esa fue una charla increíble! Buen trabajo. Veamos la respuesta a la pregunta. Así que tú preguntaste qué tipo de aplicaciones web deberían usar animaciones y parece que el 75% de la audiencia dijo que todas. Así que la gente está bastante interesada en las animaciones. Genial. Sí, me alegra ver eso. Esperaba un número más pequeño, de hecho, comenzó con un número más pequeño. Pero luego creció y creció. Así que supongo que aquí se hizo el trabajo. Eso es increíble. Muy bien. Bueno, tenemos un montón de preguntas de la gente en Discord. Así que empecemos con una de Vasilish Shelkov. ¿Tienes algún recurso sobre patrones de animación comunes que se apliquen a menudo en muchos casos de uso y que nos puedan ayudar con animaciones sencillas en nuestro día a día? Esa es una buena pregunta. Hay algunos artículos de blog aquí y allá. No he visto un recurso dedicado que solo tenga patrones. Pero creo que la mejor manera, o al menos la forma que realmente me gusta para aprender sobre esto, es tomar tus aplicaciones favoritas y tratar de observarlas detenidamente hasta que te canses. Y pensar en qué patrones están utilizando. Y luego comenzarás a ver estas tendencias comunes, como el menú de iOS que viene desde abajo, los menús hamburguesa que vienen desde la izquierda y el fondo que se oscurece lentamente. Así que creo que, sí, simplemente observar otras aplicaciones es, diría yo, la mejor manera de hacerlo. Esa es una gran respuesta. Solo ver lo que ya está ahí. Y usas estas aplicaciones a diario, ves estas animaciones y vas construyendo este repositorio interno de patrones comunes que ves en el día a día. Genial. También creo que hay patrones comunes en diferentes bibliotecas también. Así que ese podría ser otro lugar para buscar. Otra pregunta,

y este es de Chris J. Lee. Creo que hablaste un poco sobre esto en tu charla, pero ¿cómo solucionas la accesibilidad en tus animaciones? Sí. Aquí hay dos aspectos importantes. El primero es que no todos quieren mucha animación. Y eso es algo que debemos recordar. Los navegadores nos brindan una forma, hay algo en CSS, en JavaScript, llamado preferred reduced motion. Y es interesante porque no está en contra de las animaciones. Se trata del movimiento. Así que aún puedes tener cosas como opacidades de sombreado, y eso está perfectamente bien. Siempre y cuando evites las animaciones temblorosas y de rebote. Y el segundo aspecto con algo como las animaciones es que muchas de estas cosas no tienen elementos nativos. Así que tendemos a crear los nuestros. Y luego intentamos encontrar el elemento nativo más cercano o un patrón para la accesibilidad, de modo que aún tengas, no rompas los lectores de pantalla, no rompas la navegación por teclado. El ejemplo que mostré en la demo fue la animación de zoom, pero utilicé un diálogo como primitiva porque aún tenemos primitivas de accesibilidad para eso. Genial. Genial. Es importante pensar en la accesibilidad. Y algo que creo que está relacionado es que recibimos muchas preguntas sobre el rendimiento. Entonces, para agrupar todas estas preguntas, ¿cuáles son tus consejos para hacer que las animaciones sean eficientes en el rendimiento? Y también, ¿cuál es el impacto en el rendimiento para el tipo de animaciones que mostraste en tu charla? Sí. La respuesta breve es que hay algunas propiedades que puedes animar con la ayuda de la GPU. Así que si buscas propiedades de animación aceleradas por GPU, hay un subconjunto como opacidad, transformación, escala y rotación. Y luego el resto de ellas tienen un rendimiento deficiente. Así que las demos que te mostré, React Spring intenta utilizar la aceleración de GPU tanto como sea posible. Pero debido a que React Spring es una biblioteca de React, es posible que termines con re-renderizaciones adicionales si no tienes mucho cuidado al respecto. Y esas serán la causa de tus problemas de rendimiento en lugar de las animaciones que estás ejecutando. Esos son los dos aspectos, que son buscar qué es seguro animar y qué no. Y segundo, si tu aplicación se siente lenta, perfílala y descubre qué re-renderizaciones adicionales estás causando. Genial. Esa es una respuesta muy completa y un excelente resumen. Otra pregunta y

este es de Tanvir Singh. ¿Por qué elegiste Frame of Motion en lugar de cualquier otra biblioteca de animación y hay alguna otra biblioteca que también recomendarías? Esa es una pregunta difícil porque no estoy seguro. ¿Hay otras bibliotecas en el react ecosistema? No lo sé. Estoy seguro de que hay cientos de ellas. Me gusta mucho lo simple que es su API y cómo casi siempre se siente como magia porque ocultan mucha abstracción. Pero la otra que he usado antes y realmente me gusta se llama React Spring, que aún se basa en animaciones de resorte pero está más cerca del resorte metálico. Te brinda mucho más control sobre la animación de resorte.

Genial, genial. Tenemos una pregunta específica de Jason como seguimiento aquí. ¿Has usado GreenStock antes y qué opinas al respecto si lo has usado? Lo he usado. Me gusta. Termino usando React mucho y por eso termino usando frame of motion con él mucho. Todo lo que mostré, se puede hacer con GreenStock, CSS animación. No hay X versus Y aquí.

Genial. Otra pregunta, ¿cuáles son algunos ejemplos de aplicaciones web que utilizan bien la animación? Entonces, los que me gustan mucho son Linear. Linear es esta nueva aplicación de edición de tareas. También está Discord. Discord lo hace muy bien. Si estás en Discord ahora mismo, publicando estas preguntas, intenta usar la barra lateral. Observa las docenas de microinteracciones allí. Y voy a mencionar el panel de control de Koth sandbox porque es el que construí. Eso es genial. Eso es genial. A veces tienes que promocionar tu propio trabajo. Eso es genial. Genial. Veamos. Estoy tratando de revisar estas. Creo que pude agrupar muchas de ellas juntas. Ok. Una más. Ayer Ken Wheeler mencionó que puedes aumentar la percepción del rendimiento eliminando las animaciones en la interacción del usuario. Cuando un usuario realiza una acción, no retrases el resultado con una animación. ¿Cuál es tu respuesta a eso? Me encanta. Es una pregunta brillante. Creo que puedes usar animaciones para mejorar la percepción

El performance y si se utiliza de forma incorrecta o en exceso, también puedes arruinarlo. Entonces, piénsalo de esta manera. Si haces clic en algo y las publicaciones van a cargarse y tarda medio segundo, podrías usar animations expandiéndose durante ese tiempo y eso crea la sensación de que se ha expandido y los resultados ya están aquí. De esa manera puedes usar el movimiento para acelerar las cosas o al menos sentir que es más rápido. Pero muchas veces, como cuando abres un menú y tarda 300, 400 milisegundos en abrirse, eso se siente lento. Como si ya supieras la siguiente acción pero tienes que esperar por ella. Ahí es donde puedes usar animations para arruinar las cosas para ti mismo. Así que hay una publicación de blog muy buena de Material UI, que habla sobre qué distancia debe cubrir una animación y qué tan rápido debe ser en función de eso. Y la idea principal es que si la distancia es muy pequeña, como un tooltip o un menú, debe sentirse muy ágil. Pero si es una transición de página, entonces debes ir hasta 300 milisegundos o 50 milisegundos para que se sienta suave. Así que estoy totalmente de acuerdo con Ken. Pero úsalas con buen gusto y estarás bien. Úsalo demasiado, como todo. Y puedes arruinarlo. Eso es genial. Me encanta que esta conversación sobre el performance percibido esté teniendo más impacto en la community de desarrolladores. Porque desde una perspectiva psicológica, me resulta muy interesante que las personas puedan percibir las cosas como más rápidas o más lentas basándose en las animaciones. Así que creo que es un tema interesante. Increíble. Muchas gracias. Nuevamente, por favor, denle un gran aplauso a Sid en Discord. Esta fue una charla excelente y sé que aprendí mucho de ella.