🔥 What is Qwik

Check out what is the new Qwik framework and how you can make your web apps be even faster than what they are already

🔥 What is Qwik
What is Qwik

Here's a fun game for you whenever you are out with your friends:

  1. Think of a noun
  2. Google <noun>.js
  3. If a library with this noun exists, you drink

Guess what time it is? It is time for a new framework in the hood. This time we will talk about Qwik.

Would you like to start going to an IT meetup or even organize one in your city? Check out codotto.com, where we make it easy for you to organize meetups, invite speakers and get in touch with the members of the community

What is Qwik

Qwik is a new Javascript framework that depends on a new rendering strategy called resumability. It can serialize your entire Javascript app directly to HTML, therefore eliminating most of the need for hydrating your project.

Qwik is a new kind of web framework that can deliver instant loading web applications at any size or complexity. Your sites and apps can boot with about 1kb of JS (regardless of application complexity), and achieve consistent performance at scale.

What is the problem of hydration

Before talk about why Qwik is so quick - pun intended - we first need to understand why and what is the problem that is currently solving. Cue, hydration.

What is hydration

Hydration is the process that modern Javascript frameworks implement to render your page after it has been initially rendered by the server. Your server can serve initial HTML but overall it needs to augment this experience with Javascript to make the page more interactive.

Credit: https://brainhub.eu/library/js-performance-tips

In most frameworks this process carries a pretty heavy cost when our page is first loading. Depending on the size of your application, we can present to the user a page that seems interactive but in reality it's not. This is detrimental to the user experience, specially for users that has a low-end device.

There are several approaches to solve the issue described above such as:

But all of the approaches has it's trade-offs that you must consider before choosing either one of them.

What is resumability in Qwik

Qwik can quickly continue execution where it left off thanks to the concept of resumability. Most modern frameworks - VueJS, React and Svelte - need to keep track of internal data structures about the application's state. These frameworks do not preserve such information when the transition from server to browser happens. This leads to the problem where the browser needs to hydrate (or rebuild the state) the current application.

Qwik serializes listeners, internal data structures, and application state into the HTML on server browser hand off. Because all of the information is serialized in HTML, the client can just resume execution where the server left off.

what is resumability (credit: https://qwik.builder.io)

The solution that resumability brings is pretty simple: ship less Javascript to the browser.

Qwik principles

Qwik was built on top of 3 important principles. They are:

General purpose

Qwik can be used to be able to build any specific web application. Over here we can think of content-focused applications or e-commerce ones.


Unlike other frameworks, Qwik is resumable which means Qwik applications require 0 hydration. This allows Qwik apps to have instant-on interactivity, regardless of size or complexity.

Optimized for speed

Qwik has unprecedented performance, offering sub-second full page loads even on mobile devices. Qwik achieves this by delivering pure HTML, and incrementally loading JS only as-needed.

Delay the execution of Javascript

The main hurdle for web pages is the process of loading the Javascript to make the page interactive. If we would only server HTML to our clients, our websites would be fast but it would lose the interactivity that we love. This brings two problems:

  1. Network bandwidth: A large amount of code is shipped to the client, which may take a long time on slow networks.
  2. Startup time: Once on the client, the code needs to be executed (as part of hydration) to get the site interactive.

The solution to this problem is quite simple: delay the execution of Javascript as much as possible.

Is Qwik production ready?

Yes, but it depends. Qwik has been in development for 2 years now, and it has reached the beta milestones, meaning that they are confident that Qwik is ready for production, and there are not expected breaking changes.

In case you are interested in starting your new project with Qwik, you can head out to their Getting Started section of their docs.

Would you like to start going to an IT meetup or even organize one in your city? Check out codotto.com, where we make it easy for you to organize meetups, invite speakers and get in touch with the members of the community