Что такое фронтенд

В условной компании приняли новый сайт по снимку главной страницы. Кнопка заказа на снимке выглядела безупречно, поэтому проверку ее работы сочли излишним недоверием к прекрасному.

Фронтенд – это пользовательская часть сайта или веб-приложения: интерфейс, его отображение и поведение в браузере. Фронтенд-разработка превращает дизайн и правила взаимодействия в работающие страницы, формы и другие элементы управления.

Проследим за одним заказом

Покупатель открывает карточку товара, выбирает размер и добавляет покупку в корзину. Он видит цену, получает подсказку о наличии, исправляет ошибку в адресе и ждет подтверждения. Все эти взаимодействия проходят через фронтенд. Его работа заметна не только в цвете кнопки, но и в том, что происходит до нажатия, во время ожидания и после ответа системы.

Внешний вид – лишь часть задачи. Если выбранный размер исчезает после обновления страницы, ошибка формы стирает введенный адрес, а корзина молчит при потере связи, перед нами проблемы поведения интерфейса. Ни логотип крупнее, ни дополнительная тень у карточки их не устранят.

При этом фронтенд не обязан самостоятельно решать, можно ли продать товар. Обычно он отправляет запрос серверу и показывает результат. Данные, которые видны человеку, и место, где принимается окончательное решение, могут находиться на разных сторонах системы.

Фронтенд и бэкенд: кто что делает

Бэкенд – серверная часть приложения. В типичном магазине она проверяет права доступа, работает с базой данных, рассчитывает итог заказа по действующим правилам и сохраняет результат. Фронтенд собирает действия пользователя, помогает ввести данные и отображает ответ. Между частями нужен договор о формате запросов, результатах и ошибках.

Например, браузер отправляет состав корзины, а сервер возвращает итоговую сумму и идентификатор заказа. Если товара уже нет, интерфейс должен объяснить, что изменилось и как продолжить. Серверное сообщение «недопустимое состояние объекта» может быть технически точным. Покупателю от этого не легче выбрать другую футболку.

Разделение касается ответственности, а не названия языка. JavaScript используют и в браузере, и на сервере. Часть HTML может формироваться на сервере, а часть – обновляться в браузере после загрузки. По одному расширению файла нельзя надежно определить, где проходит граница всего приложения.

Из чего собирается интерфейс

• HTML задает структуру и смысл элементов: заголовки, поля формы, ссылки, кнопки
• CSS управляет оформлением и расположением: размерами, сеткой, цветами, адаптацией под экран
• JavaScript добавляет поведение: обработку действий, изменение интерфейса и обмен данными без полной перезагрузки страницы

Библиотеки и фреймворки помогают организовать большие интерфейсы, но не заменяют эти основы. Их выбирают под сложность продукта, требования к развитию и возможности команды. Список модных названий в смете сам по себе не объясняет, почему форма заявки не помещается на телефоне.

Фронтенд-разработчик работает рядом с дизайнером, специалистом по серверной части и тестировщиком. Дизайнер определяет взаимодействие и визуальные решения, разработчик воплощает их в браузере и уточняет технические состояния. В маленьком проекте роли могут совмещаться, но сами задачи от этого не исчезают.

Кнопка существует в нескольких состояниях

У кнопки оформления заказа есть готовность к действию, фокус с клавиатуры, ожидание ответа и завершение операции. У формы есть пустое состояние, заполнение, ошибка конкретного поля и ошибка соединения. Проектировать только удачный вариант – все равно что написать инструкцию для лифта из одного пункта «приехать».

Пока запрос выполняется, человек должен понимать, принят ли клик и нужно ли ждать. При сбое полезно сохранить корректно введенные данные и предложить понятное действие. Если ответ задержался, нельзя уверенно объявлять заказ несуществующим: сервер мог сохранить его, а браузер – не получить подтверждение. Такие ситуации требуют согласованного решения фронтенда и бэкенда.

Проверка полей в браузере ускоряет исправление опечаток. Но ее легко обойти, поэтому безопасность и бизнес-ограничения проверяют на сервере повторно. Скрытая кнопка администратора не защищает административную операцию. Интерфейс может вежливо не показывать дверь, но замок должен оставаться на месте.

Работает ли сайт для людей за пределами переговорной

Адаптивный фронтенд учитывает разные размеры экранов и способы ввода. На телефоне важно не только уместить колонки: клавиатура может закрывать поле, длинное название – ломать карточку, а небольшая цель нажатия – превращать выбор доставки в упражнение для ювелира. Проверять нужно полный путь пользователя, а не уменьшенную главную страницу.

Доступность означает, что интерфейсом могут пользоваться люди с разными возможностями. Нужны осмысленная структура, подписи полей, понятный порядок перемещения с клавиатуры и различимые состояния элементов. Семантические HTML-элементы дают браузеру и вспомогательным технологиям сведения о назначении управления. Одной визуальной похожести на кнопку недостаточно.

Производительность тоже ощущается через интерфейс: как быстро появляется основное содержимое, насколько отзывчивы действия и не прыгают ли элементы во время загрузки. Для измерения этих сторон опыта применяют, в частности, Core Web Vitals. Однако хороший результат автоматической проверки еще не означает, что покупатель поймет названия способов доставки или найдет итоговую цену.

Как принимать фронтенд-разработку

1. Пройти основной сценарий от входа до подтвержденного результата на компьютере и телефоне
2. Проверить пустые списки, длинные названия, ошибки ввода и недоступность сервера
3. Открыть ключевые экраны в поддерживаемых браузерах
4. Выполнить важные действия с клавиатуры и проверить подписи элементов
5. Убедиться, что ожидание, успех и ошибка различимы без догадок
6. Проверить загрузку на условиях связи и устройствах, близких к реальным

Критерии готовности лучше записывать как действия: «пользователь исправляет адрес без потери корзины», «ошибка оплаты не выглядит как успешный заказ». Тогда приемка связана с работой продукта. Обещание «красивый современный фронтенд» охотно подпишут все, потому что каждый принес на встречу собственное понимание красоты.

Хороший фронтенд помогает человеку завершить задачу и понять происходящее. Если посетитель занят покупкой, а не расшифровкой поведения сайта, интерфейс выполнил свою работу. Скриншот этого, к сожалению, не показывает – придется нажать кнопку.