A New React Framework

Today’s issue: New ways to ruthlessly judge every website you visit, anatomy lessons without the formaldehyde, and semi-painful techniques to avoid using JavaScript.

Welcome to #246.

---

Waku and the power of minimalism

React Server Components have been in an exclusive relationship with Next.js for a while now. But that might be starting to change, thanks to Waku — a minimal React framework created by Daishi Kato (maintainer of Zustand and Jotai) that’s specifically designed for RSC.

Quick review: React has supported SSR (React ➡ HTML) for a long time, but it was never a core part of the framework. Instead, it allowed meta-frameworks like Next.js, Remix, and myself one lonely autumn day in 2021, to implement their own flavors of SSR. But with RSC, things get a little more complicated.

The basic idea of RSC is that rendering happens on the server (duh). But instead of sending HTML, the server sends serialized JSX, which the client uses to update the DOM. You need a few things to pull this off: a bundler to split your server and client code, a server runtime to render your components, and a router to handle requests based on the RSC protocol.

That’s where Waku comes in. Unlike Next.js, its minimal API is not tied to a specific router, allowing for more experimentation and solutions to come from the rest of the React ecosystem. It’s also built on top of Vite to be runtime agnostic with no Node-dependent APIs.

Here’s what else it gives you:

• A server API where you can define your server component “entries” that will be used to render your components.

• A client API that defines “slots” for your Server Components to render into, and hooks to “refetch” (aka re-render) a server component.

• Routing that comes with an optional client side and server side router to get you up and running quickly. But they’re so minimal that you’ll probably end up writing your own abstractions.

Bottom Line: By providing such a minimalistic API, Waku forces allows developers to build multiple feature implementations for themselves and encourages growth in the ecosystem — kind of like when my dad dropped me off in the woods for three weeks with nothing but a hunting knife and some duct tape when I was 9 years old.

What doesn’t kill us makes us stronger.

---

Propel lets you build customer-facing analytics surprisingly fast

What’s one huge difference between a just-ok SaaS app and a true enterprise-level b2b application? Analytics.

That’s why your product looks 10x more legit if you can give your customers a sleek dashboard with lots of insightful data and custom reports.

There’s just one problem: building the damn thing is expensive and time-consuming.

Thankfully, Propel makes it easy by giving you everything you need to build analytics for your app in days, not months:

• Collect data from any data source — JSON events, Snowflake, S3, BigQuery, etc.

• Use their serverless architecture to serve blazing-fast queries as an alternative to Clickhouse or Elasticsearch.

• Build beautiful charts and dashboards with their powerful UI kit of customizable React components.

Check it out — and see why one CTO said it allowed his team to “launch our enterprise dashboards in a couple of sprints.”

---

let x = 5
let y = 10
[x, y] = [y, x]

---

1. Manupa wrote a deep dive about The Anatomy of shadcn/ui, and he’s still having trouble getting the smell of formaldehyde off his clothes.

2. SvelteKit 2.0 just dropped today with Vite 5 support and a popular new feature called shallow routing, which lets you associate state with a history entry without causing navigation.

3. 10 Insights on Real-World Container Usage is a brand new report where Datadog examined 2.4 billion containers run by their customers, and used the data to pull out some interesting (and surprising) insights. [sponsored]

4. Jim Nielsen wrote about Examples of Great URL Design, so you can have a new fun way to ruthlessly judge every website you visit.

5. React Native 0.73 comes with new debugging improvements for Hermes, stable symlink support, and “Bridgeless Mode” - the next pillar of the new RN architecture.

6. Because the Expo team never sleeps, they’ve already released an Expo v50 beta with React Native 0.73, a new Expo devtools plugin API, and much more.

7. Jen Simmons and Marcos Cáceres wrote about all the new WebKit features in Safari 17.2. And there are a lot.

8. Jacob Groß wrote about The fastest way of passing state to JavaScript with lots of fancy benchmarks to prove it.

9. Huh? is a simple library for building interactive forms and prompts in the terminal with a name that will definitely not confuse anyone ever.

10. Kilian Valkhof wrote an article called You don’t need JavaScript for that, which shows how you can avoid using simple JavaScript features by instead writing lots of long and complicated fun HTML and CSS 😉.

---

If you run this code you get a “ReferenceError: y is not defined” error. This is because the JavaScript engine does not automatically insert a semicolon after 10 because the subsequent line can be parsed as a continuation of the expression. Meaning, JavaScript interprets the code like this:

let x = 5;
let y = 10[x, y] = [y, x];

To fix the issue, we can update our code to use semicolons or wrap the expression in parentheses:

let x = 5;
let y = 10;
([x, y] = [y, x]);

It’s comforting to know Douglas Crockford is (probably) out there still shaking his fist at this “insanely stupid code”.