I know what you are thinking. I did too. Not another JavaScript framework! I know exactly how you feel. The JavaScript ecosystem has been crazy the last couple of years. Qwik seems to be different in its approach and the way it tries to fix issues currently being experienced by other JS frameworks.
Some of the main issues affecting SPA’s right now are
- Load speed.
- Bundle Size.
Load speed especially initial load speed is very important. Users don’t particularly like it when they open your site and it takes forever to load. The main culprit for the slow speed is the amount of JavaScript your page has to load and execute. Then you also have to consider hydration(technique in which client-side JavaScript converts a static HTML page into a dynamic page by attaching event handlers). As your application becomes more complex it has to fetch more JavaScript and do more in terms of execution.
Qwik tries to fix this by minimizing the amount of JavaScript it ships with your page. It sends the minimum amount your page needs for the page to work and the rest is loaded on a need basis.
It is also resumable. It is its most important feature. To explain what resumable is we have to understand how current frameworks work.
Current frameworks do something called Hydration. When an SSG or SSR app boots up, it does the following.
- It sets up the event listeners to the page to make them interactive.This requires downloading the templates and executing them to get the event listeners.
- Builds up the component tree.
- Sets the application state.
Frameworks do not keep track of the applications internal structure during browser to server transition and so they have to rebuild it every time there is a transition.
Qwik serializes the listeners, component tree and state into the HTML when transitioning from server to client which allows the client to use that serialized information to resume execution from where the server stopped thus the term resumability. Thus it doesn’t have to download more JS or hydrate.
The following shows how Qwik serializes state and achieves resumability. Notice how code is broken into chunks and provided as links. Only the initial code is loaded and executed. Any code as a result of user interactivity e.g button click is loaded when the event is triggered.
The click JavaScript chunk is only loaded when i clicked the button and initiated the onClick event
If you have used React or VueJs the transition to Qwik is very easy. The code looks a lot like React and has picked some very good features from both of them. It also uses JSX and is Typescript first.
Often you’ll hear Qwik and QwikCity and it might be confusing. Qwik is the core framework and QwikCity is the framework for Qwik. Its built on top of Qwik and brings things such as routing to Qwik.Its also opinionated as are most frameworks.
So lets jump to the Code. I’ll try to give and overview of some of the key features in Qwik. Its not meant to be an exhaustive resource, for that you should head over to their official documentation.
- Components
or you can have a named component
Notice the $ on component. It is a signal to the optimizer to extract the code for lazy-loading. component$() method makes the component lazy-loadable. If you don’t want the component to lazy-loaded you can declare it without the component$ function. It becomes what is called an inline template
2. Event Handlers
Notice that we wrapped the handler function with $(). In React it would have been
`const clickHandler = () => { alert(“Hello World”); };`
but in our case its
`const clickHandler = $(() => { alert(“Hello World”); });`
This is because functions that end with $ take an inline arrow function or a QRL(Qwik URL) identifier i.e
<button onClick$={()=> alert(“Hello World”)}>Click me</button>
or a QRL(Qwik URL) which is a form of URL that Qwik uses to lazy load content. The way we did by wrapping our handler with $()
3. State Management
- Props
You can pass data from Parent to child via props
2. useSignal
This is a hook that returns a reactive signal from an initial value input. The reactive value returned has a value property which is what is updated.
3.useStore
useStore works like useSignal but takes in an object as the initial value. The reactive object returned is a proxy Javascript object just like the one returned with the ref hook in VueJs
4. Context
Context works like the useContext hook in React or Providers/Inject in Angular. Its used to share state with other components. It helps avoid cases where people pass props through so many components(some of which don’t necessarily need them) just to get it to one component(prop drilling).
4. Styling
You can apply css styles to Qwik app using the following ways
- Global styling – `import ‘./my-style.css‘`
- CSS in js
- Per Component styles – useStyles$() and useStylesScoped$()
- Pre-processors
I’ll talk about Per Component styles
Create a css file called myStyle.css and add it as shown below
Now lets create our component and import the style
You have to add the ?inline part if you are using Vite.
When you use useStyles$() the style is applied globally. If you wanted it applied only to the component you use useStylesScoped$(). It works like <style scoped></style> in VueJs.
5. Routing
QwikCity provides directory based routing. All routes must be placed in the ‘src/routes’ folder. So if you want a route that points to /test you create a folder called test and inside make sure there is an index.tsx file which is the component the route should point to. You can then create a link to the url using the Link component as shown below
Summary
Qwik is very easy to pick and start working on. There are other important aspects like the useWatch$() hook which acts like the useEffect hook in React, the <Resource> component that renders its children when its resolved or shows error when rejected or loading when pending.
There is the <Slot> component that is used for content projection just like the Slots in Vuejs and Content Projection in Angular.
Qwik has most if not all the things you require to build your app whether is an SPA(Single Page Application),MPA(Multi Page Application),SSR(Server Side Rendered),SSG(Static Site Generation).
As of writing this article version 0.15.2 is the stable version and its pretty much ready for production use.
Is your app faster on initial load, yes. While the future of Qwik is still unknown as with most frameworks, it is still something i feel everyone should try.