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

Rate this content
Bookmark

Esta charla relámpago explora cómo puedes enriquecer tus proyectos de React con Web APIs. Desde el manejo de datos hasta la interacción con las funciones del navegador, los asistentes obtendrán conocimientos sobre cómo aprovechar el poder de las Web APIs para una experiencia de desarrollo de React enriquecida y eficiente, para resaltar las capacidades que ofrecen los navegadores de manera predeterminada.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

Las APIs de navegador permiten ejecutar muchas funciones de manera directa y eficiente sin la necesidad de instalar módulos NPM adicionales, lo que resulta en aplicaciones más ligeras y con mejor rendimiento.

Las APIs de dispositivo permiten que el navegador replique funciones típicas de dispositivos móviles, como la geolocalización y el acceso a gráficos, audio y video, mejorando la interacción y experiencia del usuario directamente desde el navegador.

La API de Fetch permite realizar solicitudes HTTP directamente desde el navegador, facilitando la obtención y manejo de datos en aplicaciones web sin la necesidad de un servidor intermedio.

La API de Shape está diseñada para detectar formas y objetos, como rostros, en aplicaciones web. Actualmente, se encuentra en una fase experimental y puede requerir habilitar flags específicos en Chrome para su uso.

Para habilitar características experimentales de las APIs web en Chrome, es necesario acceder a las flags de Chrome y activar las características experimentales web específicas de la API que deseas probar.

Puedes mejorar el rendimiento de tus aplicaciones React utilizando APIs de navegador para manejar funciones directamente en el navegador, reduciendo la dependencia de módulos externos y optimizando la carga y ejecución de la aplicación.

En React, puedes utilizar APIs de navegador como la de estado de batería, geolocalización, Fetch para datos y reconocimiento de voz, integrándolos directamente en tus componentes para crear aplicaciones más interactivas y eficientes.

Shivay Lamba
Shivay Lamba
10 min
13 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla explora cómo usar el navegador y las Web APIs para mejorar las aplicaciones de React, cubriendo categorías como Fetch API, Device APIs, Storage APIs, Audio y Video APIs, y Shape API. Explica cómo se implementan las Web APIs en las aplicaciones de React y sugiere el uso de funciones nativas de JavaScript o módulos NPM como React Speech Recognition. La charla demuestra el uso de Battery y Face Detection APIs en una aplicación de React, incluyendo características como obtener el porcentaje de batería, coordenadas en vivo y funcionalidad de texto a voz. También menciona la posibilidad de crear filtros de cara de realidad aumentada con la API de detección de rostros. La conclusión destaca la disponibilidad de recursos en los documentos de Mozilla y un repositorio de GitHub para un aprendizaje y ejemplos de código adicionales.

1. Introducción a las APIs de navegador y web

Short description:

En esta parte, exploraremos cómo aprovechar las APIs de navegador y las APIs web para mejorar las aplicaciones de React. Estas APIs pueden manejar tareas que van desde el aprendizaje automático hasta la utilización de la GPU. También discutiremos diferentes categorías de APIs web, como la API de Fetch, las APIs de dispositivo, las APIs de almacenamiento, las APIs de audio y video, y la API de Shape.

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.

2. Implementación de APIs web en aplicaciones React

Short description:

Puedes hacer un montón de cosas diferentes como ser capaz de detectar caras o incluso renderizar ciertas animaciones con la API de Shape. Los equipos de navegadores implementan las APIs web, que inicialmente están en una fase experimental y luego se lanzan como características estables. En las aplicaciones React, puedes implementar APIs web como el estado de la batería y el reconocimiento de voz, utilizando funciones nativas de JavaScript o módulos NPM como React Speech Recognition.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador
JSNation 2024JSNation 2024
31 min
Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador
This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.
Ampliando los límites de la codificación de video en navegadores con WebCodecs
JSNation 2023JSNation 2023
25 min
Ampliando los límites de la codificación de video en navegadores con WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
Visualización de Cuellos de Botella de Rendimiento Front-End
React Summit 2020React Summit 2020
34 min
Visualización de Cuellos de Botella de Rendimiento Front-End
React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.
API WebHID: Controla Todo a través de USB
JSNation 2022JSNation 2022
23 min
API WebHID: Controla Todo a través de USB
Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
JSNation 2024JSNation 2024
20 min
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
JSNation 2022JSNation 2022
28 min
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

Workshops on related topic

Escribiendo Módulos Universales para Deno, Node y el Navegador
Node Congress 2022Node Congress 2022
57 min
Escribiendo Módulos Universales para Deno, Node y el Navegador
Workshop
Luca Casonato
Luca Casonato
En este masterclass te guiaré en la escritura de un módulo en TypeScript que pueda ser utilizado por usuarios de Deno, Node y los navegadores. Explicaré cómo configurar el formato, linting y pruebas en Deno, y luego cómo publicar tu módulo en deno.land/x y npm. Comenzaremos con una breve introducción sobre qué es Deno.