How to Learn Qwik FAST! in 2024?

How to Learn Qwik FAST! in 2024?

Code
Published:

Qwik is different from other web frameworks. There is a lot to learn. In this no-fluff article, we will cover the basics that will get you running - qwickly.

Cover image

Qwik may look a bit intimidating at first glance. We will roughly cover the 20% of the Pareto Principle that gives you 80% of the knowledge you need to get up and running.

Which topics are the most relevant for learning Qwik?

The most relevant topics in Qwik, that I recommend learning first, are

After you have a basic understanding of those topics, you can dive in deeper as you advance in your project.

I recommend following along with your favorite IDE opened.

By the way, to always have a birds-eye view at hand, when digging deeper into Qwik, you can download my Qwik cheat sheet for free.

Project setup

We can use Node.js or Bun to develop and deploy our app. In the rest of this article, We will use Bun as the package manager.

Scaffolding the project

We can easily get started by running bun create qwik .

When running this command, we are asked what kind of project we want to generate. For your first project, let’s just pick the preselected, recommended “Basic App”.

This starter project will include some demo routes and components. Playing around with those is a great opportunity to explore the way a Qwik app is structured.

You can start a development server via the bun start command. This starts a Vite server and opens the app in your default browser.

Deploying the app

When you are ready to deploy your app, you can configure Qwik for a deployment target of your choice.

You can build a deployment on your own, but Qwik also comes with some common deployments. Those can be found in the docs . Let’s go with the Bun deployment for now.

The deployment can be configured via bun qwik add bun . This will create an entry.bun.ts file which sets up a Bun server with the Qwik City middleware.

You can now build your app via bun run build , and launching the built app in preview mode can be done via bun serve .

The built app consists of the directories server and dist . You can copy those to your target environment (e.g., a docker image) and run your app in production via bun server/entry.bun.js .

This completes our basic project setup.

Qwik and Qwik City

Qwik consists out of two parts: Qwik and Qwik City.

The @builder.io/qwik package itself is about all the component related parts, and the build optimizer. Here you find members like the component factory component$ , the useSignal$ hook and style hooks like useStylesScoped$ .

Qwik City contains the server-focused parts of your Qwik application. The package is called @builder.io/qwik-city . It includes utilities for routing, endpoints and form actions.

Basically, you can think of Qwik as a client library like React, Angular or Vue. This is not completely true, because Qwik always needs a server side to stream the JavaScript.

Qwik City is the meta framework, like Next, Angular Universal or Nuxt.

Resumability

The idea of resumability is that an application can start running and at some point of time a snapshot will be taken. From this snapshot, the application execution can be continued within another environment.

In Qwik, the application execution starts on the server during SSR.

When the initial rendering of a route is complet, a snapshot is taken in form of an HTML document. This document may not only contain the rendered DOM representation. References to functions (QRLs) and the serialized state are included in the HTML.

So, like in traditional SSR, the application can immediately be displayed in the browser, without any JavaScript being executed. The important difference to traditional SSR with other frontend frameworks is that there is no hydration taking place. This means that the application is not rendered a second time. Instead, a minimal JavaScript snippet is embedded into the HTML, which uses the QRLs to load the necessary JavaScript on demand.

This is the major advantage of Qwik compared to other frontend frameworks: The main thread is not blocked by hydration and the user can immediately interact with the page.

If there was no QRL generated during SSR, i.e. you created a static page, not even the small JavaScript snippet will be sent with the HTML.

To reduce network latency, a service worker will be installed to prefetch the modules that can be requested if event listeners are being triggered. This prefetching does not block the main thread, since the modules are not immediately interpreted.

Routing and Layouts

Routing is part of Qwik City. It implements directory-based routing, as it is done in many other meta frameworks. The routes directory contains all the pages, actions and endpoints of your Qwik City application.

Routes

Per route, you can create either an index.ts , index.tsx or in index.mdx file. The directory structure in which those files are placed determines the path. For example, a file routes/blog/index.tsx would handle the route /blog .

The default export of such an index file can be a Qwik component that provides the content of the page.

Endpoints on those routes can be exposed via onRequest() and on[Method]() . You can implement and export those to create a REST API to change the response for the page if you export a default component.

Layouts

There is a layout concept in Qwik City. Layouts enable us to wrap underlying routes with shared behavior or content. They can be placed in every routing directory and are available for the matching route or any sub-route. A default layout can be defined in a layout.tsx . Named layouts follow the naming layout-[name].tsx and can be used by routes by naming the route files like index@[name].tsx .

Layouts can define routing middleware and page layouts. Page layouts are components with a <Slot> through which sub-layouts and the actual page component are slotted.

Routing and layouts are quite complex topics, and covering them in more detail here is out-of-scope. You can read more about them in the Qwik docs .

State management

A Signal is a data structure that holds a value and can change its value at any time. It notifies its subscribers whenever the value changes. I wrote more about Signals as a concept in Signals vs RxJS Observables .

In Qwik, Signals are the way to manage reactive state. You can create them via useSignal() .

Their value property can be read and written. When the value is read within the template, this template part is re-rendered whenever the Signal’s value changes.

Stores can be thought of as multi-signals. They are created via useStore() and every property of the Store acts like a signal’s value property.

Components

Qwik Components are, like modern React Components, functions. They should be created with the component$() factory. This indicates to the Qwik Optimizer that it should create a QRL and extract the component function into a separate module.

We use JSX/TSX templating to render the component’s DOM. So, if you are familiar with React, Preact or Solid, you will have a head start when learning Qwik.

It will still take a bit of time to get used to that every function property name, like onClick$ will have a trailing dollar sign. This will also mark the listeners to be code-splittable.

Tasks

If we want to trigger asynchronous operations in components, we can use Tasks in Qwik. Tasks run sequentially before rendering. They can track Signals or Stores to re-execute on value change.

There are the useTask$() and useVisibleTask$() factories. The difference is that useTask$() is executed at least once on the server during SSR and useVisibleTask$() will be executed for the first time as soon as the component becomes visible in the browser.

Both task factories provide a track() and a cleanup() function. With track() we can control on which signal changes we want the task to be re-executed. cleanup() allows us to register a teardown handler for when the component gets unmounted.

We should be careful with the use of useVisibleTask$() . It runs code eagerly on the client and can block rendering.

Conclusion

We touched quite some topics in this article. This introduction should give you a good head start in mastering Qwik.

To keep an overview of those topics when working with Qwik, you can download my Qwik cheat sheet . It’s free.

Of course there is much more to learn and you can dive deeper into the docs .

In this sense, never stop learning and have a nice day!