ResizeObserver Exercise

[00:00:00]
>> Evgenii Ray: And again, it's exercise time. We are going to build a simple exercise where when you resize your rectangle, it becomes the circle when the rectangle size is less than 150 pixels. So here now we have four nice circles and if we re resize back, it's again, rectangle.

[00:00:24]
And you need to check out the following branch, 4-resize-observer-start. And we are going to create a resized observer and track all this four elements and fire the code back. So let's get back to the code now.
>> Evgenii Ray: So I'm opening the ResizeObserverBegin branch. And here,
>> Evgenii Ray: We already have all the boxes set up.

[00:00:51]
So I guess what we need to do is, so first let's initiate the observer.
>> Evgenii Ray: And then provide the callback.
>> Evgenii Ray: So we're gonna loop through our entries.
>> Evgenii Ray: Then on an entry, we're gonna access the target element.
>> Evgenii Ray: Then we need the box, so we're gonna use borderBoxSize.

[00:01:45]
And we know that the borderBoxSize is the array of a single element, so we select the box. And now we need to check that the box.blockSize is less than 150 pixels. And the box.inlineSize is also less than 150. Then if it's less than 150, we just need to update the target styles.

[00:02:14]
So we set the style and we set borderRadius equals to 100%. And then we also set target style.border. And let's apply the 4 pixels border instead. And if it's not the case then we just reset the styles again. So we can just copy this over, paste it. And set the unset flag.

[00:02:47]
>> Evgenii Ray: So now our observer is created. Let's, query the book settlements, boxes = document.querySelectorAll, and then provide the class name of the box.
>> Evgenii Ray: And then for each box,
>> Evgenii Ray: We just register the app server. And if we run the browser now, we should see that now it works.

[00:03:20]
So we have our four rectangles that resize, becomes a circle and rectangular again. So the main idea of the resize observer is very useful for the application where you have multiple windows. So for instance, it can be trading app. And the very common use case, you have some charts on your training app.

[00:03:41]
And you need to update the toolbar, how the toolbar looks like for each chart. So you can set up one observer to track all the charts on the page, and then the toolbar will be updated with a single observer. And let's quickly overview the solution. So we basically created the observer, loop through the all entries, and check if the size less than 150 on the target element.

[00:04:05]
We update the styles and then unset them if it's not the case. Then we create all the boxes and register the observer.
>> Speaker 2: So it changes once you hit that 150, but as you keep moving it, if you're staying under that 150, is it still reapplying those styles over and over again?

[00:04:25]
Basically is it-
>> Evgenii Ray: Yeah, so the callback is fired. So you still need to probably debounce your callback to make sure that it's not firing too often, but it will be much more performant than your resize event.
>> Speaker 2: For sure.
>> Evgenii Ray: So observer API is a very performant way for implementing complex patterns.

[00:04:48]
So if you're in your application, you have a legacy way how you implement such things for instance, with intersection user type is set to interval, or with resizer event. You're trying to check the element size, then it's better to replace with Observer API. Observer API already have 99, 98% support of the clients, so for the rest 2% of the clients, you still can do the polyfill that will not be as performant, but at least for 98% of the client, you will deliver a good app experience.

[00:05:23]
>> Speaker 2: Do the inline size and box size values change when text is being written vertically, like in Japanese? Or can you assume that inline is always horizontal and block is always-
>> Evgenii Ray: Yeah, this changes with the settings LTR or RTL, and if you render things from top to bottom, but instead you can change the perspective how you render things.

[00:05:49]
Then the inline size will track the height instead and the other property will track the width. So you need to check the CSS spec exactly when it happens.
>> Speaker 2: One more question, does mutation observer with sub tree true for poor performance if we have 1,000 child nodes?
>> Evgenii Ray: So it might be an issue on the low hardware, but because the mutation observer is actually implemented on a native level, then the performance should be still good.

[00:06:22]
But it's always better to provide the specific configuration what you track. Make sure that you don't track too many things. If you want to track just the character data across the whole tree, then make sure you filter out the attributes changes and the DOM node changes. So this way you can optimize the performance.

[00:06:42]
But of course, if you're trying to track 10,000 elements then even on a native level, you may end up having the issues. The way how you can optimize tracking, for instance, how the markdown editors do that. So when you select specifically client, so instead of tracking the full document child tree, you set up the observer dynamically on this specific line selected by the user.

[00:07:10]
And when the user types, you track only single line of data. And that's how you can optimize the mutation observer.