|
| 1 | +# Structure |
| 2 | +Project was structured by [Feature Driven Development](https://www.notion.so/Feature-Driven-Development-dfe306d664ae4780bcf999ccdd15e532). |
| 3 | + |
| 4 | +## Principles |
| 5 | +- low decoupling |
| 6 | + - **feature** should not depend from **other features** |
| 7 | + - **page** should not depend from **other pages** |
| 8 | + - **shared resources** should not depend from **each other** |
| 9 | +- all **needed** resources (store / async effects / components) - locate in `features/` dir |
| 10 | +- all **common used** resources (components / helpers / fixtures) - locate in `shared/` dir |
| 11 | +- about **premature optimization** |
| 12 | + - not need to strive to optimize modules for *changing* |
| 13 | + - because of we can't predict future |
| 14 | + - instead of this - *it's desirable* to optimize their for *deleting* |
| 15 | + - because of it's only one thing we know - that all code transform to chaos =) |
| 16 | + - and it's easier to refactor **totally (clean up)** only few modules, instead of one app totally |
| 17 | + |
| 18 | +## Folders |
| 19 | +```markdown |
| 20 | +└── src/ # Source files |
| 21 | + ├── app/ # Base app's resources |
| 22 | + ├── features/ # Crucial domain splitted app's features |
| 23 | + ├── pages/ # App's pages (build from features, shared) |
| 24 | + └── shared/ # Common modules for dev |
| 25 | + ├── components/ # **Common used** React components |
| 26 | + ├── helpers/ # **Common used** Helpers |
| 27 | + ├── hocs/ # **Common used** React HOCs |
| 28 | + ├── hooks/ # **Common used** React Hooks |
| 29 | + ├── fixtures/ # **Common used** data helpers / dataSets |
| 30 | + ├── get-env # Module with **env**-vars |
| 31 | + ├── mixins.scss # **Common used** SCSS mixins |
| 32 | + └── consts.scss # **Common used** SCSS consts (not colors) |
| 33 | +``` |
| 34 | + |
| 35 | +## Feature |
| 36 | + |
| 37 | +**Feature - a self-contained user facing reusable complex building block |
| 38 | +**Feature** - a <u>self-contained</u>, <u>user-facing</u>, (maybe) <u>reusable</u> between pages and <u>complex logic</u> contained building block (module). |
| 39 | + |
| 40 | +> More details - [here](https://www.notion.so/Summary-YouTube-Feature-Driven-Arhitecture-b8609fd4452b41f499703c841e56b8e9#18cb1679b2754951ae92627d371d1a88) |
| 41 | +
|
| 42 | +```markdown |
| 43 | +└── features/ |
| 44 | + └── feature-name/ |
| 45 | + ├── components/ # UI components (`React`, `Canvas`) |
| 46 | + ├── store/ # Redux store of component |
| 47 | + │ ├── slice.ts # Feature state's `slice` |
| 48 | + │ ├── types.ts # Required `types` of slice |
| 49 | + │ ├── selectors.ts # `Selector`s of slice |
| 50 | + │ ├── effects.ts # `Thunks` with async side-effects |
| 51 | + │ └── helpers.ts # Required `helpers` |
| 52 | + ├── {...}/ # Potentially, you can locate here and other **required** modules (but without fanaticism) |
| 53 | + └── index.ts # Feature's `entry-point` (with declared public feature's API) |
| 54 | +``` |
| 55 | + |
| 56 | +## Api |
| 57 | +- `src/models.ts` - generated models types from graphql schema |
| 58 | +- `src/{path/to/feature}/{query}.gql` - request file (query / mutation) for fetch / post information by server API |
| 59 | +- `src/{path/to/feature}/{query}.gen.ts` - **READONLY** module with generated ts code of related request (in same dir with same name) |
| 60 | + |
| 61 | +### Usage: |
| 62 | +```tsx |
| 63 | +import { useTodoQuery } from "./query.gen"; |
| 64 | +... |
| 65 | +function YourComponent(props: Props) { |
| 66 | + const { data, loading, error } = useTodoQuery({ variables: { id }}); |
| 67 | + ... |
| 68 | +} |
| 69 | +``` |
| 70 | + |
| 71 | +> codegen by `@graphql-codegen`, more details in [codegen.yml][/codegen.yml] |
| 72 | +
|
| 73 | +#### Assets |
| 74 | +Perfectly, all static *assets* files should locate on related components level (**on using level**). |
| 75 | + |
| 76 | +> Because of - generally - there is own **unique** icons collection for every UI area |
| 77 | +
|
| 78 | +If you its **very necesary and matter** for you - to have common-used icons, then locate their in `shared` folder (in this case - you can import them from any point of app) |
| 79 | + |
| 80 | +```markdown |
| 81 | +└── shared/ |
| 82 | + ├── assets/ |
| 83 | +``` |
| 84 | + |
| 85 | +#### Shared |
| 86 | +There is public API declaration file (`index.ts`) in all shared modules (with module's API for other modules) |
| 87 | + |
| 88 | +**Recommends to get all needed submodules namely with its** |
| 89 | + |
| 90 | +Other words, if you want to import common component `Loader`: |
| 91 | +```ts |
| 92 | +// Bad (private module path using) |
| 93 | +import Loader from "shared/components/loader"; |
| 94 | +// Good (API is controlled by module entry-point file) |
| 95 | +import { Loader } from "shared/components"; |
| 96 | +``` |
0 commit comments