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

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

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

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

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

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

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

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

Читайте также:

Что такое FTP: как подключиться, программы для доступа

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

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

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

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

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

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

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

Читайте также:

Как проверить скорость загрузки сайта и как ускорить загрузку

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

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

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

Читайте также:

Микроразметка Schema.org: полное руководство

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

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

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

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

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

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

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Подробнее

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

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

В Пензе

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

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

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

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

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

В Москве

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

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

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

Технический аудит сайта

• Наличие дублей страниц, безопасность, корректность всех технических параметров: переадресаций, robots.txt, sitemap.xml скорость загрузки и др.
• Техническая оптимизация - один из основных этапов в продвижении.

Подробнее