Frontend

Frontend: всё, что происходит в браузере посетителя

Frontend (фронтенд, клиентская часть) — это та часть сайта или приложения, которую пользователь видит и с которой взаимодействует: страницы, кнопки, формы, меню, анимации. Код фронтенда скачивается в браузер и выполняется на устройстве посетителя. Всё, что остаётся на сервере — база данных, расчёты, проверка прав доступа, — называют серверной частью, или backend.

Раньше сайт был набором готовых HTML-страниц, и отдельной профессии не требовалось: хватало верстальщика. Когда интерфейсы усложнились и страницы стали обновляться без перезагрузки, появились библиотеки и фреймворки. Самый известный пример — React: его создали в Facebook (теперь Meta), а исходный код открыли в мае 2013 года. С тех пор frontend-разработка превратилась в самостоятельную инженерную область.

Путь клика: что делает frontend, а что сервер

Возьмём интернет-магазин. Посетитель нажимает «В корзину», и за долю секунды происходит цепочка действий, где у frontend и сервера разные роли.

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

Технологии frontend: язык, фреймворк, сборка

React — библиотека для интерфейсов, Angular — полноценный фреймворк от Google, Vue создал Эван Ю, работавший тогда в Google. Выбор определяют не «модой», а задачей и командой: для типового сайта хватит любого из них, а переписывать готовый проект на другой стек ради новизны смысла нет. Как выбирать технологию под проект, разобрано в обзоре «На чём разработать сайт».

Где собирается страница: в браузере или на сервере

Это главный архитектурный выбор frontend. В одностраничном приложении сервер отдаёт почти пустой HTML и JavaScript, а страницу собирает браузер. Такой интерфейс отзывчив, как программа на компьютере, но первая загрузка тяжелее. При серверном рендеринге (SSR) готовая разметка приходит уже собранной, а JavaScript «оживляет» её позже.

Для поиска разница ощутима. В справке Яндекс Вебмастера сказано, что по умолчанию робот сам решает, выполнять ли JavaScript, и что исполнение скриптов может создавать дополнительную нагрузку на сервер. Если контент есть в HTML сразу, роботу проще, поэтому для сайтов, которым нужен органический трафик, обычно выбирают SSR. Для кабинетов и сервисов за логином обычно достаточно SPA.

Если админка сайта живёт отдельно от витрины, а страницы собирает frontend по данным из API, это подход Headless CMS.

Вес страницы и скорость: расчёт на примере

Скорость — зона ответственности frontend, и её влияние легко посчитать. Допустим, страница загружает 1,2 МБ JavaScript. Это около 9,6 Мбит. На мобильном канале в 1 Мбит/с только скачивание займёт почти 10 секунд, и это до того, как браузер начнёт выполнять код. Если разбить код на части и загружать только нужное для первого экрана, объём может упасть до 300 КБ — тогда те же условия дают около 2,4 секунды.

Поэтому разработчик режет код на части, включает сжатие Brotli или gzip, откладывает загрузку картинок вне экрана и следит за метриками Core Web Vitals: LCP не более 2,5 секунды, INP не более 200 миллисекунд, CLS не более 0,1 по данным web.dev.

Frontend, вёрстка, дизайн и fullstack: где проходят границы

• Верстальщик превращает макет в HTML и CSS. Frontend-разработчик берёт эту основу и добавляет логику: состояние, запросы, валидацию форм.
• Дизайнер проектирует интерфейс и пути пользователя. Frontend-разработчик воплощает их в коде и подсказывает, что технически реализуемо.
• Backend-разработчик строит серверную часть и API, к которому обращается frontend. Два специалиста сначала договариваются о формате данных, потом работают параллельно.
• Fullstack-разработчик умеет обе стороны. Для небольшого проекта это удобно, для крупного команду всё равно делят по зонам.

В BigPanda frontend входит в разработку сайтов, а для кабинетов, маркетплейсов и SaaS его проектируют вместе с серверной частью в рамках сложной разработки.

Частые вопросы