Más allá de JavaScript: Maximizando React con Web APIs

Gracias por unirse a nosotros. Esta es mi primera vez en GitNation Talks. Estoy súper emocionado. ¡Gracias!

Por supuesto, esto nos sucede a diario. Amamos y odiamos JavaScript porque es muy popular. Es muy bueno. Puedes hacer un montón de cosas. Pero al mismo tiempo, quieres que tus aplicaciones tengan tanto JavaScript como sea posible. O el menor número de módulos de NPM para hacer tus aplicaciones más ligeras. Porque, por supuesto, cuando tienes muchos módulos de NPM, tus aplicaciones se vuelven mucho más pesadas. Y, quiero decir, si solo estás usando Git también, pueden llegar a ser bastante grandes en tamaño. Como, cientos de megabytes de tamaño.

Entonces, la idea aquí que quiero transmitir es que ¿puedes confiar en el navegador web en el que básicamente estás ejecutando nuestras aplicaciones de React en lugar de tener que usar módulos de NPM o JavaScript en sí. La respuesta simple a eso es sí. Tenemos todas estas APIs de navegador y APIs web que esencialmente nos permiten hacer fácilmente cualquier cosa desde cosas de aprendizaje automático como la detección de rostros hasta cosas estándar como poder aprovechar tu GPU para hacer cosas como renderizado en 3D donde tu navegador es capaz de poder obtener la información de la GPU y aprovecharla con algo como WebGPU. Entonces, todas estas pueden ser manejadas con la ayuda de un conjunto de diferentes APIs de navegador o APIs web que puedes aprovechar para tu propio caso de uso y estaremos explorando algunas de ellas y cómo puedes básicamente integrarlas dentro de una aplicación de React.

Entonces, hay un montón de diferentes categorías de estas APIs web. Muchos de ustedes podrían estar al tanto de estas. Pero para las personas que no lo están, simplemente daré un rápido resumen de estas siete diferentes categorías web amplias que he definido. Entonces, la primera es la API de Fetch, que te permite hacer solicitudes HTTP. La siguiente es las APIs de dispositivo. Entonces, las APIs de dispositivo esencialmente permiten a tu navegador replicar muchas de las diferentes cosas móviles que típicamente tendrás en dispositivos móviles pero también replicar eso dentro de un navegador web también. Entonces, si estás usando un navegador web en tu laptop o quizás en tu teléfono móvil. Entonces, por ejemplo, la API de Geolocalización te permite obtener tus coordenadas y renderizarlas dentro de tu aplicación. O, por supuesto, puedes dibujar gráficos con la ayuda de la API de Canvas. También obtienes muchas APIs de almacenamiento que te permiten hacer cosas como almacenamiento local o si quieres almacenar la duración de una tarea particular que estás implementando dentro de tu navegador. Entonces, todas esas serán capaces con la ayuda de las APIs de almacenamiento. Y, por supuesto, tienes las APIs de Audio y Video que te permiten hacer un montón de cosas con el procesamiento de audio y video. Y luego la API de Shape. Entonces, estas son, creo, personalmente mis favoritas.

Puedes hacer un montón de cosas diferentes como ser capaz de detectar caras o incluso renderizar ciertas animations que normalmente se te proporcionan con la ayuda de la API de Shape. La API de Shape, diría yo, todavía está en una fase experimental.

Ahora, si tienes curiosidad por saber cómo surgen las APIs de navegador o estas APIs web. Así que principalmente, el Chrome, si hablamos de tus principales navegadores web. Así que el equipo de la plataforma Chrome es básicamente quien está implementando muchas de estas diferentes APIs de navegador. Así que muchas de ellas también están actualmente, digamos, en fase experimental. Así que, cuando estás usando estas diferentes APIs web, encontrarás que muchas veces algunas de ellas podrían estar implementadas o podrían estar en efecto por defecto, pero algunas de ellas podrían no estar soportadas. Y si quieres soportarlas, lo más probable es que estén en una fase experimental, y tendrás que ir a tus flags de Chrome para habilitarlas. Por ejemplo, si quieres habilitar la API de detección de fase, tendrás que habilitar la flag de características experimentales web de Chrome en lugar de tus flags de Chrome para básicamente hacerla pública.

Así que la forma en que básicamente estas APIs web llegan a la fruición es que los equipos de navegadores las implementarán. Estarán en una fase experimental. Una vez que llegamos a un punto donde son lo suficientemente estables, se lanzarán como características estables. Y luego serán implementadas en estos navegadores por defecto.

Ahora, echemos un vistazo rápido a cómo puedes implementar estas dentro de tus aplicaciones React. Así que el primer ejemplo básico que me gusta citar es el estado de la batería. Así que el ejemplo del estado de la batería básicamente te dará el estado de la batería de tu dispositivo, y puedes renderizarlo. Así que lo que ves aquí es el navegador. Con la mayoría de las APIs web, básicamente estás usando la interfaz del navegador que te permite identificar el agente de usuario, en este caso, cualquier computadora que estés usando. Y en este caso, como puedes ver en el código, aquí estoy usando simplemente el navigator.getBattery. Así que no estoy instalando algún módulo de terceros NPM para hacer eso, y soy capaz de usar simplemente una función nativa de JavaScript que obtengo de la browser API, y básicamente estoy renderizando el estado de carga de cuál es mi porcentaje de batería en este momento.

Otro ejemplo donde puedes usar también algunos NPM modules. Así que el siguiente es el reconocimiento de voz. Así que obtienes una browser API para poder hacer reconocimiento de voz en vivo dentro de tu navegador. La biblioteca de reconocimiento de voz de React esencialmente proporciona tu gancho personalizado de React con la API de WebSpeech, así que en lugar de usar directamente la API de WebSpeech, puedes simplemente instalar este módulo NPM y obtener capacidad fuera de la caja. Y mostraré rápidamente una demostración antes de seguir adelante. Así que la primera demostración que me gustaría mostrar es con nuestro app.js. Aquí lo que verás es que estoy usando en realidad un montón de diferentes APIs web, así que la primera estoy estableciendo algunos estados para mi nivel de batería, para mi ubicación, así que estoy usando la API de batería, estoy usando la coordenada que es la API de geolocalización, estoy usando una simple solicitud de fetch para mostrar cómo puedes obtener data, y por supuesto estaré usando el Reconocimiento de Voz de React, que es el modelo NPM que proporciona el gancho de React. Aquí, muy similar a cómo mostré en la muestra de código en las diapositivas, que simplemente usas el navegador y el objeto del navegador y luego cualquier función que normalmente sea soportada. Así que en este caso, estoy ejecutando una para obtener tu estado de batería, de manera similar tengo una para poder usar la API de geolocalización, luego la API de fetch para obtener algunos data, y luego por supuesto la final es la transcripción, donde estoy usando el reconocimiento de voz para hacer una transcripción en vivo. Así que rápidamente voy a ejecutar esto, y esta es una demo, refrescaré rápidamente.

Como puedes ver, obtengo mi porcentaje de batería como 81, obtengo las coordenadas en vivo de mi ubicación, y si empiezo a hacer el texto a voz, espero que funcione. Hola, estoy en React Summit, y esta es mi charla relámpago. Perfecto. Así que esto funciona de inmediato.

Otro ejemplo que me gustaría mostrar rápidamente es el uso de la detección de rostros. Así que no estoy usando ningún modelo de machine learning aquí, esto es soportado por defecto por Chrome. Ahora, para experimentar con la detección de rostros, tendrás que configurar tus flags de Chrome. Así que en ese caso, tendrás que ir a las flags de Chrome y configurar la característica experimental para la plataforma web. Tenlo en cuenta si quieres usar esto. Pero aquí, lo principal que estoy usando es el detector de rostros. Así que con este detector de rostros, básicamente detectará si hay un rostro dentro de un elemento canvas. Y te dará, o te devolverá las coordenadas donde básicamente encuentra las diferentes características de tu rostro. Así que será capaz de determinar de manera única tus ojos y tus labios y todo. Y detectará esos. Y básicamente obtendrás un cuadro delimitador donde es capaz de detectar de manera única un rostro. Y eso es lo que estoy haciendo. Básicamente estoy obteniendo esas coordenadas que obtengo de mi API de detección de rostros. Y simplemente estoy renderizando un cuadro delimitador.

Ahora esto podría funcionar, o podría no funcionar. Vamos a ver. Si hago clic en iniciar, podrás ver que soy capaz de obtener el rostro y hace un trabajo bastante decente, diría yo. Y si me muevo, es capaz de ir y mirar el cuadro delimitador. Déjame ver. Como, no es 100% preciso, pero captas la idea. Y básicamente puedes hacer un montón de cosas divertidas. De hecho, hubo una charla en JS Nation en 2023 sobre la creación de filtros de realidad aumentada, filtros de rostro, con la ayuda de la API de detección de rostros. Así que definitivamente echa un vistazo a esa charla en particular en JS Nation que es este año, en 2023. Definitivamente una charla relámpago que debes ver, la charla completa. Pero esos son un par de ejemplos. Así que, por supuesto, obtienes APIs directas que puedes usar en tus React hooks.

O, por supuesto, obtienes algún soporte para hooks personalizados de React para algunas de estas APIs. Pero, por supuesto, estas son, como, en una amplia categoría de muchas cosas diferentes que puedes lograr con estas nativas... como, con estas APIs nativas.

Así que definitivamente revisa estas. Pero, sí, con eso, estos son algunos recursos. Puedes echar un vistazo rápido. Estos son algunos recursos relacionados con las principales APIs web en los documentos de Mozilla. Y, por supuesto, hay un repositorio en GitHub que habla mucho más sobre cómo usar cada una de estas APIs con algunos ejemplos de código, también.

Pero con eso, concluiré mi charla. Muchas gracias. Y espero que tengas unas maravillosas charlas restantes de la Cumbre de React. Gracias. Muchas gracias. Gracias. Gracias. Muchas gracias. Gracias.