«Фронтенд — это просто натянуть дизайн»

Почему так думают: макет выглядит «как готовый сайт», конструкторы собирают страницы за вечер, а в демо все кликается.
Как на самом деле: фронтенд — это инженерия интерфейсов под ограничения браузера, сети и… людей.

⚙️ Что на самом деле делает фронтенд:

1. Состояния и данные. Списки, пагинация, кэш, ошибки, ретраи, офлайн/онлайн.
Если забыть: дубли, вечная «крутилка», потерянные формы.

2. Производительность. Core Web Vitals, сплит бандла, lazy-loading, оптимизация изображений, prefetch.
Если забыть: «тормозит на телефоне», падение конверсии.

3. Доступность (a11y). Семантическая разметка, фокус, клавиатура, контраст, экранные дикторы.
Если забыть: часть аудитории просто не сможет пользоваться сайтом (и это риски для бизнеса).

4. Международка и форматы. i18n, RTL, часовые пояса, числа/валюты, плюрализация.
Если забыть: «\$1,000» превращается в «1.000\$», даты путают людей.

5. Безопасность на клиенте. XSS, CSP, безопасная работа с user-generated контентом, токены.
Если забыть: инъекции через комментарии/поля форм.

6. Тестирование и релизы. Unit, e2e, визуальные снэпшоты, линтеры, типы, CI/CD.
Если забыть: регрессии после каждого «мелкого фикса».

⚙️ Мини-пример: одна кнопка «Оплатить»

Казалось бы — стиль + клик. На деле:

— disabled, loading, retry;
— двойные клики и защита от повторной оплаты;
— локализация текста/валюты;
— a11y (роль, aria-атрибуты, фокус);
— телеметрия (метрики кликов/ошибок);
— graceful-fallback при 3G/офлайне.

Вот почему «просто натянуть дизайн» редко работает в проде.

Когда «натянуть» можно:

Лендинги-однодневки, внутренние прототипы, хакатоны. Как только появляется масштаб/деньги/реальные пользователи — включается инженерия.

⚙️ Что учить джуну вместо «1001 фреймворк»:

— База: HTML по-семантике, современный CSS (layout, cascade layers), чистый JS.
— Сеть: HTTP, кеширование, куки/Storage.
— Доступность: роль элементов, фокус-менеджмент.
— Перф: критический путь рендера, images/fonts.
— Практика: один фреймворк (React/Vue), маршрутизация, состояние (React Query/Pinia), тесты.

Как потренироваться:

— Собери форму оплаты с состояниями и обработкой ошибок (моковый API).
— Переверни макет на RTL и темную тему — ничего не должно «плыть».
— Замерь LCP/CLS, разрежь бандл и добейся улучшений цифрами.

Фронтенд — это не «про красоту», а про надежный пользовательский опыт. Дизайн — старт. Продукт — финиш. И путь между ними — работа фронтенд-инженера.

Подписывайтесь 🔥 RDCLR.DEV