GitLab Feature Walkthroughs, 2 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: GitLab UI Observer component

Description

An overview of the observer component and a few potential use-cases.

A

Okay, so I just want to quickly show off this observer component because it's really hard to document being that it's totally invisible, so basic idea, the observer. It says it's a component that emits two events.

A

You see these down here, one appear which emits when the element appears on the page and then disappear, which emits when the element disappears from the page. Now these only get fired once at the moment it appears and the moment it disappears. It's not like that. It constantly fires these events, so it's not too noisy but too sure that here I've got um there's an observer here somewhere.

A

You can't see it because, as I said, it's invisible, but it's like kind of just here, just under this line and when it's in view it says the observer is in view, and this line goes green, it's just a daft demo. It's not useful at all, but you see when it's not in view there we go. The observer is not in view it's not in view on that line. You see it's not green and then, as soon as it's interview, it's green out of you.

A

So that's basically how the observer works and to kind of show it a little better. We can put in there.

A

Put some eyes in there.

A

So then, the observer is not invisible anymore, which literally, when you can see these eyes. Any part of these I saw this movie a pics all of them eyes in view they're, when you can see them it's in view, and when you can't it's 9 view.

A

Nice table no. Obviously this example is a lot of rubbish, but it kind of shows it off quite well. So two more I'll start with infinite scrolling. I should know that's that were lazy, loaded image. So this is a slightly better example. A more common use case, one lazy loading images, so you can imagine we have an image on a page that has either a placeholder or a really low resolution version of that image across something and then, as soon as that, image becomes visible on the page it'll load in the appropriate image.

A

We've done this all over before it's not new, but what this observer lets us do if I scroll to the yeah, so I can just drop this image inside an observer, I've hooked into disappear here, so I can sure it does. But the only thing you really need to worry about disappear. So as soon as it appears on the page, we fire the appear method which in this case just sets. This dot is in view to true and then for the image URL on this.

A

This image we just say if it is in view, get this gif. If it's not in view, then we load in another image, but you can see how this could be a high resolution one. This could be a low resolution, one or could even be a fallback or whatever it doesn't matter now. This one is a little trickier sure, so it loads this gif when it's in view and it loads a different picture. When it's not in view it's not a few. You can actually see that.

A

So, if we inspect we'll see it change here, so we've got this gift and then soon as it goes out of view, you see it changed and I've got this image. It comes back interview. It changes back now again, you wouldn't want to be swapping it every time it goes out of you, but for this demo it's just an easier way of showing how it all works, and if you don't want to disappear it you just remove this. This disappear event and already listened to the appear.

A

So that's one example. Another good example is infinite scrolling. So this is slightly different for this. One I have a list that just loops through a lot of items, but instead of wrapping the list in the observer I've put at the bottom of the list, this little observer so that every time we reach the bottom of the list, this observer comes into view and we fetch more aims which then pushes it back out of you. So it'll keep fetching as many items as it needs to do until it loads off the page.

A

So it will loading it ten at a time here.

A

This is a fallback, but more on that later, so you see I'm 1 through 10 loaded initially and then as soon as we lauded the page, the observer kicked in, so we've got, I am 11 through 20, but the observer was still on the page, so we got 21, but we keep going and go in and go in and it's infinite. Every now and again, you do see a flash of the observer.

A

You see more, the faster you scroll, but it's a basic idea and if this this'll keep going until we get down to like a thousand I've set the limit too. But you get the general idea: it's infinite scrolling! It's really easy to set up with this observer component now, just in case the observer. It doesn't work, whether that's because the browser doesn't support it or some other weird quirk stops it from working. We have put in this fallback button.

A

So when you click that button, you just call that exact same action to fetch more items so that you know the experience is still there. You could look at the bottom of the list. Click the button, the list click the button doesn't matter. If you don't support the observer or not, so we can actually break the observer by just really quickly scrolling the bottom of the page, so it doesn't actually register there ever appeared and then creepin up on it there. It is so we can say: I will fall back with here.

A

I am 680 and stopped when we get this fetch more items, but you just click it and we fetch my names and then carry on scroll in it carries on with that that observer behavior. So that's a nice way of adding a quick and easy fall back to the the thing if the observer doesn't doesn't particularly work.

A

One last example see if I can get to a thousand and show you there we go so here that was under carry on this is last appeared. ah Now all this does it's just a simple component that says how many seconds ago it's been since it last appeared on the page, so it was 12 seconds ago in this case, if we scroll it off the page and then come back down it resets the timer and that works by.

A

Okay, so we've got the observer, our appear and disappear setup and last appeared second, since appearance and when we appear we clear out any previous intervals, we set a new interval, this Datuk 1000, so every second it ticks and then we trigger that initially and then we say it appeared at they start now, which is just the the current date in time.

A

Then, when we disappear, we just clear that interval, so you can see I, do it console.log tick.

A

Jump across to the console a lot of this one sort of neat scroll. So far, now there we go it's on the page: it's ticking tick, tick, tick and as soon as it disappears off okay scroll phone off as soon as it disappears off the page ticking stops and we bring it back in and the ticking starts up again.

A

So you can see how this is super helpful for like performance things where you know is it's not massively expensive, this saying the vault, but you can see how, if we had hundreds of these on the page like that ticking time ago or thing that we used to have, we can tell them. Okay, when you're on the page keep taking put this as soon as you're off the page.

A

We can't see you, so we don't need you up there anymore, just go asleep and then, when we come back, carry on you know you can do this, for all sorts of things you can do is for event, listeners and things. So when the elements off the page remove the event listeners when it comes back on the page, we add the event listeners and this would be a massive performance improvement for for a few things.

A

So yeah it's a simple component, but it has a lot of a lot of uses. It can be quite powerful if used in the right places and it's amazing for for performance, because we only need to load things or do things or calculate things when something's on the screen- and we can say when you're on the screen, do it when you're off the screen. Don't- and you see it's as simple as that really.