Bytes #82 - Timothée Chalamet rapping under the moniker Timmy Tim

I hope you’re having a great week and have managed to not delete the entire contents of your open-source library that thousands of apps depend on so far. We’re on week 2 of the new year and my resolution is still going strong (👋 h8rs). Check out this week’s vid - The Story of TypeScript.

This week, we’ve got a Solid glow-up, a magical GraphQL orb, and Google devs being legally bound to face off against Timothée Chalamet in a talent show. Welcome to #82.

Dune Cat Meme

Whoever controls the ~~spice~~ software, controls the universe

SolidJS gets an SSR Glow-up

The release notes for SolidJS v1.3 are titled “Spice Must Flow” — a line from Dune that could be intended as a metaphorical critique of the over-commodification of OSS frameworks by venture capitalists and big tech, along with the larger systemic issues plaguing our current version of late stage techno-capitalism.

Or maybe the SolidJS team just likes Dune. I guess we’ll never know.

Quick Review: SolidJS is a new-ish JavaScript framework that got a lot of buzz in 2021 because of its why-not-both approach of providing “all the flexibility of React and the simple mental model of Svelte.”

What does that actually mean? Solid has all your favorite React features like Fragments, Context, Concurrent Rendering, SSR, and more — but with no Virtual DOM. Instead, every part of Solid (including its renderer) is built on the same foundation of composable “reactive primitives” that are very extensible and very fast.

This 1.3 release is all about beefing up Solid’s SSR capabilities. Here’s how:

HTML Streaming — As soon as the HTML is available to the user, it’s immediately streamed and inserted (even if the JavaScript bundle hasn’t loaded yet), thanks to a new renderToStream API.
Isomorphic Error Boundaries — Makes it a lot easier to catch and solve rendering errors for all rendering methods (including streaming).
Multiple Async Hydration Routes — You can now pass a unique renderId on all of Solid’s server rendering methods and to the hydrate function. This isolates all hydration and lets you server render and hydrate multiple Solid apps on the same page.

Bottom Line: If OSS is the spice, does that make all of us the giant worms?

Cursed Cookie

When you build your own chat app from scratch [sponsored]

Stream is how smart developers build chat apps

Building a chat app from scratch in 2022 is like trying to make Pop-Tarts from scratch – overly complex and completely unnecessary thanks to modern technology.

That’s because most developers just use Stream. It’s the #1 chat-messaging and activity feed platform in the world – because it handles all of the mess that comes with building chat apps for you.

bUt WilL iT SCaLe? Don’t ask me, ask Match.com – they use Stream to let their 21.5 million members send each other heartfelt messages like, “You up?” every single day. So next time you drunkenly message that person who ghosted you 7 months ago, you can thank (or curse) Stream for making it all possible.

Adobe, Imgur, SoundCloud and a bunch of other companies have built apps with Stream too. Chances are, you’ve probably already used Stream’s chat without even realizing it 🤯.

Check out this tutorial to see how easy it is to build a React chat app that leverages Stream’s Chat API and their React Components. The API is surprisingly flexible, which means you can build pretty much any chat experience you’d ever need.

Orb meme

Tell me your secrets, all-knowing GraphQL orb

The State of GraphQL in 2022

2021 was quietly a big year for the GraphQL world. Let’s take a look at what went down and where we’re at in 2022.

What the REST is GraphQL? It’s an API query language created by ~~Lord~~ Lee Byron and his (old) team at Meta to share an API between web and mobile apps. Instead of using different URLs for each API, GraphQL uses a single endpoint and has the exact data you want sent with the request.

Like most of the React team, GraphQL couldn’t wait to escape from ~~Facebook~~ Meta — and it finally did so in 2018 with the formation of the GraphQL Foundation. Since then, it’s spawned a lively community with lots of companies trying to commercialize GraphQL, many services supporting GraphQL, and many packages for implementing GraphQL.

What big things happened with GraphQL in 2021?

Apollo released Odyssey, a series of free tutorials for learning GraphQL that’s appropriately named (and styled) to keep up with Apollo’s Ancient-Greeks-in-space branding.
The Guild released Envelop, a plugin system that makes it easier to add features and integrations to GraphQL servers.
The GraphQL Foundation published the 2021 Spec — a very long document that (like the book Infinite Jest) no one has actually read in its entirety. But it’s still a great resource.
v16 of GraphQL-JS (the reference implementation of GraphQL that everyone uses) was released. They finally kicked Flow to the curb and rewrote the entire thing in TypeScript 🙏.

We kicked off 2022 in style with the release of Relay 13.0, which includes their fancy new Rust compiler (because every OSS project is legally required to rewrite their compiler in Rust now).

Relay is Meta’s GraphQL client of choice. It only works if your GraphQL server follows the Relay specification, but it promises declarative data fetching, query optimization, and less boilerplate. This new Rust compiler, along with the cutting-edge React hooks API they released last year makes Relay a compelling option — especially if you’re building a dystopian Wal-Mart hellscape in the metaverse.

Bottom Line: It looks like GraphQL stock will continue to go up-and-to-the-right in 2022 (unlike literally every single real stock).

Cool Bits

In The Story of TypeScript, I break down why TypeScript was created, why it’s popular, and why you should probably use it. If you already know all those things, then just watch for the memes.
Raygun is expanding its powerful Error Monitoring and Crash Reporting solution to Flutter 🕊. Now you can get complete visibility into the health of your Flutter apps, with rich diagnostics that take you to the root cause of errors and crashes. Learn all about it in this blog post. [sponsored]
Last week, the creator of Faker.js really stuck it to all those ~~big companies~~ individual developers when he deliberately erased the contents of the library (which gets 1.5m npm installs per week).
Eleventy just released v1.0 of their “simpler” static site generator that’s been getting tons of love over the past few months — probably because they’re named after this beloved pop-punk band from 2009 that wrote songs about MySpace.
Jon wrote about Metho — his small library that safely adds “superpowers” to JavaScript. And by “superpowers”, I’m pretty sure he means, “a way to add dynamic properties to objects with the help of Symbols, resulting in some very funky syntax.” Hopefully Marvel can get the movie rights for funkySyntaxMan.
Actually Serverless is a serverless platform that (unlike most other platforms) doesn’t require any servers beyond the initial application load, because everything is hosted locally on the browser with a service worker. Might want to consider renaming it to Ackshually Serverless, but that’s just one man’s opinion.
Nolan wrote about Fuite — a CLI tool he created for finding memory leaks in web apps.
The 2021 JavaScript Rising Stars report came out last week, and zx was crowned ~~Homecoming Queen~~ Most Popular Project. Now, the zx ream is legally required to face off against the winner of the 2012 Rising Stars Challenge talent show — a 16-year-old Timothée Chalamet rapping under the moniker Timmy Tim (not joking).