Хотите создать веб-сайт?
Здорово! Создание веб-сайта — плодотворный творческий проект, увлекательный и полезный как для приобретения востребованных навыков, так и отличный способ попробовать себя в новом деле и поделиться опытом с большим числом людей (ну или просто несколькими знакомыми).
Как правило, приступая к созданию сайта, отправной точкой становится знакомство с HTML и CSS — и это лучшее начало!
Однако вместе с тем давайте разберемся, как устроена работа вэб-сайтов изнутри. Системный взгляд поможет глубже разобраться как в конкретных, так и общих вопросах веб-разработки.
Фронтэнд и бэкэнд
Два слова для понимания работы веб-сайтов, которые возможно вы уже слышали раньше – фронтэнд и бэкэнд. Часто они рассматриваются (и преподаются) раздельно — как два направления, но оба важных и тесно связанных друг с другом в большинстве проектов.
Говоря по-простому, фронтэнд — это любой код, который выполняется браузером, а бэкэнд – любой код, выполняемый сервером.
Сервер
Роль бэкэнд-кода для сервера на первый взгляд проста:
1. Перехватывать запросы.
2. Отвечать на запросы.
Самый распространенный пример — запрос на доступ к домашней странице веб-сайта. Получив такой запрос сервер отправляет в ответ на него HTML, CSS, JavaScript, изображения и другие файлы, связанные с этой страницей.
Однако такие запросы и ответы гораздо сложнее. Бэкэнд-код также обрабатывает запросы на извлечение и хранение в базе, на динамическую визуализацию страниц, проверку безопасности и подлинности, обработку изображений, требующую больших затрат машинных ресурсов и решать другие трудные задачи в ответ на поступающие запросы.
Сформированные ответы также могут принимать различные формы. Быть простыми, как старые-добрые HTML и CSS-файлы или же файлы изображений и аудиозаписи, или файлы данных, например, JSON.
Бэкэнд-код пишется на разных языках программирования. Ruby, PHP, Python, Java и JavaScript — самые распространенные. Бэкэнд, помимо написания кода, на котором сайт работает, часто включает в себя и то, что принято назвать задачами «системного администратора», к которым относятся установка серверных инструментов, настройка баз данных и т.д.
Изучение языков программирования для бэкэнда открывает доступ к функциональным возможностям дальнейшего применения веб-сайта. Например, взяв статическую страницу, вы сможете добавить различные способы взаимодействия с сайтом. Кратчайшим путем в бэкэнд-разработку сначала будет изучение одного из перечисленных языков программирования, а в дальнейшем — изучение бэкэнд-фреймворков или систем управления контентом на одном из языков программирования, например, Ruby on Rails (Ruby), Express (JavaScript), WordPress (PHP), Laravel (PHP), Django (Python) и так далее.
Браузер
Хотя ответ с сервера может принимать различные формы, давайте вернемся к нашему примеру с обобщенным запросом веб-страницы. После обработки запроса сервер выдает ответ в виде набора HTML, CSS и JavaScript-файлов наряду с дополнительными данными, которые могут требоваться запрашивающему.
Браузер получает и обрабатывает эти файлы. Программный код этих файлах является фронтэндом, поскольку работает на стороне браузера.
Главная роль фронтэнда заключается в следующем:
1. Запрашивать информацию (данные, файлы и т.д.) бэкэнда.
2. Отображать или визуализировать эту информацию.
3. Перехватывать входные данные пользователя (клики, трафик, скроллинг, наведения курсора, ввод с клавиатуры, голосовые команды и т.д.).
4. Отвечать на данные пользователя.
Относительно первого пункта – большинство запросов обрабатываются браузером при нажатии ссылки или вводе нового URL-адреса. Новая информация также может быть запрошена браузером с помощью JavaScript-кода уже после того, как страница будет загружена в браузер.
Отображение определяется обработкой HTML и CSS в браузере. HTML-код сообщает браузеру о структуре и содержимом страницы, а CSS – о том, как отобразить все ее на экране.
И браузер, и JavaScript-код вэб-страницы обеспечивают визуальное взаимодействие пользователя с изображением сайта на дисплее и отвечают на его реакции с помощью встроенных функций браузера или посредством пользовательских настроек JavaScript.
Написание HTML, CSS и JavaScript-кода для браузера – это и есть фронтэнд-программирование. Написание этого кода часто зависит от методов бэкэнд-обработки данных, поэтому оба этих два тесно взаимосвязаны.
Имеется большое количество библиотек, фреймворков и других инструментов для фронтэнда, начиная с простого HTML, CSS и JavaScript до таких инструментов, как jQuery, React и Angular, но при этом роль фронтэнда не зависит от того, какой инструмент используется. Инструменты – лишь способы решения задач.
Мир веб-разработки – это широчайшее поле для исследований и изучения. Откуда бы вы ни начали путь, имея представление о фронтэнде и бэкэнде и том, для чего они служат, вы всегда сможете сделать следующий шаг. Не знаете, с чего начать? Рекомендую попробовать и то и другое, и уже исходя из личного опыта, вкусов и предпочтений двигаться дальше!
Перевод статьи Kevin McGillivray: Introduction to the «Frontend» and «Backend»—Web Development Fundamentals
