A general and flexible project structure that works for all projects in any ecosystem.

Preston on September 28, 2018

To quote another article on a similar topic: the ideal structure is the one that allows you to move around your code with the least amount of e... [Read Full]
markdown guide

What is the name for this particular layout style?

We cannot tell others to use this style without a specific name like,

  • "Yeah use that style from the dev.to post"
  • "Which one?"
  • "Well, that one the user Preston wrote."
  • "Oh okay."

Maybe we can call it "The Preston Layout" for convenience?

Wait, The post says The Module Unification File structure at end of the post. But I like the Preston Layout name more than Unification bla bla bla.

...Great post! Thanks for sharing!



Yeah, the layout is called "Module Unification", from the Ember RFC.

I'm not sure if "Preston Layout" is as fun sounding personally, but I feel honored that you like it more. :)


For React, I think I'm going to try this out on my next project:

├── component-name/
│   │
│   │   // not all components need tests, as testing user interactions is 
│   │   // more important
│   ├── nested-component-name/
.   │   ├── display.ts
.   │   └── index.ts // default config
.   │
.   │   // testing files start with a hyphen to visually separate
.   ├── -acceptance-test.ts
    ├── -integration-test.ts
    ├── -page.ts     
    ├── display.ts     // mostly presentational
    ├── index.ts       // default config
    ├── with-data.ts   // HoC / container / for async data fetching
    ├── with-restriction.ts   // HoC / container for permission
code of conduct - report abuse