Qwik: The Framework King

What’s so great about Qwik? One developer shares why it’s his favorite framework.

Qwik is by far my favorite framework. Besides being extremely quick, it is also easy to use and wields all state-of-the-art JavaScript concepts.

Made by one of the creators of Angular, Miško Hevery, Qwik is heavily inspired by React and Next.js, and it guards the safety of TypeScript out of the box. But what is so great and different about it?

Resumability

Qwik uses and coined a concept called “resumability.” All other frameworks have to use hydration when they get up and going from the server to the browser. Hydration is basically rerunning the entire framework from scratch on the client after it has already run on the server.

Qwik serializes not only the application state, which is already done in other server side frameworks, but also the framework state.

Huh?

When a user makes a call to a server running Node.js, the Qwik application starts running. It figures out (from URL parameters, session tokens, etc.) what JavaScript needs to be run immediately on the client, if any, and what state will be needed for the bare minimum of the application to work.

All of the necessary functions are serialized (similar to but more powerful than JSON.stringify) with their current application state. When those functions become necessary, they are lazy-loaded from one Global Event Listener, instead of many.

This means a page with no JavaScript will not even load the framework JavaScript itself, except for what is necessary for pre-fetching.

Lazy Loading

Lazy loading is another automatic feature that makes Qwik incredible. In other frameworks you have to manually think about when and how you want to lazy-load components.

Qwik does this for you by eagerly loading only what is visibly on the screen or what is necessary for the application to run on the component. No more thinking about any of this. You only download what you need. When those components are finally loaded, which can only be triggered by an event, they resume the application with all the state ready to go.

In other frameworks you have to load all parent components first. If the application state has already been loaded from the parents, you can just resume it. If an application does not need to load the whole framework, Qwik will know. It will just load the basic JavaScript. It is simply revolutionary.

Smart Prefetching

By default Qwik will prefetch any visible listeners on the page. Its optimizer knows which pages will need to be fetched, keeps track of which ones have been fetched to avoid re-fetching, and fetches these pages on a separate thread.

This means Service Works and Web Workers are highly utilized in Qwik. This should be no surprise to you if you have ever heard of or used Partytown to keep your Google Ad JavaScript lazy loaded the right way: using a secondary thread automatically. It also uses the rel link tags to preload and preconnect to other servers.

So It’s Fast …

The Qwik team does not claim to have built the fastest JavaScript framework. If you’re counting 1000 inserts into DOM elements, SolidJS might be the way to go for speed.

However, if you have a real-world app where you need the user to be able to react to the page immediately, Qwik is probably the fastest app out there.

SEO

All of these features mean Qwik kills it with SEO. You get all the features of a large app, but not the overhead. Your Core Web Vitals are going to be high, specifically the Largest Contentful Paint and First Input Delay. Many Qwik apps can get a perfect Lighthouse score. This is once again incredible.

Maturity

One of the reasons people don’t use new frameworks is lack of maturity. This is important to keep users from rewriting components, reusing components, eliminating bugs, and having all the features they need out of the box.

That being said, Qwik is officially out of beta and at Version 1. This means there should be no big breaking changes or serious bugs.

You can also use any React library out there with the qwikify$ import! This is not true for SolidJS or Svelte, the other new frameworks.

However, Qwik React is not as fast as a native component, and should probably be refactored when you can. Frankly, with Tailwind being as popular as it is, UI components are the biggest custom-built library, and people seem to be building custom components faster and cleaner than ever. You may not need the external libraries you think you do.

However, Qwik React is not as fast as a native component, and should probably be refactored when you can. If Tailwind alone will not meet your needs, you could use Qwik React with a mature UI component library like KendoReact.

Integrations

Qwik already has a long list of integrations that you can add with a simple four-line command like npm run qwik add auth. These include AuthJS, Supabase, Tailwind, Prisma and other testing libraries. I also built a sample Firebase Qwik App. Everything you could need is available, and more custom integrations and libraries are being built faster than ever. I personally think Qwik is ready to go for production, despite the maturity argument lifelong React developers want to make.

No, Qwik is my favorite framework. My next project will use it, and the developers are paving the way for the next generation of JavaScript frameworks. It is indubitably the Framework King.

npm create qwik@latest