fable 5 did a 5k/-5k refactor on our oldest messiest react code, detangling a lot of stuff.
Overall I'm very pleased and will be doing more of this, and in more parts of the stack.
The diff appears to have no regressions, but still exploring w/ a mix of manual testing and browser automation.
I like about 80% of the decisions fable made (you can see in the prompt chain below where i added more steering). Some of the decisions I think made the code worse and more complex:
- introducing react-context - hides complexity but actually makes the program harder to reason about
- did some clever hacks like ...spreads to reduce the total line count without actually reducing/simplifying any tramp data
It did not have the taste to do some things until i explicitly steered it.
- reduce prop drilling patterns
- remove effects
Aside: i'm noticing a trend where folks like me that lean quite backend-heavy, are finally having to learn a LOT about what good frontend code means (thanks
@0xblacklight ). My only only guess is that this is due to the fact that its easier to vibe code frontend because you can see it. That means code quality deteriorates much faster, and regressions creep into your poorly-factored codebase. React is DECEPTIVELY complex - easy to work with, easy to get started, but the actual mental model you need to have to do it well is INCREDIBLY deep, and most people are just beginning this journey.
Prompts - this was during a ~2hr session where I queued the following messages in order, each line is a separate queued message, usually added more every ~20 minutes as i skimmed the diffs, keeping a queue of ~5-7 messages until the end.
refactor the
$sessionId page / root component until its clean and under 500 lines
/compact
refactor the
$taskId page / root component until its clean and under 500 lines
/compact
make it cleaner
/compact
make it cleaner
/compact
/no-use-effect (our skill to read the react docs and remove unnecessary use effects)
/compact
/no-use-effect
/compact
Remove some prop drilling. There's too much prop drilling. Why is all the state being threaded down from the top? Most of these things can own their own state workflow. It is absolutely fine to refactor the UI components to use children or to pull the UI components out of packages/ui and remove the pure wired split. More important to limit the amount of prop drilling. Let's see what we can do there on the pages we've touched so far and if you need to move storybook stories over, you can do that too.
/compact
Remove some prop drilling. There's too much prop drilling. Why is all the state being threaded down from the top? Most of these things can own their own state workflow. It is absolutely fine to refactor the UI components to use children or to pull the UI components out of packages/ui and remove the pure wired split. More important to limit the amount of prop drilling. Let's see what we can do there on the pages we've touched so far and if you need to move storybook stories over, you can do that too.
remove more prop drilling we have hooks for all this shit, push state down, use stores, make the code good
remove more prop drilling we have hooks for all this shit, push state down, use liveQueries and tanstack db, use stores, make the code good
remove more prop drilling we have hooks for all this shit, push state down, use liveQueries and tanstack db, use stores, make the code good
please create a giant html canvas with collapsible sub nodes that walks through this refactor step by step in a top-down hierarchical manner, it is to be optimized for human consumption