On May 1st 2023 the first stable release of the QWIK full-stack framework was released. I read about this framework earlier, and the concept behind it already sounded very interesting. Now that v1 is out, it is time to test it out on a project.
The most interesting thing about QWIK is the concept of resumability. Unlike popular frameworks like React, there is no shadow DOM or full rerendering of the page. Instead it renders the page without any extra javascript, and only runs this javascript when needed. This makes the base application very small, and it will remain so whatever the size and complexity of the application.
This also results in near 100% lighthouse performance scores when starting a new app.
New (front-end) web frameworks pop up every week, but because this one makes some real fundamental changes (that can't be incorporated in other frameworks) I am going to implement this one. I have the impression that QWIK will be growing and be useful for any site that is not in the scale of facebook and such.
It took a bit of time to go through the documentation, playground and to watch some introduction video's (links below). It requires a different mental model than what you are used to, working with react. Fortunately there are already quite a lot of examples, and also the linter does a great job in telling you what to do.
Implementation
I decided to convert the voOot application I have (and use as my own playground project) to QWIK. To start with, I only update the public read pages, I will deal with authentication/authorization and updating content at a later stage.
The process has been relatively easy. The routes and component setup is nearly the same as react/nextjs. The most challenging part is converting the React specific state implementation into QWIK components. This means that all state needs to be converted to signals and that functions need to be isolated in their own $ scope. This part can be tricky, and requires an understanding of the idea of resumability and serialisation.
Previously the voOot app was a combination of a NextJS frontend app and NestJS backend. Because QWIK is a full stack framework, and blurs the line between front and backend, the server side data queries are done within QWIK as well. This saves a lot of time and energy maintaining a separate API. Using Prisma, the queries can be executed directly on the server withing QWIK. Making all of this BLAZINGLY FAST (...)
For the time being, the voOot app is live at https://qwik.vooot.nl. Most probably this will become the main website when all pages are converted.
Bonus
I contributed to the QWIK project! A pull request to fix a typo in the docs got merged.