Qwik Framework Deep-Dive Full Course with Misko Hevery (The Creator of Angular & now Qwik)
Vložit
- čas přidán 16. 07. 2024
- This is a deep dive on Qwik as a follow up to our intro to Qwik course found here: frontendmasters.com/courses/q...
0:00 - Resumability Framework Paradigm - Misko explains how Qwik differs from other frameworks. The CAP Theorem is explained in the context of frontend development.
7:39 - Lazy Loading in React with Suspense - Misko demonstrates lazy loading strategies in React. While lazy loading is possible, framework and any dependencies up the component will need to be executed.
25:06 - Streaming HTML with Qwik - Misko demonstrates streaming HTMLwith Qwik. The server begins sending the HTML payload. Any asynchronous request block until they are resolved. When they are resolved, the payload continues streaming to the client.
36:33 - Lazy Executing JS with Resumability - Misko continues to demonstrate Qwik's ability to execute JavaScript lazily. Polymorphic functions can be serialized and executed on-demand based on the application's state.
1:04:03 - Signals - Misko demonstrates signals in Qwik. Signals remove the need for techniques like memoization because, once a value changes, only the component using that value needs to re-render.
1:15:52 - Lazy Executing JS Q&A - Misko answers questions about how much JavaScript is required on the client to lazily execute code in different scenarios. Questions about Qwik developer tools are also answered in this lesson.
1:26:07 - Debugging with Qwik Q&A - Misko answers questions about the debugging experience in Qwik.
1:36:22 - Event Behavior - Misko explores event behavior with resumability and the effect HTML streams has on page interactivity.
1:58:24 - Containers - Misko introduces containers and demonstrates how container communication occurs through subscriptions to custom events.
2:29:32 - Prefetching with the ServiceWorker - Misko explains how the ServiceWorker prefetches code bundles. Currently, related bundles are listed in the package.json file. In later versions of Qwik, a service will be available to automate this process.
2:37:09 - Segment
2:38:29 - Running React Code in Qwik - Misko demonstrates how to leverage the large React ecosystem of UI components. Qwik allows React components to be imported and run within Qwik applications.
2:53:34 - Builder - Misko demonstrates Builder, which is a CMS system editing tool for Qwik applications.
3:04:56 - Q&A
thought solid is good but ooo man qwik
Great talk Misko and congrats to the whole team for the tremendous work!
I'm sure the whole web space will follow suit sooner or later, thanks for paving the way!
keep this open for years to come.
I sill remember Misko's AngularJS course on frontendmasters, such a long journey!
great talk ❤
Great talk.
I love Qwik :)
Not sure how third party libraries like highcharts or google ads gpt will work
Can you make a PWA with Qwik ?
Because of the dependence on the server to get JS, my guess is no. Qwik's goal is to only load the JS that's needed at a given moment, whereas PWA's have a goal of being able to run fully client side, and to do that all the JS needs to be loaded onto the client. These goals seems antithetical, so I don't believe Qwik can be used for a PWA without heavily fighting against the framework: I don't know much about Qwik though so I might be wrong.
Well I guess if you go full SSG, that might be possible, though I didn't try.
If that the downloading the initial bundle file which is relatively huge and so it takes time make it interactive, then why dont you use service workers to download the files and make the rendering as early as possible. Google came up with a nice package called workbox where you can even cache the network requests. It pre reaches the file and store it in the client
Ofcourse a lot of things involved, like computation cost, network latency, time taken for interactivity etc. but my point is , with the help of service worker you can pre download your assets and put it a cache that might require to be available in coming pages. After that there is no round trip to get assets including JS. In My application , i have done this, the amount of file transferred with 2 pages , login and dashboard was almost 7.6 MB then i cut down into 339kB
Yes right, service worker cannot speed up the download, but it will start downloading it when you just landed the first page in a diff thread. So only thing is, you make your landing page as tiny as possible.
@@ahammadalipk I wonder why you ask after watch 3 hour lenght video. are u watching till finish?
@@ahammadalipk Downloading the static assets in a different thread doesn't shorten the TTI. What's your point?
And what do you mean by "landing page"? Modern SPA serves an index.html that's basically blank. Isn't that "small" enough? That's not the point...
Service workers can be useful in building PWAs, caching data, and executing heavy computing tasks in the background without blocking the UI thread. But none of these have anything to do with downloading and parsing and executing fewer stuff on the *first* visit, hence not improving TTI in those aspects.