$ yarn install
$ yarn start
| name | explanation |
|---|---|
| components/ | Store presentation(view, UI) layer. Should be organize with atomic design for example, but later. |
| domain/ | Store domain layer. Entities and repository looks they should be in data directory, but in order to dependency inversion, they depends on domain layer |
| data/ | Store data layor (repository and data) |
| di/ | Store Dependency Injection codes |
I'm not gonna here explain deeply, but as you can see clean architecture is similar to game structure
▼ From this youtube video
And this is famous architecture image, eyes automatically focus on big circle image, but right bottom image is also important
You can easily see architecture flow with that gaming image
It was difficult how to handle with presenter in frontend architecture, because frontend is UI itself
After enjoying Clean Architecture, I thought there are two important things in it.
1. separate of concerns
2. control dependency direction by using interface
Now let's think about number 2
If you have learned SOLID principle, would remind you of Dependency Inversion
I explained about Dependency Inversion with image
(Clean architecture and SOLID principle are written by same person, Robert C. Martin.)
- remove data button (local storage)
🖥 🇯🇵 youtube in Japanese
easiest way to understand what is clean architecture if you understand Japanese
📗 react with clean architecture, github source code
I think this code is more real world code than mine, you even could get how to handle with web and mobile by using adapter
After trying to make this one, honestly I thought clean architecture is too complicated, because we don't use often useCase and repository effectively.
So presentational and container pattern might be simpler and better way.
simply put, this pattern is that separating business login component and UI component.