Recently I've found myself building lots of small microsites with 2, maybe 3 routes and I seem to struggle with how do I layout my files? I want my site to be able to grow, be resilient to change and ultimately know where to go looking for things. I also leverage the Module Federation technology, which mean's often areas of my route, or sometimes entire routes aren't actually part of that file tree.

And because of this, I introduce you to:

The "scene" pattern! A scene is single page instance, the "macro" component for a route if you will. Within the screenwriting industry, a scene is described as a narrative device, where the film is the story. Scenes are mini-stories that occur within that film. Similarly, a scene is a mini-story as part of the greater app.

What does this look like?

src/
├── scenes/
|   ├── homepage/
|   |   ├── Homepage.tsx
|   |   └── SupportingFile.tsx
|   └── product/
|       ├── ProductPage.tsx
|       └── Product.tsx
└── routes/
    ├── index.tsx
    └── product/
        └── $product.tsx

From that you can see that I have now clearly exported the page component for the route, leaving me to seamlessly change, alter or move my routes. Allowing me compose my scenes freely, and without an awareness of where (or what route) that scene might render.

Scenes don't compose other scenes. Scenes compose components that you may share.

In worlds such as Next or Remix that leverage file-based routing, often times all files in that sub tree will in-tern render a route. Which often leads to some large files with all the supporting components in them, or some circular dependencies because you have routes importing parts of another route and so on.

Photo by 丁亦然 on Unsplash