Jack be Nimble, Jack be Qwik

Issue #184.May 4, 2023.2 Minute read.

Hi friends. Here’s what we’ve got for you in today’s issue:

  • React canary face tattoos
  • JavaScript fortune cookies
  • The world’s most satisfying toggle

Welcome to #184.

Eyeballs logo

The Main Thing

Arthur eating a giant cake in one bite

I love having my cake and eating it too.

Jack be Nimble, Jack be Qwik

After months of hype, Qwik 1.0 launched on Monday 🚀. And their announcement post had one key line that sounded straight out of a JavaScript fortune cookie:

“Qwik’s philosophy is to ensure the easy path is the performant path.” 🧘‍♂️

That’s cool, and now I’m craving Panda Express, but we’ve heard this “best-of-both-worlds” pitch from lots of JS frameworks. So what makes Qwik unique?

In one word: Resumability.

That’s the name of Qwik’s unique rendering approach, which doesn’t require any of the pure overhead that comes with traditional hydration. Here’s a quick TLDR on how it works:

  • Fully interactive sites are able to load with a tiny amount of JavaScript, then pick up from where the server left off. As users interact with your site, the relevant parts of it load on demand.

  • This “precision lazy-loading” is possible because Qwik apps are fully serialized as HTML. So with SSR, the whole app can be shipped to the browser as just HTML, where it will resume loading where it left off - without needing to execute any JavaScript.

  • This means you don’t need to worry about how much JavaScript you’re adding or how your site is being lazy loaded. You just build whatever you want, however you want, and Qwik makes sure you always get a perfect lighthouse score — because it only downloads the bare minimum amount of JavaScript needed for each interaction.

When it comes to the DX, the most unique thing about Qwik’s approach might be that it’s not actually that unique at all, by design. It doesn’t try to bash React as an “anti-pattern” — instead, Qwik and its Qwik City meta-framework embrace many core concepts from React and Next.js like JSX, directory-based routing, middleware, and more.

And now they’ve released Qwik React — which lets you use React (and every React component and library) within Qwik itself. This gives React developers an incremental way to try out Qwik, without having to rewrite their app from scratch.

Bottom Line: As much JavaScript as I want and my site will still be blazing fast? What’s next, zero-calorie orange chicken? 🙏


fusionauth logo

Our Friends
(With Benefits)

Free Willy jumping in the ocean

When you finally get auth set up and working.

Free yourself with FusionAuth

I’ve never been a giant orca whale trapped in a tank before — but I imagine it feels a lot like trying to use a janky auth platform that never works quite like you need it to.

Thankfully, FusionAuth is here to set you free. Their super flexible auth solution is built by devs, for devs — and it comes with some uniquely powerful features:

  • Flexible branding and theming — You can easily customize login screens, emails, and more, so that every part of the auth experience feels like an extension of your own app.

  • Free for unlimited users — Their Community Edition lets you add login, registration, and user management to your app for free, with no user cap 🙏.

  • Hosting flexibility — You can easily self-host or let them host for you on a dedicated private server.

Check it out — and add all the auth features you’d ever need in days, instead of months.

Tip logo

The Tip

Sponsored by Datadog

Check out the free trial of their real-time Node.js log management platform. It’s the best way to optimize perf for all your Node apps.

Did you know that you can do front end form validations without JavaScript?

  1. required ensures that a form input field must be filled in before the form can be submitted.
<input type="text" name="username" required>
  1. minlength and maxlength set the minimum and maximum allowed number of characters for an input field.
<input type="text" name="username" minlength="4" maxlength="20">
  1. pattern allows you to define a regular expression that the input value must match.
<input type="text" name="username" pattern="[a-zA-Z0-9]{4,20}">
  1. type can be used to specify the expected data type for an input field, which helps in basic validation. For example, you can use type="email" for email validation, type="url" for URL validation, and type="number" for number validation.
<input type="email" name="user_email">
<input type="url" name="website">
<input type="number" name="age">

That being said, you’ll probably want come back-end validation as well.

Cool Bits logo

Cool Bits

  1. Angular 16 just dropped yesterday, and it’s a big one. Yes, we will write a lot more about this on Monday.

  2. New Relic just released a new report, 2023 State of the Java Ecosystem. Just in case you needed more evidence about why you don’t want to be a back-end dev. [sponsored]

  3. The React Team just announced a new, officially supported React Canary release channel — which gives you a chance to adopt individual new features when their design is close to final, but before they’re released in a stable version. To qualify, you just have to let Dan and Sophie give you a cute little canary face tattoo.

  4. Amelia Wattenberger wrote a good article about Why Chatbots Are Not the Future.

  5. In case you’re not overwhelmed enough by new JavaScript frameworks, the creators of LLVM and Swift just announced Mojo — a new programming language for AI developers that “combines the usability of Python with the performance of C.” I’ve never seen so many scary words in one sentence.

  6. The Deno team just released fastwebsockets — but with a name like that, I have no idea what it does or at what speed it does it.

  7. Next 13.4 was just released to much fanfare. App Router is now stable, Turbopack is now in beta, and Server Actions are now in Alpha.

  8. Observable Plot is an open-source JavaScript library with a concise API for exploratory data visualizations. “No observable plot” was the only feedback I received from my creative writing instructor for my avant-garde retelling of The Epic of Gilgamesh set inside the Minions cinematic universe. It’s ok, most great art isn’t appreciated in its time.