🎁 Конкурс от Proglib Academy!

Кстати, если кто-то ещё не в курсе — у нас тут раздают MacBook Pro 14.
Да-да, не шутка, настоящий, железный, с M3 Pro

Но! Чтобы успеть пройти 2 недели обучения к 15 ноября, курс нужно взять до конца октября — и сейчас на всё скидка 40%.

Чтобы поучаствовать, нужно:

1️⃣ Покупаешь любой курс до конца октября;
2️⃣ Проходишь 2 недели обучения к 15 ноября;
3️⃣ Написать куратору в чат #розыгрыш.

До 15 ноября, потом всё — поезд (и макбук) уйдёт.

👉 Участвовать в розыгрыше

У каждого фронтендера в проекте есть свой «скелет в шкафу». Это тот самый компонент . Он начинался как безобидный ProductCard.tsx, а теперь в нём 1500 строк, он сам ходит в API, знает структуру ответа бэкенда до пятого уровня вложенности, дёргает localStorage, форматирует цены и отправляет аналитику.

Знакомая боль? Этот компонент — «серый кардинал» приложения. Он знает слишком много и делает всё сразу.

Стоит бэкенду поменять название поля product.price на product.cost — всё падает. Решили сменить fetch на axios? Компонент снова ломается. Это хрупкая архитектура, которая рассыпается от любого чиха.

Вся эта проблема идеально описывается классическими принципами Cohesion и Coupling. Вот только в классическом переводе начинается ад: «высокая связность» (Cohesion) и «низкая связанность» (Coupling).

Серьёзно, попробуйте в пятницу вечером на код-ревью быстро объяснить коллеге, какая из «связанностей» у него не та. Это же задачка для логопеда, а не для инженеров .

Тема Сенюков из Кинопоиска в своём недавнем посте предложил гениально простой выход из этого лингвистического тупика. Он предлагает использовать термины:

Cohesion → Связность
Coupling → Сцепленность

Сразу всё встаёт на свои места.

1. Высокая Связность (Cohesion). Это когда модуль делает одну понятную вещь. Он сфокусирован. (Наш 1500-строчный монстр, который делает всё, имеет низкую связность).

2. Низкая Сцепленность (Coupling). Это когда модуль почти ничего не знает о внешнем мире. Он не прибит гвоздями к fetch, localStorage или конкретной структуре API. Он получает всё необходимое снаружи (через props или context). (Наш монстр, наоборот, намертво сцеплен со всем).

Идея в том, чтобы вместо «серых кардиналов» собирать код как конструктор LEGO . Когда каждый компонент получает зависимости снаружи, его легко тестировать, мокать и переиспользовать.