Superpoderes de la API Web del Navegador

¡Hola React Summit US! Les doy una cálida bienvenida a la charla de hoy. Hoy vamos a hablar de algo llamado Web API. Pero antes de hacerlo, necesitaremos dar un pequeño paso atrás y repasar algunos conceptos básicos de JavaScript.

Si vemos este ejemplo, y les hago la pregunta, ¿cuál sería el orden de los registros en la consola?, probablemente la mayoría de ustedes diría 1, 3, 2. Y eso es correcto. Pero, ¿cómo lo sabemos? ¿Cómo sabemos cómo se comporta setTimeout?

Como sabemos, JavaScript es un lenguaje de un solo hilo. Vamos a visualizar esto un poco. Hay una pila de llamadas, ejecutamos la primera función que es sincrónica, y luego registramos el 1 como valor inmediatamente. Pero la segunda es asíncrona, y necesita ir a otro lugar, para no bloquear ese único hilo. Y va a la cola una vez que el temporizador ha terminado. Mientras tanto, la pila de llamadas continúa ejecutando las funciones, luego el bucle de eventos verifica si la pila de llamadas está vacía, y devuelve la devolución de llamada con el valor de 2. Pero la pregunta principal es, ¿dónde espera el setTimeOut mientras continuamos con la ejecución de nuestro código?

Si buscamos esta función en Google, el primer resultado que obtenemos es este. Así que hay una documentación de MDN donde podemos ver algunas cosas sobre la función setTimeOut. Y aquí podemos ver que está bajo una pestaña llamada WebAPIs. Si hacemos clic en eso, podemos ver que básicamente las WebAPIs es una colección, una lista de APIs e interfaces que podemos usar directamente al desarrollar aplicaciones web. Básicamente, es una funcionalidad proporcionada por los entornos de runtime. En este caso, nuestros navegadores. Y si nos desplazamos un poco, podemos ver que hay muchas APIs, una lista realmente, realmente larga de APIs. Y aquí podemos observar que hay algunas APIs bastante conocidas y utilizadas, como WebRTC, almacenamiento de sesión, almacenamiento local, API de carga de archivos, una API DOM, y así sucesivamente. Pero al mirar esta lista, me preguntaba, ¿cuáles son algunas de las APIs exóticas y no tan comúnmente utilizadas que podríamos usar y que podrían dar a nuestra aplicación web ciertos superpoderes en ciertos casos de uso? Así que básicamente, estamos aquí para averiguar eso hoy. Y como hemos establecido, la respuesta a esta pregunta sobre setTimeout es Web API, que es básicamente una colección de interfaces incorporadas que permiten a los desarrolladores interactuar con nuestras páginas y proporcionar alguna funcionalidad interesante.

Voy a presentarme rápidamente. Cuando estaba en la escuela secundaria, siempre quise estudiar psicología. Ahora trabajo en mi trabajo soñado en Wega IT con sede en Noišac, Serbia, donde trabajo como desarrollador, lo que significa que enseño a las personas soft skills, cómo comunicarse con los clientes, cómo lidiar con el estrés, cómo hacer presentaciones como esta, por qué no, y así sucesivamente. Mi nombre es Nikola Mitrović y estos son mis aspectos destacos de las Web APIs para ustedes hoy. OK, ahora vamos a nuestro primer ejemplo para hoy. Digamos que tenemos una página como esta y no hay nada allí excepto el fondo, pero una vez que nos desplazamos un poco hacia abajo podemos empezar a observar que hay algo en la esquina inferior izquierda. Es un pequeño astronauta, que cuando está completamente visible dice, hola mundo. Una vez que nos desplazamos un poco hacia arriba y el astronauta no está completamente visible, el mensaje desaparece. Nos desplazamos de nuevo un poco hacia abajo y de nuevo, una vez que el astronauta está completamente visible de nuevo dice hola mundo.

Entonces, ¿cómo logramos hacer esto? Existe una API llamada IntersectionObserverAPI que básicamente determina si el elemento es visible en una página o no. Si construyéramos un hook en React para esto, probablemente lo llamaríamos useVisible y ese hook aceptaría dos parámetros.

Aceptaría la referencia del objeto que estamos tratando de observar y tenemos ciertas opciones de configuración. Una de esas opciones es la raíz. Si pasamos null, entonces asumimos que estamos observando el elemento de acuerdo con todo el documento. Básicamente significa que podemos tener containers más pequeños con áreas desplazables más pequeñas y podemos observar algunos elementos allí, pero si pasamos null miramos de acuerdo con todo el documento. Podemos tener un margen alrededor de esa raíz, por lo que podemos captar esa intersección un poco antes si es necesario. Y tenemos un cierto umbral, lo que significa que si pasamos este valor necesitamos un 100% de visibilidad para el elemento, por lo que podemos ajustar esto en consecuencia. Luego tendríamos un estado llamado isVisible, y luego instanciamos el objeto IntersectionObserver. En la devolución de llamada obtenemos el objeto Entry, que tiene una propiedad llamada isIntersecting. Esta propiedad contiene la información sobre la visibilidad de un elemento, y luego podemos establecer eso en nuestro estado. Así que ahora lo que queda por hacer es simplemente llamar al método observe en esa referencia y devolver ese estado. Y eso sería todo.

El ejemplo con el astronauta fue agradable y lindo, pero probablemente ahora te estés preguntando cuáles son algunos casos de uso reales donde podemos usar esta API. Podríamos cargar imágenes de manera perezosa, ¿verdad? Así que cargamos el contenido inicial para la página y todo lo que está debajo del pliegue, lo que no se necesita inicialmente, podemos diferir y cargar de manera perezosa. Y una vez que nos desplazamos a una cierta sección, entonces comenzamos a descargar imágenes y otros activos. Podríamos crear listas de desplazamiento infinito. Por ejemplo, no necesitamos una biblioteca para esto. Podríamos tener una lista de 10 elementos. Podríamos tener un separador al final de esa lista. Y una vez que nos desplazamos hacia atrás y ese separador es visible, entonces activamos la siguiente solicitud. Podríamos diferir animations. Así que no necesitamos ejecutar animations si algo no es... Si el cierto elemento no es visible en esa página. Y al hacerlo, podemos ahorrar algo de energía de la computadora. Así que no necesitamos ejecutar algo de JavaScript si el elemento no es visible en el viewport. Una cosa a considerar siempre al usar algunas de estas APIs es el soporte del navegador. Si miramos a los principales proveedores, podemos ver que esta API está totalmente soportada. Así que buenas noticias, podemos usar esto de manera segura en todos los navegadores. OK.

Ahora pasamos a otro ejemplo para hoy. Ahora, voy a hacer algo con mis preferencias personales. Voy a decir que, primero noten que mi laptop no está en el cargador. Y luego, si no está en una batería, voy a decir, si mi laptop está inactiva durante un minuto, se apagará. Además, tengo mi teléfono conectado a mi lado, que tiene la misma configuración. Y vamos a tener la misma aplicación. Así que noten por la URL que tenemos la misma aplicación y el mismo código corriendo detrás de estos dos ejemplos.

Ahora, voy a reiniciar el temporizador para ambas aplicaciones al mismo tiempo, con suerte. Bueno, y aquí voy a hacer clic en este interruptor, pero para la versión móvil, no. Pueden haber notado al principio, no hablé mucho de mí mismo, pero ahora tenemos un minuto para gastar y es mi momento de brillar. Bueno, me gusta viajar, y cuando lo hago, Italia es uno de mis destinos favoritos para ir. La architecture, la gente, el vino, la pasta, todo es increíble para mí. Así que, está inspirado en eso. Recientemente, cuando llego a casa, me gusta preparar comida para mí mismo. Entonces, voy a algún sitio web de recetas de cocina. Mi teléfono está al lado en la encimera junto a mí y estoy preparando esa comida. Pero después de un minuto, algo sucede. Y solo vamos a esperar unos segundos. Bueno. Después de un minuto, mi teléfono se apaga. Y ahora, con los dedos pegajosos, tengo que desbloquear mi teléfono de nuevo. Noten que el temporizador se fue a los cero segundos aquí, pero se fue a un segundo en mi teléfono. Es simplemente porque mi teléfono se apagó. Y hemos perdido la conexión con mi teléfono. Una vez que lo toqué de nuevo, mi teléfono se encendió. Pero de nuevo, necesitamos desbloquearlo y usar el teléfono de nuevo correctamente. Aquí no lo hizo. Porque tenemos la característica más increíble, que dice, básicamente, hey, estoy cocinando. No apagues mi pantalla. Entonces, ¿cómo logramos hacer esto? Existe una API llamada Screen Wake Lock API, que evita que el dispositivo se bloquee.

Aunque nuestras preferencias personales decían algo diferente. Y sólo puede funcionar si el documento es visible en nuestra página.

Si hacemos esto en React, haremos un hook llamado Use Wake Lock y se ve algo así. Pasamos ese Booleano de alternancia, que se enciende o apaga, ¿verdad? Y si está encendido, entonces llamamos a una función de solicitud Wake Lock Sentinel. Esa función, la llamaré en un navegador, tenemos el objeto Wake Lock y un método de solicitud con el parámetro de pantalla. Y esa llamada a la función es una promesa. Es una promesa porque puede fallar en ciertos casos de uso. Por ejemplo, si nuestra batería está demasiado baja y ahora la situación es un poco más complicada que en el ejemplo anterior, porque necesitamos poner esto en una referencia. Necesitamos hacer eso porque si lo ponemos en un estado, entonces perderemos el estado anterior y esta función devuelve un cierto valor. Necesitamos borrar ese valor exactamente ese valor en la memoria después cuando liberamos el bloqueo, de lo contrario no funcionará. Por eso necesitamos ponerlo en una referencia. Luego devolvemos si tenemos el bloqueo o no. Y cuando liberamos, una vez que volvemos a desactivar, entonces necesitamos llamar al método de liberación en esa misma referencia y necesitamos borrar esa referencia. Esos son todos los pasos necesarios a realizar, de lo contrario el bloqueo permanecerá en la memoria.

De nuevo, algunos de los casos de uso para esto, leer un libro electrónico, presentar a una audiencia, seguir una receta, navegación por mapas, o escanear un código QR o de barras. De nuevo, si miramos el soporte del navegador para esta API. Ahora podemos ver que la situación, de nuevo, es un poco diferente. Los navegadores basados en Chromium soportan esta característica, Firefox no. Y este signo significa que está en fase experimental para Safari. Así que tienen algún trabajo en marcha pero no completamente. Una cosa más a tener en cuenta sobre esta API es que hay un cierto soporte de dispositivo. Así que algunos de los dispositivos soportan esta característica, algunos no. Por ejemplo, tengo un iPhone y haga lo que haga, no pude hacer que esta característica funcionara aunque uso Chrome. Creo que esto tiene que ver con el hecho de que Chrome es sólo la piel para el iPhone y básicamente es Safari bajo el capó. Utiliza el motor WebKit para ejecutar el código, pero eso es algo con lo que tenemos que lidiar cuando usamos esta API.

Y pasamos a nuestro último ejemplo de hoy. Aquí tenemos un ejemplo de svemirko.rs que traducido al inglés significa astronauta. Svemirko es una aplicación un poco futurista, unos miles de años en el futuro, donde en el backend, estamos comunicándonos con la API de la NASA que nos proporciona la lista de todos los planetas habitables.

Ahora podemos buscar en esa lista y elegir a dónde queremos ir de vacaciones. Pero en el futuro también, tenemos algunos problemas de conectividad fuera de línea. Si nos quedamos sin conexión y si te digo que pasar el ratón sobre este botón de explorar desencadenará la solicitud, probablemente esperarías que esa solicitud ocurra en la red. Pero si estamos sin conexión, esa solicitud de red fallaría, por supuesto. Podemos notar que no está pasando nada en la red. Pero en la pestaña de Aplicaciones bajo Sincronización en Segundo Plano, hay algo más sucediendo. Si hacemos clic, veremos el cargador. Básicamente, nuestra solicitud aún no se ha ido. Y aquí en la Sincronización en Segundo Plano, podemos ver que hay algo llamado RegisterEvent. RegisterSync. Una vez que volvamos a estar en línea, entonces tendremos este evento PepsSync. Nuestra solicitud se fue. Y si esperamos un poco, una vez que esa solicitud se haya completado, entonces tendremos el tercer evento, que se llama SyncCompleted. Ahora tenemos la lista de nuestros planetas. Y podemos buscar y decidir a dónde queremos ir de vacaciones.

¿Cómo logramos hacer esto? Existe una API llamada API de Sincronización en Segundo Plano, que básicamente proporciona una forma de hacer el fuego tarea a un trabajador de servicio, que podemos ejecutar en segundo plano. Si construimos este ejemplo en React, tenemos ese enlace. Una vez que pasamos el ratón por encima, hay en un navegador, dentro de un trabajador de servicio, hay un objeto listo, que es básicamente el registro para la sincronización en segundo plano. Y después de eso, necesitamos llamar a sync y al método de registro y pasar una etiqueta de una tarea. Hacemos eso porque podríamos tener múltiples tareas ejecutándose en segundo plano mientras estamos sin conexión. Y dentro de nuestro trabajador de servicio, lo que queda por hacer es simplemente comparar el nombre de esa etiqueta. Y una vez que obtenemos ese evento, entonces podemos continuar con nuestra solicitud. Por supuesto, algunos de los casos de uso son UX sin conexión y tal vez queremos enviar un correo electrónico, pero nos quedamos sin conexión en ese mismo momento, podemos recuperarnos de eso y ejecutar esa tarea en segundo plano que se continuará una vez que volvamos a estar en línea. De nuevo, comprobando el soporte del navegador para esta API. No tan bien en este momento, pero esperaremos un poco para esto porque esta es una característica bastante impresionante.

En el ejemplo anterior, si te has preguntado cómo logramos pasar los data de los trabajadores de servicio a nuestro componente. Bueno, hay una API llamada API de canales de difusión, que es básicamente un canal para la comunicación entre los mismos contextos, lo que significa, si tenemos las mismas ventanas, pestañas, marcos o iframes, que están en el mismo origen, entonces podemos comunicarnos entre esos orígenes.

Y funciona en ambos sentidos. En nuestro ejemplo anterior, en nuestro trabajador de servicio, necesitamos conectarnos a un canal. Creamos un nuevo canal de difusión y nos conectamos a él. Y, a través del mensaje de publicación, podemos enviar cierta información a nuestro componente. En nuestro componente, nos suscribimos a ese mismo canal y en un evento de mensaje, obtendremos como parámetro, obtendremos los data que enviamos desde un trabajador de servicio.

Nuevamente, algunos de los casos de uso útiles son detectar la acción del usuario desde otro origen. O si tenemos varias pestañas abiertas para la misma aplicación, si cerramos sesión en una, queremos cerrar la sesión del usuario en todas las pestañas. El soporte del navegador en este caso dice que todo está bien, todo está bien. Podemos usar esta API de forma segura.

Desafortunadamente, porque no tenemos mucho tiempo, tenemos que detenernos aquí por hoy, pero voy a darles algunos puntos extra y espero, los inspiré lo suficiente para ir y buscar algunas de estas API por su cuenta. Pero aquí hay algunos más de mis aspectos destacados. Existe una API de baliza, que básicamente se usa cuando quieres enviar una solicitud, pero no te importa la respuesta. Útil para análisis. Existe una API de voz web. API de visibilidad de página, si quieres rastrear la visibilidad de todo el documento y ciertos elementos. Existe una API de red que te da la información de tu sistema de red. Existe una API de compartir web que puede compartir información, compartir archivos entre diferentes dispositivos. Existe una API de búsqueda en segundo plano. Básicamente, si quieres descargar un documento enorme pero luego te quedas sin conexión, puedes continuar con la descarga una vez que vuelvas a estar en línea. Y por supuesto, una de las probablemente más emocionantes y nuevas son la API de authentication web, que básicamente es una forma para las experiencias sin contraseña. No necesitaremos contraseñas en el futuro. En el futuro podríamos simplemente autenticarnos con nuestro Touch ID con nuestra cara o con nuestra llave USB o algunos otros dispositivos. Es realmente emocionante ver cómo resultará esta API. Y al final algunas de las conclusiones. Hemos visto que algunas de estas API no tienen soporte de navegador en este momento. Alguno de ese soporte está en fase experimental. Tenemos que estar atentos al soporte del dispositivo en algunos casos y hay cierto soporte de TypeScript que falta. Pero, ¿por qué deberíamos usar esta API y adoptar esta mentalidad? Porque es código estandarizado, es código estandarizado, es código estandarizado. Probablemente no puedo enfatizar lo suficiente cuán importante es esto, especialmente en el desarrollo web de hoy donde tenemos un nuevo marco, una nueva biblioteca cada semana. Esto es como una única fuente de verdad.

Este es un código estandarizado, podemos usarlo en todos los navegadores. Así que es realmente, realmente importante. La mayoría de estas API son realmente fáciles de aprender y al adoptar esta mentalidad y usar algunas de las funcionalidades incorporadas en nuestros navegadores, y no usar demasiado las bibliotecas, podemos tener, podemos aumentar el performance como un efecto secundario. Por supuesto, no estoy diciendo que no debamos usar bibliotecas y no debamos reinventar la rueda en ciertos casos de uso, pero en algunos casos de uso, probablemente podemos construir algunas características por nuestra cuenta con la ayuda de estas API.

Y eso me lleva a mi punto, que con gran poder viene una gran responsabilidad. Así que sentí que es mi responsabilidad decírtelo. Quería hablar un poco sobre nuestro planeta. Si estás teniendo una expresión facial 404, como no encontrada en este mismo momento, como qué, ¿qué tiene que ver nuestro código con nuestro planeta? Bueno, en cierto modo sí. Construimos nuestra aplicación React. Ejecutamos una compilación. Hay una salida para esa compilación. Desplegamos eso, nuestros archivos HTML, CSS y JavaScript a algunos proveedores de cloud, que están distribuidos por todo el mundo. Están en los centros de data. Esos centros de data tienen muchas computadoras, básicamente son esencialmente muchas computadoras una al lado de la otra, y todas están conectadas a la electricidad. De hecho, tanto que Internet consume el 21% de toda la electricidad en todo el mundo, lo cual es realmente una información asombrosa para mí, si me preguntas.

Pero afortunadamente para nosotros, hay una aplicación muy interesante llamada Calculadora de Carbono de Sitios Web, que puede verificar la huella de carbono, el tráfico de nuestro sitio web, la intensidad energética y las transferencias de data. Así que te recomendaría encarecidamente que uses esta aplicación y vayas a comprobar cuán verde eres. Esto es súper importante porque solo tenemos un planeta. Este planeta es nuestro hogar y si no somos amables con él, un día será demasiado tarde. Así que lo que podemos hacer es que todos nosotros podemos tomar medidas, unir fuerzas, y en ese sentido podemos proporcionar grandes, grandes resultados todos juntos.

Muchas gracias por venir hoy y por escucharme. Si quieres las diapositivas para repasar y volver a verlas, este es el código QR. Puedes escanearlo. Puedes escribirme. Este es mi correo electrónico. Puedes ir a mi GitHub y revisar todos los ejemplos que he construido. Gracias. Muchas gracias por venir.