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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику

Определение

Веб-разработка — создание программ, которые работают через интернет или локальную сеть: сайты в браузере, серверные API, связь с базой данных, авторизация пользователей.

Обычно в проекте участвуют несколько технологий сразу:

разметка страницы (HTML);
оформление (CSS);
логика в браузере (JavaScript, TypeScript);
программа на сервере (Python, Node.js, Java, C#, Go, PHP — языки);
хранение данных (SQL, NoSQL);
обмен по протоколу HTTP.

Роли в команде часто делят на фронтенд (интерфейс у пользователя) и бэкенд (сервер, API, база) — подробно в 1.23 Фронтенд и бэкенд. Как адрес в строке браузера превращается в страницу на экране — от URL до пикселей.

Клиент и сервер

Клиент — программа на стороне пользователя. Чаще всего это браузер (Chrome, Firefox, Edge). Клиентом может быть и мобильное приложение, которое ходит на сервер по HTTP.

Сервер — программа на удалённой машине (в дата-центре или на вашем ноутбуке при разработке). Сервер принимает запрос, выполняет код, читает или пишет в базу и отправляет ответ.

Роль	Где работает	Примеры
Клиент	Компьютер или телефон пользователя	Браузер, мобильное приложение
Сервер	Дата-центр, облако, `localhost`	nginx + Node.js, IIS + ASP.NET, Python + Gunicorn

Запрос — сообщение клиента ("отдай страницу /tasks", "сохрани новую задачу"). Ответ — сообщение сервера (HTML-страница, JSON с данными, файл, сообщение об ошибке).

При локальной разработке сервер слушает localhost (адрес 127.0.0.1), браузер открывает, например, http://localhost:3000. Как запустить dev-сервер и перезапустить приложение — Запуск и перезапуск приложений. Инфраструктура (DNS, HTTPS, nginx, CDN) — Как работают сайты.

Статический сайт и веб-приложение

Статический сайт — на сервере лежат готовые файлы HTML, CSS, JavaScript; сервер отдаёт их как есть. Подходит для визиток, документации, лендингов. Публикация бесплатно — GitHub Pages.

Веб-приложение — сервер строит ответ программно или отдаёт API (данные в JSON), а браузер рисует интерфейс (React, Vue, Angular и др.). Примеры архитектур (SPA, SSR) — Архитектура веб-приложений, особенности современных веб-приложений.

HTTP — протокол запроса и ответа

HTTP (HyperText Transfer Protocol) — правила, по которым клиент и сервер обмениваются сообщениями. Сообщения передаются поверх TCP — надёжного канала в сети. Защищённый вариант — HTTPS (HTTP + шифрование TLS) — HTTPS и сертификаты.

Пример запроса (упрощённо):

GET /api/tasks HTTP/1.1
Host: example.com
Accept: application/json
Authorization: Bearer eyJhbG...

Пример ответа:

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

[{"id":1,"title":"Купить молоко","done":false}]

Части HTTP-запроса

Метод — действие. Частые методы:
- GET — получить данные;
- POST — создать новую запись;
- PUT / PATCH — изменить существующую;
- DELETE — удалить.
Путь (URL) — какой ресурс затрагиваем, например /api/tasks или /api/tasks/5.
Заголовки (headers) — метаданные:
- Host — имя сервера;
- Content-Type — формат тела (application/json, text/html);
- Authorization — токен или другие данные авторизации.
Тело (body) — сами данные; при GET обычно пустое, при POST/PUT часто JSON.

Разбор методов и идемпотентности — HTTP-методы на практике. Проверка запроса из терминала — curl, Lab / 1133, fetch / axios.

Статус-коды ответа

Статус-код — трёхзначное число в первой строке ответа. Оно кратко говорит, чем закончилась обработка запроса.

Код	Группа	Значение для разработчика
200	Успех	Данные отданы (`200 OK`)
201	Создано	Новый ресурс создан (`201 Created`)
204	Успех без тела	Удаление прошло, тело пустое
301, 302	Перенаправление	Браузер должен открыть другой URL
400	Ошибка клиента	Неверный JSON, не прошла валидация
401	Не авторизован	Нет токена или сессии
403	Доступ запрещён	Пользователь известен, но прав нет
404	Не найдено	Нет такого URL или id в базе
500	Ошибка сервера	Падение кода, база недоступна

Полная шпаргалка — HTTP, статус-коды. В браузере код виден на вкладке Network в DevTools.

JSON и сериализация

JSON (JavaScript Object Notation) — текстовый формат обмена данными. Объект записывают фигурными скобками, массив — квадратными:

{
  "id": 42,
  "title": "Новая задача",
  "tags": ["work", "urgent"]
}

Сериализация — перевод объекта языка (структуры в памяти) в строку JSON для отправки по сети. Десериализация — обратный процесс: строка JSON → объект в коде.

В JavaScript — JSON.stringify и JSON.parse. В Python — json.dumps / json.loads. Теория формата — JSON. Описание API для команды — JSON Schema и OpenAPI.

Типичная ошибка на границе API — поле пришло строкой "25", а код ожидал число 25. Проверяйте типы на входе — Проверка и валидация, коллекции и типы.

CRUD и REST

CRUD — четыре базовые операции с данными:

Create — создать;
Read — прочитать;
Update — обновить;
Delete — удалить.

В SQL те же идеи — CRUD и DML.

REST (Representational State Transfer) — соглашение, как строить HTTP API:

каждая сущность (задача, пользователь) — ресурс с URI (/tasks, /users/5);
над ресурсом выполняют HTTP-методы;
сервер по возможности stateless — не хранит состояние клиента "в голове"; сессию или токен клиент передаёт явно в каждом запросе;
ответы сопровождают корректными статус-кодами.

CRUD	HTTP (типично)	Пример
Create	`POST /tasks`	Создать задачу
Read	`GET /tasks`, `GET /tasks/5`	Список или одна запись
Update	`PUT` или `PATCH /tasks/5`	Изменить поля
Delete	`DELETE /tasks/5`	Удалить

Углубление — REST, GraphQL и gRPC, проектирование API, основы интеграционного взаимодействия.

API (Application Programming Interface) — набор правил и адресов, по которым программы обмениваются данными. В вебе API чаще всего HTTP + JSON.

CORS

CORS (Cross-Origin Resource Sharing) — механизм безопасности браузера. Если страница открыта с https://app.example.com, а JavaScript на ней запрашивает https://api.other.com, браузер блокирует чтение ответа, пока сервер API явно не разрешит это заголовками (Access-Control-Allow-Origin и др.).

Признаки CORS в работе:

в Console красная ошибка про CORS;
в Network запрос ушёл, но тело ответа недоступно скрипту;
тот же URL в curl или Postman работает — потому что curl не браузер и CORS к нему не применяется.

Теория и настройка — CORS. На время разработки фронт иногда проксируют через dev-сервер, чтобы origin совпадал — см. документацию вашего bundler (Vite, Webpack).

Конфигурация и файл `.env`

Переменные окружения — настройки среды выполнения: адрес базы, порт, ключи API. Их не коммитят в Git.

Способы хранения:

файл .env локально (добавьте в .gitignore);
переменные на сервере или в облаке;
секреты в CI/CD (GitHub Actions).

Пример .env (только на вашей машине, не в репозитории):

DATABASE_URL=postgresql://localhost:5432/myapp
API_KEY=sk-...
PORT=3000

Подробнее — Безопасность окружения и .env, манифесты зависимостей, аутентификация.

Работа с API из кода — порядок шагов

Прочитать документацию API (OpenAPI/Swagger, README, wiki аналитика).
Проверить запрос в curl или Postman — Lab / 1133.
Написать клиент на языке (fetch, axios, HttpClient).
Обработать ошибки (статус-коды 4xx, 5xx) и валидацию входных данных.
Отладить в DevTools (Network, Console).

Типовые ошибки бэкенда — 1115. Справочник задач — типовые задачи разработчика.

URL — из чего состоит адрес

https://app.example.com:443/api/tasks?page=1&sort=title#section
└─┬─┘   └──────┬──────┘ └┬┘ └─────┬─────┘ └──────┬──────┘ └──┬──┘
scheme      host       port    path         query       fragment

Часть	Смысл
scheme	`http` или `https`
host	домен или IP
port	порт (443 для https по умолчанию)
path	путь на сервере `/api/tasks`
query	параметры после `?`
fragment	якорь `#...` — не уходит на сервер, только браузер

DNS переводит app.example.com в IP — 2.04 сайты.

Query-параметры и тело запроса

Query — в URL: GET /api/tasks?done=false&limit=10.

Body — в теле POST/PUT, часто JSON:

POST /api/tasks HTTP/1.1
Content-Type: application/json

{"title": "Новая задача", "done": false}

Не путайте: фильтры списка часто в query, создание записи — body POST.

Cookies и сессии

Cookie — маленький фрагмент данных, который браузер сохраняет и отправляет обратно на сервер в заголовке Cookie.

Типичный сценарий сессии:

POST /login с логином и паролем.
Сервер проверяет, создаёт session id, отдаёт Set-Cookie: session=abc123.
Браузер на каждый запрос шлёт Cookie: session=abc123.
Сервер по id находит пользователя в памяти или Redis.

HttpOnly cookie — JavaScript не читает (защита от XSS). Secure — только по HTTPS. ИБ / сессии.

JWT — токен в заголовке

JWT (JSON Web Token) — строка из трёх частей в base64, подписанная сервером. Клиент хранит токен (localStorage, cookie) и шлёт:

Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

Сервер stateless — проверяет подпись и срок, без поиска сессии в БД (упрощённо). Минусы — отзыв токена сложнее. Подробнее — аутентификация.

HTML-формы и метод POST

Классическая форма:

<form action="/login" method="POST">
  <input name="email" type="email" />
  <input name="password" type="password" />
  <button type="submit">Войти</button>
</form>

Браузер отправит Content-Type: application/x-www-form-urlencoded или multipart/form-data (с файлами). SPA чаще шлёт JSON через fetch — HTML формы.

Полный walkthrough — API задач (CRUD)

Список задач

curl -s http://localhost:3000/api/tasks

Ответ 200, тело — JSON-массив.

Одна задача

curl -s http://localhost:3000/api/tasks/1

404 — нет id; 200 — объект задачи.

Создание

curl -s -X POST http://localhost:3000/api/tasks \
  -H "Content-Type: application/json" \
  -d '{"title":"Купить хлеб","done":false}'

Ожидание 201 Created и JSON с новым id.

Обновление

curl -s -X PATCH http://localhost:3000/api/tasks/1 \
  -H "Content-Type: application/json" \
  -d '{"done":true}'

Удаление

curl -s -X DELETE http://localhost:3000/api/tasks/1

Часто 204 No Content без тела.

Примеры curl — Lab / 1133, fetch / axios.

fetch на фронтенде

async function loadTasks() {
  const res = await fetch("/api/tasks");
  if (!res.ok) {
    throw new Error(`HTTP ${res.status}`);
  }
  return res.json();
}

async function createTask(title) {
  const res = await fetch("/api/tasks", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title, done: false }),
  });
  return res.json();
}

Обработка 401 — редирект на login; 400 — показать ошибки валидации — 118 валидация.

Middleware на сервере

Middleware — цепочка функций до основного обработчика:

логирование запроса;
проверка JWT;
парсинг JSON body;
CORS-заголовки.

Запрос → CORS → Auth → Router → Handler → Ответ

Если auth middleware вернул 401, handler не вызывается.

Кэширование HTTP

Заголовки ответа:

Cache-Control — сколько хранить в кэше;
ETag — версия ресурса; клиент шлёт If-None-Match, сервер может ответить 304 Not Modified.

Статика (CSS, JS, картинки) кэшируют агрессивно; API с персональными данными — Cache-Control: no-store. CDN — 2.04.

WebSocket — кратко

WebSocket — постоянное двустороннее соединение (чат, live-уведомления), в отличие от HTTP "запрос → ответ". Устанавливается upgrade с HTTP. Для новичка достаточно знать, что не всё в вебе — REST; детали — 2.09 интеграции.

SPA и SSR

Подход	Где рендерится HTML	Плюсы
SPA	в браузере (React монтирует в `#root`)	быстрый UI после загрузки
SSR	на сервере каждый запрос	SEO, первый экран быстрее
SSG	при сборке	статика, документация

Архитектура веб-приложений.

База данных в веб-стеке

Типичная цепочка:

Browser → API (Node/Python) → ORM → PostgreSQL

SQL и миграции — 3.07, ORM. Локально БД в Docker.

Обработка ошибок API

Единый формат ошибки помогает фронту:

{
  "error": "validation_failed",
  "message": "title is required",
  "fields": { "title": "must not be empty" }
}

Статус-коды:

400 — клиент прислал неверные данные;
401 / 403 — авторизация;
404 — ресурс не найден;
500 — падение сервера (детали в prod не светят пользователю).

1115 типичные ошибки.

OpenAPI и документация API

OpenAPI (Swagger) — YAML/JSON-описание endpoints, параметров и схем тел. Генерирует интерактивную документацию /docs в FastAPI и аналогах.

Польза для новичка:

видеть все маршруты в одном месте;
пробовать запросы из браузера;
согласовать контракт с фронтом до кода.

JSON Schema и OpenAPI.

Content-Type и Accept

Content-Type — формат тела запроса или ответа:

application/json
text/html
multipart/form-data — формы с файлами

Accept — что клиент готов принять в ответ. Сервер может вернуть 406 Not Acceptable, если не может отдать нужный формат.

Загрузка файлов (multipart)

POST /api/upload HTTP/1.1
Content-Type: multipart/form-data; boundary=----xyz

------xyz
Content-Disposition: form-data; name="file"; filename="photo.jpg"
Content-Type: image/jpeg

(binary data)
------xyz--

На фронте — <input type="file"> или FormData в fetch. На бэке — парсер multipart.

Rate limiting и 429

Rate limit — ограничение числа запросов с одного IP/токена. Ответ 429 Too Many Requests + заголовок Retry-After. Клиент должен повторить позже или показать сообщение пользователю.

Idempotency — POST дважды

Идемпотентность — повторный запрос не меняет результат лишний раз. GET и DELETE идемпотентны; POST — обычно нет (два POST создадут две записи). Для платежей используют Idempotency-Key в заголовке — HTTP-методы.

Preflight и CORS — подробнее

Для "непростых" запросов браузер сначала шлёт OPTIONS (preflight):

OPTIONS /api/tasks HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: POST

Сервер отвечает разрешёнными методами и origin. Только потом идёт POST. CORS / 411.

Локальная разработка — типичный стек

фронт на порту 5173 (Vite);
API на 3000;
БД в Docker / 104;
proxy убирает CORS в dev.

Запуск приложений.

Чек-лист перед первым деплоем

HTTPS на prod
Секреты не в репозитории — 1112
CORS только для нужных origin
Обработка 4xx/5xx на фронте
Логи без паролей — 1111
Тесты в CI — 1117
PR прошёл review — 117

8.04 DevOps.

Мини-проект "Todo API + фронт"

Неделя 1

День 1–2: CRUD API, JSON, PostgreSQL или SQLite.
День 3: curl-тесты всех методов.
День 4: HTML + fetch список задач.
День 5: форма создания, обработка ошибок.
День 6: DevTools, fix CORS или proxy.
День 7: 3 pytest/Jest теста, PR в свой репо.

Коллекции в коде — 618. Поиск багов — 1119.

Карта смежных разделов

Тема	Куда читать
DNS, HTTPS, nginx, CDN	2.04 Сайты
HTTP, очереди, SOAP, интеграции	2.09
HTML, CSS, JavaScript	3.09, 3.10 CSS, 5.01 JS
SQL, ORM	3.07 SQL, 4.10 ORM
Docker для локального стека	Основы работы с контейнерами
Деплой, CI/CD	8.04 DevOps
Безопасность	2.08 ИБ
Git, PR, тесты	4.13 Git, тестирование для разработчика

Практический маршрут новичка

Одна статическая страница — HTML intro, CSS.
Кнопка меняет текст на странице — JavaScript intro.
Простой API на Python или Node — CRUD задач, ответ в JSON — ORM или SQL.
Фронт вызывает API через fetch; отладка в DevTools.
Git, первый PR, тесты.
Публикация статики — GitHub Pages или React — компоненты.

Определение​

Клиент и сервер​

Статический сайт и веб-приложение​

HTTP — протокол запроса и ответа​

Части HTTP-запроса​

Статус-коды ответа​

JSON и сериализация​

CRUD и REST​

CORS​

Конфигурация и файл .env​

Работа с API из кода — порядок шагов​

URL — из чего состоит адрес​

Query-параметры и тело запроса​

Cookies и сессии​

JWT — токен в заголовке​

HTML-формы и метод POST​

Полный walkthrough — API задач (CRUD)​

Список задач​

Одна задача​

Создание​

Обновление​

Удаление​

fetch на фронтенде​

Middleware на сервере​

Кэширование HTTP​

WebSocket — кратко​

SPA и SSR​

База данных в веб-стеке​

Обработка ошибок API​

OpenAPI и документация API​

Content-Type и Accept​

Загрузка файлов (multipart)​

Rate limiting и 429​

Idempotency — POST дважды​

Preflight и CORS — подробнее​

Локальная разработка — типичный стек​

Чек-лист перед первым деплоем​

Мини-проект "Todo API + фронт"​

Карта смежных разделов​

Практический маршрут новичка​

Связанные темы

См. также

📄️Веб-разработка — итоги

📄️Веб-разработка — чек-лист