So... I built my website with QwikJS

QwikJS. It's a new JavaScript framework that's fast. Hella fast. In fact it's so fast that it might just be the end all be all of JAMStack frameworks. It's currently in development and I just used it to build the site your eyeballs are currently looking at 👀

Alright so I first learned of Qwik through a Fireship video (honestly who else learns about new stuff through his channel 🙋‍♂️). At first, thought nothing of it. Like, we had Astro, how could it get any better?

Spoiler: it got better, a lot better.

So a couple of things QwikJS claims to do out-of-the-box are:

• Deliver HTML-first websites (partial hydration with 0 JS, we get this)
• Lazy-load everything by default
• Use a React-like/JSX-like syntax (+1 for familiarity!)
• Resumability?

So, out of sheer curiosity, bravery, and general frontend shenanigans, I picked up QwikJS for the express purpose of trying out these features. I'm being deadass:

On a more serious note, I'm really fascinated by website performance and optimizations. It's one of the main reasons why I was quick to adapt Astro.

I mean, lazy-loaded JS on demand? Sounds to good to be true.

Literally no JS loaded until the exact moment a user needs one? Impossible. But that's exactly what Qwik does.

Why Qwik is so... quick 🏃‍♂️💨

Qwik is really fast by nature because of the unique way it bundles JavaScript and optimizes runtime performance. You see, Qwik does an extreme form of code-splitting (taking your website's JS and chopping it up into smaller pieces). This is a huge oversimplification but just roll with it for now.

In the traditional sense, code-splitting meant that a particular page's JS like /about or /contact would be scoped to a corresponding JS file, so about.js or contact.js. That way, users hitting your About page won't load JS meant for your Contact page and vice versa. It's a quick-win for overall load times.

Taken a step further, Astro offers more robust code-splitting by letting you setup scroll listeners (among others types of triggers) that will load JS in dynamically as the user navigates your site.

Qwik takes this to the extreme 📈 and by that I mean it tries to strip as much JavaScript out of your codebase as possible. It then bundles your code using a model they call Resumability.

// The old way, requires some chunk.js file that loads both myFunc() and otherFunc()
<div>
	<button onClick={() => myFunc()} />
    <button onClick={() => otherFunc()} />
</div>

// The Qwik way, it actually imports the chunk when the user executes the click event, loading in just the specific JS when it's actually needed
<div>
	<button onClick={() => import(`myFunc.chunk.js`)} />
    <button onClick={() => import(`otherFunc.chunk.js`)} />
</div>

Resumability is a complex topic (one I don't fully understand myself). Good thing Qwik explained the model in great detail (trust, you're gonna read these at least 3 times). However the GIST of why this is great is this: Qwik can load-in JavaScript as a reaction to user events (among other things, again read their docs on this!).

Alright let's step back for a bit. So far Qwik gives us this:

• Stripping out all JS to deliver near HTML-only builds (partial hydration)
• Resumability (concept of executing JS in response to user inputs)
• Lazy-loading out-of-the-box

🚀 100/100 page performance anyone? Seriously, with Qwik, what is blocking the main thread?

All of this seemed great, so I went ahead and picked up Qwik for my personal website. Overall, working with Qwik was okay, like I'd give it a solid 7/10 in terms of developer experience.

I'll present my thoughts in terms of pros and cons, beginning with pros.

Pros of Qwik

It's syntax is actually easy to learn

No, like, it's actually really easy to learn. It's basically 1:1 with React and JSX. There is this new $ syntax though that you'll be using a lot of but for the most part there's no hill you need to climb to adapt to a new syntax.

It has an extremely fast dev server

So Qwik is using Vite under-the-hood but they definetly modified it, gave it some steroids, or something because the dev server is incredibily fast. I'm pretty sure I caught it live-reload before I even did CMD + S 😆.

Seriously, you spend less time waiting for updates and more time making changes 💪.

It comes with an integrations CLI

So just like Astro, Qwik comes with its own list of integrations that you can easily install by running a few npm commands. This makes adding popular frameworks like TailwindCSS trivial.

It builds stupidly fast

This might be an attestment to the powers of Vite but running npm run build (which just runs qwik build) happens in a blink of an eye. Check out these Vercel deploys too, I bet I wouldn't get that if I was using NextJS 😅

Cons of Qwik

Its file structure is a little bit awkward

So I wanted to actually show an image of the project file structure I got going for this website but... it's too large. Like, vertically, it would look so awkward on the page 😆.

Qwik generates a lot of files for you out-of-the-box, things like entry.dev.tsx or an adaptors folder (which we'll talk about in a bit). For the most part you can edit and modify these files (but not delete them).

This might be a moot point, but for me I like to be able to control what files I have in a project and if I feel like a file shouldn't be needed, I should be able to delete it without breaking the entire build 😣.

It's actually not a static-site-generator

Learning this was a massive moment of realization for me. Qwik, by itself, is actually not a SSG.

Out-of-the-box, Qwik works similarly to create-react-app, it just gives you an entry point file to make some sort of client-side app. In that sense it's sort of a replacement for React as a whole.

If you want to use Qwik as an SSG, you actually have to install an integration called qwik-city, which creates an adaptor folder for you, and then you can use a build command to build out to static.

The concept of the adaptor isn't foreign to me (I've used Astro 🚀) but for a framework that claims it's HTML-first - it's odd that you need to install an SSG adapator to get that HTML-first functionality.

QwikCity is weird at first

QwikCity is Qwik's internal router. While it's intuitive and feature-packed, it's weird that it's not considered to be a part of Qwik.

This may be related to the fact that Qwik is not an SSG out-of-the-box but, not withstanding, it's odd that the router gets its own documentation on the website.

You can do all the same things you can do with Qwik's router as you can with Next's or Astro's (and Qwik does support directory based routing too). I just find it weird how in this framework it's treated like a separate entity (kind of like how React and React Router are seprate from one another).

Search engine optimization needs some improvement

SEO needs some improvement... in terms of developer experience. The way Qwik has you set meta tags, links, etc. for a page is by exporting a huge head object with a bunch of that set as arrays and object keys. Here's what that looks like for the home page:

export const head: DocumentHead = {
	title: "Shaun Chander",
	meta: [
		{
			name: "description",
			content:
				"Hey I'm Shaun, a creative frontend engineer currently engineering at bitfo.com",
		},
		{
			property: "og:description",
			content:
				"Hey I'm Shaun, a creative frontend engineer currently engineering at bitfo.com",
		},
		{
			property: "canonical",
			content: "https://shaunchander.me",
		},
		{
			property: "og:type",
			content: "website",
		},
		{
			property: "theme-color",
			content: "#07f49e",
		},
		{
			property: "og:image",
			content: "/thumbnail.png",
		},
		{
			name: "twitter:card",
			content: "summary_large_card",
		},
	],
	links: [
		{
			rel: "icon",
			type: "image/x-icon",
			href: "/favicon.ico",
		},
	],
};

Honestly, not a fan 🤢. It's way to verbose (and ugly) to look at. I'd much rather prefer the approach that next-seo and astro-seo take with having a single component that takes props for SEO.

Maybe I should build a qwik-seo component 🤔.

Final remarks

So there you have it, my pros and cons (and overall experience) using Qwik to build my personal website.

Overall I'd say I had a positive experience with Qwik, sure I have more cons about it than I did pros but most of my cons seem like issues related to Qwik still being in its infancy and I'm interested to see how the APIs evolve over time as we inch closer to v1.

So... should you use Qwik for your next project? I'd say consider it but edge towards no. Reason being: it's in development. If you're working on a production-level website then I'd consider more stable frameworks like NextJS, create-t3-app, or Astro.

Otherwise, Qwik is ready to be used for hobby projects and personal sites (like this one). If you're daring though, you can use it in production 😏

Definitely give it a try if you're striving to get the best performing website possible 🚀