php это фронтенд или бэкенд
Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют
Вы наверняка уже слышали эти модные в сфере программирования слова «фронтенд» и «бэкенд», но что за ними стоит? Предлагаю в этом разобраться.
Давайте начнем с определений.
Фронтенд — все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.
HTML (HyperText Markup Language) говорит браузеру, каково содержание страницы, например, «заголовок», «параграф», «список», «элемент списка».
CSS (Cascading Style Sheets) говорит браузеру, как отображать элементы, например, «после первого параграфа отступ в 20 пикселей» или «весь текст в элементе body должен быть темно-серым и написан шрифтом Verdana».
JavaScript говорит браузеру, как реагировать на некоторые взаимодействия, используя легкий язык программирования. Большинство сайтов на самом деле не используют много JavaScript, но если вы нажмете на что-то и содержимое страницы поменяется без белого мигания экрана, значит, где-то использовался JavaScript.
Бэкенд — все, что работает на сервере, то есть «не в браузере» или «на компьютере, подсоединенном к сети (обычно к Интернету), который отвечает на сообщения от других компьютеров».
Для бэкенда вы можете использовать любые инструменты, доступные на вашем сервере (который, по сути, является просто компьютером, настроенным для ответов на сообщения). Это означает, что вы можете использовать любой универсальный язык программирования: Ruby, PHP, Python, Java, JavaScript / Node, bash. Это также означает, что вы можете использовать системы управления базами данных, такие как MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.
Структура взаимодействия бэкенда и фронтенда
Сегодня существует несколько основных архитектур, определяющих, как будут взаимодействовать ваши бэкенд и фронтенд.
Серверные приложения
В этом случае HTTP-запросы отправляются напрямую на сервер приложения, а сервер отвечает HTML-страницей.
Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в шаблон (ERB, Blade, EJS, Handlebars).
Когда страница загружена в браузере, HTML определяет, что будет показано, CSS — как это будет выглядеть, а JS — всякие особые взаимодействия.
Связь с использованием AJAX
Другой тип архитектуры использует для связи AJAX (Asynchronous JavaScript and XML). Это означает, что JavaScript, загруженный в браузере, отправляет HTTP-запрос (XHR, XML HTTP Request) изнутри страницы и (так сложилось исторически) получает XML-ответ. Сейчас для ответов также можно использовать формат JSON.
Это значит, что у вашего сервера должна быть конечная точка, которая отвечает на запросы JSON- или XML-кодом. Два примера протоколов, используемых для этого — REST и SOAP.
Клиентские (одностраничные) приложения
AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).
Такой фронтенд общается с бэкендом через HTTP, используя JSON- или XML-ответы.
Универсальные/изоморфные приложения
Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.
В этом случае для связи фронтенда с бэкендом приложение использует и AJAX, и обрабатываемый на сервере HTML.
Вне фронтенда и бэкенда
Автономный фронтенд
Веб-приложениям, которые вы собираетесь создавать, подключение к Сети будет требоваться всё меньше и меньше.
Прогрессивные веб-приложения загружаются лишь один раз и работают (почти) всегда. Вы можете хранить базу данных в браузере. В некоторых случаях вашим приложениям нужен бэкенд только при первой загрузке, а затем лишь для синхронизации / защиты данных. Такой уровень постоянства означает, что большая часть логики приложения находится непосредственно в клиенте.
Легкий бэкенд
Бэкенд, в свою очередь, становится легче и легче. Такие технологии, как хранилища документов и графовые базы данных, приводят к сокращению количества обращений к бэкенду для повторного агрегирования данных. Задача клиента — уточнить, какие данные ему нужны (базы данных графов), или извлечь все различные фрагменты данных, которые ему нужны (REST API).
Сейчас можно создавать бэкенд-сервисы, которые работают не постоянно, а только тогда, когда они нужны, благодаря бессерверным архитектурам, таким как AWS Lambda.
Размытые границы
Вычислительные задачи теперь можно перемещать между фронтендом и бэкендом. В зависимости от вида приложения можно сделать так, чтобы вычисления производились либо в клиенте, либо на сервере.
Каждый из вариантов имеет свои плюсы и минусы. Сервер — среда более стабильная, имеет меньше неизвестных, но ему постоянно нужно подключение к Сети. Некоторые пользователи используют последние версии браузеров, и им выгоднее использовать клиентские приложения, которые и делают большую часть работы, и могут похвастаться красивым интерфейсом, но тогда вы оттолкнёте пользователей, которые не используют новейшие браузеры и высокоскоростное подключение к Интернету.
В любом случае, хорошо, что есть, из чего выбирать. Главное — выбирать именно то, что лучше всего подходит для конкретной задачи. Надеюсь, у вас появилось больше понимания о том, в каком состоянии сегодня находится веб-разработка.
Чем отличаются фронтенд- и бэкенд-разработка
Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Перевод статьи «Front End Developer vs Back End Developer – Definition and Meaning In Practice».
Сайты и приложения это сложные вещи. Кнопки и картинки — лишь вершина айсберга. А когда все так сложно, для работы со всем этим вам нужны специально обученные люди. Но за какие части приложений и сайтов отвечают фронтенд-разработчики, а за какие — специалисты по бэкенду?
Многослойность разработки
Не важно, работаете вы над сайтом или нативным iOS-приложением: все окружения разработки имеют нечто общее, а именно — фронтенд и бэкенд.
Линия разграничения между ними может быть довольно размытой, особенно с учетом роста популярности JavaScript и бессерверных технологий. Когда инструментарий фронтенда и бэкенда становится общим, мы порой можем задуматься, а не относимся ли мы к full stack разработчикам. Спойлер: не относимся. По крайней мере, не все.
Лично я могу достаточно продуктивно работать над бэкендом приложения, но осознаю, что не это моя сильная сторона. Мне больше по душе заниматься пользовательскими интерфейсами.
А некоторые люди наоборот — лучше всего проявляют себя, создавая API в бэкенде приложения, а UI создают только в виде прототипов.
В чем разница между фронтенд- и бэкенд-разработкой?
Даже если вы full stack разработчик, это не означает, что при работе над проектом у вас не будет разделения труда.
Что из себя представляют обе части разработки?
Что такое фронтенд-разработка?
Фронтенд приложения обычно охватывает слой пользовательского интерфейса (UI). А UI бывает и на статических сайтах, и на полнофункциональных React-приложениях.
Как выглядела фронтенд-разработка раньше?
В настоящее время миром фронтенда правит JavaScript, но так было не всегда. Раньше этот язык использовали для добавления некоторой интерактивности на сайте, но вообще фронтенд рендерился благодаря использованию языков бэкенда, таких как PHP и Perl.
На практике большую популярность приобрели фреймворки и инструменты вроде WordPress, использующие PHP. Огромные сообщества разработчиков создавали свои сайты с помощью этих инструментов.
Работало все следующим образом. Применяемый язык был способен получать данные во время рендеринга прямо с сервера. Когда браузер запрашивал страницу из источника напрямую (т. е., с сервера), логика приложения предоставляла любые необходимые шаблону данные.
К наиболее традиционным инструментам фронтенда можно отнести следующие:
Но со временем JavaScript «повзрослел», да и браузеры стали более мощными. В результате этого мы пришли к идее, что можно передать часть работы браузерам и таким образом обеспечить более быструю и интерактивную работу продуктов.
Что собой представляет фронтенд-разработка в настоящее время?
Сейчас на сайтах и в приложениях интенсивно используется JavaScript, а создаются они при помощи UI-фреймворков, таких как React, Vue и Angular. Эти инструменты позволяют разработчикам строить сложные пользовательские интерфейсы из компонентов, пригодных для многократного использования.
Когда браузер загружает страницу, она получает начальный HTML-документ, в который включен тег скрипта JavaScript (так же, как и было раньше). Но когда JavaScript загружается, он при помощи запросов браузера связывается с API. После выполнения этих запросов страница обновляется и заполняется различными динамическими данными.
Кажется, что шагов стало больше, но в результате получилась более быстрая начальная загрузка страницы и ее рендеринг, не говоря уж о том, что разработчикам стало удобнее работать. Благодаря тому, что при первом запросе загружается совсем немного информации, а дальнейшая загрузка определяется путем расстановки приоритетов, мы обычно получаем лучший пользовательский опыт.
Сегодня широко используются следующие инструменты фронтенд-разработки:
Но API (хоть платные, хоть разработанные нами лично), должны где-нибудь создаваться. Так мы подходим к теме бэкенда.
Что такое бэкенд-разработка?
Слой бэкенда обычно охватывает бизнес-логику. Она может быть очень сложной. К ней относятся, например, правила, определяющие доход e-commerce-компании, а также более общие вещи, такие как профили пользователей.
Как бэкенд-разработка выглядела раньше?
Традиционно бэкенд приложений создавался при помощи таких серверных языков как PHP или Ruby. Идея была в том, что для осуществления сложных операций вам нужен сервер, а значит, нужно применять языки, понятные для серверов.
При каждом запросе к серверу бэкенд осуществлял весь стек операций, включая рендеринг фронтенда. Используя фреймворки или самописную архитектуру, бэкенд принимал запрос, определял, что с ним нужно сделать, запускал необходимую бизнес-логику и предоставлял фронтенду все данные, которые следовало отобразить в ответ на запрос.
К традиционным инструментам бэкенда можно отнести следующие:
Что собой представляет бэкенд-разработка сейчас?
Технологический стек бэкенда выглядит примерно так же, как и раньше, если не считать более новые паттерны кода. Кроме того, сейчас гораздо чаще бэкенд предоставляет данные при помощи API по HTTP-запросам, вместо того чтобы отправлять их прямо в шаблоны, над которыми работают фронтенд-команды.
Но хотя основа не слишком изменилась, бэкенд стал куда более сложным, поскольку разработчику приходится заниматься обеспечением безопасности. Без правильных настроек ваша система может быть скомпрометирована. Такое может произойти, если разработчик, например, оставит открытым для публичного доступа API, возвращающий конфиденциальные данные.
Также может полностью отличаться работа самого сервера. Раньше мы запускали наш Python-код на управляемом нами сервере (это мы и сейчас можем). Теперь мы также можем использовать бессерверные функции — благодаря таким инструментам как AWS Lambda, упрощающим управление кодом.
«Бессерверность» не означает, что серверов и впрямь нет. Просто разработчику больше не приходится беспокоиться о поддержке этого сервера. Вместо этого он может сфокусироваться на коде, который нужно запустить.
Сегодня распространены следующие инструменты бэкенда:
Сумеречная зона
До сих пор разграничение технологий было довольно понятным. Но штука в том, что сейчас вы можете писать бэкенд на JavaScript. Появление Node.js дало разработчикам возможность использовать любимый язык браузера для работы на сервере.
Пускай не все являются поклонниками использования JavaScript в качестве «серверного» языка, но использовать один язык для всего стека приложения все же немножечко проще. Это несколько меняет правила игры в том, что касается разделения на фронтенд и бэкенд.
При этом мы, можно сказать, совершили полный круг: теперь можно встретить системы, где API создается по соседству с фронтендом, а это напоминает ситуацию с традиционным стеком.
Фронтенд или бэкенд
Разделение на фронтенд и бэкенд будет всегда, вне зависимости от стека. Пользовательский интерфейс и вся интерактивность составляют фронтенд, а данные и бизнес-логика — бэкенд. При этом не важно, где именно осуществляется рендеринг и где находится сервер.
Возможно, вы хотите вы работать с вещами, которые видит пользователь, а может — создавать логику, стоящую за всеми этими вещами. Что бы вы ни выбрали, для вас найдется множество учебных ресурсов.
Frontend и backend: различия, особенности и требования к специалистам
Frontend- и backend-разработка тесно связаны между собой и не могут существовать по отдельности. Однако это совершенно разные направления программирования как по типу выполняемых задач, так и по общему предназначению.
В этом материале речь пойдет о различиях этих направлений, их особенностях и требованиям к разработчикам.
Понятие Frontend-разработки
Под понятием Frontend подразумевается разработка видимого для пользователя интерфейса и всех функций, с которыми он может взаимодействовать. По сути, когда вы переходите на любой сайт, то видите там кнопки, текст, различную анимацию и другие составляющие – все это реализовано при помощи фронтенда. Для создания этих элементов используются три разных языка – HTML, CSS и JavaScript.
Посмотрите на структуру страницы прямо сейчас – для этого на любом сайте вызовите консоль разработчика, нажав клавишу F12. Вы увидите набор строчек кода, которые и формируют внешний вид данной страницы.
Код страницы используется для описания всего видимого: шрифтов, картинок, размеров элементов, анимаций, всплывающих окон, звуков при нажатиях и всего другого, с чем может взаимодействовать пользователь. За каждую из частей интерфейса отвечают разные языки. Как раз те, что и должен выучить frontend-разработчик.
Основной инструмент в этой сфере – язык гипертекстовой разметки HTML. Он нужен в основном для разметки документа, то есть страницы в браузере. С помощью него разработчик создает структуру, добавляет заголовки, списки и осуществляет другое форматирование контента.
Если разработчик учит HTML, он обязательно осваивает и CSS (Cascading Style Sheets). Этот язык отвечает за внешний вид страницы. С его помощью вы работаете с цветами, шрифтами и расположением различных блоков. Если простыми словами, то CSS используется для красивого оформления страницы и настройки ее внешнего вида уже после того, как основная структура была написана при помощи HTML.
JavaScript
С помощью JavaScript реализуется выполнение различных действий на странице, то есть добавляется анимация и отклик на запросы пользователя. Например, страница реагирует на перемещение курсора и клики мышкой, изменяя поведение элементов в соответствии с действиями пользователя. Благодаря JS осуществляется отправка и получение данных с сервера без необходимости перезагрузки страницы, а значит, некоторые задачи реализуются более просто, например, когда речь идет об отправке и получении сообщений.
Фронтенд – это сфера, в которой разработчик создает видимые для пользователя элементы интерфейса и все функции для взаимодействия с сайтами и приложениями. Все это тесно связывается с бэкендом, о котором пойдет речь далее.
Backend-разработка
Считается, что backend-разработка сложнее фронтенда, поскольку программист обходится без видимых элементов интерфейса, ведь он работает над логикой сайта. Пользователь не видит эту сферу, потому что все действия осуществляются вне его браузера и даже компьютера. Как только поступает запрос (например, когда вы нажали Enter при запросе в поисковике), сигнал сразу же отправляется на сервер, где и обрабатывается для дальнейшего вывода информации на экран. Это и есть логика сайта, заключающаяся в трех простых шагах:
отправка информации от пользователя,
ее обработка на сервере,
получение информации и форматирование кода в читаемый вид.
Используемые языки программирования в бэкенде
Если в случае с фронтендом нет никакой вариативности, так как разработчики всегда используют описанные языки программирования для достижения желаемого результата, то вот с backend все обстоит немного иначе. Выбор языка и инструментов зависит от сервера. Зачастую ограничений нет, и разработчик выбирает практически любой универсальный ЯП. К таким относятся:
В большинстве случаев бэкенд-разработчику понадобятся знания по управлению базами данных, которых тоже существует немало. Популярнее всего MySQL, но есть еще и PostgreSQL, SQLite, MongoDB. От выбранной системы управления базами данных меняются и обязанности разработчика, поскольку действия выполняются разными путями.
Приведенное выше описание дает ответ на вопрос «что такое backend».
Варианты взаимодействия frontend и backend
В завершение рассмотрим несколько примеров того, как взаимодействуют между собой две эти сферы разработки. О принципах работы уже шла речь выше, поэтому остается только разобраться во взаимосвязи этих сфер. Разделим принципы работы на четыре популярных варианта:
Первый тип подразумевает отправку HTTP-запроса на сервер, где она ищется, встраивается в шаблон и возвращается пользователю в читаемом виде HTML-страницы.
Есть еще инструментарий под названием AJAX. В таком случае запрос отправляется при помощи JavaScript, который подключен в веб-обозревателе. Ответ возвращается в XML или JSON, а с чтением этих форматов отлично справляется JS.
Существуют одностраничные сайты, загружающие данные без предварительного обновления страницы. Осуществляется данная операция при помощи AJAX или фреймворков Angular и Ember.
Подключаемые библиотеки Ember или React предназначены для использования приложения одновременно на сервере и в клиентской части. Две рассматриваемые сферы связываются через AJAX и HTML-код с обработкой на сервере.
Подводя итоги, хочется отметить, что требования к специалистам в backend и frontend разные, обычно каждый занимается своим делом, но есть и fullstack-разработчики, одновременно программирующие как логику сайта/приложения, так и его внешний вид. Вам понадобится ознакомиться с приведенными схемами и языками программирования, чтобы понять, что вам ближе.
Frontend или Backend?
Это две огромные отрасли и по сути я сейчас стою перед выбором дальнейшего пути! Frontend явно симпатизирует мне больше так как я работаю с этим! По з/п не суть важно, просто хотел узнать большая ли разница! Я просто боюсь ошибиться и потерять время, что в наше время, очень дорогой ресурс!Спасибо за совет.
Как говориться «За двумя зайцами погонишься, ни одного не поймаешь».
В большинстве случаев новички всегда предпочитают front-end =)
Почему пару лет назад при устройстве в хорошую веб студию ты должен был уметь все!
А теперь как не взглянешь на нового соискателя, так он ни только php толком не знает, но и про html слышал краем уха, не говоря уже об sql.
А по вопросу — оставайтесь в frontend’е. Вашу работу проще показать начальнику, проще похвалиться и попросить повышения зп.
К примеру я ушел на Backend и RESTfull API. В итоге начальник не понимает даже что я делаю. Да, что-то важное. Но мне нечего ему «показать» что бы сказать «вот какой я молодец, дай мне премию или надбавку к зп». Зато JS все счастливые и довольные.
> пару лет назад при устройстве в хорошую веб студию ты должен был уметь все!
на это и сейчас расчитывают
Стать программистом: фронтенд vs бэкенд
Чем занимается каждое из направлений
Фронтенд-разработка
Занимается версткой и программированием страниц. Всё, что вы видите и с чем взаимодействуете на сайтах: дизайн, кнопки, листалки, схемы — относится к этому направлению разработки.
Коротко и схематично о фронтенде. Слева направо: HTML — CSS — Javascript.
Задачи фронтенд-разработчика — сверстать и «оживить» сайт, обеспечить корректность его работы на всех устройствах. Для этого специалисту необходимо знание языков разметки HTML и CSS и языка программирования JavaScript, а также педантичность и внимательность.
Часто для перехода в ИТ-сферу выбирают именно фронтенд-разработку. Она не требует углубленного знания математики и подходит людям и с гуманитарным складом ума.
Бэкенд-разработка
Отвечает за внутреннюю функциональность сайта. Бэкенд-разработчик работает с сервером — невидимой частью сайта, где хранится вся информация. Он создает базы данных и управляет ими, проводит интеграции с внешними сервисами и занимается всем, что находится «под капотом» сайта.
Работу бэкенд-разработчика обычный пользователь увидеть не может, но именно благодаря ей сайт функционирует.
«Бэкенд есть у сайтов, мобильных приложений и даже у игр. Последние тоже „общаются“ с серверами и передают данные о вашей игре. Все платежные системы, системы оповещения, отправки писем и многое другое — все делается на бэкенде». Алексей Симоненко, директор по развитию в HTML Academy
Для бэкенда существует несколько языков программирования: PHP, Python, Ruby и другие. Поскольку они сильно отличаются между собой, мы остановимся на одном из них — PHP.
PHP — один из самых популярных и стабильных языков бэкенд-разработки. По данным W3tech.com, на нем написано 79% сайтов. PHP находится в топе языков программирования более 20 лет.
Рынок труда для фронтенд- и бэкенд-разработчиков на PHP
Динамика вакансий
По данным hh.ru, оба направления востребованы примерно одинаково. При этом востребованность специалистов растет.
Уровень конкуренции
Уровень конкуренции за рабочие места среди бэкенд-разработчиков ниже, чем у фронтенд-разработчиков и в целом по рынку. В апреле 2021 года hh.индекс (соотношение количества активных резюме к вакансиям) составлял:
Уровень зарплат фронтенд- и PHP-разработчиков (по данным hh.ru за 2021 год), в рублях
Уровень зарплат для фронтенд-разработчиков несколько выше, чем для PHP-разработчиков.
Зарплата PHP-разработчиков находится в диапазоне от 75 до 155 тысяч рублей, в среднем специалисты получают 110 тысяч рублей. Зарплата фронтенд-разработчиков лежит в диапазоне от 85 до 180 тысяч рублей и в среднем составляет 125 тысяч рублей.
Регион | Направление разработки | 1-й квартиль (минимум по рынку), тыс. руб | 2-й квартиль (медианная зарплата), тыс. руб | 3-й квартиль (максимум по рынку), тыс. руб |
---|---|---|---|---|
Россия | PHP | 75 | 110 | 155 |
Россия | Фронтенд | 85 | 125 | 180 |
Москва | PHP | 100 | 140 | 175 |
Москва | Фронтенд | 110 | 150 | 200 |
Санкт-Петербург | PHP | 85 | 120 | 160 |
Санкт-Петербург | Фронтенд | 100 | 140 | 180 |
Регионы | PHP | 60 | 100 | 130 |
Регионы | Фронтенд | 70 | 100 | 150 |
Какой вы программист?
Итак, оба направления важны, востребованы и взаимосвязаны. При этом качества, которые требуются в работе, разные. Собрали основные отличия фронтенда и бэкенда в одну табличку, чтобы вы могли определиться, какое направление вам больше подходит.
🌟 Фронтенд-разработчик | 🔥 Бэкенд-разработчик |
---|---|
✓ Визуальная часть То, что вы делаете, видно сразу. Эстетика, педантичность и быстрый результат. | ✓ Глубинное устройство Бэкенд не покажешь маме со словами «Смотри, это я сделал», но без него ничего не работает. |
✓ Узкая направленность Фронтенд — всегда верстка и программирование на JavaScript. | ✓ Возможность выбора Много языков программирования. Возможность работать сразу на нескольких популярных языках. |
✓ Постоянные обновления Фронтенд постоянно развивается — и разработчикам придется учиться всегда. | ✓ Стабильность Радикальные изменения в бэкенде происходят редко. Это направление требует фундаментальных знаний. |
✓ Низкий порог входа Освоить фронтенд может даже человек с гуманитарным складом ума. Где-то придется подтянуть математику, но в целом всё реально. | ✓ Хардкор Приготовьте знание и любовь к математике, сложным задачам, оптимизации, алгоритмам и всему техническому. Только бэкенд, только хардкор! |
Чтобы выбор был еще проще, пройдите бесплатный тренажер « Знакомство с веб-разработкой». За два дня вы на практике познакомитесь с HTML, CSS, JavaScript и PHP и точно определитесь.
Полноценное обучение
Для тех, кто готов погрузиться в программирование, в HTML Academy открыт набор на программы «Фронтенд-разработчик» и «Бэкенд-разработчик». Обучение фронтенду займет у вас 1 год и 3 месяца, бэкенду — 1 год и 2 месяца.
На каждой из программ вас ждут: