The Right Idea

Not a week goes by on Ex-Twitter without hype for a new frontend library. Yet every now and then a project comes along that feels like The Right Idea.

The Right Idea is more of a vibe than anything objective. The Right Idea project is not always the best tool for the job (although some of them are). But I believe in the approach these projects have taken, and I think others could benefit from taking inspiration in their direction.

React

React’s progress is slow, sometimes painfully so. And yet, each new feature introduced fits so neatly into place that it almost feels like an academic project, a “general UI runtime”.

JSX, Hooks, Suspense, Server Components are all good, clear, and inspired ideas. They also have a tendency to reveal a deeper, more general idea behind them over time.

Hooks are not just a way to achieve feature parity between functional and class components. They are a novel approach to sharing logic between components. They are also algebraic effects that abstract away non-pure parts of a render function, allowing for a much simpler mental model of rendering.

Suspense, it turns out, is not just about loaders. It’s a way to fork your component tree and render new state in the background. It’s also a way to postpone rendering part of your page on the server and stream it in later.

I can’t wait to see what kind of impact Server Components are going to have in the future!

React Spectrum

Spectrum is a component library built in layers: there’s presentation and there’s behavior.

React Aria implements behavior for different types of components and user interactions. It provides a set of hooks that make minimal assumptions about what the final component will look like. It just exports hooks and doesn’t provide any actual components.

React Aria is pretty low-level, so there are also React Aria Components, which provide an unstyled implementation of components based on React Aria hooks.

This feels like The Right Idea of extensibility and reusability in a component library.

shadcn/ui

Has the right idea about how component libraries should be distributed. Instead of importing a component and then overriding its style with themes or whatever, just copy and paste the whole component and edit the Tailwind classes directly.

Too bad it’s based on Radix UI and not React Aria Components :)

Tailwind

For a long time I thought CSS Modules were the way to go. To me, Tailwind looked like unreadable CSS with extra steps.

Now I think that the whole idea of separating styles from semantic markup, which started with CSS 1.0 in 1996, was wrong to begin with. There is no “semantic” markup. It’s all just content, and styles are content too.

Tailwind fixes this decades-old mistake by putting styles and markup back together.