Camino hacia una mejor experiencia de usuario con Suspense y Concurrent UI

¡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?

vería un cargador? Vamos a descubrirlo. Así que hago clic en esto, no hay cargador, no hay spinner, parece que en realidad estaba ahí ahora mismo, ¿verdad? Hago clic en esta sección de tweets, pero en este lado izquierdo, hago clic en esto y ahora comienza a buscar cosas mientras estoy ahora en el stream, ¿verdad? Bien, ahora se han mitigado dos spinners. Bien, ahora vamos a descubrir otro caso de uso. ¿Qué sucede cuando hago clic en este botón de siguiente tweet? En realidad veo un cargador y simplemente aparece y desaparece, ¿verdad? Lo veo en un instante. Y esto es algo que enfrentan nuestros usuarios con conexiones más rápidas, ¿verdad? Y el propósito de este cargador no se cumple porque los pequeños milisegundos de tiempo serían algo que realmente omitiría ese estado de carga, ¿verdad? Y en realidad dejaría que tu stream sea como es en lugar de mostrar el cargador. Ahora, vamos a intentar eliminar este cargador en sí y usar un código llamado UseTransition. Así que tengo este componente aquí, que es TweetList y voy a comentar esta línea, que se llama UseTransition. Y lo que me pide es que le dé un tiempo de espera en milisegundos. Ahora, lo que esto realmente significa es que React omitirá mi estado de carga si mis data realmente llega dentro de estos dos segundos de tiempo. Así que si reviso esta lógica onclick de mi botón, ¿verdad? Esta es en realidad la lógica donde establezco mi estado y habilito el estado de carga con suspense. Ahora, ¿qué pasaría si pudiera tomar todo esto, copiarlo y usar start transition que en realidad tiene una función y pegar todo eso dentro. Bien. Y la función de inicio se encarga de todo lo que si los data realmente llegan dentro de estos dos segundos de tiempo solo para el estado de carga. Ahora vamos a usar este valor de gasto que nos da use transition. Así que deshabilitemos este botón para ver esto. Guardo. Ahora veamos cómo suceden las cosas en el modo concurrente síncrono. ¿De acuerdo? Así que hago clic en esta sección de tweets. Ahora estoy viendo una hoja de carga por primera vez. Hago clic en este botón. Es modo síncrono y ahora estoy viendo un cargador que no es realmente bueno. Así que veamos qué sucede cuando cambio a modo concurrente. Así que con ese gancho de transición enorme, ahora puedo omitir ese estado de carga. ¿De acuerdo? Así que hago clic en este siguiente tweet. No veo un cargador. Solo se queda como está. Y luego el tweet aparece en un instante. Vamos a ver una vez más. Hago clic en esto, no hay cargador y el tweet aparece

como un destello. Y parecía que todo sucedió en un instante. Bien. De acuerdo. Hasta ahora todo va bien. Y creo que hemos logrado un buen progreso en términos de una buena experiencia de usuario. Hasta ahora todo va bien. Ustedes son increíbles. Ahora todos podrían estar tentados a pensar que, hey, esta es una API súper genial y déjame usar el suspense y el modo concurrente y decirles a mis gerentes y líderes técnicos, hey, usemos esta API. Es increíble. Y esto es algo que en realidad Facebook y React mismo podrían no estar a favor en este momento porque el suspense o la obtención de datos y el modo concurrente son algo que en este momento son experimentales. Y el equipo de Facebook todavía está buscando más comentarios ya que se espera que la API siga evolucionando y puede tener errores en este momento ya que es experimental. Entonces, es posible que realmente desee jugar con estas API en sus proyectos personales, pero pensar en algo que sea empresarial no es algo que realmente desee hacer, ¿verdad? Ya que las cosas pueden tener errores. De acuerdo. Por cierto, estamos construyendo grandes cosas en Postman. Entonces, si realmente te gustaría ser parte de nuestro viaje, por favor ven y saluda y visítanos en nuestro sitio web de carreras. Nos gustaría conectarnos y discutir las cosas en el futuro. Con esto, me gustaría terminar mi charla. Un gran agradecimiento a todos los organizadores y patrocinadores que están trabajando arduamente para hacer de esta conferencia un gran éxito y a todos los ponentes y, por último pero no menos importante, a la audiencia. Ustedes, ustedes son geniales al tener una gran discusión con todos ustedes. Muchas gracias.