How to Build Apps with Great Startup Performance Using Qwik

In this article, we will recap the JS Drops Qwik workshop with Misko Hevery. This workshop provided an overview on Qwik, its unique features and a look at some example components. We will also address some of the questions raised at the end of the workshop.

If you want to learn more about Qwik with Misko Hevery, then please check out this presentation on This Dot Media’s YouTube Channel. Also don’t forget to subscribe to get the latest on all things web development.

Table of Contents

• What is Qwik?
• How to create a Counter Component in Qwik
• Unique features of Qwik
  • Directory Based Routing
  • Slots in Qwik
  • Very little JavaScript in production
  • Resumability with Qwik
  • Lazy load components by default
• Questions asked during the workshop
  • Are all these functions generated at build time or are they generated at runtime? What's the server consideration here (if any) or are we able to put everything behind a CDN?
  • How do you access elements in Qwik?
  • Can you force a download of something out of view?
  • What is the choice to use $ on Qwik declarations?
  • Can you explain the interop story with web components and Qwik? Any parts of the Qwik magic that aren’t available to us if, say, our web components are too complex?
  • Is there an ideal use case for Qwik?
  • When to use useWatch$ instead of useClientEffect$?
• Conclusion

What is Qwik?

Qwik is a web framework that builds fast web applications with consistent performance at scale regardless of size or complexity.

To get started with Qwik, run the following command:

npm create qwik@latest

The Qwik CLI will prompt options to scaffold a starter project on your local machine.

To start the demo application, run npm start and navigate to http://127.0.0.1:5173/ in the browser.

How to create a Counter Component in Qwik

Create a sub-directory in the routes directory named counter and add an index.tsx file with the component definition below.

import { component$, useStore } from "@builder.io/qwik";

export default component$(() => {
  const store = useStore({
    count: 0
  });

  return (
    <div>
      <div>Counter: {store.count}</div>
      <button onClick$={() => store.count++}>Increment</button>
    </div>
  )

})

Now navigate to http://127.0.0.1:5173/counter and you should see the counter component rendered on the page.

Unique features of Qwik

Directory Based Routing

Qwik is a directory-based routing framework. When we initiated Qwik, it created a routes sub-directory in the src directory and added index and layout files for route matching.

The index.tsx is the base route component and the layout.tsx is the component for handling the base page layout.

The sub-directories in the route directory serve as the application’s structure for route matching with its index.tsx files as the route components. Every index.tsx file does a look up for the layout component. If it doesn’t exist in the same directory, then it moves up to the parent directory.

// layout.tsx

import { component$, Slot } from '@builder.io/qwik';
import Header from '../components/header/header';

export default component$(() => {
  return (
    <>
      <main>
        <Header />
        <section>
          <Slot />
        </section>
      </main>
      <footer>
        <a href="https://www.builder.io/" target="_blank">
          Made with ♡ by Builder.io
        </a>
      </footer>
    </>
  );
});

Slots in Qwik

Qwik uses slots as a way of connecting content from the parent component to the child projection.

The parent component uses the q:slot attribute to identify the source of the projection and the element to identify the destination of the projection.

To learn more about slots, please check out the Qwik documentation.

Very little JavaScript in production

In production, Qwik starts the application with no JavaScript at startup, which makes the startup performance really fast.

To see this in action, open the browser’s dev tools, click on the Network tab, and on the Filter tab select JS.

You will notice the Vite files for hot module reloading are currently the only JavaScript files served which will not be shipped to production.

Go to the filter tab and check the invert checkbox then in the filter input type select Vite.

Resumability with Qwik

Qwik applications do not require hydration to resume an application on the client. To see this in action, click on the increment button and observe the browser’s dev tools network tab. You will notice Qwik is downloading only the required amount of JavaScript needed.

The way Qwik attaches the event to the DOM and handles the state of components is that it serializes the attribute, which tells the browser where to download the event handler and its state. To learn more about serialization with Qwik, read through the Qwik documentation.

By default, the code associated with the click event will not download until the user triggers that event. On this interaction, Qwik will only download the minimum code for the event handler to work.

To learn more about Qwik events, please read through the [documentation] (https://qwik.builder.io/docs/components/events/#events).