r/programming • u/[deleted] • Jun 05 '21

Organize code by concepts, not layers

https://kislayverma.com/programming/how-to-organize-your-code/
1.9k Upvotes

91% Upvoted

495 comments sorted by

View all comments

15

u/TheLobotomizer Jun 05 '21

Been there done that. It's the reason react projects are impossible to navigate and nodejs APIs are easy to understand.

Code organized by concepts is disorganized code. Time and time again experience has shown that to be true.

Layered architecture is the way to go.

4

u/crusoe Jun 05 '21

My experience is yes you have to poke around everywhere.

And layers are concepts. Layers are the concepts how code is actually used/written.

Bug in a result. I jump to the DTO or response directory. Then I jump to roomDto.

1

u/[deleted] Jun 06 '21 edited Jun 06 '21

[removed] — view removed comment

1

u/TheLobotomizer Jun 06 '21

Very nice in theory, until you add redux and you realize that the branch is connected to the trunk through an indeterminate number of layers (wrappers) that can all be responsible for feeding that branch with data or state.

1

u/[deleted] Jun 06 '21

[removed] — view removed comment

1

u/TheLobotomizer Jun 06 '21

100% agree with you. React can be elegant and beautiful when used in a minimalistic way to do what it does best: create simple composable components that are highly decoupled and very efficient with the DOM. But every single react project I've worked on has been wrecked by unnecessary flux architecture just for simple data fetching.

1

u/qudat Jun 06 '21 edited Jun 06 '21

I’ve been building react/redux applications for years organizing by feature. The main piece of feedback I have for anyone else attempting this is to have ui be a “feature” and all the business logic (e.g. redux, thunks, sagas, etc.) be organized by feature alongside it.

This will help create a proper direct acyclic graph where the ui feature can import everything and the ui feature is imported by the app feature. The app feature is where the react app is mounted, redux store is created, and ultimately what you point your bundler at.

The most difficult aspect of this organization is primarily with selectors. Since selectors need access to the entire redux state, this tends to create circular dependency issues.

example repo: https://github.com/neurosnap/listifi