Low Coupling & High Cohesion
Модули приложения должны проектироваться как обладающие сильной связностью (направленные на решение одной четкой задачи) и слабой зацепленностью (как можно менее зависимые от других модулей)
В рамках методологии это достигается через:
- Разбиение приложения на слои и слайсы - модули, реализующие конкретную функциональность.
- Требование к каждому модулю - предоставлять публичный интерфейс доступа
- Введение специальных ограничений на взаимодействие модулей между собой - каждый модуль может зависеть только от "нижележащих" модулей, но не от модулей с того же или более высокого слоя.
Композиция компонентов (UI level)
Абсолютное большинство современных UI-фреймворков и библиотек предоставляют компонентную модель, в которой каждый компонент может иметь собственные свойства, собственное состояние и дочерние компоненты, а также, зачастую, слоты.
Такая модель позволяет собирать интерфейс как композицию различных, напрямую не связанных между собой компонентов и, тем самым, достигать слабой зацепленности компонентов интерфейса
Пример
Рассмотрим такую композицию на примере списка с хедером:
Закладываем расширяемость
Компонент списка не будет сам определять вид и структуру компонентов хедера и элементов списка, вместо этого будет принимать их в качестве параметров
interface ListProps {
Header: React.ReactNode;
Items: React.ReactNode;
}
const List: Component<ListProps> = ({ Header, Items }) => (
<div class="wrapper">
{Header}
<ul class="...">
{Items}
</ul>
</div>
)