A few days ago I published a small demo app called “TheAgency” which I fully developed with Qwik and QwikCity. In this post I’ll explain why I did it and how it might help you if you want to get familiar with Qwik and QwikCity.
Qwik? QwikCity?
There is a lot of buzz around Qwik lately. Qwik is a new front-end framework which is being developed by builder.io. In the Qwik framework team you can find known web framework developers/architects such as Miško Hevery (AngularJS/Angular), Adam Bradley (Ionic/Stencil) and Manu Mtz.-Almeida (Ionic/Stencil). Qwik is trying to solve some major problems that we have in current modern web development frameworks. In a nutshell the main drive behind Qwik is to make your website/web app faster by changing a few mental models (the need for hydration for example) and introducing the concept of resumability.
Note: This is not going to be an “hello world” post about Qwik. I think that Qwik documentation is doing a good job for introducing the framework.
QwikCity is a meta framework that is built on top of Qwik and introducing a whole website/web app solution that includes routing and backend as well. With QwikCity you are able to create not only the front-end but a whole site/app.
Note: This is also not going to be an “hello world” post about QwikCity. I think that QwikCity documentation is doing a good job for introducing the meta framework.
How did I hear about Qwik?
I first learned about Qwik in Twitter a few months ago (I’m following Miško Hevery), but I didn’t have the time to look at it or to implement something with it. Then, Miško Hevery visited Israel a couple of months ago and conducted a Qwik workshop with Shai Reznik. I managed to attend the workshop and was really impressed with the ideas behind Qwik. I also had the opportunity to learn about it from one of it’s creators. I remember that when the workshop ended I was eager to build something with Qwik, but… Life…
I had no opportunity to do that because all my customers work with React and I had limited spare time.
Why to Build “TheAgency”?
Three weeks ago one of my customers, a startup, had to close the company :( and I had some spare time to waste before I’ll have a new customer. So, I decided that I want to build something with Qwik and QwikCity and to have the feeling about how you can build a more realistic real-world app and not some small demo app such as a todo list.
This is where I had the idea to take the app I built when I wrote my “Pro Single Page Application Development” book and migrate it entirely to Qwik and QwikCity. The “TheAgency” app was created in 2014 with Backbone.js and ASP.NET.
Migrating an app that was built in an old library such as Backbone.js wasn’t so easy. At first, I created all the views with their HTML and CSS and then I wired everything inside QwikCity routing. I had to learn how to use Qwik and let it do it’s magic during the process. There were a few qwirks that I had to overcome. Mostly, things that aren’t documented or don’t work as expected (for example how to wire the Web API in QwikCity or serialization/deserialization of objects when you pass content to the server). All in all, it took me a couple of hours but I managed to do the migration and the app works as expect.
One thing that I must emphasize — because I learned everything by implementation, I might not write an optimized app version in terms of how I implemented it. If you are using my example app as a reference, I’ll be happy to learn if you can do things better than I did.
Conclusion
The main question you probably ask yourself is whether I’ll use Qwik after I had the experience with it?
Of course. Even though there are things to improve in the framework, I find it very interesting and revolutionary in it’s mental model. I also think that the framework is heading in a right direction.
My hope is that the app I created will help others to understand how to create modern apps with Qwik and QwikCity.
Feedback is always welcome!
