Десегментация
WIP
Статья находится в процессе написания
Чтобы ускорить ее появление, можно:
- 📢 Поделиться обратной связью в тикете (комментарии/эмодзи-реакция)
- 💬 Собрать в тикет накопленный по теме материал из чата
- ⚒️ Посодействовать любым другим способом
🍰 Stay tuned!
Ситуация
Очень часто на проектах встречается ситуация, когда модули, относящиеся к конкретному домену из предметной области, излишне десегментированы и раскиданы по проекту
├── components/
| ├── DeliveryCard
| ├── DeliveryChoice
| ├── RegionSelect
| ├── UserAvatar
├── actions/
| ├── delivery.js
| ├── region.js
| ├── user.js
├── epics/
| ├── delivery.js
| ├── region.js
| ├── user.js
├── constants/
| ├── delivery.js
| ├── region.js
| ├── user.js
├── helpers/
| ├── delivery.js
| ├── region.js
| ├── user.js
├── entities/
| ├── delivery/
| | ├── getters.js
| | ├── selectors.js
| ├── region/
| ├── user/
Проблема
Проблема проявляется как минимум в нарушении принципа High Cohesion и излишнего растягивания оси изменений
Если проигнорировать
- При необходимости затронуть логику, например, доставки - нам придется держать в голове, что она лежит в нескольких местах и затронуть в коде именно несколько мест - что излишне растягивает нашу Ось изменений
- Если нам надо изучить логику по пользователю, нам придется пройтись по всему-всему проекту, чтобы изучить в деталях actions, epics, constants, entities, components - вместо того, чтобы это лежало в одном месте
- Неявные связи и неконтролируемость растущей предметной области
- При таком подходе очень часто замыливается глаз и можно не заметить, как мы "создаем константы ради констант", создавая свалку в соответствующей директории проекта
Решение
Располагать все модули, относящиеся к конкретному домену/юзкейсу - непосредственно рядом
Чтобы при изучении конкретного модуля - все его составляющие лежали рядом, а не были раскиданы по проекту
Это также повышает discoverability и явность кодовой базы и связей между модулями
- ├── components/
- | ├── DeliveryCard
- | ├── DeliveryChoice
- | ├── RegionSelect
- | ├── UserAvatar
- ├── actions/
- | ├── delivery.js
- | ├── region.js
- | ├── user.js
- ├── epics/{...}
- ├── constants/{...}
- ├── helpers/{...}
├── entities/
| ├── delivery/
+ | | ├── ui/ # ~ components/
+ | | | ├── card.js
+ | | | ├── choice.js
+ | | ├── model/
+ | | | ├── actions.js
+ | | | ├── constants.js
+ | | | ├── epics.js
+ | | | ├── getters.js
+ | | | ├── selectors.js
+ | | ├── lib/ # ~ helpers
| ├── region/
| ├── user/