Что такое Frontend и Backend разработка: в чем их отличия

Контент-маркетолог
Стаж 13 лет

Что такое frontend-разработка

Frontend — это процесс создания пользовательского интерфейса и функциональности сайтов на стороне клиента. Фронтендом можно считать всё то, что что видит пользователь во время серфинга по страницам веб-ресурса, а также всё, с чем он взаимодействует: кнопки, ссылки, формы обратной связи, онлайн-чат и т. д.

Человек, занимающийся фронтенд-разработкой, взаимодействует с программистами, веб-дизайнерами, вебмастерами, UX-ерами, копирайтерами, SEO-специалистами и т. д.

Сейчас мы наглядно покажем пример фронтенда в блоге Kokoc.com. Для этого откроем страницу блога, увидим ее интерфейс и вызовем просмотр исходного кода страницы:

Смотрим, что «под капотом» у веб-страницы
Смотрим, что «под капотом» у веб-страницы

В коде страницы мы видим, как с программистской точки зрения выглядит верстка, размещение картинок, гиперссылки, цвета и многое-многое другое.

Во frontend‑разработке можно выделить следующие составляющие:

  • Язык гипертекстовой разметки (HTML) — тот, с помощью которого размечаются страницы для формирования их структуры. Она включает в себя все заголовки всех уровней, абзацные отступы, маркированные и нумерованные списки, а также остальные элементы.
  • Каскадная таблица стилей (CSS)язык программирования, описывающий внешний вид документа. Это некий указатель для браузеров, которые интерпретируют его и отображают веб-страницы определенным образом: кегли шрифтов, цветовая палитра, расположение блоков сайта относительно друг друга. Кроме, того, с помощью CSS можно представлять документ для печати, голосового чтения и экранного вывода.
  • JavaScript — язык программирования, созданный для придания динамики элементам страницы. Его скрипты создаются для определенных реакций на действия пользователей (клик по кнопке, ввод данных, перемещение курсора мыши). Одной из его функций является отправка серверных запросов и загрузка данных без обновления страницы, «на лету».
Со всеми компонентами можно работать в онлайн-редакторе, например html-css-js.com
Со всеми компонентами можно работать в онлайн-редакторе, например html-css-js.com

Что такое backend-разработка

Backend‑разработка — это совокупность программных и аппаратных инструментов для создания логики действий между элементами в вебе. Увы и ах, но эту работу пользователи не видят, потому что она ведется не на клиентской, а на серверной стороне.

Рассмотрим, как работает backend. Например, пользователь заполнил поля формы обратной связи и нажал кнопку «Отправить»: в этот момент инициативу «перехватывает» именно бэкенд-разработка. Форма отправляется на сайт и фиксируется в определенном разделе его CMS под своим номером. Автоматически после этого выходит окно, где отмечается успешное заполнение формы и мы видим перед собой результат работы frontend.

В backend-разработке используются доступные на сервере инструменты, работающие под управлением таких языков программирования как Java, Ruby On Rails, PHP или Python. Конкретный инструментарий определяется спецификой проекта и стоящими задачами.

Кроме того, в backend-разработке используются системы управления базами данных — СУБД:

  • MySQL — свободная реляционная СУБД, которую разрабатывает и поддерживает компания Oracle.
  • PostgreSQL — свободная объектно-реляционная СУБД.
  • SQLite — компактная встраиваемая СУБД, чей исходный код передан в общественное достояние.
  • MongoDB — документо-ориентированная СУБД, где не требуется описание схемы таблиц.

Backend-разработчик выполняет разные обязанности исходя из требований к продукту. Он занимается созданием и интеграцией БД, обеспечением безопасности, резервным копированием и восстановлением данных на сервере.

Чем frontend отличается от backend

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

С технической точки зрения frontend-разработчик позаботился о взаимодействии с backend’ом и настроил верстку. Бэкенд-специалист настраивает клиент-серверный обмен для корректной отправки запросов и получения ответов. С пользовательской точки зрения backend, как мы и говорили, остается незаметным. Страница как будто просто взяла и загрузилась!

Это чудо чудное!
Это чудо чудное!

Как взаимодействуют frontend и backend

Есть три базовых этапа:

  1. Со стороны фронтенда в сторону бэкенда отправляется пользовательская информация.
  2. Идет обработка информации.
  3. Она возвращается обратно в той форме, в которой ее ожидает увидеть пользователь.

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

Можно выделить следующие варианты, по которым взаимодействуют друг с другом фронтенд и бэкенд:

  1. На сервер отправляется HTTP-запрос. Там ищется нужная информация: она интегрируется в шаблон и отправляется назад как страница, размеченная HTML.
  2. Использование фонового обмена данными браузера с веб-серверов, т.е. технологии AJAX. Запрос формирует Javascript, который встроен в браузер, в ответ же приходят данные в JSON- или XML форматах.
  3. Использование приложений одностраничников, где данных загружаются без перезагрузки страницы. Подобное выполняется также с помощью AJAX, фреймворков типа Ember или Angular.
  4. Использование библиотеки React для использования приложения как на клиентской, так и на серверной стороне. Специалисты во frontend и backend работают посредством «Аякса» и HTML, открываемый на стороне сервера.

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

Сколько зарабатывают frontend и backend-специалист

И самое главное: кто зарабатывает больше? Сравним зарплату этих двух направлений разработки на конкретных примерах. Для этого воспользуемся сайтом HH.RU и посмотрим, сколько обещают работодатели frontend- и backend-разработчикам в провинциальном городе (на примере Пензы), в городе-миллионнике (на примере Нижнего Новгорода) и в Москве. Недавно такой же расклад по зарплатам и городам я делал для профессий системного администратора и контент-менеджера.

В Пензе

Зарплата Frontend-разработчика в Пензе:

Как житель города скажу, что 80 000 — очень прилично для Пензы. 40 000 — уже мало
Как житель города скажу, что 80 000 — очень прилично для Пензы. 40 000 — уже мало

А вот зарплата Backend-разработчика в Пензе:

Обещают 100 000 на старте и 180 000 при соответствующей квалификации или по прошествию времени
Обещают 100 000 на старте и 180 000 при соответствующей квалификации или по прошествию времени

В Нижнем Новгороде

Зарплата Frontend-разработчика в Нижнем Новгороде:

Оплата труда закономерно становится привлекательнее!
Оплата труда закономерно становится привлекательнее!

Зарплата Backend-разработчика в Нижнем Новгороде:

Тут все еще лучше. ЗП выше 100 000 рублей для нестоличного города по-прежнему мечта
Тут все еще лучше. ЗП выше 100 000 рублей для нестоличного города по-прежнему мечта

В Москве

Зарплата Frontend-разработчика в Москве:

Несмотря на последние события, здесь мы можем видеть зарплаты в евро!
Несмотря на последние события, здесь мы можем видеть зарплаты в евро!

Зарплата Backend-разработчика в Москве:

В столице максимальные требования к должностным обязанностям
В столице максимальные требования к должностным обязанностям

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

Оценить статью
2 ответов

Комментарии

Написать комментарий
Популярные статьи автора
Узнайте стоимость продвижения сейчас
Выберите удобный способ связи:
Выберите удобный способ связи:
Введите Ваш номер телефона:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Введите Ваш Email:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Вы уже проголосовали
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
я представляю компанию
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Цена лидов в различных нишах
Тематика Стоимость лида (Москва/Россия)
Отдых 500
Мебель 350
Оборудование 500
Бансковские услуги 500
Безопасность 500
Организация мероприятий, концерты, праздники 500
Недвижимость 500
Строительство и отделка 500
Грузоперевозки 500
Доставка еды 350
Юридические услуги 500
Бухгалтерские услуги 500
Пластиковые окна 500
Детские товары 350
Автозапчасти 350
Образование 500
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
У меня есть сайт
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Оставить заявку сейчас
Ваше имя*
Введите адрес Вашего сайта:*
Введите Ваш номер телефона:*
Введите Ваш e-mail:*
Введите Ваш ник в телеграм:
Выберите интересующую услугу *
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Подпишитесь на рассылку
Не пропустите самое интересное из мира SEO и Digital. Только актуальные и самые крутые статьи.
Заявка успешно отправлена!
Наши сотрудники уже приступили к анализу Вашего сайта. Наш менеджер свяжется с вами в течение дня, спасибо!