A new javascript framework has been released. The eagerly awaited Qwik framework, created by a dream team of programmers—Miško Hevery, Manu Martinez Almeida and Adam Bradley—entered its beta testing phase last week. 

This is not your run-of-the-mill framework. It introduces a brand-new rendering paradigm dubbed ‘Resumability’ that completely removes the requirement for hydration, a method practically every meta-framework uses to make server-rendered websites fully interactive and understandable. 

Qwik’s primary purpose is to focus on the time-to-interactive measure by delaying JavaScript as much as possible in order to take advantage of the browser’s lazy loading capabilities. This is in stark contrast to existing frameworks, which approach server-side rendering and time-to-interactive as afterthoughts rather than the core aim that drives all other design decisions. The goal of Qwik is to reduce time-to-interactive, which measures the time that passes from navigating to a URL and the page becoming interactive, to the blink of an eye on even the slowest mobile device. Developers want to serve static pages to users such that they load quickly while retaining all of their interactivity.

Before we delve deeper into the product, let’s talk about the team. 

Mind over matter

Miško Hevery is the creator of AngularJS, an open-source JavaScript framework that is used to build web applications. Manu Martinez Almeida has previously built ‘Gin’ (a web framework written in Golang) and ‘Stencil’, a compiler that generates Web Components. It combines the best ideas from the most popular frameworks into a straightforward build-time tool. Adam Bradley is the co-creator at Stencil. Together and individually, they are the heavy-weight programmers who aim to lift the weight of JavaScript from websites. 

Catch-22 situation

In web development, there is a mutually conflicting situation for developers when they want to develop websites loaded with features and also provide speed on top of that. Features and speed are two conflicting situations in a website primarily because—in order to implement features, developers need to add more JavaScript but in order to make a fast-loading site, they need to use less JavaScript.  

For instance, while using Next.js, you initially get access to around 70 kilobytes of JavaScript. Your own application code will then add at least a few hundred additional kilobytes to that and scale off based on how much application code is present on the page. That’s because, on the initial page load, the framework needs to hydrate the dom and rebuild the entire component tree from the ground up. And every time the user refreshes the page, the main thread loads the JS again, and the user goes through the waiting game again. 

Astro framework recognised this problem and uses a technique called ‘partial hydration’ to selectively hydrate the dom.

Resumability to the rescue

However, Qwik completely eliminates hydration, as if it were not even necessary. It provides instantaneously interactive HTML. Therefore, regardless of how extensive and intricate your javascript code base is, you should be able to obtain a flawless lighthouse performance score.

But how is that even possible? 

The main difference is that a Qwik app can be fully serialised as HTML. In other words, you can press the pause button at any time and capture all of the data and closures in the application as an HTML string. That’s huge for server-side rendering because, by the time the HTML reaches the browser, it can simply pick up where the server left off without requiring any javascript at all—which is why the term ‘Resumability’ was coined. 

The Qwik loader, which takes the static HTML generated from server-side-rendering and resumes it, is less than 1kb and will execute in under 1ms. The amount of code that developers need to execute is amazingly small, and it executes in less than a blink of an eye. The best part is that this code will stay constant no matter how big the application becomes.

‘Lazy loading’, which is a fundamental component of the framework, is the second element that makes this possible. It means that as you engage with the website in the smallest possible bits, all other interactive elements are slowly downloaded.

The quest to find a perfect JS framework—which solves the feature and speed issue in a website—has been going on for years. Every month, there is an announcement of a new framework. It will be interesting to witness whether Qwik emerges as the JS framework that finally solves this problem for developers.