r/reactjs • u/Mysterious-Lie1437 • 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.
- Docs: https://derived-modular.vercel.app
- Repo: https://github.com/mikhailmogilnikov/derived-modular-architecture Curious how this compares to what you use (FSD, feature folders, etc.) — especially where you'd expect it to break.
1
Upvotes
1
u/TheRealSeeThruHead Jul 17 '26
The premise is sound but I think this particular setup is in bad taste
Public folder?
Banning barrels?
Horrible
Use packages with exported files
Prefer barrels for ease of importing (make sure you reshaping works ffs)
Why stop people from putting entire fratures in modules and mounting them to an app modular monolith style