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.

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.

Available in English

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

Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!
Visualising Front-End Performance Bottlenecks
React Summit 2020React Summit 2020
34 min
Visualising Front-End Performance Bottlenecks
There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs.
WebHID API: Control Everything via USB
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.
MIDI in the Browser... Let's Rock the Web!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!
Web Push Notifications Done Right
JSNation 2023JSNation 2023
11 min
Web Push Notifications Done Right
Finally, Web Push API is available in all major browsers and platforms. It's a feature that can take your users' experience to the next level or... ruin it! In my session, after a tech intro about how Web Push works, we'll explore implementing smart permission request dialogues, various types of notifications themselves, and communicating with your app for more sophisticated scenarios - all done right, with the best possible UX.
Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit
JSNation Live 2021JSNation Live 2021
34 min
Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit
Service workers bring amazing new capabilities to the web. They make fully offline web apps possible, improve performance, and bring more resilience and stability to any site. In this talk, you'll learn how these man-in-the-middle attacks on your own site work, different approaches you can use, and how they might replace many of our current best practices.

Workshops on related topic

Writing Universal Modules for Deno, Node and the Browser
Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
Luca Casonato
Luca Casonato
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.