Superpoderes de la API Web del Navegador

Rate this content
Bookmark

Cuando escribimos código para la Web, hay muchas capacidades que se ofrecen de serie por nuestros navegadores. Si alguna vez escribiste un componente de Carga de Archivos, usaste temporizadores e intervalos, interactuaste con el DOM, o almacenaste algo en el Almacenamiento Local/De Sesión, tuviste que ir a los documentos de la API Web de MDN, para encontrar información relevante sobre cómo implementar ese código.
En esta sesión, nos adentraremos en el emocionante mundo de las APIs Web del navegador que no se utilizan tan comúnmente (aunque deberían serlo) y exploraremos sus increíbles capacidades 🚀
Todas estas características ofrecen nuevas oportunidades para crear experiencias web inmersivas que pueden ayudar a las empresas a crecer y conectar con los clientes.
Así que si eres el tipo de ingeniero que quiere estar por delante de la curva en lo que respecta al desarrollo web, aprende cómo el Observador de Intersección, la API de Sincronización en Segundo Plano, la API de Bloqueo de Pantalla (y muchas más) pueden ayudarte a crear mejores aplicaciones web que mantendrán a los usuarios enganchados y volverán por más!

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

FAQ

Una API web es una lista de funcionalidades proporcionadas por el navegador que permite realizar diversas operaciones más allá de las capacidades básicas del JavaScript, como manejar temporizadores con setTimeout.

setTimeout es una función que ejecuta un bloque de código después de un tiempo especificado en milisegundos. Primero espera el tiempo definido y luego se ejecuta el código en la pila de llamadas, siempre y cuando la pila esté vacía.

La API del observador de intersección permite detectar cuándo un elemento específico entra o sale de la zona visible de la pantalla. Se utiliza para realizar acciones como cargar contenido dinámicamente o iniciar animaciones solo cuando el usuario puede ver el elemento.

La Screen Wake Lock API es una funcionalidad que permite evitar que la pantalla del dispositivo se apague automáticamente cuando está inactiva. Es útil en situaciones como la lectura de un libro electrónico o la visualización de una receta en la cocina.

La API de sincronización en segundo plano permite registrar tareas que se ejecutarán cuando el dispositivo vuelva a estar en línea. Esto es útil para manejar acciones como sincronización de datos o envíos de formularios que se realizaron mientras el dispositivo estaba desconectado.

La Broadcast Channel API permite la comunicación entre diferentes partes de una aplicación web que comparten el mismo origen. Esto es útil, por ejemplo, para sincronizar estados o realizar acciones en todas las pestañas abiertas de una aplicación simultáneamente.

Los principales desafíos incluyen la falta de soporte uniforme entre navegadores, las diferencias en la implementación de las APIs y la necesidad de realizar pruebas exhaustivas para asegurar la compatibilidad y el funcionamiento adecuado en todos los entornos de usuario.

Nikola Mitrovic
Nikola Mitrovic
30 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy cubre varias APIs web y sus funcionalidades, incluyendo la API de observador de intersección, la API de bloqueo de pantalla, la API de sincronización en segundo plano, y la API de canal de transmisión. El orador enfatiza la importancia de optimizar el rendimiento y utilizar código estandarizado para reducir el tamaño del paquete de la aplicación. También destacan la necesidad de responsabilidad medioambiental en el desarrollo de JavaScript. La charla aborda el manejo del soporte de la API y la modificación del código para adaptarse a diferentes implementaciones de navegadores.
Available in English: Superpowers of Browser's Web API

1. Introducción a la Web API

Short description:

Hoy vamos a hablar sobre la API web y sus funcionalidades proporcionadas por nuestros navegadores. Antes de eso, repasemos algunos conceptos básicos de JavaScript. Discutiremos el bucle de eventos y cómo funciona setTimeout. setTimeout es una API web proporcionada por el entorno de ejecución. Vamos a explorar algunas APIs menos conocidas y sumergirnos en el mundo de la API web.

Les doy una cálida bienvenida a la conferencia de hoy y a la charla de hoy. Muchas gracias por estar aquí hoy. Hoy vamos a hablar sobre algo llamado API web. Pero antes de hacer eso, necesitamos dar un pequeño paso atrás e ir a algunos conceptos básicos de JavaScript. ¿Alguien puede decirme cuál sería la salida de este código? ¿Alguien? No sean tímidos. 132. Muy bien. ¿Puedo preguntarte cómo sabes eso? Vale, eso es correcto. Eso está genial. Entonces mencionaste que hay un bucle de eventos, ¿verdad? Pero antes de que setTimeout vaya al bucle de eventos, tenemos un paso intermedio. Vamos a visualizar este ejemplo un poco. Tenemos la primera llamada, ¿verdad? Que es sincrónica. Llegamos a la pila de llamadas y se ejecuta inmediatamente. Luego tenemos una segunda llamada que es asíncrona que necesita ir a algún lugar y esperar el número de milisegundos que pusimos. Y luego va al bucle de eventos, ¿verdad? Y luego tenemos una tercera llamada que se ejecuta, de nuevo. El bucle de eventos verifica si la pila de llamadas está vacía y luego esa devolución de llamada en el setTimeout se empuja a la pila de llamadas y se ejecuta entonces. Pero la pregunta es ¿dónde? ¿Dónde espera setTimeout ese número de milisegundos que pusimos? Así que cuando estábamos anunciando la conferencia, algunos de los oradores decían que una de las mejores cualidades que podemos tener como ingenieros es ser curiosos. Así que si eres tan curioso como nosotros, probablemente irías a Google y buscarías esto. Y el primer enlace que podríamos tener es este setTimeout de la documentación de MDN. Si hacemos clic en eso, podemos ver la especificación sobre la función setTimeout y podemos aprender todo sobre ella. Pero podemos ver que está bajo la pestaña llamada APIs web. Si hacemos clic en eso, podemos ver que en realidad setTimeout es una funcionalidad proporcionada por el runtime y no por JavaScript per se, lo que significa que el entorno en el que ejecutamos nuestro JavaScript nos está proporcionando esta funcionalidad. Y como podemos ver, hay muchas funcionalidades proporcionadas por nuestros navegadores. Probablemente reconocerás la mayoría de estas, como la API DOM o la API Fetch o el almacenamiento local, el almacenamiento de sesión, los trabajadores de servicio. Así que probablemente has usado muchas de estas APIs. Pero estaba explorando esta lista, y me preguntaba, ¿cuáles son algunas de las no tan conocidas, exóticas, digamos, APIs que podríamos usar pero que no estamos usando en nuestro trabajo diario? Así que básicamente eso es lo que estamos tratando de explorar hoy. Así que la respuesta a esta pregunta es la API web. setTimeout es una API web. Y ya hemos visto que básicamente la API web es como una gran lista de funcionalidades proporcionadas por nuestros navegadores. Voy a presentar rápidamente

2. Introducción a la API del Observador de Intersección

Short description:

Cuando estaba en la escuela secundaria, siempre quise estudiar psicología. Ahora trabajo como líder de desarrollo, enseñando a las personas cómo lidiar con el estrés, comunicarse con los clientes y hacer presentaciones técnicas. Hoy, compartiré mis superpoderes de las APIs web. Comencemos con un ejemplo utilizando la API del observador de intersección para determinar si un elemento es visible en una página. Podemos usar esto en nuestros proyectos y presentaciones de la vida real.

yo mismo. Cuando estaba en la escuela secundaria, siempre quise estudiar psicología. Ahora trabajo en mi trabajo soñado como líder de desarrollo, donde enseño a las personas cómo lidiar con el estrés, cómo comunicarse con un cliente, cómo hacer presentaciones técnicas, obviamente, y cosas así. Y por supuesto soy ingeniero de software en Vega IT. Mi nombre es Nikola Mitrovic. Estos son mis superpoderes de las APIs web para ustedes hoy. Bien. Vamos a nuestro primer ejemplo de hoy. Digamos que tenemos una página como esta, que es como una página vacía y solo tiene un fondo. Pero una vez que desplazamos, empezamos a observar algo en la esquina inferior izquierda. Es un pequeño astronauta, y una vez que ese astronauta es completamente visible, dice, hola mundo. Desplazamos un poco hacia arriba, y de nuevo, el mensaje desaparece. Desplazamos un poco hacia abajo, y el astronauta dice de nuevo, hola mundo. Entonces, ¿cómo logramos hacer esto? Hay una API muy interesante llamada API del observador de intersección que básicamente determina si el elemento es visible en una página o no. Si nosotros construiríamos un hook en React para esto, probablemente lo llamaríamos algo como use visible, y se vería algo así. Pasaríamos una referencia de un elemento que estamos tratando de observar. En nuestro caso, era el icono del astronauta. Y hay algunas opciones, opciones de configuración, que podríamos proporcionar al observador de intersección. Una de esas opciones es el elemento raíz. Entonces, si pasamos null, observamos la visibilidad de un elemento comparando con todo el documento. Así que podemos observar la visibilidad comparando con algún otro elemento, como un elemento interno o un contenedor interno o algo así. Podríamos poner un margen raíz alrededor de eso. Entonces, si queremos capturar esa intersección un poco antes, y hay un cierto umbral, así que queremos un 100% de visibilidad en este caso, pero podríamos modificar eso. Tendríamos un estado como es visible, ¿verdad? Y luego instanciamos el observador de intersección. En la devolución de llamada, podríamos ver que hay un objeto de entrada. Y en ese objeto de entrada, hay una propiedad llamada is intersensing. Una vez que hacemos eso, podemos establecer nuestro estado y lo único que queda por hacer es observar ese elemento. Y prácticamente eso es todo. Y devolvemos ese estado. Por supuesto, el ejemplo que mostré con el astronauta era lindo o algo así. Pero probablemente te estás preguntando cómo podemos usarlo en nuestros proyectos reales en nuestras presentaciones reales.

QnA

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

No resuelvas problemas, elimínalos
React Advanced Conference 2021React Advanced Conference 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
El Epic Stack
React Summit US 2023React Summit US 2023
21 min
El Epic Stack
Top Content
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Luchando contra la Deuda Técnica con la Refactorización Continua
React Day Berlin 2022React Day Berlin 2022
29 min
Luchando contra la Deuda Técnica con la Refactorización Continua
Top Content
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.
Programación AHA
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
Programación AHA
Top Content
The Talk discusses the concept of AHA programming, which emphasizes thoughtful abstractions. It presents a live-coded example of the life-cycle of an abstraction and demonstrates how to fix bugs and enhance abstractions. The importance of avoiding complex abstractions and the value of duplication over the wrong abstraction are highlighted. The Talk also provides insights on building the right abstractions and offers resources for further learning.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.