Занятие 4: Из чего сделан сайт? (Frontend и Backend)

Часть 1: "Витрина магазина" — Frontend

Frontend — это всё, что вы видите в браузере. Интерфейс, дизайн, анимации. Делается на трёх основных технологиях.

📋

HTML (HyperText Markup Language) — СКЕЛЕТ

Что и где лежит? Определяет структуру: заголовок, абзац, кнопка, картинка.

<h1>Заголовок</h1> <p>Текст</p> <button>Кнопка</button>

🎨

CSS (Cascading Style Sheets) — ДИЗАЙН

Как это выглядит? Цвета, шрифты, отступы, анимации, адаптивность.

color: #333; font-size: 16px; margin: 10px;

⚡

JavaScript (JS) — ПОВЕДЕНИЕ

Что происходит по клику? Интерактивность, анимации, отправка запросов, валидация форм.

React Vue.js TypeScript

                    <!DOCTYPE html>

                    <html>

                    <head>

                      <title>Мой сайт</title>

                      <style>

                        /* CSS */

                        .button { color: white; background: blue; }

                      </style>

                    </head>

                    <body>

                      <h1>Привет!</h1> <!-- HTML -->

                      <button onclick="alert('Клик!')">Нажми</button> <!-- JavaScript -->

                    </body>

                    </html>

Frontend = Всё, что работает В ВАШЕМ браузере

Когда вы открываете сайт, браузер скачивает HTML, CSS и JavaScript файлы и выполняет их на вашем устройстве. Frontend-разработчик — это художник-дизайнер, который создаёт удобный и красивый интерфейс.

Часть 2: "Кухня ресторана" — Backend

Backend — это всё, что работает на сервере. Логика, данные, безопасность. Пользователь этого не видит.

Фронтенд (у вас в браузере)

Задача: Показать интерфейс, принять действия пользователя.
Где работает: На вашем устройстве.
Технологии: HTML, CSS, JavaScript

Бэкенд (на сервере)

Задача: Обработать логику, работать с данными, обеспечивать безопасность.
Где работает: На сервере в дата-центре.
Технологии: Python/Django, Java/Spring, Node.js, PHP/Laravel

Инфраструктура (DevOps)

Задача: Обеспечить работу серверов, сетей, безопасности, мониторинга.
Где работает: Облако, дата-центры.
Технологии: Docker, Kubernetes, AWS, Terraform

Серверное приложение

Программа на Python/Java/PHP, которая выполняет бизнес-логику: "найти друзей пользователя", "обработать платеж", "отправить уведомление".

База данных (БД)

Хранилище ВСЕХ данных: пользователи, посты, заказы, сообщения. Примеры: MySQL, PostgreSQL, MongoDB.

Веб-сервер

Nginx/Apache — принимает запросы от пользователей и передаёт их бэкенд-приложению. Как официант в ресторане.

Аналогия: Ресторан

Frontend = Зал для гостей (меню, интерьер, кнопка вызова официанта)
Backend = Кухня (шеф-повар, холодильник с продуктами, логика приготовления)
Веб-сервер = Официант (принимает заказы, относит на кухню, приносит готовое)
База данных = Холодильник и склад (хранит все продукты-данные)

Часть 3: "Язык общения" — API и Протоколы

Как фронтенд и бэкенд общаются между собой? Через API (Application Programming Interface) по правильным протоколам.

HTTP Запрос от Фронтенда (Зал делает заказ)

GET /api/newsfeed HTTP/1.1
Host: vk.com
Authorization: Bearer токен_пользователя
User-Agent: Chrome/91.0

// Метод GET = "принеси мне что-то"
// URL /api/newsfeed = "ленту новостей"
// Authorization = "я пользователь такой-то"

HTTP Ответ от Бэкенда (Кухня готовит блюдо)

HTTP/1.1 200 OK
Content-Type: application/json

{
  "posts": [
    {
      "id": 123,
      "text": "Привет, мир!",
      "author": "Катя",
      "likes": 42
    },
    ...
  ]
}

// Статус 200 OK = "всё хорошо, вот твои данные"
// JSON = универсальный формат данных

HTTP Методы

GET — получить данные
POST — создать что-то новое
PUT — обновить существующее
DELETE — удалить

Статус-коды

200 OK — успешно
404 Not Found — не найдено
500 Internal Error — ошибка на сервере
401 Unauthorized — нет доступа

Форматы данных

JSON — основной формат обмена
XML — устаревающий формат
GraphQL — современная альтернава

API — это "меню" бэкенда для фронтенда

Когда компания выпускает "публичное API" (например, API ВКонтакте или API погоды), она говорит: "Вот список того, что можно у меня заказать, и правила оформления заказа". Любой разработчик может использовать это API для создания своих приложений.

Часть 4: "Кто есть кто" — Роли в разработке

🎨

Frontend-разработчик

Чем занимается: Вёрстка, UI/UX, интерактивность
Инструменты: React, Vue.js, Figma, Webpack
Главная боль: "Бэкенд ещё не сделал API!"

⚙️

Backend-разработчик

Чем занимается: Бизнес-логика, базы данных, API
Инструменты: Python/Django, Java, PostgreSQL
Главная боль: "Фронтенд шлёт кривые данные!"

🏗️

DevOps-инженер

Чем занимается: Инфраструктура, CI/CD, мониторинг, безопасность
Инструменты: Docker, Kubernetes, AWS, Terraform
Главная боль: "Всё упало в 3 часа ночи!"

DevOps — не про фронтенд или бэкенд, а про инфраструктуру

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

Часть 5: Сквозной пример — "Лайк на фото"

Давайте проследим всю цепочку на примере одного действия в соцсети.

👆

Шаг 1
Вы ставите лайк

→

🎨

Шаг 2
JavaScript меняет иконку

→

📤

Шаг 3
Отправка POST запроса

→

🍽️

Шаг 4
Nginx принимает запрос

→

👨‍🍳

Шаг 5
Python обрабатывает логику

→

🗄️

Шаг 6
База данных сохраняет лайк

→

📥

Шаг 7
Возврат ответа {"likes": 43}

→

🔄

Шаг 8
Обновление счётчика

⚡ Вся цепочка занимает 100-300 мс

Десятки тысяч таких операций в секунду на одном сервере. DevOps-инженер должен обеспечить, чтобы каждый этап этой цепочки был быстрым, надёжным и масштабируемым. Именно поэтому нужны балансировщики нагрузки, кэширование, мониторинг и автоматическое масштабирование.

Ключевые термины лекции

Frontend Backend HTML CSS JavaScript API HTTP JSON База данных Веб-сервер 200 OK GET POST Frontend-разработчик Backend-разработчик DevOps-инженер

💎 Главный вывод

Любое веб-приложение — это слоёный пирог. Frontend (лицо) + Backend (мозги) + Инфраструктура (DevOps). Понимание этой архитектуры — ключ к диагностике проблем ("падает фронтенд или бэкенд?"), планированию разработки и построению карьеры в IT.

Задания для самостоятельного изучения

Задание 1: Откройте любой сайт, нажмите F12 → вкладка Elements. Найдите HTML-теги <h1>, <p>, <div>. Справа найдите вкладку Styles — это CSS стили этих элементов.
Задание 2: В той же панели разработчика откройте вкладку Network. Обновите страницу. Найдите любой запрос к API (обычно заканчивается на .json или /api/). Изучите Headers и Response.
Задание 3: Подумайте: какие действия на вашем любимом сайте делают frontend (без обращения к серверу), а какие требуют backend (отправляют запрос)? Пример: изменение темы (frontend) vs отправка сообщения (backend).

🔜 Что дальше?

Вы теперь понимаете архитектуру веб-приложений. Но есть проблема: "У меня на Mac всё работает, а у коллеги на Windows — нет!" Как упаковать приложение со всеми зависимостями так, чтобы оно гарантированно работало везде? На следующей лекции — контейнеризация и Docker.

Назад к курсу