Superpowers of Browser's Web API
From Author:
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 Summit US 2023, check out the latest edition of this React Conference.
FAQ
A Web API is a collection of built-in interfaces that allow developers to interact with web pages and provide various functionalities. These APIs are provided by runtime environments, such as browsers, and include commonly used APIs like WebRTC, session storage, and DOM API.
JavaScript uses a single-threaded model with a call stack and an event loop to handle asynchronous operations. Functions like setTimeout are placed in a queue and executed once the call stack is empty, ensuring they do not block the main execution thread.
The IntersectionObserver API allows developers to detect when an element is visible within a specified viewport or container. It can be used for functionalities like lazy loading images, creating infinite scroll lists, and deferring animations to save computational power.
The Screen Wake Lock API prevents a device's screen from locking based on user preferences. This is useful for activities like reading an e-book, giving a presentation, or following a recipe. It ensures that the screen remains active, even if the device's default behavior is to turn off the screen after a period of inactivity.
The Background Sync API allows tasks to be deferred and run in the background when the user is offline. For example, if a network request fails due to lack of connectivity, it can be retried once the user is back online. This improves the offline user experience by ensuring tasks are eventually completed.
The Broadcast Channel API facilitates communication between different contexts, such as multiple tabs, windows, or iframes on the same origin. It allows for data exchange and coordination across these contexts, such as logging out a user from all tabs when they log out in one.
Different Web APIs have varying levels of support across browsers and devices. Developers need to consider this to ensure their applications work consistently for all users. Some APIs may be fully supported, while others are in the experimental phase or have limited support on certain devices.
Some lesser-known Web APIs include the Beacon API for sending requests without caring about responses, the Web Speech API for speech recognition, the Page Visibility API for tracking document visibility, the Network Information API for network system information, and the Web Share API for sharing files between devices.
Standardized code ensures that functionalities work consistently across different browsers and environments. It provides a single source of truth, reducing dependency on third-party libraries and improving performance. Standardized code is crucial in a constantly evolving field like web development.
Web developers can use tools like the Website Carbon Calculator to measure and reduce the carbon footprint of their websites. By optimizing code, reducing data transfers, and using efficient hosting solutions, developers can contribute to lower energy consumption and a greener internet.
Video Transcription
1. Introduction to Web API
Today's talk will cover Web API, which is a collection of built-in interfaces that allow developers to interact with web pages and provide fancy functionality. JavaScript's single-threaded nature and the event loop play a role in how setTimeout behaves. WebAPIs, provided by browsers, offer a wide range of APIs and interfaces for web development. Let's explore some exotic and not commonly used APIs that can give our web applications superpowers. I'm Nikola Mitrović, and these are my Web APIs highlights for today.
Hello React Summit US! I wish you a warm welcome to today's talk. Today we're going to talk about something called Web API. But before we do that, we will need to take a small step back and go through some JavaScript basics.
If we see this example, and I ask you the question, what the order of the logs would be in the console, probably most of you would say 1, 3, 2. And that is correct. But how do we know that? How do we know how setTimeout behaves?
As we know, JavaScript is a single thread language. Let's visualize this a bit. There is a call stack, we execute the first function which is synchronous, and then we log the 1 as a value immediately. But then the second one is asynchronous, and it needs to go somewhere else, not to block that single thread. And it goes to the queue once the timer is finished. In the meantime, the call stack continues with executing the functions, then event loop checks if the call stack is empty, and pushes back the callback with the value of 2. But the main question is, where does the setTimeOut wait while we continue with the execution of our code?
If we Google this function, the first result we get is this one. So there is MDN documentation where we can see some stuff about setTimeOut function. And here we can see that it's under a tab WebAPIs. If we click that, we can see that basically WebAPIs is a collection, a list of APIs and interfaces which we may use right out of the box when developing web applications. Basically, it's a functionality provided by a runtime environments. In this case, our browsers. And if we scroll a bit, we can see that there are a lot of APIs, a really, really long list of APIs. And here we can maybe observe that there are some quite commonly known and used APIs, like WebRTC, session storage, local storage, file upload API, a DOM API, and so on. But looking through this list, I was wondering, what are the some of the exotic and not so commonly used APIs that we may use which can give us our web application certain superpowers in certain use cases? So basically, we're here to find out that today. And like we established, the answer to this question about set timeout is Web API, which is basically a collection of built-in interfaces that allow developers to interact with our pages and provide some fancy functionality.
I'm going to quickly introduce myself. When I was in high school, I always wanted to study psychology. Now I work my dream job at Wega IT based in Noišac, Serbia, where I work as a development which means that I teach people soft skills, how to communicate with the clients, how to deal with stress, how to do presentations like this, why not, and so on. My name is Nikola Mitrović and these are my Web APIs highlights for you for today. OK, now we go to our first example for today. Let's say we have a page like this and there is nothing there but the background, but once we scroll a bit down we can start observing that there is something in the bottom left corner. It's a small astronaut, which when fully visible says, hello world. Once we scroll a bit up and the astronaut is not fully visible, the message goes away. We scroll again a bit down and again, once the astronaut is fully visible again he says hello world.
2. Using the IntersectionObserverAPI
The IntersectionObserverAPI is an API that determines if an element is visible on a page. In React, we can create a hook called useVisible to observe elements. The hook accepts the reference of the object and configuration options like the root and threshold. By using this API, we can lazy load images, create infinite scroll lists, and defer animations. It's important to consider browser support, but this API is fully supported by major vendors.
So how did we manage to do this? There is an API called IntersectionObserverAPI which basically figures out 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 useVisible and that hook would accept two parameters.
It would accept the reference of the object that we are trying to observe and we have certain configuration options. One of those options is root. If we pass null, then we assume that we are observing the element according to the whole document. Basically it means we can have smaller containers with smaller scrollable areas and we can observe some elements there, but if we pass null we look according to the whole document. We can have a margin around that root, so we can catch that intersection a little bit earlier if needed. And we have a certain threshold, meaning that if we pass this value we need 100% of visibility for the element, so we can adjust this accordingly. Then we would have a state called isVisible, and then we instantiate the IntersectionObserver object. In the callback we get the Entry object, which has a property called isIntersecting. This property holds the information about the visibility of an element, and then we can set that to our state. So now what's left to be done is just to call observe method on that reference and return that state. And that would be it.
The example with the astronaut was nice and cute, but you're probably now wondering what are some real-life use cases where we can use this API. We could lazy load images, right? So we load the initial content for the page and everything below the fold, what is not needed initially, we can defer and lazily load. And once we scroll to a certain section, then we start downloading images and other assets. We could create infinite scroll lists. For example, we don't need library for this. We could have a list out of 10 elements. We could have a separator at the end of that list. And once we scroll back and that separator is visible, then we trigger the next request. We could defer animations. So we don't need to run animations if something is not... If the certain element is not visible on that page. And by doing so, we can save some computer power. So we don't need to run some JavaScript if the element is not visible in the viewport. One thing to always consider when using some of these APIs is browser support. If we look at the major vendors, we can see that this API is fully supported. So great news, we can safely use this in all browsers. OK.
Comments