Do we need another framework? That’s the question we always ask when a new framework appears on the market. In the case of the Qwik framework, leaving the hype aside, it can be an interesting revolution for our web development. It doesn’t just help to create faster sites; it is also easy to set up and deploy. In this article, we will give you a quick introduction to how to set up your first project (or site), with this new frontend friendly framework.
Getting started with Qwik
To use Qwik for frontend web development, you will first have to install Node.js v16.8. You will also need to deploy on Netlify, Vercel, or similar platforms as these will allow you to run serverless functions on Node.js.
You can get started with Qwik by using the command line interface or CLI tool. This is actually the fastest way of deploying a Qwik app. For this process, you have to type the following command: npm init qwik@latest. This will prompt you to name the application.
The next step is to choose the project type and select your hosting provider. You can then choose packages that you want to configure automatically. Code formatting and linting can be done with eslint and prettier. For styling, you should use Tailwind CSS. At this point, your Qwik app will be ready. You just need to install dependencies and run the app locally.
Note that you can use other package managers for web development. For example, you can use yarn create qwik@latest or pnpm create qwik@latest. PNPM is a relatively new package manager, and it isn’t used as much as the other two options. However, it is a solid piece of software.
How to set up the project structure
A Qwik app contains several project files. The first one is the src/routes/ directory. Folders and files that are in this directory will be mapped to the URL of the app. The homepage of your site will be src/routes/index.tsx, while the root layout of the app will be src/routes/layout.tsx. The pages of your website will be rendered in the root layout. All files named index will be considered pages or endpoints. Qwik supports several extensions for pages or endpoints, including ts, tsx, md, and mdx.
The other project file is src/components/. You can put your components in this directory. These components won’t work as routes and layouts, but they can be used inside them.
The public/ component contains images, icons, and other static assets. These files will eventually be saved at the root and will be added to the dist/ directory.
The src/entry.ssr.tsk file is the SSR entry point. On the other hand, the src/root.tsx file is the entry point for the program tree. This is the root of the tree and will be rendered before all other components.
The src/global.css directory is used for the global CSS file. This file will automatically be imported to the src/root.tsx root component.
Like all other TypeScript projects, this one contains the TypeScript compiler configuration. This configuration is defined by tsconfig.json.
Qwik uses Vite to create apps, so the project will also contain a vite.config.ts file.
Why Hydration is so important?
Hydration refers to the process of pre-rendering content on the server side. It is meant to add interactivity to server-rendered HTML. With hydration, the application will be downloaded and executed as HTML and as JavaScript. This process involves multiple steps that can be summarized as follows:
- Local bundle– This is the basic structure of organizing codes and other resources that are associated with the app.
- Event handlers– This is a callback routine that indicates the action that will follow specific events. An event is an action that can be recognized by the software. Before associating event handlers, the browser will have to download and execute all the components’ templates.
- Application state– This refers to the totality of the things needed to keep the application running.
- Component hierarchy– This is a tree of components on a page. These components can be containers or controls. Each of these components has multiple sub-components.
- Interactive– At this point, the application will be interactive, meaning a user can input information and get immediate output.
Each step involves downloading and executing code.
While hydration is very important, it can be very expensive. The size of the website will determine the code execution time. A basic page for demonstration will only need to download little JavaScript, meaning it can execute quickly. However, on regular pages, the JS bundle download will be very large and will drastically raise the company’s overhead. The Time to Interactive will also be a few seconds.
Because of the overhead and high Time to Interactive, alternatives to hydration have become popular. One solution is serialization, a process that eliminates the need to execute code in order to restore the page’s interactivity. Serialization involves translating the data structure or object state into a format that can be stored or transmitted across a network. This minimizes the storage space needed and makes it easier to transfer data across a network. Many frameworks currently use this approach for the application state, but it can be very difficult to serialize event handlers associations and component hierarchies.
This is why Qwik was developed with resumability. This is a faster alternative to hydration that makes interactivity possible. Resumability also helps startups lower their operating costs. Instead of going through all these steps, resumability simply goes from the local bundle to interactive.
This alternative makes it possible for frameworks to minimize the work when the website starts in the browser. The framework will instead leverage what happened during the execution of the application on the server. It attaches a number of event handlers at startup, and during interaction, it will only run the necessary code.
For a frontend framework to become interactive, it has to meet several conditions. First, they must have a way of associating event handlers and the DOM. Event handlers are callback routines that indicate the action that will follow the event. The second thing they need is to recover the application state. This happens whenever a user triggers an event handler. Finally, the framework will need to develop the tree of components. This happens when the program or application state updates. Finally, the framework will re-render the program view.
Create a “Hello World” with Qwik framework
Follow these steps to create a “Hello World” using the Qwik framework:
- Start by creating a component using the editor. To store the state of these components, you will need to use useStore(.). Aside from storing the component, this step helps to present the state as a proxy that can detect read/writes to the store. The store will also create subscriptions to the store, and these can be used to update the component templates automatically.
- The next step is to add event listeners to the input. You should use the keyup event for this step, and this will follow any changes to the output. The program will automatically update the org as you type. To add event listeners, you have to use the onInput$ property in the (input) element.
- You can then fetch the list of repositories for the GitHub organization. This framework provides useResource$(.) and (resource) to help you fetch and display data from the server.
Advantages of the Qwik framework and conclusions
Qwik is a relatively new framework for building frontend applications. It was created by Misko Hevery, the creator of Angular. The biggest benefit of Qwik is that it is able to optimize performance through zero loading, scalability, lazy loading, and resumability.
It eliminates the hydration problem that is featured in other front-end frameworks. Hydration can be very expensive and can cause delays, especially on mobile devices. In many cases, complex pages will have a multi-second time to interactive. Instead of using hydration, Qwik uses the resumability approach to web development. This framework loads as little JavaScript as possible upfront. Any other JavaScript file will be executed when needed. With Qwik, websites of any size and complexity will load quickly.
Some frameworks try to reduce the time to interactive by using the serialization approach to web development. However, it can be difficult to serialize event handlers associations and component hierarchies. This is why resumability has become popular.
