Чем фронтенд отличается от бэкенда?

Начнем с бэкенда, так как тут все просто. Бэкендом называют серверную часть сайта. Это код, который выполняется на сервере и обрабатывает запросы. Запросом, например, может быть адрес, введенный в браузере.

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

Интересный факт. Понять из браузера, какой язык на бэкенде, практически невозможно. Общение браузера и серверов устроено так, что язык бэкенда полностью скрыт и может быть любым. Чаще всего это Ruby, Python, JS, PHP, Java, C# и другие.

Для тех, кому интересны подробности: браузер и сервер общаются между собой с помощью протокола HTTP, о существовании которого все подозревают :)

Выше мы упомянули, что бэкенд формирует ответ. Чем является этот ответ? Вот тут возможны варианты, которые влияют на понимание того, как работает фронтенд. Но сначала небольшое введение.

Под фронтендом в первую очередь понимают внешний вид. За него отвечают HTML и CSS — технологии, с помощью которых создаются веб-страницы, на них добавляется красота.

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

То есть схема такая:

Приходит запрос из браузера → бэкенд выполняет нужную логику → бэкенд формирует готовую страницу, то есть HTML + CSS → бэкенд отправляет это в браузер → браузер отрисовывает страницу.

Этот подход надежный и простой. Он будет всегда актуальным для сайтов, где нет высоких уровней интерактивности.

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

Такой подход усложняет систему, но открывает доступ к практически неограниченным возможностям. Ярчайший пример — это чаты или тренажер Хекслета.

Как правильно оформлять резюме, чтобы его заметили работодатели? Что писать, если в резюме нет опыта программирования или тестирования и только учебные проекты? Почему на Hexlet CV именно такая форма резюме?

Вместе с Екатериной Савченко, сертифицированным карьерным консультантом Хекслета, посмотрим примеры реальных резюме QA-специалистов, фронтендеров и бэкендеров и дадим рекомендации по их улучшению.

🗓 Лайв начнётся 26 октября в 17:00 по МСК