Observer API

[00:00:00]
>> Erik: So, the next section is the Observer API. So, the Observer API is interesting because this API was born from the pain of engineers. Because engineers had to create some very hacky solutions to common problems. So that's why the spec developers they they saw this pain and implemented the Observer API.

[00:00:27]
An Observer API is very different comparing to traditional vent-based functions, and we're gonna explore why. So the Observer API has three main types. The first one is intersection and intersection observer is heavily used in the virtualization pattern or in the lazy components when you need to render the component, when the viewport reaches certain element.

[00:00:51]
Or we can also use it for analytics to see what are the parts of websites that are the most visible to the user. And we can also build some dynamic UI elements. So the MutationObserver is very useful for building text editors because it allows us to track the changes in the subtree in a very performant way.

[00:01:12]
It's also heavily used in drawing tools. The Resize Observer helps us to track the resize of the elements, and it's heavily used in adaptive design charting tools. Where you have, for instance, a trading app and you have ten different charts, and the resize observer can be used there to update their toolbar as you resize the specific element.

[00:01:37]
And it's also heavily used in drawing tools. So let starts start with the intersection observer. So if we look at how we track the intersection before in vanilla JavaScript, then you would query two elements, A and B. And then you would set up the interval, for instance, 15 milliseconds, and then you would calculate the coordinates and try to see if these two elements are intersecting.

[00:02:05]
So the issue of that is, imagine that you have multiple intersection observers set up on the page. This would lead to performance degradation because our callback queue will basically work only for the observers. So that's why the intersection observer was created. The idea of intersection observer is to track the intersection with the target element.

[00:02:30]
So the first important property is the target. So basically the element that we're tracking. So the single observer can track multiple elements on the page, so the observer itself is very reusable. Then we can also set up the root container that we are tracking intersection against. So by default it's a viewport, but you can also tell the observer a specific container that you're interested in.

[00:02:59]
So one additional property is the threshold. It's basically the ratio, how much the element should be intersected before we fire the asynchronous callback. And also, the callback is the basically asynchronous function, and we implement this function as the as developers. So the difference with this observer is. The intersection event is tracked on the native level instead of the event level.

[00:03:25]
This means that it has much better performance. On average, intersection observers perform 50 times faster than the vanilla approach. That's why it's pretty safe to use it in the production apps. So the API of Intersection Observer is very simple. To create the Intersection Observer, we just need to use its constructor, its constructor accepts two parameters.

[00:03:53]
The first one is the callback and the second one is the configuration object. The configuration object has two main properties, which is one root allows us to select the container that we're tracking intersection against. The threshold, basically the ratio of intersection. And the callback accepts two parameters. One is entries, which is the array of entries that they are currently intersecting.

[00:04:21]
And the callback is triggered in two cases. The first one when the target element intersects and the second one when the intersection is stopped. That's why we have the special property called isIntersecting to tell us if the entry is intersecting. We have the array instead of having a single element in the callback, we actually have an array because we may have multiple entries, being intersected in a single event.

[00:04:53]
And then to observe the element, we need to call the observe function and provide the target element.