Qwik - an HTML first web approach

Meet Qwik, I had never heard of it before, but bumped into it while browsing the web. It instantly sparked my interest by stating that it can deliver an instantly loaded web application, with an HTML-first approach. Another reason to look into it, is that it is created by Misko Hevery, the person who created AngularJS back in 2009.

Every once in a while you bump into a framework or tool, that takes a very different approach than you are used to. So let’s explore Qwik and what it does differently than the usual suspects.

Qwik, what’s so different?

Qwik uses a completely different mental model and philosophy, so it can be hard to grasp at first. But once you get the hang of it, this can be a game changer on how you look at other frameworks.

To find out what makes Qwik different from other frameworks like Angular or React, we need to explore a few concepts first. The most important concept is hydration and SSR (server side rendering), and what Qwik calls “resumability”.

In order to get an Angular application up and running, even with SSR, the server needs to render the HTML and make sure the client can render it. But to do that, it needs to load the complete framework and all components at the first load. Then it usually also needs a bunch of data via XHR requests. Module separation in Angular for example can decrease the load size a bit, based on routing. However, the framework, the root module and the current route module are the bare minimum that a client needs to become functional. This can be a fairly large chunk of code to load.

Resumability is the solution that Qwik uses to prevent hydration steps, and actually means that no Javascript is necessary to see a fully functional application on page load. The SSR makes sure that all HTML and data is included in the HTML itself.

How does it work?

Qwik loads a very minimal Qwikloader component that is 1kb in size and executes in 10ms or less. It also includes the necessary data in the HTML itself to save on roundtrips. Everything that is necessary to have a functional application will be loaded in this initial HTML, therefore no hydration on the client is necessary.

The Qwikloader can load very small bundles of Javascript as soon as the functionality is required. This does not happen on a page or route level, but on a component level. For example, when you click a button,only the code that is required to execute the button click is loaded and nothing more. There is a small caveat here, which is that a small delay in execution is possible when the download speed is very low.

Can it hold up to its premise?

The premise of Qwik is that regardless of application size, the loading time will always stay very minimal. Everything that is added to the framework is included with this in mind. This is a very strong concept when loading times are crucial for your application.

So as usual, it might be the right tool for some jobs but not for others. I encourage you to read the Qwik guide and familiarize yourself with it, so you can add it to your toolbelt if necessary.

I have not seen this in the wild just yet, so I have no proof on how well it can hold up in large scale applications. But if it can hold up to its premise, it has the potential to grow out to become the next big thing.