🔥 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
Here's a fun game for you whenever you are out with your friends:
- Think of a noun
- Google <noun>.js
- 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.
What is Qwik
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
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:
- Partial hydration (you can read more on how Astro implements partial hydration islands)
- Progressive hydration
- Static routes (no hydration)
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.
Qwik was built on top of 3 important principles. They are:
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.
- Network bandwidth: A large amount of code is shipped to the client, which may take a long time on slow networks.
- Startup time: Once on the client, the code needs to be executed (as part of hydration) to get the site interactive.
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.