Superpoderes de la API Web del Navegador

Rate this content
Bookmark
Project website

Cuando escribimos código para la Web, hay muchas capacidades que nuestros navegadores ofrecen de manera predeterminada. 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) 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 conectarse con los clientes.

Así que si eres el tipo de ingeniero que quiere estar a la vanguardia en el desarrollo web, aprende cómo Intersection Observer, Background Sync API, Screen Wake Lock API (y muchas más) pueden ayudarte a crear mejores aplicaciones web que mantendrán a los usuarios comprometidos y volverán por más!

Nikola Mitrovic
Nikola Mitrovic
25 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy cubre la API Web, incluyendo APIs exóticas y no comúnmente utilizadas que pueden mejorar las aplicaciones web. La API de IntersectionObserver permite la carga perezosa de imágenes y listas de desplazamiento infinito. La API de Screen Wake Lock evita que los dispositivos se bloqueen, asegurando un uso ininterrumpido. La API de Wake Lock es útil para varios escenarios, pero el soporte de navegador y dispositivo varía. Las APIs de Background Sync y Broadcast Channel permiten la funcionalidad fuera de línea y la comunicación entre contextos. Por último, se destaca el impacto del código en el planeta, enfatizando la necesidad de un desarrollo web más eficiente.

Available in English: Superpowers of Browser's Web API

1. Introducción a la Web API

Short description:

La charla de hoy cubrirá la Web API, que es una colección de interfaces incorporadas que permiten a los desarrolladores interactuar con las páginas web y proporcionar funcionalidades interesantes. La naturaleza de un solo hilo de JavaScript y el bucle de eventos juegan un papel en cómo se comporta setTimeout. Las WebAPIs, proporcionadas por los navegadores, ofrecen una amplia gama de APIs e interfaces para el desarrollo web. Vamos a explorar algunas APIs exóticas y no comúnmente utilizadas que pueden dar a nuestras aplicaciones web superpoderes. Soy Nikola Mitrović, y estos son mis aspectos destacados de las Web APIs para hoy.

¡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.

2. Uso de la IntersectionObserverAPI

Short description:

La IntersectionObserverAPI es una API que determina si un elemento es visible en una página. En React, podemos crear un hook llamado useVisible para observar elementos. El hook acepta la referencia del objeto y opciones de configuración como la raíz y el umbral. Al usar esta API, podemos cargar imágenes de manera perezosa, crear listas de desplazamiento infinito y diferir animaciones. Es importante considerar el soporte del navegador, pero esta API es totalmente compatible con los principales proveedores.

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.

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

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
AHA Programming
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

Workshops on related topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)