I always used to wonder why is so much JavaScript loaded on the browser even when there are no interactions on the page.
I have been using Svelte for more than 2 years now, and I really like the way it compiles the code to vanilla JavaScript. But still, it loads some JS. By the way we recently moved away from using Next.JS and started using SvelteKit for our website Prepleaf.
A couple of months ago, I came across Qwik. So yesterday, I decided to give it a try. Qwik seemed precisely the framework I was looking for.
Setting up a new project is very easy. Just run pnpm create qwik@latest and you are good to go.
I have used React for the past 5 years, so I feel right at home with Qwik,
as it also uses JSX for templating. Although there are many new things to learn,
the basic functionalities, like importing a component, and passing props, stay
the same.
src/routes/blogs/a-qwik-experiment/index.mdxexport const TopbarLink = ({(text, href)}: TopbarLinkProps): Not loaded lazylyexport const TopbarLink = component$({(text, href)}: TopbarLinkProps): Lazyly loadedState Management: It has useStore, seems very similar to React.
As it uses vite , developer experience is great. You can start using TailwindCSS, TypeScript, and other tools right away.
Of course you should read in detail on official website, but here are highlights
Delay Execution Delay execution of JavaScript as much as possible. At its simplest, a Qwik application only needs about 1KB of JavaScript to become interactive 🤯.
Resumability & SerializationOne of the major differentiators of Qwik is that it is designed to be resumable and serializable. This means that the execution of the application can be paused and resumed at any point in time. This enables seamless execution from where the server left off, avoiding the need for rebuilding data structures and attaching listeners in the browser.
Now, you might be wondering, what if my network is slow? In that case, it would take some time to load the JavaScript; once it loads, it will only execute it and perform the desired action.
Well, Qwik has a solution for that as well. It loads the JavaScript chunks in the background using a service worker, which doesn't affect the main thread. So, before you click on a link, the JavaScript is already loaded in the background.
The page you are looking at right now is built using Qwik and it's not loading any JavaScript file. It has only added just a bit of JS in one of the script tags to load the required code.
Most important thing to note here is that that the
Total Blocking Time
is 0 ms
Which means that there is no JavaScript blocking the main thread.
As I am using images from github.com and svgporn.com, the Largest Contentful Paint is not very good. I will try to improve it in the future.
I am loving it so far. Will keep you posted on my experience with Qwik.
