Cohesion и Coupling 🧩🔗 Здарова, работяги! Если очень коротко: хорошая архитектура — это высокая связность внутри модулей (cohesion) и низкая связанность между ними (coupling). Эти два термина отлично объясняют, почему код либо живёт годами, либо рассыпается от каждого чиха. В оригинале различить их достаточно просто, но вот в переводе… связанность и связность… Если у вас есть дефекты речи или вы просто устали к концу дня, то готовьтесь к сумбуру. Поэтому я обычно использую другой перевод: — Cohesion — Связность — Coupling — Сцепленность Связность (Cohesion) 🧲 — Насколько сильно и «по делу» связаны части внутри модуля/компонента. — Высокая связность = модуль делает одну понятную вещь. — Сигнал проблемы: описываете модуль через «и-и-и» — «карточка товара грузит, форматирует цену, читает локаль и отправляет аналитику». Сцепленность (Coupling) 🔗 — Насколько сильно модуль зависит от других. — Низкая сцепленность = модуль знает только минимально необходимое о внешнем мире. — Сигнал проблемы: изменение структуры store/API ломает полприложения. Пример 🍿 Плохо: низкая связность + высокая сцепленность function ProductCard({ id }: { id: string }) { const [product, setProduct] = React.useState<any>(null); React.useEffect(() => { fetch(/api/products/&#036;{id}) .then(r => r.json()) .then(setProduct); window.analytics.track('view_product', { id }); }, [id]); if (!product) return <>Loading...</>; const currency = localStorage.getItem('currency') || 'USD'; const priceText = new Intl.NumberFormat('en', { style: 'currency', currency }) .format(product.price); return ( <div> <img src={product.image} /> <div>{product.name}</div> <div>{priceText}</div> </div> ); } — Компонент делает всё: загрузка, форматирование, аналитика, работа со storage, UI. — Жёсткая привязка к fetch, analytics, localStorage, Intl и структуре product. — Любое внешнее изменение тянет правки сюда. Хорошо: высокая связность + низкая сцепленность type Product = { id: string; name: string; image: string; price: number }; type ProductApi = { getById(id: string): Promise<Product> }; type CurrencyFormatter = (currency: string, amount: number) => string; function ProductCardView({ product, priceText }: { product: Product; priceText: string }) { return ( <div> <img src={product.image} /> <div>{product.name}</div> <div>{priceText}</div> </div> ); } type Props = { id: string; api: ProductApi; currency: string; formatPrice: CurrencyFormatter; } function ProductCard({ id, api, currency, formatPrice }: Props) { const product = useProduct(id, api); if (!product) return <>Loading...</>; const priceText = formatPrice(currency, product.price); return <ProductCardView product={product} priceText={priceText} />; } — ProductCard оркестрирует UI конкретной карточки (высокая связность). — Зависимости приходят снаружи: api, formatPrice, currency (низкая сцепленность). — Легко подменять реализации. Опасные виды сцепленности на фронте 🛑 — Компонент знает «внутренности» ответа бэкенда и лезет в deeply.nested.a.b.c. — Временная: функция/эффект B должна вызываться строго после функции/эффекта A (завязка на порядок эффектов). — Прямое использование window, document, localStorage прямо в компоненте. — Зависимость от окружения: компонент «знает», что он в проде/тесте. Как снижать coupling и повышать cohesion 🛠 — Интерфейсы и адаптеры: компоненту нужен api.getById, а не fetch/axios. — DI через props/context: прокидывайте зависимости сверху. — Разделяйте UI и данные: View без побочек, отдельные сервисы для данных и бизнес-логики. — Избегайте «utils.ts на 1000 строк»: маленькие тематические модули (price/strings/date).