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!

 

Thanks!

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:

src/ui/components/
├── 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