DEV Community

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

NullVoxPopuli 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 eff...
Read full post
Collapse
 
entrptaher profile image
Md Abu Taher •

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!

Collapse
 
nullvoxpopuli profile image
NullVoxPopuli •

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. :)

Collapse
 
nullvoxpopuli profile image
NullVoxPopuli •

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
Collapse
 
fpaghar profile image
Fatemeh Paghar •

The article outlines a general enough-to-work-for-all-apps layout, focusing on the 'src' directory, which is a common convention in many projects. It introduces subdirectories like 'data,' 'redux-store,' 'UI,' and 'utils,' each serving a specific purpose. The 'ui' directory is further divided into 'routes' and '-components,' providing a clear separation between route-specific components and shared components.

the article provides a thoughtful exploration of project structure considerations, offering insights and practical guidelines for developers working with different JavaScript frameworks. It encourages teams to adopt a structure that aligns with their specific needs and emphasizes the importance of consistency and documentation.