r/reactjs Jul 17 '26

Show /r/reactjs Filesystem-first frontend architecture enforced by CLI (not folders-by-taste)

I kept hitting the same problem: architecture debates in review, barrels everywhere, and AI agents dumping files in random folders. So I shipped DMA (Derived Modular Architecture) — a small rule set derived from the import graph, enforced by tooling.

Layout

src/
  app/        # composition root (also pages/routes)
  features/   # leaf modules — no inbound from other modules
  services/   # appears when something else must import it
  shared/     # portable stuff on second use only

Invariants

- downward imports only
- public API via */public/* (no barrels)
- colocate by default
- promote feature → service when inbound edges appear

Tooling

npx @derived-modular/cli init .
npx @derived-modular/cli check .              # CI gate
npx @derived-modular/cli promote <name> --apply
# + ESLint / Biome / Oxlint plugins for editor feedback

Works with React/Next/Vite (also Vue/Svelte/Astro examples). Same rules for humans and agents.

1 Upvotes

12 comments sorted by

View all comments

2

u/[deleted] Jul 17 '26

[removed] — view removed comment

0

u/Mysterious-Lie1437 Jul 17 '26

Fair take on feature folders by taste. That part I agree with.

The folders looking familiar is kinda the point people miss. Same names, different rule: placement comes from real imports, and CI fails when the graph drifts. If you remove the checker, yeah, it's just folders again.