Frontend сайта: что посетитель видит и использует

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

Часть разметки может формироваться на сервере или при сборке сайта. Поэтому frontend не следует понимать как обязательное создание всей страницы JavaScript-кодом только после её открытия. Для заказчика существеннее то, что получает посетитель и как работает нужный сценарий.

Пример с заявкой

Учебный пример: посетитель вводит контакт и описание проекта. Интерфейс показывает подписи и подсказки, помогает заметить ошибку, отправляет данные и объясняет результат. Пока ответ не получен, состояние ожидания отличается от подтверждения принятой заявки.

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

Что проверить заказчику

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

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

Где проходит граница

UI описывает элементы и способы взаимодействия; frontend — их реализацию как части веб-продукта. Серверная обработка может быть общей с другими каналами или предоставляться отдельным сервисом. Название технологии не объясняет автоматически границы работ.

Проверка данных в браузере удобна для подсказок, но не заменяет проверку на сервере: клиентскую проверку можно обойти. Это различие объясняет MDN.

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