Чем различается фронтенд- и бэкенд-разработка

frontend
Аудио дорожка
171

Frontend и backend — разные, но при этом очень прочно связанные между собой направления веб-разработки. Не будем говорить, что между ними возникает путаница, потому что в большинстве случаев это не так. Однако предлагаем все же более детально рассмотреть эти понятия, их особенности, а также принципы взаимодействия. Если вы только начинаете свой путь в IT и выбираете оптимальное направление обучения, следующая информация — для вас!

Что такое фронтенд‑разработка

Фронтенд-разработка — это комплекс работ по созданию пользовательских интерфейсов сайтов и приложений.

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

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

Хотите взглянуть на работу фронтендера, скажем так, изнутри? Откройте любой сайт и нажмите F12 (работает в большинстве браузеров). Откроется окно с HTML-кодом страницы, CSS-стилями и другими элементами. 

image_2

Именно этот код «видит» браузер и согласно ему отрисовывает страницу. Любой блок при необходимости можно переместить, удалить, добавить новый, внести корректировки и так далее.

Компоненты фронтенд‑разработки

Frontend-разработка по большому счету держится на трех «слонах»:

  • HTML — язык разметки, с помощью которого создается структура любой страницы, ее «костяк». В HTML-коде содержатся заголовки, абзацы, списки, пункты меню, линки на изображения и многое другое. При этом HTML практически не используется для стилизации.
  • CSS — каскадные таблицы стилей, которые нужны для стилизации элементов страницы. Именно с помощью CSS можно удобно работать со шрифтами, размерами отдельных блоков и изображений, делать верстку адаптивной и многое другое.
  • JavaScript — язык программирования, с помощью которого можно «оживить» страницу. Например, заставить сайт реагировать на определенные действия пользователя и выполнять заданные команды. Сайты с JavaScript более динамичные, функциональные и отзывчивые.

Владея HTML, CSS и JavaScript, вы уже можете называться фронтенд-разработчиком и брать в работу интересные проекты разной сложности. Если вас интересует именно это направление, рекомендуем курс Wezom Академии «Frontend-разработка 2022. Junior-верстальщик». В этом году мы существенно доработали, обновили и оптимизировали один из самых популярных курсов Академии. Рекомендуем!

Что такое бэкенд‑разработка

Backend-разработка — это разработка логики работы внутренней части сайта или сервера.

Для лучшего понимания приведем пример!

Вы заходите на сайт интернет-магазина, просматриваете товары, выбираете нужную позицию, добавляете корзину, заполняете требуемые поля и нажимаете кнопку «Подтвердить заказ». По сути все это время вы имеете дело с фронтендом — видимой частью сайта. Но после того, как вы нажали кнопку, информация отправляется на сервер, и вот тут уже в ход вступает бэкенд. Поступает информация о заказе, данные вносятся в базу, соответствующие специалисты получают информацию о том, что товар заказан, и так далее. Всего этого пользователь уже не видит, это и есть backend. А вот когда юзер получает сообщение «Заказ оформлен» — это снова фронтенд.

Если говорить максимально кратко, то бэкенд — это все, что происходит на сервере, а не на сайте или в приложении.

image_3

Компоненты бэкенд‑разработки

Сами принципы бэкенда довольно существенно отличаются от фронтенда. Разработчик должен уметь работать как минимум с одним из популярных языков программирования: Ruby, PHP, Python или Java. Владение несколькими языками будет только преимуществом.

Кроме того, разработчик обязан уметь использовать системы управления базами данных: MySQL, SQLite, PostgreSQL, MongoDB и т. д. Плюс инструменты деплоя, такие как CI/CD, Docker или Kubernetes.

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

Если вам показалось, что бэкенд сложнее фронтенда, то вам вовсе не показалось. Это действительно так, поэтому многие бэкендеры — это выходцы из фронтенда, которые решили попробовать себя в чем-то новом. Конечно же, можно начать свой путь в IT именно с бэкенда. Но вам в любом случае придется параллельно изучать и фронтенд, потому как направления сильно взаимосвязаны. А учить одновременно frontend и backend — задача определенно не из простых. И если вас интересует именно наше мнение, советуем начинать с фронтенда. 

Как взаимодействуют фронтенд и бэкенд

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

Взаимодействие в классическом варианте происходит следующим образом:

  1. Пользователь взаимодействует с сайтом или приложением через клиентскую часть (frontend), после чего информация уходит на сервер (backend).
  2. Программа на серверной стороне обрабатывает входящие данные.
  3. Сервер направляет обработанную информацию снова на клиентскую сторону в удобной и понятной для пользователя форме.

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

image_4

Давайте для большей наглядности рассмотрим еще несколько форматов взаимодействия фронтенда и бэкенда:

  1. Действия пользователя формируют HTTP-запрос, который уходит не сервер. Сервер в свою очередь находит требуемую информацию, интегрирует ее в специальный шаблон, а далее возвращает ее снова в формате HTML-страницы.
  2. Запрос формируется и отправляется с помощью JavaScript, который загружен в веб-обозреватель. Ответ при этом приходит в формате JSON либо XML.
  3. Все запросы обрабатываются без необходимости обновлять страницу. Это можно сделать через AJAX, а также с помощью фреймворков Ember или Angular.
  4. Запросы обрабатываются не только на сервере, но и на клиентской части. Подобное можно реализовать при помощи библиотеки React. В данном случае речь идет не о классическом веб-сайте, а о полноценном веб-приложении, работающем без обновления страницы.

Хороший пример взаимодействия frontend и backend через AJAX и HTML-код, обрабатываемый на серверной стороне, — сервис Google Документы или Google Таблицы. Пользователь вводит текст, а сервер тут же дает обратную информацию по мере ввода — исправляет ошибки и подсвечивает опечатки. Все это происходит в режиме «нон-стоп» без необходимости обновлять и перезагружать страницу. Удобно и быстро!

И еще кое-что напоследок!

В последнее время все чаще встречаются специалисты, которые работают сразу в обоих направлениях — фронтенд и бэкенд. Их называют fullstack-разработчиками, и они, как правило, крайне востребованы. А работа их, соответственно, весьма хорошо оплачивается.

Курс "Frontend разработка 2022. Junior верстальщик"

Frontend разработка 2022. Junior верстальщик

Хочешь получить обучение от Олега Дутченко?

На курсе научимся:

  • Верстать сложные сайты с адаптивным отзывчивым дизайном и семантической вёрсткой
  • Работать с системой контроля версий Git
  • Работать с дизайн макетом в сервисе Figma и с JavaScript
  • Работать с системой контроля версий Git
  • Автоматизировать процесс разработки и контроль качества
  • И еще деплоить проект в облачный сервис

Если ваша цель — стать fullstack-девелопером, рекомендуем начать с более простого. Пройдите курс «Frontend-разработка 2022. Junior-верстальщик» и начните работать именно как фронтенд-разработчик. Далее, когда станете более уверенным специалистом, можно переходить к бэкенд-разработке и расширять список своих компетенций. Возможно, вы решите полностью перейти в бэкенд, оставив «фронт» в прошлом. А возможно, станете fullstack-разработчиком и сможете воплощать новые проекты в жизнь полностью самостоятельно. Выбор за вами!