Deferrable Views

[00:00:00]
>> In Angular's history, there have been a few moments where we've done things that has led the industry and set patterns that will be used by other teams and other frameworks because they were just good ideas, right? We had that before. One of the first things was our two-way data binding in the very beginning when Angular JSS.

[00:00:17]
It was incredible when you saw input field, and then the data changing on the screen, and there was only one line of code. Why was it so incredible? Because at that time, we all could only imagine all the lines of code that it would take with jQuery, and everything you had to do just to get that to work.

[00:00:35]
And we came out like, here, ngModel, and just walked away. And then it was like, whoa, this is amazing, right? And so this with Deferrable Views is another one of those moments that I think all frameworks are just gonna adopt because of what this gets to do. This is a way for us to do lazy loading, okay?

[00:00:56]
Now, lazy loading is a way to keep your initial bundle smaller, meaning what gets shipped to the clients, that size matters, because you have clients that can be on maybe a device that has low bandwidth, right? You might be in a rural area where you have an iPhone, but you got no signal, right?

[00:01:14]
Or you're like using satellite, there are all kinds of different bandwidth restrictions or constraints that you need to have smaller bundles for. Well, lazy loading helps you do that. Now, when you ever done lazy loading before, you may have done it with some like fancy configuration at your router level, where you take parts of your application and then you say don't ship this part, don't ship this route.

[00:01:40]
What if I told you that with Deferrable Views you can take parts of your component, the template and say, don't ship this line, don't ship this part of the component until something meaningful happens. And what if I told you do all that work in the template? Well, I wanna say I said it was special.

[00:01:59]
Let me show you what I mean. Check out this template. Okay, this is a template. I want to load the recommended movies component only if someone interacts with the trigger. Check this out. So, you use the @defer syntax. So this is saying defer the loading of whatever's in my curly braces, defer that loading until the interaction happens.

[00:02:30]
Once my interaction says trigger, what does that trigger? Okay, now we're really cooking. Because this trigger is what's called a template variable in Angular, so you can just like, say hey, I wanna reference to this button. Okay hash tag and give it a name and then you get a reference to the element.

[00:02:46]
It works on any element. There's just so you can do an Angular. I don't know, pretty cool. All right, so if someone interacts with the trigger, then what happens? The recommended movies load. When I say load, I don't mean it appears on the screen. I mean the request for the data for the actual packets happens cuz it is not shipped with your code, you see.

[00:03:12]
I know, Ijust stay with me, I know, friends at home, I know some of y'all just have to wear a hat so your brain doesn't write blogs like my god. Okay, just stick with me. When I'm waiting for it to load, because it has to make the HTTP request again, right for that code, I can set a loading screen, whatever I want it to be, whatever I want this to be.

[00:03:36]
Any HTML, any component. Something goes wrong, I have an error that I can show as well. And while I'm loading it, while it is in flight, I can also show something. This is all in a template. There is no special back end coding. There is nothing fancy that I've done.

[00:03:55]
This is all in its simple level, but we're gonna demonstrate this, don't you worry. Because some of you are like, man, that seems good, Mark, but what if I wanted to do custom things. I wanna make my own triggers. Fine, when the count or some arbitrary expression that can be defined as truthy or falsy, right, happens, load it then.

[00:04:17]
So that means that count came from where? That's from my application class. So that means it's programmatic at that point, that's what cooking. We are, [SOUND] I smell so good, plug it.
>> [LAUGH]
>> [LAUGH] So there are a whole bunch of triggers. When the browser sends the idle message, that's the thing that browser can do.

[00:04:36]
I can load some components then or I can do it immediately, right, once the other stuff is rendered, I'm sorry. Once this thing gets rendered on the screen, cuz you know how browsers render, right? Once it hits this one, okay, fine then start the fetching, but don't fetch it before that, okay?

[00:04:52]
Wait some time. Maybe I know that our service at work is a little slow because it's like a legacy service written in COBOL and it takes a little bit time, I don't wanna call it yet. Fine, give some time, say one minute, two seconds, whatever, puts time in there.

[00:05:08]
Or maybe I don't want to happen until you scroll the page and then something enters the viewport. Then I'll load cuz they never scroll down, why would I load the component? Why load 150 comments if they're never gonna look at it? [SOUND] I know, I know, or that you saw the interaction like that's like a click, right?

[00:05:28]
You can do that. Or let's say you hover over area of your screen that you can define. You can go even further. There's a difference between lazy loading and prefetching and displaying. So, lazy load, you can just do this whole thing where you're like, all right, when it's time to load it, load it, then display.

[00:05:47]
Or what you can do is say, you know what, start getting it, but I'm not ready for you to show it yet. But start getting it at my condition, whatever my condition is. So then I can say, load on interaction or if they haven't interacted yet, but the browser has been done with everything else, start prefetching the code.

[00:06:11]
Get started, get a head start or a custom trigger. Okay, this one will do, cuz I think you have to see it to believe it because what I'm describing is kinda wait, what, I kinda get it, but, Mark, what are you talking about? Let me show you. So we're gonna skip to 13.

[00:06:28]
Bar's closing down, all right. So you can come with 13 with me if you want, but I'm just gonna do this. So I'm gonna run this one. Okay, all right. All right, all right, all right, all right. Deferable Views, all right, so what's the task in here? We got some tasks.

[00:06:51]
We're just gonna add a defer block and not just put it in here. See, this was meant to be playful. So you just experiment this on your own time, the code is there. But I want you to just try stuff out. We'll do a couple of these, and then we'll start our march toward the end, man.

[00:07:07]
Look at this page. This looks amazing, was a whole bunch of, this came from the Internet, right, meaning like I made HTTP requests, just so you can see it. Let's do the network. Wanna reload this page? Let's close that out, and then reload, all right. I didn't reload.

[00:07:25]
That's why, I get that word chucking down like what? See, posts came from the Internet so that's not like local. So this page, depending on the traffic to the site, could be super slow, right, to load a bunch of posts can be super slow. What can we do?

[00:07:40]
We wanna defer the loading until we're ready to do it. And the way I wanna do it is when you interact with this button, then I wanna load it. So let's do that. All right, so let's get cooking. So I'm gonna go into app.component.ts. Okay, now, it's a lot of work to set this up cuz I wanna dynamically load this code.

[00:08:02]
Not defer the loading of the call of saying I only wanna ship the app post code. I only want it to be shipped to the browser until I request it. Okay, let's see if I can do it. Oh,Mark, do we get enough time for this? [SOUND] so much, I don't know.

[00:08:19]
Let me just try, I'm so stressed, it's so much to write. Man, what's going on, does that thing, okay I need the trigger. I need a trigger. Okay, I'm done.
>> [LAUGH]
>> That's the whole thing. Now, that's a pretty advanced scenario that I described to you. Let me show you how it works.

[00:08:47]
Okay, so this is everything that came, in a couple of chunks they came, platform browser. We got, I don't see any data, wait, it was called post. No data for posts. Now, check this out. So I'm gonna clear this, not refresh, clear it. I'm gonna click load post.

[00:09:07]
Look at the order of operation. Look at the order of operation. First, the chunk of code came. Okay? Then the library that Angular needed to make our code work, then what happened third? Data requests have been third. So that's evidence to you that we did not ship this code, right?

[00:09:29]
It did not go to the initial bundle browser bundle, which is really, really special. So here's our data, just proof. Okay, cool. Here's our chunk, wait a minute. This is like the the code that gets written by our compiler, as it compiles it so it can be optimized.

[00:09:49]
So it won't look identical, but you can see it's our post component. You see, I'm not lying about that, right? [LAUGH] There's our fetch call to go get our data. So now, that's why I said this is early on, cuz I know that optimizations are kinda tricky, cuz people are really worried about like pre-optimizing.

[00:10:09]
This is really pre-optimizing. This is just making your app better, right? You just started to defer on there, it didn't cost you anything. I didn't set up any configuration. I knew nothing. I just typed defer. And I think this is a really good idea, and I do think I think that we'll see even more adoption of this pattern where you can just block out parts of your application, just choose any part you want, and just start wrapping it in defer, just start having a good old time.

[00:10:32]
What questions can I answer about lazy loading with defer?
>> On an error, can you re-trigger it?
>> Good question. We don't have re-trigger implemented yet, but that is on our list. Yes, so question is about what happens if this messes up, an error is thrown? Then what do you do?

[00:10:55]
We, right now, we can only display something, but we don't have like a retry yet, but that's something that's on our list. Yeah, good question. Any questions from the chat?
>> Can prototype pollution happen when lazy loading?
>> Prototype pollution, it depends on your code for prototype pollution.

[00:11:16]
That depends on your code. Like if you're writing code, that pollutes the prototype, literally, like you're editing is directing us to the window.object prototype, then that could happen, but I don't see it happening just with lazy loading. No, cuz the same rules apply, the same scoping and everything still applies.

[00:11:31]
We're just chunking stuff up for you and sending it back to you.
>> Is defer something like a promise?
>> Good question. Is defer something like a promise? No, because with defer, so what the problem is you get directly involved. And then you want to like respond to the promise, right?

[00:11:50]
You do like that then or your async away. With defer, just at the template level, where you're just saying don't load this template. And so one of these conditions happen. Now, the default condition is the browser idle state. Meaning that all the work on the main thread has been done.

[00:12:05]
And then I'm like, okay, then we could like defer on low, but I'm doing on interaction which is like on demand like click, then do something, right. And there are always other triggers that you can do. Yeah, really, good question.