Веб-разработка: что такое Frontend и Backend?

Веб-разработка представляет собой процесс создания сайтов и веб-приложений. Чтобы понять, как все устроено, необходимо выяснить, из каких частей состоит сайт.

Любая веб-страница состоит из двух частей: пользовательской и серверной.

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

Щелкните правой кнопкой мыши по любому месту и перейдите в «Просмотреть код страницы» или «Исследовать элемент», вы увидите код. Это труды frontend-разработчика.

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

Но это далеко не всё. За логику сайта и хранение данных отвечает серверная часть. Любое действие пользователя передается на сервер в качестве запроса, обрабатывается и возвращается обратно. Такое функционирование описывает backend-разработчик. Код бэкенда находится на сервере сайта и скрыт от пользователя. Посетитель веб-страницы не видит, какие функции выполняются, когда он совершает какое-то действие на сайте, он видит только конечный результат работы этих функций. Чтобы стало понятнее, рассмотрим пример:

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

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

Фронтенд-разработка — это почти всегда связка из HTML, CSS, JavaScript и фреймворков для него, например React, Vue или Angular.

HTML (Hypertext Markup Language) — это язык гипертекстовой разметки, который отвечает за расположение различных элементов на сайте: текст, кнопки, ссылки, картинки, таблицы и так далее. Но чистый HTML-код без настройки стилей выглядит совсем не привлекательно.

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

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

Для создания серверной части сайта необходимо владеть одним из универсальных языков программирования – например, Ruby, PHP, Python или Java. JavaScript имеет ряд фреймворков, позволяющих работать над бэкенд-частью веб-страницы.

По данным W3Techs от 2022 года, PHP является одним из самых популярных языков для backend-разработки, на нем написано 77,5% всех сайтов в мире.

Также необходимо уметь работать с системами управления базами данных, например: MySQL, PostgreSQL, SQLite.

Помимо этого, для полноценной работы сайта необходимо использовать инструменты загрузки (деплоя) – это развертывание и запуск веб-страницы в ее рабочей среде (на сервере или хостинге). То есть разработчик загружает приложение в специальное пространство, из которого оно доступно в интернете.

Обязанности frontend- и backend-разработчиков обычно разделены, но бывает, что программист занимается разработкой веб-страницы в двух направлениях: как на стороне сервера, так и в клиентской части. Таких специалистов называют Fullstack-разработчиками.

Теперь вы знаете всё о структуре веб-страниц, чем backend отличается от frontend-а, умеете различать пользовательскую и серверную части, а также имеете представление об основных инструментах веб-разработки.

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