¡El Arte Sutil de la "Carga Sutil"!

Solo una pequeña introducción sobre mí. Soy Nikit y soy Ingeniero de Software en Postman. Principalmente me ocupo de cosas relacionadas con los sistemas de diseño en Postman. Postman es solo una plataforma y Postman en la web. Puedes encontrarme en Twitter o en GitHub. Me encantaría conectarme, sería una buena charla.

Muy bien, antes de sumergirnos, quiero mencionar que nuestros usuarios son muy rápidos cuando se trata de usar la interfaz de usuario. No quieren esperar nada. Solo quieren usar las cosas al instante y aquí es donde surge un pequeño cuello de botella porque como desarrolladores queremos atender esta solicitud porque queremos que el usuario use nuestras aplicaciones más rápido, pero tenemos esta pequeña desventaja, porque tenemos que obtener algo de un servidor y por eso les mostramos algunas pantallas de carga en la página que a los usuarios definitivamente no les gusta. Y este es el cuello de botella que queremos manejar de manera sutil y eso será esencial y una esencia de nuestra charla, donde si ves esta definición, lo que Google te da, la palabra sutil en realidad significa hacer uso de métodos inteligentes e indirectos para lograr algo. Y así es como vamos a jugar sutilmente con todas estas técnicas.

Veamos rápidamente cuáles son los tips que recomiendo para mejorar nuestra experiencia de usuario. El primer consejo sería no quedarse inactivo y seguir obteniendo algo, ya sea la interfaz de usuario o los data, simplemente sigue obteniendo. No esperes nada. Y utilizaremos una pequeña técnica para el modo concurrente y suspense para manejar este caso. El segundo paso es qué cargar cuándo. Esa es la pregunta porque, aunque tenemos muchas cosas en una sucesión una sucesión, pero queremos cargar una cosa que tenga un mejor significado semántico si cargas una cosa primero y luego la otra en la siguiente ronda. Entonces, semánticamente, la secuencia de carga también debe importar, lo cual se puede hacer con una simple API llamada suspense list. Y el tercero es ser optimista y no preocuparnos por todas estas técnicas. Las cubriremos en una demostración, que veremos ahora. Así que sin perder tiempo, vamos a entrar rápidamente.

Bien, si ves aquí tengo dos aplicaciones, una que se ejecuta en modo síncrono y otra que se ejecuta en modo concurrente o puedes decir un modo asíncrono. Así que si te doy una pequeña introducción, solo para estar seguro. Sí, hay una sección de perfil. Si voy a Acerca de mí, veo un bonito cargador y luego los data se obtienen y mi sección Acerca de mí se carga. Lo mismo ocurre con el tweet. Así que hay un pequeño botón, hago clic en él y veo un siguiente tweet.

Cada vez que hago algo, veo cargadores. Ahora es el momento del consejo número uno, que es no hacer un enfoque en cascada donde esperamos a que algo se cargue y luego renderizamos los componentes anidados. Si observas la aplicación concurrente ahora, en este caso, estábamos esperando a que se cargara una pantalla, pero en la aplicación concurrente, mientras te mostraba esa demostración en el modo concurrente a la izquierda, en realidad comenzó a obtener cosas en Babylon. Debido a que el modo concurrente puede ayudarte a cambiar entre tareas que tienen más prioridad. En este caso, si voy a la sección Acerca de mí, ¿veré un cargador o no? ¿Debería cargarse todo? Porque el modo concurrente estaba trabajando de forma asíncrona para obtener los datos en sucesión, no estaba esperando a que ocurriera ninguna carga. Entonces, si voy a la sección Acerca de mí, no hay cargador. No vi ningún cargador apareciendo. Parece que ya estaba allí. Lo mismo ocurre con la sección de Tweets. Parece que esto también estaba allí. No vi ningún cargador. Muy bien, perfecto. Este fue el consejo número uno.

Ahora, pasemos al consejo número dos, que se encuentra dentro de esta sección Acerca de mí. Ahora, ocultemos el modo síncrono y vayamos a la aplicación concurrente. Ahora, si ves, recargo esta aplicación y ahora déjame ir a la sección Acerca de mí. Ahora, verás dos cargadores, pero la segunda oración aparece primero y luego la primera descripción aparece más tarde, como puede suceder porque ambas llamadas de API asíncronas pueden estar en una condición de carrera, ¿verdad? Como sea que se cargue primero, no lo sabes, pero si ves esto así, esta descripción, he agregado intencionalmente como un huevo de Pascua que la ortografía está mal. Pero en una meta descripción, quiero decirle a la gente que, hey, ahora, la ortografía es esta y no esa. Entonces, la secuencia de carga de la que hablé entra en juego.

Entonces, la experiencia ideal debería ser como sin importar qué se cargue como qué aparece primero, como qué respuesta de API se carga primero. Quieres mostrar la primera cosa como una descripción y luego quieres mostrar una meta descripción, ¿verdad? No importa cuándo las vean. Entonces, si nos dirigimos al código, déjame ir rápido. Sí, necesito espacio aquí. De acuerdo. Estos son estos dos bloques de suspense, ¿verdad? Que estamos usando ahora, usemos suspense list aquí. Entonces uso suspense list. Doy un orden revelado como adelante. Ahora, ¿qué significa esto? Esto dice que, okay, sin importar qué se cargue primero o qué se cargue después, siempre carga la primera cosa que es la descripción siempre muestra las primeras cosas primero y luego las otras cosas después. Así que lo guardo. Así que sí, guardemos esto. Y ahora actualicemos. Ahora lo que observarás es que sin importar qué aparezca primero o qué aparezca después, siempre vas a ver tu descripción primero. Y luego verás la meta descripción que es como una mejor experiencia, como que hace que el orden semántico se vea mejor. Muy bien, ese fue el consejo número dos.

Entonces, ¿qué se cargará cuando esta fue la pregunta y esta fue la respuesta ahora viene el consejo número tres que está dentro de la sección de tweets. Ahora, permíteme activar el modo síncrono para mostrarte la diferencia. Ahora, si ves aquí, tengo que hacer clic en este botón y luego muestro un cargador para mostrar el siguiente a esta carga. Pero si alguien tiene una conexión más rápida, ¿por qué mostrarles un cargador por unos milisegundos puedes simplemente no mostrar un cargador, esa es una forma sutil de manejar el escenario para que los usuarios con Conexiones más rápidas sientan que ya estaba allí. Entonces veamos cómo sucede en la aplicación síncrona o en la aplicación concurrente. Entonces hago clic en la próxima semana. Solo lo deshabilito por un tiempo y espero los data si están llegando o no. Entonces, como, solo vamos a mostrar la próxima semana en un instante. Entonces, como, veamos, una vez más, hago clic en la próxima semana.

No hay cargador. Estoy esperando un tiempo porque la conexión es rápida y luego veo el árbol. Muy bien. Eso fue todo. El número tres es ser optimista, como esperar cosas como si simplemente van a aparecer y no tienes que cargarlas realmente por esos pequeños momentos. ¿Verdad? Y esto se hizo utilizando la transición de uso, como el inicio de transición API que usamos.

Así que, para resumir. Solo uso un inicio de transición que me da una función. Entonces, puedes usar esta función para envolver todo de tus actualizaciones de estado dentro de esta función, como he hecho aquí en este botón al hacer clic. He envuelto todo bajo el inicio de transición y espera durante esta cantidad de milisegundos. Entonces dice que, okay, si los data se cargan dentro de este tiempo no mostraré un cargador, pero si tarda más que eso, entonces comenzaré a ver un cargador, lo cual tiene sentido. ¿Verdad?

Muy bien. Volviendo a nuestro tema, parece que estos tres consejos realmente pueden ayudarnos a obtener una buena cantidad de experiencia con algunas pequeñas victorias. Como que realmente no hicimos mucho, pero simplemente aplicamos las nuevas API de React 18 y pudimos obtener una experiencia de API sutil. Entonces, ¿esto está listo para producción? Creo que esa sería tu próxima pregunta, que ahora, ¿cuándo puedo probar esto en mis aplicaciones? Así que una buena noticia para aquellos que quieran probarlo es que React 18 ha sido publicado recientemente y ahora está disponible en npm. Siéntete libre de probarlo, usa el modo concurrente, suspense y el inicio de transición PSI. Te encantarán estas API y estoy muy emocionado al respecto. Y como nota aparte, en Postman también estamos realmente apasionados por construir grandes cosas y hacer la vida de los usuarios más fácil utilizando la plataforma. Entonces, si quieres formar parte de nuestro viaje, no dudes en conectarte con nosotros a través de la página de carreras de Postman y estaremos encantados de contar contigo. Muy bien. Con esto, daré por terminada mi presentación y gracias por escuchar. Nos vemos chicos.