Over the past decade, we have seen a steady rise in client-side JavaScript frameworks or libraries. Each of these frameworks curves out a niche in the JavaScript ecosystem and tries to enable developers to find the perfect solution according to the provided context. Renowned frameworks include React, Angular, Svelte, and Vue.
These frameworks have also seen the rise of subsequent frameworks to serve as improvements to the original frameworks. These include Svelte Kit for Svelte, Nuxt.js for Vue, and Next.js for React. Angular is a complete solution, therefore, it comes with its own tools for accomplishing tasks like routing.
All these frameworks had one major focus; to help developers build user interfaces in an easier and more scalable way. The focus has been on UIs long enough to see the stability in several aspects that concern single-page applications such as state management, routing, and bundling.
What is Qwik?
Recently, there has been a lot of focus on performance on the web which gave rise to technologies like WebAssembly and most recently Qwik. WebAssembly looks into improving performance by allowing programming languages to be compiled to the WASM compilation target to achieve near-native performance.
Qwik on the other hand looks into improving performance by re-inventing the way JavaScript is loaded onto the browser. Qwik aims at loading only the needed JavaScript to enhance interactivity instead of hydrating a whole webpage(like in React) which will have a huge impact on initial page loads and it will also lag for slow internet. This might improve SEO but will have a negative impact on performance. Qwik offers both performance and good SEO without hydrating the page.
Advantages of Qwik
- Resumability: Qwik combines intelligent server-side and client-side rendering to avoid performing hydration twice, once on the server and again on the client, to improve hydration. This is referred to as resumability in Qwik. It means that the client picks up where the server left off rather than rebuilding all of the client’s work. It enables fully interactive sites to load a small amount of JS code onto the client and then load the relevant parts of your site as needed.
- Time to Interact: The time between when a user requests or interacts with a website and when that website responds to the user’s activity is referred to as the time to interact. Javascript is included in Qwik, but not when the app first launches. Instead, when you interact with it, the Javascript Code is sent. During SSR, Qwik collects a large amount of data in order to begin prefetching only the interactive parts of the current page as soon as possible. As a result, the JS is already downloaded when the user clicks or interacts.
- Lazy Loading: Qwik takes lazy loading to the next level by downloading JavaScript in stages based on how the user interacts with the site.
- Performance: Qwik only sends HTML and loads JS when necessary to improve the performance of your site. This means that when the site loads, it only has a small amount of JavaScript to run, and the code is only downloaded when it is required. It is the first “HTML” framework.
- Less JavaScript: Qwik eliminates the massive amount of JavaScript that a site must send to the client by delivering only the bare minimum to the client. With as little as 1 KB of JavaScript, a Qwik app can be made interactive.
What is Qwik City?
Qwik City is a Qwik framework that aims at using Qwiks underlying APIs to create a high-level abstraction to enable developers to build faster. It simplifies concepts like routing by using folder-based routing.
Hands-On
The code used in this blog is found at the following repository: https://github.com/workfall/workfall-qwik
Installations
Note: Qwik needs at least a Node version greater than 16.8.
To create a new application, run yarn create qwik in your terminal
Select the basic app since it comes with built-in routing.
Choose Yes to install yarn dependencies
The performance benchmark for Qwik using the Lighthouse browser plugin is shown below. Put in mind that the app is running in dev mode (not optimized).
Open the project in your editor the terminal run the command npm run qwik add postcss followed by yarn add sass. This is to enable SCSS in the project. SCSS provides a lot of productive features such as mixins and a much neater syntax.
Folder structure
The basics
A component is declared using the component$() method. A component accepts props that can be passed as arguments to the callback function in the component$() method.
Most common hooks
- useSignal$()
This is the equivalent of useState in React, it declares the local state in a component.
- useStylesScoped$()
This is used to load styles that are scoped to a specific component only if the component is used. A unique CSS class is generated for each component. This hook is not necessary since we’ll be using SCSS. We can scope the styles by nesting.
- useStyles$()
This is used to lazy load styles for a component but the styles are not scoped to that specific component. Unlike useStylesScoped$(), a unique class is not created.
- useResource$()
It is used to perform any async operations such as fetching data from an API.
- useTask$()
This hook executes before the component renders. In case you need to perform some computation before the component renders, this the hook to use. It also supports the use of a cleanup function.
- useVisibleTask$()
These hooks execute after the component has been rendered.
Form Handling
For form handling, we shall use Form Actions provided by Qwik City which provides methods such as globalAction$(), zod$ for form validation, and the Form component to help create forms declaratively.
components/search-box/index.tsx(1):
In this component, we make HTTP requests to the weather API to search for our locations.
components/search-box/index.tsx(2):
components/search-box/index.tsx(3):
components/weather-info/index.tsx:
routes/layout.tsx:
This file defines the general outlook in terms of structural layout. The <Slot /> component is the same concept as props.children in React.
root.tsx:
This is where bootstrapping happens. It is however important to note that in Qwik, we don’t have an index.html file like in other frameworks because DOM hydration is not used in Qwik.
Conclusion
In this blog, we looked at how we can create a simple web application using the Qwik JavaScript framework. The Qwik framework has a new syntax but shares a few concepts with other JavaScript frameworks such as life cycle hooks, state management, and event handling.
We found that the Qwik framework improves performance in general by delaying the download of excess JavaScript code to create interactive pages otherwise known as hydration.
Qwik also enforces good SEO out of the box based on its architecture. We will come up with more such use cases in our upcoming blogs.
Meanwhile…
If you are an aspiring JavaScript Developer and want to explore more about the above topics, here are a few of our blogs for your reference:
Stay tuned to get all the updates about our upcoming blogs on the cloud and the latest technologies.
Keep Exploring -> Keep Learning -> Keep Mastering
At Workfall, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you’re looking to work with global clients, build cutting-edge products and make big bucks doing so, give it a shot at workfall.com/partner today!
