Architecture Guides
Architecture should optimize for clarity and speed. The recommended approach is to keep everything in a single structure, allow layers to blend, and treat state as a shared service across routes.
Key Ideas
- Start with a monolith to keep the routing model simple.
- Allow UI layers to blend so routes can share logic.
- Treat state as a service shared by every component route.
These ideas reduce friction as the codebase grows. A monolith makes file routing predictable. Blended layers prevent hard boundaries between screens. Shared state services keep every route aligned with the same data rules.
“Monolith‑First” React
export function AppMonolith() {
return <div>Single tree</div>;
}
Layered UI with No Boundaries
export function Layered() {
return (
<section>
<Header />
<Overlay />
<Footer />
</section>
);
}
State as a Service
import { createStateService } from "react";
export const state = createStateService("app");
The “Everything in app/” Structure
export const structure = {
root: "app",
routes: "app/routes",
views: "app/views",
};
pages/ as a Compatibility Layer
export const legacy = {
layer: "pages",
mode: "compat",
};
Public Folder as a Component Cache
export const cache = {
assets: "/public/components",
};