Ponte tus gorras de pensamiento con Suspense y Concurrent mode! En esta charla, discutiré cómo mejorar la experiencia de usuario existente con la magia de Suspense y Concurrent mode de React para renderizado no bloqueado. La charla destacará las mejores prácticas y pautas para lo mismo.
Camino hacia una mejor experiencia de usuario con Suspense y Concurrent UI
Video Summary and Transcription
Esta charla explora cómo React Suspense y Concurrent mode pueden mejorar la experiencia de usuario al controlar áreas de carga, precargar datos y reducir el tiempo de carga. Demuestra cómo UseTransition puede eliminar cargadores innecesarios al omitir el estado de carga si los datos llegan en un tiempo especificado. El orador recomienda utilizar estas características experimentales en proyectos personales en lugar de aplicaciones empresariales. La charla concluye con una invitación a unirse al viaje en Postman y agradece a los organizadores, patrocinadores, oradores y audiencia por hacer de la conferencia un éxito.
1. Introduction to React Suspense and Concurrent Mode
En esta charla, discutiremos cómo llevar la experiencia de usuario al siguiente nivel con React Suspense y el modo Concurrente. Cubriremos el control de la zona de carga, la precarga de datos y la reducción del tiempo de carga. También exploraremos cómo el modo concurrente puede eliminar cargadores innecesarios. Se utilizará una demostración de un panel de Twitter para mostrar estos conceptos.
¡Hola a todos! Hoy voy a hablar sobre cómo podemos llevar la experiencia de usuario al siguiente nivel con React Suspense y el modo Concurrente. Antes de comenzar, para aquellos que no me conocen, soy Nikhil, ingeniero de software en Postman. Me encargo de cosas relacionadas con los sistemas de diseño, Postman en la web y Postman como plataforma. Pueden encontrarme en Twitter y en Github. Me encanta hablar sobre sistemas de diseño y rendimiento en general, así que vengan a saludar, será una gran charla.
Antes de profundizar, cubramos cuáles serán los puntos clave de esta charla relámpago. En esta charla, discutiremos cómo tener un mayor control sobre la zona de carga, es decir, cómo controlar dónde queremos mostrar una forma de carga. ¿Será toda la página o podemos controlar la carga en la interfaz de usuario de forma asíncrona con la API llamada Suspense? En segundo lugar, veremos cómo podemos comenzar a precargar nuestros datos o nuestras pantallas en segundo plano mientras estamos en otra pantalla con la magia del modo concurrente. Y en tercer lugar, veremos cómo podemos reducir la experiencia de carga molesta que los usuarios con conexiones más rápidas experimentan con un indicador de carga que aparece y desaparece rápidamente utilizando un hook llamado useTransition. Con eso dicho, sumerjámonos en este camino hacia una gran experiencia de usuario. Cambiaré a una pequeña demostración de un panel de Twitter que tengo aquí, ¿de acuerdo? Este panel me muestra una sección de perfil donde se muestra mi nombre, mi cargo, una pequeña descripción sobre mí y el trabajo que he realizado. También hay una sección de tweets que muestra el último tweet que publiqué. No intenten buscarlo en Twitter, es algo que no pude escribir. Y hay un botón adicional que puedo hacer clic para ver otro tweet. Hasta ahora todo bien. Ahora, permítanme cambiar al modo concurrente de esta aplicación y ver cómo podemos mejorar la experiencia de usuario. Refrescaré la página y iré a la sección 'sobre mí'. Si lo ven, tengo un gran indicador de carga en toda la pestaña. Aunque solo tengo un pequeño contenido dentro de mi pestaña, que es mi descripción, que se carga de forma asíncrona, estoy cargando toda la pestaña y mostrando una pantalla de carga para toda esta sección, lo cual no es una gran experiencia de usuario. Podría renderizar mi contenido estático independientemente de si mi descripción se está cargando o no. Pasemos a cómo está codificado actualmente. Veamos cómo hemos escrito esto en nuestro código. Tenemos un bloque de suspense y dentro de este bloque, tenemos algún contenido estático en un pequeño div. ¿Qué pasaría si pudiera sacar este div en particular y renderizarlo fuera del bloque de suspense? Así es como Suspense te brinda un control detallado al definir un pequeño límite y te permite controlar qué quieres mostrar mientras se está cargando. Por ejemplo, si refresco esta aplicación y voy a la sección 'sobre mí', mi contenido estático ya está ahí para que mis usuarios interactúen mientras se carga mi descripción. Hasta ahora todo bien y es sencillo. Ahora intentemos descubrir cómo el modo concurrente puede ayudarnos a eliminar algunos de esos cargadores adicionales. En el lado izquierdo, tenemos una versión síncrona de esa aplicación. Y actualmente, obtenemos los datos mientras vamos a una pantalla. En el lado izquierdo, hago clic en la sección 'sobre mí', veo un buen indicador de carga y luego comienzo a cargar esos datos. Pero como el modo concurrente es algo que cambia las tareas según su prioridad, puedo comenzar a obtener mi descripción y mis tweets cuando estoy en la página de perfil y puedo comenzar a renderizar cosas en paralelo mientras estoy en este perfil. ¿Qué creen que sucedería si simplemente voy a la sección 'sobre mí' y hago clic en esto?
2. Eliminando los cargadores con UseTransition
Entonces hago clic en una sección de tweets y comienza a buscar datos en segundo plano. El cargador que aparece al hacer clic en el botón de siguiente tweet es innecesario para los usuarios con conexiones más rápidas. Podemos eliminar el cargador utilizando UseTransition y un tiempo de espera. Esto permite que React omita el estado de carga si los datos llegan dentro de un tiempo especificado. Al utilizar la función de transición de inicio, podemos manejar el estado de carga y utilizar el valor de gasto proporcionado por UseTransition. Esto nos permite omitir el estado de carga en el modo concurrente síncrono y mostrar el tweet al instante.
3. Conclusion and Acknowledgements
Y parecía que todo sucedió en un instante. Hemos logrado un buen progreso en términos de experiencia de usuario. Sin embargo, el suspense y el modo concurrente aún son experimentales, por lo que es recomendable utilizarlos en proyectos personales en lugar de aplicaciones empresariales. Por cierto, estamos construyendo grandes cosas en Postman y te invitamos a unirte a nuestro viaje. Gracias a los organizadores, patrocinadores, ponentes y audiencia por hacer de esta conferencia un éxito.