When Code Melts Away

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:

• The API got simpler
• The implementation got simpler
• Code melted away

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:

• define a component (including layout components for nested routes)
• define a data loader
• define an error boundary

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

• apps could define a "global loader" to fetch data not associated with a route--stuff like user preferences, language, primary navigation items, etc. Every time we fetched data we'd have to special case the global loader as we also fetched the next routes' data.
• An App.js layout that wrapped the entire app, no matter which route you're at.
• Root error boundaries could be passed into both the server and browser entry files

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 😂

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

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.