Wrapping Up

[00:00:00]
>> So, where do you get more stuff? Well, check out our homepage. And by the way, this is a perfect example of lazy loading in action. So, this search button over here, I am gonna intentionally make it small here like that. If you go to Network tab, this search button downloads a single chunk over here, right?

[00:00:22]
And the reason you download a single chunk, this is the actual, no, that's the demo. This is the Qwik website. So, this is the Algolia search. And this is the Algolia search that tells it, make sure that all of these symbols are together in a single thing. This is how this works, right?

[00:00:39]
So, when you go and click on it, this particular thing gets served immediately, right? This this is the time this is two milliseconds. It's kind of hard to see. Yeah, so two milliseconds, right? So, service worker responds within two milliseconds with the code necessary to get the Algolia search up and running.

[00:00:59]
And it's a hit, right? It's a service worker hit because, even if I show up to this page with no cash, the first thing that the system does is starts downloading the chunk because it knows that it is a possible thing that you as a user, I can do this from this location.

[00:01:15]
And so, it gets prefetched. Right, so, this is where you check out stuff. Oops. We have some cool things in here. The thing that I'm most proud of is basically we have these super nice tutorials you can follow along. A lot of things that we talked about are here.

[00:01:39]
Many of these things, so let's talk, we also have examples, [COUGH] and one of them is the clock, which I showed you earlier, which below the fold clock that kinda shows up. And it shows you what's happening. You can actually open this up in a playground, edit the source code to it and play with it.

[00:01:57]
Again, notice that it's posted on a server, right? And when you scroll the clock into view, the JavaScript shows up associated with it and it's resumed on the client, right? To paint the thick, you can edit it. You can see what kind of HTML gets sent across. You can see what's being generated.

[00:02:16]
You can see what symbols how the application got broken down into pieces, so you can see that clog broken up into styles, into the client effect and all of these parts etc. So, this app got broken up into 1 2 3 4 5 pieces. But then in production once it runs really only two of them are needed, right?

[00:02:42]
So, instead of five pieces being downloaded only two of them are actually downloaded. It shows you how the bundles get created. You can choose the bundling strategy which is somewhere under options, you can choose different bundling strategies, and you can see the number of files changes, right? It's configured in a different way.

[00:03:06]
In line is a special strategy for making libraries and you can see what server gets, what the server side gets when the server side rendering happens what the bundle is over there. So, it's kind of a good way to explore of what's going on, how this works. The cool thing is the did optimizer is written in rust, it's transpired using Wrasm into JavaScript, and it's actually running as a service worker in the browser.

[00:03:31]
So, when we are simulating this HTML being generated on the server, it's actually being generated in the service worker. And so, the service worker had to download the rasm optimizer break up the source code, run it to kind of bundle it up execute it on a server, but it's really a service worker, and then produce a response, which is this response right here.

[00:03:56]
And this is what gets sent to the client and then you can go and interact with the app and see what's happening. So, that's a cool way to kind of play with that as well. The only other bit is join us on this call with super active community.

[00:04:11]
Few thousand people, I think about we are seven or eight thousand I think something like that. And a lot of good questions are getting answered, people in the community are getting interested in helping with things like for example vanilla extract was a community contribution. I think Telvin was also community contribution and so on and so forth, Mark.

[00:04:33]
>> Is a question around if I want to use third party react libraries can I do run Qwik add react and then use the razor.
>> Qwik has a bridge to run with other frameworks and currently we have, React is the furthest along. So you can take react apps, react components, and use them in Qwik the most common use cases, people take material UI widget libraries and wrap them in react Qwikify and then run them inside a Qwik.

[00:05:03]
Obviously you won't get all these magical, lazy loading all that stuff for the components, but we do lazy hydrate them. So in a way you get islands architecture kind of for free. We also have the same thing for view, but that's not as far along as the React one.

[00:05:20]
But yeah, you can take React code and that this is used both basically for re-using the open source libraries of react ecosystem, but also as a migration story. The other thing we would like to do is to have kind of a reverse proxy for nexus, so that you can have individual pages inside of your nexus be served by Qwik and another way to kind of try things out and see where you wanna go.

[00:05:45]
Yeah.
>> Are there any GraphQL libraries around Qwik?
>> There's nothing specific to Qwik, but I think most GraphQL libraries should just work inside of it, because they they're not dependent on a rendering, right? So, you should be able to just import GraphQL library and run it. There is one thing to watch out for, one things I've noticed is people love putting things in use client effect.

[00:06:14]
Which is fine, you can do that, but you in a way you are undoing all this hard work of not doing stuff eagerly in the client, so, kind of do it with caution, right? Recognize that, all this work we've done to make sure we lazy load your application by doing use client effect, you're kind of making it eager.

[00:06:32]
So, just the things to consider.
>> So, related to that because I was thinking about the tree shaking of the data. And how you could prevent all that extra not needed data from I traveling down the wire to your client. And it occurred to me that t the major advantage of GraphQL in analog situations could go away as long as you're fetching on the server, you're doing the transform and getting to just what the client actually needs.

[00:07:06]
So, your obviating them the need for GraphQL in a huge number of situations.
>> Yeah, I think that is one thing that's gonna be happening over the next months and years is that people will rediscover different patterns that work better or differently for reasonability pursuit hydration, right? If you have the hydration mental model, then you end up in different places, then, when you have the reasonability mental model, you've been such a good audience, such good questions.

[00:07:34]
This was so entertaining and so much fun. I enjoyed myself.
>> [APPLAUSE]