When Code Melts Away

Ryan Florence -

Here's something that Michael Jackson says regularly and I love it:

When you hit on the right abstraction, code melts away.

Today while working on Remix I ended up with a commit with a -118 line count change 🎉.

20 files changed, 192 insertions(+), 310 deletions(-)

Some interesting points:

We figured out a better abstraction for what we were doing.

Last week we shipped a feature where every route (layout or nested child) can export an error boundary to handle errors the developer didn't anticipate (if you're interested, here's a video about Remix Error Boundaries). We also shipped a feature that moved the data loaders and actions out of a separate folder and into the Route modules themselves.

After making both of these changes we started giving our implementation and our API some pretty heavy side-eye. Check it out.

Route modules can do a few things:

We had these three ideas for the "root" of the app as well:

It's all the same crap routes are doing except the API is spread all over the place! It's really just a route that got dismembered ☠️

Turns out we had already anticipated this kind of thing (but forgot I guess) because React Router v6 (prerelease) already supports the idea of pathless root routes 😂

  <Route element={<App />}>
    <Route path="/" element={<Index />} />
    <Route path="/about" element={<About />} />

This morning I made the change of adding a "root route" and got to remove some now pointless API and a whole bunch of Remix code all melted away. No more special casing global data. No more awkward root error boundaries.

It felt great.

Hi, I'm Ryan! I've been a webmaster since that was a thing. You might know me from React Router, Remix and Reach UI. You can follow me on Twitter, GitHub and YouTube.