Superpowers of Browser's Web API

Rate this content
Bookmark

When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code.
In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀
All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers.
So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more! 

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

Watch video on a separate page

FAQ

A web API refers to a list of functionalities provided by the browser environment to extend the capabilities of web applications beyond what is possible with just JavaScript. Examples include the DOM API, Fetch API, local storage, session storage, and service workers.

setTimeout is a web API that delays a function's execution until after a specified number of milliseconds. It first goes into a waiting phase where it waits for the specified timeout and then moves to the event loop. The event loop checks if the call stack is empty and then pushes the callback from setTimeout onto the call stack to be executed.

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. It's useful for tasks like lazy loading images or triggering animations only when content is visible on the screen.

The Screen Wake Lock API prevents the device screen from turning off by acquiring a wake lock. This is particularly useful in scenarios where continuous screen visibility is necessary, such as reading an eBook or displaying navigation maps.

The Background Sync API allows web applications to defer actions or tasks until a stable internet connection is available, improving the user experience in offline scenarios. This is useful for tasks such as posting messages or syncing data across devices once connectivity is restored.

Web APIs are standardized by discussions and agreements among browser vendors and other stakeholders to ensure consistency and compatibility across different platforms. The process involves defining the API at the interface level, ensuring it meets agreed-upon standards set by organizations such as the W3C.

When using web APIs, developers need to consider the level of support across different browsers. Tools like the MDN documentation and Can I Use provide information on which APIs are supported by different browsers and versions, allowing developers to implement fallbacks or polyfills when necessary.

Nikola Mitrovic
Nikola Mitrovic
30 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk covers various web APIs and their functionalities, including the intersection observer API, screen wake lock API, background sync API, and broadcast channel API. The speaker emphasizes the importance of optimizing performance and using standardized code to reduce application bundle size. They also highlight the need for environmental responsibility in JavaScript development. The Talk addresses handling API support and modifying code to suit different browser implementations.

1. Introduction to Web API

Short description:

Today we're going to talk about web API and its functionalities provided by our browsers. Before that, let's go over some JavaScript basics. We'll discuss the event loop and how setTimeout works. setTimeout is a web API provided by the runtime environment. Let's explore some lesser-known APIs and dive into the world of web API.

I wish you a warm welcome to today's conference and today's talk. Thank you so much for being here today. Today we're going to talk about something called web API. But before we do that, we need to take a small step back and go to some JavaScript basics.

Can anybody tell me what the output of this code would be? Anybody? Don't be shy. 132. Okay, great. May I ask you how do you know that? Okay, that's correct. That's cool.

So you mentioned there's an event loop, right? But before setTimeout goes to the event loop, we have one intermediate step. Let's visualize this example a bit. We have the first call, right? Which is synchronous. We get that to the call stack and it gets immediately executed. Then we have a second call which is async which needs to go around somewhere and wait for the number of milliseconds that we put. And then it goes to the event loop, right? And then we have a third call which gets, again, executed. Event loop checks if the call stack is empty and then that callback in the setTimeout gets pushed to the call stack and gets executed then. But the question is where? Where does setTimeout wait for that number of milliseconds that we put?

So when we were announcing the conference, some of the speakers were telling that one of the best qualities that we may have as engineers is to be curious. So if you're curious as we are, you would probably go and Google this. And the first link that we might have is this setTimeout from MDN documentation. If we click that, we can see specification about setTimeout function and we can learn all about it. But we can see that it's under the tab called web APIs. If we click that, we can see that actually setTimeout is functionality provided by runtime and not by JavaScript per se, meaning the environment that we execute our JavaScript in is providing us with this functionality. And as we can see, there are a lot of functionalities provided by our browsers. You might recognize most of these, like DOM API or Fetch API or local storage, session storage, service workers. So probably you've used a lot of these APIs. But I was wondering through this list, and I was wondering, what are some of the not so well-known exotic, let's say, APIs that we might use but we are not using in our everyday work? So basically that's what we are trying to explore today. So the answer to this question is web API. setTimeout is a web API. And we've already seen that basically web API is like a huge list of functionalities provided by our browsers. I'm going to quickly introduce myself.

2. Introduction to Intersection Observer API

Short description:

When I was in high school, I always wanted to study psychology. Now I work as a development lead, teaching people how to deal with stress, communicate with clients, and do technical presentations. Today, I'll share my super powers of web APIs. Let's start with an example using the intersection observer API to determine if an element is visible on a page. We can use this in our real-life projects and presentations.

When I was in high school, I always wanted to study psychology. Now I work my dream job as a development lead, where I teach people how to deal with stress, how to communicate with a client, how to do technical presentations, obviously, and stuff like that. And of course I'm a software engineer at Vega IT. My name is Nikola Mitrovic. These are my super powers of web APIs for you for today.

Okay. We go to our first example for today. Let's say we have a page like this, which is like an empty page and it only has a background. But once we scroll, we start observing something in the bottom left corner. It's a small astronaut, and once that astronaut is fully visible, he says, hello world. We scroll a bit up, and again, the message goes away. We scroll a bit down, and the astronaut says again, hello world. So how did we manage to do this? There is a very cool API called intersection observer API, which basically figures if the element is visible on a page or not.

If we would build a hook in React for this, we would probably call it something like use visible, and it would look something like this. We would pass a reference of an element that we're trying to observe. In our case, it was the astronaut icon. And there are some options, configuration options, that we might provide to the intersection observer. One of those options is root element. So if we pass null, we observe the visibility of an element comparing to the whole document. So we can observe visibility comparing to some other element, like inner element or inner container or something like that. We could put root margin around that. So if we want to catch that intersection a little bit earlier, and there is a certain threshold, so we want 100% of visibility in this case, but we might modify that. We would have a state like is visible, right? And then we instantiate intersection observer. In the callback, we might see that there is an entry object. And on that entry object, there is a property called is intersensing. Once we do that, we can set our state and what's only left to be done is to observe that element. And pretty much that's it. And we return that state. Of course, the example that I showed with astronaut was cute or whatnot. But you're probably wondering how can we use in our real life projects in our real life presentations.

QnA