Qwik for Instant-Loading Websites & Apps Qwik Demonstrations
Transcript from the "Qwik Demonstrations" Lesson
>> Let's do a kind of a quick demo of what Qwik is. First of all, this is a site that has many demos on it, but you can think of this site as a cohesive single application, right? So it's a single app that has many, many different sites on it, many different pages on it.
[00:00:16] And the reason I want to point this out is because there are many components on a page. So in this particular case, there is a component that does the header, that does the footer. Let me scroll, there's a footer on the bottom. There's a component that renders these things and you can see all these components in the DOM.
[00:00:33] Every time there's a component, there is a qv. Let me get the font bigger here, how's that? So every time you see a qv in the DOM, that means there's a component in that location. And this is what we mean by the framework serializes sufficient amount of information into the HTML so that you can reason about the application, right?
[00:00:51] So by looking at these comments, the framework knows where the components started. And so we will have to re-render something, it knows, don't go there, that's a separate component, or go here cuz that's the same component. And all this information is present. Now, what's interesting about it, let's go to the Network tab.
[00:01:46] This is for prefetching. This is div that doesn't count. Let's see what else is in here. This is for dev mode error handling, this doesn't count. This is also error handling for, okay, so a bunch of these scripts here are only for dev mode and they're actually not doing anything in, these three scripts would not be in production.
[00:02:48] And it's kinda the magic of it, right? Which is that, let's see, can we show preview? Here we go. The only thing that showed up is the code for incrementing and then the framework itself. And again, this is a dev mode, and so the framework here is huge, I think it's like two megabytes or something.
[00:03:23] If I click on the Alert, the only code that showed up is literally just the alert. The framework looked at that and said, as a developer, you asked me to do an alert. And so the only code I need to ship to the client is just the alert.
[00:03:37] And in this particular case, the framework just basically said, not only do you just need an alert, you don't even need the framework. So when I click Alert, the framework doesn't even show up. The framework only shows up once I hit Increment, and now the items go up.
[00:04:39] The state of the system is serialized in here. The subscriptions over here talk about the reactivity graph, right? So it understands the clicking this button needs to update this particular thing over here. So that's straightforward. Now what I find interesting is that, if I go to the Hacker News, the system looked at it and said, actually, I don't need to serialize anything, right?
[00:05:03] Because, yeah, the data came from some REST API and I had to do data binding to kinda make it show up, etc. But if you think about it, there's nothing that I can do on a client that would cause the data to change, so then why am I sending the data to you, right?
[00:05:19] So this is an example of tree shaking of the data itself. Now if I go to the comments section, notice that the JSON now contains a lot more stuff. This is basically whether or not a particular comment is open or closed. So this is information about the state of the components, whether they're open or closed.
[00:05:35] In this particular case, they're all open. And this looks like a very, very long thread with many, 80 comments, so it's pretty big. But what you don't see anywhere in here is, you don't see the actual text serialize anywhere in here, is just serializing whether or not a particular component is open, right, so I can close this.
[00:05:57] I can click on, I can open it and close it, right? So it behaves the way you would expect. But the data from the server is not in here, it's not included, right?
>> And to clarify the reason why that's the only thing that shows up in the data is because that's the only part that's interactable?
>> That's right, that's right.
>> Got you.
>> Yes, Mark?
>> It's a question around offline, and if you become offline, will you download, or how does that work?
>> Yeah, so that's a super comical question. What happens on a slow network, on a spotty network, if you get through a tunnel, etc.
[00:06:39] So, first of all, this is a dev mode. This is not actually how it works in production, okay? There's lots of other things we do in production. But in production, what you have is, you have a service worker, or let me back up a second. The way to think about is, when you run the application, we break up the application into as many pieces as possible.
[00:06:57] And then as the application is running, we collect information about what bits are actually needed and what actually are not needed. Based on that information, we can create ideal bundles that have just the bits that is required and the bits that are not downloaded, those are not required.
[00:07:13] And that information actually gets produced as part of the build step and is fed to the service worker. And so the service worker starts prefetching all of the code ahead of time so that by the time you enter the tunnel or whatever, you'll have everything available for yourself, right?
[00:07:31] And so once the service worker is done with prefetching all the code, it's no different than any other application, right? The key thing to understand is, or the first order of approximation we should think about is, is not that we are lazy loading everything, is that we are lazy executing everything, right?
[00:08:13] So, it's more about lazy execution, rather than about lazy downloading of code. Lazy downloading of code is just icing on a cake. But there's a service worker that makes sure that you will never get in a situation where you clicking on something means that the code isn't downloaded.
[00:08:52] And I just wanna dispel that it's not how it actually works in production, right? In production, the code is downloaded eagerly. The when is the lazy parsing and execution of that code, right? Yes?
>> So, I mean, if I see the angler where we do the lazy loading end or we just, I mean, create the lazy loading pattern where the bundler will divide the modules.
[00:09:18] So in Qwik, we have to follow any kind of pattern or bundler will do the job automatically dividing the whole application?
>> Yes, so let's see where am I here? The conference app, so, oops. Let's go to the clip, so this is the clock. Is this the clock?
[00:09:40] Yeah, this is the clock demo here. So let's go back to the clock demo. Every time you see a dollar sign in Qwik, this basically tells the system that, I would like you to insert lazy loaded boundary over here. I'm not saying that you should lazy load here, I'm saying that it could be, right?
[00:10:02] Because whether or not the lazy loading boundary is actually ended up with is a thing that happens based on how the users actually use your application. So as they use the application, you collect information about, what actually is needed, what isn't. And based on that, you create ideal bundle sizes and ideal bundle distributions, right?
[00:10:19] But it requires you to be able to do that. And this being able to is done through this dollar sign. So every time you see a dollar sign, think, this could be lazy loaded, right? And so if you go down, you'll see, this could be lazy loaded. The styles could be lazy loaded.
[00:10:34] The client effect can be lazy loaded. The whole component can be lazy loaded, right? And so by including these dollar signs, you're placing lots and lots of places where lazy loading could happen. And the biggest problem with the existing frameworks today is that lazy loading is not something that is easy to do, right?
[00:10:52] It's quite a lot of ceremony to do lazy loading. And again, we're gonna dive into this more tomorrow, right? So by making lazy loading so cheap and so low cost as single character, by the way, it's not like I can forget to type this character here. Because if I do, TypeScripts gonna scream at me and be like, there's no such thing as a component, there is component dollar sign, right?
[00:11:15] And so the TypeScript just kinda forces you down this particular path. So, for example, this click button that says, print a console test, right? This, p here is, clicking here, I'm sorry that's a conference. Sorry, where is that p, yes, it's a console. Here we go, let's do it, refresh again.
[00:11:35] If I click, it prints test, right? That, if you look at the Network tab, literally only downloaded the console.log test. Because, well, it's behind the dollar sign and the framework automatically pulls it out, right? Think about it an existing existing framework, existing framework would be like, well, I have to hydrate the component in order to figure out if there is a click listener.
[00:11:57] Which means I have to download the whole component, I have to execute the whole component. And then I have to find where the listener is, right? And I will create a closure for that listener. And then closure gets attached to the DOM, and then I'm ready to do your stuff, right?
[00:12:10] Whereas here, none of that stuff happened, all that stuff got skipped.