Антипаттерны

Знакомство с анти-паттернами

Анти-паттерны — это «паттерны наоборот». Это типичные ошибки, которые кажутся хорошей идеей в начале («Я сделаю это быстро!»), но превращаются в кошмар при поддержке.

Во Frontend-разработке цена ошибки выше, чем кажется: плохой код не просто сложно читать — он тормозит браузер пользователя и увеличивает размер загружаемых файлов.

Разберем 5 всадников апокалипсиса Junior Frontend-разработчика:

• Магические значения (Magic Numbers/Strings)
• God Component (Компонент Бога)
• Преждевременная оптимизация (Premature Optimization)
• Изобретение велосипеда (Not Invented Here)
• Карго-культ (Blind Copy-Paste)

Магические числа и строки

Использование в коде чисел или строк без объяснения, что они значат.

Пример из реальности (Плохо)

// Что такое 86400000? Почему admin? Почему #ff5733?
if (user.role === 'admin' && (Date.now() - user.lastLogin < 86400000)) {
    button.style.color = '#ff5733';
}

Как надо (Web-way)

const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
const ROLES = { ADMIN: 'admin', GUEST: 'guest' };
const THEME = { ERROR_COLOR: '#ff5733' };

if (user.role === ROLES.ADMIN && (Date.now() - user.lastLogin < MILLISECONDS_IN_DAY)) {
    button.style.color = THEME.ERROR_COLOR;
}

Почему это важно: Когда дизайнер попросит поменять красный цвет на оранжевый, вы поменяете его в одном месте (в объекте темы), а не будете искать #ff5733 по 50 файлам.

God Component

Один гигантский компонент, который делает всё: ходит в API, валидирует формы, рисует графики и управляет модалками.

    graph TD
        God["GodComponent.tsx 
 (2500 lines of code)"]
        God --> API[Fetch Logic]
        God --> State[Complex State]
        God --> UI[Render HTML]
        God --> Utils[Helper Functions]

        style God fill:#ffcccc,stroke:#ff0000,stroke-width:2px
    

Признаки:

• Файл больше 300-400 строк.
• Внутри 15 хуков useState.
• Сложно придумать название, поэтому он называется UserProfilePage или DashboardManager.

Решение: Разделяй и властвуй. Выноси логику в кастомные хуки (useUserLogic), а UI — в мелкие компоненты (UserAvatar, UserInfo).

Преждевременная оптимизация

Оптимизация кода, который еще даже не тормозит, в ущерб читаемости.

Во Frontend это часто проявляется в маниакальном использовании useMemo и useCallback.

Изобретение велосипеда

Писать свои кривые реализации сложных вещей вместо использования проверенных библиотек.

Типичные примеры во Frontend:

• Работа с датами. "Зачем мне date-fns, я сам напишу парсер!" И забывает про високосные годы и часовые пояса.
• Валидация форм. "Зачем мне React Hook Form, я сам напишу 50 if-ов!" И получает спагетти-код.

Если задача стандартная (даты, формы, роутинг, запросы), берите стандартное решение. Изобретайте там, где ваш продукт уникален.

Карго-культ

Слепое копирование кода без понимания, как он работает.

Пример: копирование конфигурации Webpack или ESLint, потому что "так было в туториале 2019 года". В итоге проект тянет за собой тонну устаревших зависимостей.

Историческая справка: Умные люди уже решили это

Не думайте, что ваши проблемы уникальны. Индустрия развивается десятилетиями. Вот когда появились инструменты, которыми мы пользуемся (или их предки):

• Языки и Платформы:
  • JavaScript (1995) — ему уже за 25 лет!
  • TypeScript (2012) — строгая типизация пришла не вчера.
  • Node.js (2009) — JS на сервере уже подросток.
• Библиотеки:
  • React (2013) — концепция Virtual DOM.
  • jQuery (2006) — отец современной манипуляции DOM.
  • AJAX (концепция) (2005) — начало эры динамических сайтов.
• Стандарты:
  • HTTP/1.1 (1997) — основа всего веба.
  • JSON (2001) — убийца XML.
  • CSS (1996) — да, раньше сайты были просто текстом.

Изучайте историю. Понимая, почему появился React (проблемы jQuery) или Redux (проблемы MVC), вы перестанете совершать ошибки прошлого.