Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>20 июл 2022</li>

3 <li>0</li>

4 </ul><h2>Чем различается фронтенд- и бэкенд-разработка</h2>

5 Рассказываем, что такое фронтенд и бэкенд, чем они различаются и как взаимодействуют между собой. Разбираемся и выбираем подходящее направление.

6 Иллюстрация: Merry Mary для Skillbox Media

7 Пишет про дизайн и маркетинг в Skillbox Media. С 2011 по 2017 год писала про бизнес в деловые СМИ, соучредитель агентства копирайтинга "Абзац".

8 Разработчик в компании<a>VVDEV</a>. Пишет на JavaScript и Golang.

9 Фронтенд и бэкенд - это как сцена и закулисье веб-приложения. Фронтендеры разрабатывают интерфейсы, изучая и учитывая пользовательский опыт (UX), а бэкенд-программисты - создают "внутрянку" сервиса, которая работает без участия пользователя.

10 Рассмотрим подробнее, чем занимаются специалисты по обе стороны "веб-сцены".

11 Фронтенд-разработка - это создание пользовательского интерфейса на клиентской стороне веб‑сайта или приложения. Это всё, что видит пользователь, когда открывает веб-страницу, и с чем он взаимодействует: кнопки, баннеры и анимация. Фронтенд связан с бизнес-логикой продукта (клиентская часть постоянно "общается" с серверной), но её разработкой занимаются бэкенд-программисты.

12 В процессе работы фронтендер взаимодействует с дизайнерами, бэкенд-разработчиками и UX-аналитиками.

13 Чтобы понять, что собой представляет фронтенд, откройте страницу любого сайта - вы увидите интерфейс. Щёлкните правой кнопкой мыши по странице, выберите пункт "Исходный код страницы", и перед вами откроется… её исходный код :)

14 Скриншот: Skillbox MediaЭто и есть пример работы фронтенд‑разработчика. Браузер запускает код, который описывает цвета, вёрстку, шрифты и расположение графических элементов, а мы видим такую красоту.

15 Курсы для старта в разработке

16 Фронтенд сайта или веб-приложения можно разделить на три большие части:

17 <ul><li>HTML (HyperText Markup Language) - язык разметки документов, на котором создают структуру страницы: заголовки, абзацы, списки и так далее.</li>

18 <li>CSS (Cascading Style Sheets) - язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду браузер понимает, как именно отображать элементы. Например, CSS задаёт цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта. Ещё он позволяет воспроизводить документ в разных видах: для печати (обычной или шрифтом Брайля), вывода на экран или для чтения скринридером.</li>

19 <li>JavaScript - это язык, который оживляет веб-страницы. Его задача - реагировать на действия пользователя, обрабатывать клики мышки, перемещения курсора, нажатия клавиш. Ещё он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.</li>

20 </ul>Бэкенд - это разработка бизнес-логики продукта (сайта или веб-приложения).

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

22 Пример

23 - Когда водитель садится в салон автомобиля, он видит перед собой "пользовательский интерфейс": панель управления, руль, педали газа и тормоза. При нажатии на педаль газа машина начинает двигаться вперёд. Так вот, фронтенд - это те самые педали: водитель знает, что будет, когда он на них нажмёт. А бэкенд - это внутренние процессы, которые происходят в автомобиле после нажатия на педаль. Пользователь не видит, как заводится двигатель, и не знает, как он устроен.

23 + Когда вод��тель садится в салон автомобиля, он видит перед собой "пользовательский интерфейс": панель управления, руль, педали газа и тормоза. При нажатии на педаль газа машина начинает двигаться вперёд. Так вот, фронтенд - это те самые педали: водитель знает, что будет, когда он на них нажмёт. А бэкенд - это внутренние процессы, которые происходят в автомобиле после нажатия на педаль. Пользователь не видит, как заводится двигатель, и не знает, как он устроен.

24 Теперь посмотрим, как работает бэкенд сайта.

25 Когда вы вводите запрос на странице поисковика и жмёте клавишу Enter, вы переходите из области фронтенда в бэкенд. Запрос отправляется на сервер Google или "Яндекса", на котором расположены сложные алгоритмы поиска, - там и происходит всё "волшебство". Как только на мониторе появилась информация, которую вы искали, - вы возвращаетесь в область фронтенда.

26 По большому счёту, сервер - это тот же компьютер, только удалённый и более мощный. Он хранит данные и отвечает на запросы пользователей.

27 Бэкенд-разработчик применяет инструменты, которые доступны на его сервере. Он вправе выбрать любой из универсальных языков программирования - например, Ruby, PHP, Python или<a>Java</a>. Всё зависит от конкретного проекта и задачи заказчика.

28 Также для бэкенд-разработки используются системы управления базами данных:

29 <ul><li><a>MySQL</a>;</li>

30 <li><a>PostgreSQL</a>;</li>

31 <li><a>SQLite</a>;</li>

32 <li><a>MongoDB</a>.</li>

33 </ul>Также используются инструменты загрузки (деплоя):

34 <ul><li>CI/CD;</li>

35 <li><a>Kubernetes (K8s)</a>;</li>

36 <li><a>Docker</a>.</li>

37 </ul>Бэкенд - это не только написание кода, но и создание архитектуры приложения. Архитектура в разработке определяет структуру и порядок использования баз данных. Важно, чтобы база данных корректно взаимодействовала с кодом приложения и непрерывно доставлялась на сервер - за это отвечает бэкенд-разработчик.

38 В зависимости от продукта обязанности бэкенд-разработчика могут различаться. На одних проектах он создаёт и интегрирует базы данных, на других обеспечивает безопасность или настраивает технологии резервного копирования и восстановления.

39 Взаимодействие фронтенда и бэкенда происходит по кругу:

40 <ul><li>клиентская часть приложения (фронтенд) отправляет пользовательскую информацию на сервер (бэкенд);</li>

41 <li>программа на сервере обрабатывает информацию;</li>

42 <li>информация возвращается клиентской стороне в понятной для пользователя форме.</li>

43 </ul>Несмотря на то что бэкендом и фронтендом занимаются разные специалисты, каждому из них желательно понимать принципы, по которым работают коллеги. Даже дизайнеру интерфейсов полезно хотя бы в общих чертах знать, как устроен бэкенд проекта, которым он занимается. Это поможет адекватно оценить технические возможности сайта или приложения.

44 Существует несколько вариантов взаимодействия фронтенда и бэкенда:

45 <ul><li>HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает её в шаблон и возвращает в виде HTML-страницы.</li>

46 <li>Вариант с использованием AJAX (Asynchronous JavaScript and XML). В этом случае запрос отправляет JavaScript, загруженный в браузер, а ответ приходит в формате XML или JSON.</li>

47 <li>Одностраничные приложения загружают данные без обновления страницы. Это тоже делается с помощью AJAX или фреймворков<a>Angular</a>и <a>Ember</a>.</li>

48 <li>Библиотека<a>React</a>помогает использовать приложение и на сервере, и на клиентской части. Веб-сайт превращается в полноценное приложение, которое получает необходимую для пользователя информацию без обновления страниц.</li>

49 </ul>Пример

50 Когда вы вводите текст в "Google Документах", то сразу же получаете обратную связь от сервера: программа подсвечивает синтаксические ошибки и предлагает исправления. При этом перезагружать страницу не нужно. Фронтенд и бэкенд взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

51 Обязанности фронтенд- и бэкенд-разработчиков, как правило, разделены, но иногда программист решает проблемы как на стороне сервера, так и в клиентской части. Таких специалистов называют фулстек-разработчиками.

52 Программисты, которые уверенно чувствуют себя как во фронтенде, так и в бэкенде, нередко встречаются на рынке. Чаще всего это разработчики уровня Senior, прошедшие сложный путь в одной из областей - фронтенде или бэкенде - и имеющие опыт в другой.

53 <a>Курс с трудоустройством: "Профессия Разработчик + ИИ" Узнать о курсе</a>