Post

I was curious about the monorepo suggestion. Are you suggesting that a React SPA, for example, should literally be a monorepo with each vertical as its own package? Could you please share an example of what that looks like in practice?

Yes, pretty much. Taking Josh's example you shared, you would have a monorepo package for base, search and users. Each having their own package.json with defined exports. It's no different to "top level folders", just that it's "top level packages"

Abed

@aabuhijleh.bsky.social

joshwcomeau.comDelightful React File/Directory Structure • Josh W. ComeauHow should we structure components and other files in our React apps? I've iterated my way to a solution I'm really happy with. In this blog post, I'll share how it works, what the tradeoffs are, and ...

The hardest part is definitely defining the right verticals for a piece of code, as you pointed out. Josh Comeau's piece on file structure does a good job explaining why people might default to horizontal structure. www.joshwcomeau.com/react/file-s...

@akkumaryuujin.bsky.social

Generally agree! `base` is the `design-system`, but why does each domain have an additional `components` folder? Like `search` could just be 3 things flat. As modules get deeper, you'll get horizontal splits within them easily and have the same drawbacks. Staying vertical within verticals is better

Akkuma Ryuujin

23 July

I've been trying to reconcile how you'd think about both file based routing and a vertical codebase. Are the routes living alongside of the vertical? Is file based routing just not a good idea and we have to go back to code based?

Akkuma Ryuujin

@akkumaryuujin.bsky.social

23 July

TanStack Router itself says "Code-based routing is not recommended for most applications. It is recommended to use File-Based Routing instead." So do we stick with file based and just treat the vertical as a package we utilize to build our routes independent of the vertical?

Akkuma Ryuujin

@akkumaryuujin.bsky.social

23 July

Based on the above: src/ ├── user/ │ ├── queries.ts │ ├── mutations.ts │ ├── component1.tsx │ ├── use-something.ts │ └── sub-domain/ │ └── queries.ts └── routes/ └── user <- imports from user vertical primarily + any others ├── user.index.ts └── $userId.tsx

samvantoever.bsky.social

@samvantoever.bsky.social

fsd.howFeature-Sliced DesignArchitectural methodology for frontend projects

Excellent write-up! I'm currently in the proces of migrating from a shared folder + vertical route boundary to something similar because a route as a boundary is too limiting. I also like the approach of fsd.how. It goes beyond just a feature vertical and includes strict import rules + enforcement.

Arnaud Barré

@arnaud-barre.bsky.social

I still have a hard time convincing people that putting `handleClick` or `handleChange` outside of JSX doesn't make the code more readable. People are so attached to dividing things in a way that is simple, instead of putting the effort into the more delicate but useful product split

natemoore on elm street 👻

Agree, the thing that's mostly stopping adoption is that getting is right is harder and you have to stop and think a bit. Also AI has learned the horizontal split and will likely default to it.

@natemoo.re

14 Apr

Hell yeah, can't wait for vertical Sentry 🙏

14 Apr

It's a long road to make that happen

Can S. Rau

@canrau.com

Using a ` features` dir currently which works quite well, along a components folder for more general things and legacy stuff that's not been moved over to features yet 😅 But the "But What About Shared Code?" section is a good call to maybe not name it "features" at all 🤔

Yeah "features" is pretty generic. Imo it will lead to things being put into "components" that need to be shared between two features because they aren't a feature by itself.

"components" is also generic. Everything in react is a component - from your <Button> to your <DashboardPage>. If you want this directory for your re-usable primitives like `<Card>` etc, I'd prefer `ui-patterns` or `ui-primitives`

Can S. Rau

@canrau.com

Yea very good & true points 👌 Currently it's fine but I'll def keep considering improving on it, for when we're probably re-structuring anyway at some point 🤓

Noé Tatoud

@ntatoud.bsky.social

We talk about 'horizontal codebases' but an even nastier version imo would be the 'route tree codebases' for frontend apps: Everything is collocated with the routes, unless it isn't. Then we fallback to horizontal splitting. And then you gotta put in 10x the effort to migrate away from it and 🫨 ugh

Yeah I've been there. I'd rather have the route(s) defined within the domain package. I know @beaussan.io has some ideas for @tanstack.com router in this regard 😊

Rasmus Schultz

@mindplay.dk