Qwik is a DOM-centric JavaScript framework that aims to provide the quickest TTI (or "time to interactive") by focusing on resumability for server-side rendering of HTML and optimized lazy loading of code.
With the growth of size and complexity of single-page applications, the initial load time of websites has been steadily growing. This can be especially problematic for consumer-facing sites where long load times can lead to lost customers.
The majority of JavaScript frameworks rely on an initial bootstrap process that requires a large amount of code to be downloaded and executed before the browser can render the page.
Many JavaScript frameworks do support server-side rendering to ease the initial load by rendering a snapshot of the site on the server. However, to rehydrate or make the page interactive, two expensive steps need to take place:
- Both the framework and the application (JavaScript) need to be downloaded, a process that can be quite long.
- The page itself needs to be initialized within the JavaScript framework in order for the JavaScript events to become active.
On the other hand, Qwik uses asynchronous, out-of-order component hydration to ensure that the first interaction can happen much quicker. This means that Qwik will lazy load and render only the components that are needed.
For example, have a look at the following structure:
<myApp>
<myHeader></myHeader>
<myBody><myButton on:click={QRL_Path}></myButton></myBody>
</myApp>
After Qwik pre-renders the application on the server, it will determine that the only interactive element is myButton and will only download/re-render it. The rest of the components are static, so Qwik avoids the extra effort of downloading and rendering them.
QRL or "Qwik Resource Locator" is the syntax Qwik uses in order to connect resources. In our example, on:click will contain the path (filename + function name), and Qwik could determine the exact code required for the button click operation.
On the client-side, the process is managed through qwikloader, a tiny (<1k) library that orchestrates loading the necessary code and connecting it to the right events.
Looking at the example HTML output below, we can see how the QRL is used within the on:click event. It is also important the note that qwikloader requires all event types to be defined during import - this allows the script to only hook into events that are being used on the page.
<html>
<body>
<button on:click="./demo#click">Click Button</button>
</body>
<script src="/qwikloader.js" events="click"></script>
</html>
Qwik is an open source project developer by BuilderIO. It is available through their GitHub repository and is released under the MIT license.