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

План лекции

Сайт, приложение, ресурс

Для HTTP и сайт, и приложение являются источниками ресурсов с адресами URL.

Статический и динамический ответ

Статика:   URL -> файл -> HTTP-ответ
Динамика:  URL -> код -> данные -> шаблон или JSON -> HTTP-ответ

Одно приложение обычно отдает и статические, и динамические ресурсы.

Роли клиента и сервера

Что происходит после ввода URL

1. Браузер разбирает URL
2. DNS находит IP-адрес домена
3. Клиент устанавливает защищенное соединение для HTTPS
4. Браузер отправляет HTTP-запрос
5. Веб-сервер передает динамический запрос приложению
6. Приложение выполняет код и при необходимости читает данные
7. HTTP-ответ возвращается клиенту
8. Браузер запрашивает CSS, JavaScript, шрифты и изображения

Одна видимая страница обычно требует нескольких HTTP-запросов.

Компоненты серверной стороны

Браузер
   |  HTTPS
   v
Веб-сервер / reverse proxy
   |  динамический запрос
   v
PHP runtime -> приложение -> база данных
                    |       -> кэш
                    |       -> внешние API
                    v
                HTTP-ответ

• Веб-сервер может сразу отдать статический файл
• PHP runtime исполняет серверный код, часто через PHP-FPM
• Приложение не обязано обращаться к базе данных в каждом запросе

Из чего состоит HTTP-запрос

GET /products/42?currency=BYN HTTP/1.1
Host: shop.example
Accept: text/html
Cookie: session=abc123

Методы HTTP и их свойства

CRUD помогает запомнить методы, но не определяет семантику HTTP.

Из чего состоит HTTP-ответ

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Cache-Control: no-store
Set-Cookie: session=abc123; HttpOnly; Secure

<h1>Карточка товара</h1>

Классы кодов состояния

Код является частью контракта. Клиент не должен угадывать результат по тексту тела.

HTTP не хранит состояние диалога

Запрос 1: GET /cart      + Cookie: session=abc123
Запрос 2: POST /cart     + Cookie: session=abc123
                              |
                              v
                    сервер находит данные сессии

Где выполняется PHP

index.php -> PHP runtime -> HTML или JSON -> браузер

Минимальный динамический ответ на PHP

<?php
declare(strict_types=1);

$name = htmlspecialchars(
    $_GET['name'] ?? 'мир',
    ENT_QUOTES,
    'UTF-8'
);

header('Content-Type: text/html; charset=UTF-8');
?>
<h1>Привет, <?= $name ?></h1>

GET /?name=Анна -> PHP читает параметр -> браузер получает HTML

Зачем нужен веб-фреймворк

Фреймворк дает правила и готовые механизмы, но не выбирает архитектуру вместо разработчика.

MVC: три разные ответственности

Цикл запроса в MVC-приложении

HTTP-запрос
     |
     v
Точка входа -> Router -> Middleware -> Controller
                                         |
                              +----------+----------+
                              v                     v
                         Model / Service       внешние сервисы
                              |
                              v
                         база данных
                              |
                              v
Controller -> View или JSON -> HTTP-ответ

MVC описывает разделение кода приложения, а не всю сетевую инфраструктуру.

Пример: запрос карточки товара

GET /products/42

1. Router сопоставляет путь с ProductController::show.
2. Middleware проверяет сессию, локаль и другие условия.
3. Controller получает идентификатор 42.
4. Model или сервис запрашивает товар в хранилище.
5. Если товара нет, приложение возвращает 404 Not Found.
6. Если товар найден, View формирует HTML.
7. Приложение возвращает 200 OK и Content-Type: text/html.

HTML и JSON: два представления данных

Content-Type: text/html

Content-Type: application/json

Варианты структуры и развертывания

Начинать с микросервисов без конкретной причины обычно дороже, чем развивать модульный монолит.

Архитектура включает требования к качеству

Демонстрация: читаем запрос в DevTools

1. Откройте DevTools, вкладку Network.
2. Включите фильтр Doc и перезагрузите страницу.
3. Найдите Request URL и Request Method.
4. Посмотрите request headers и response headers.
5. Найдите Status Code и Content-Type.
6. Перейдите к фильтрам CSS, JS, Img, Fetch/XHR.
7. Объясните, почему одна страница создала несколько запросов.

Вкладка Network показывает наблюдаемое поведение системы, а не предполагаемую схему.

Подготовка к лабораторной работе

php -v
php -S localhost:8000
curl -i "http://localhost:8000/?name=Анна"

Резюме

Вопросы для самопроверки: Web и HTTP

Ресурсы и обмен

1. Чем динамический ресурс отличается от статического?
2. Какие действия выполняет браузер после ввода URL?
3. Из каких частей состоит HTTP-запрос?
4. Что означает идемпотентность HTTP-метода?

Ответ сервера и состояние

5. Чем классы кодов 2xx, 4xx и 5xx отличаются друг от друга?
6. Для чего нужен заголовок Content-Type?
7. Как приложение поддерживает сессию, если HTTP не хранит состояние?

Вопросы для самопроверки: приложение

PHP и фреймворк

1. Где выполняется PHP-код и что получает браузер?
2. Какие задачи веб-фреймворк решает для разработчика?
3. Почему исходные данные пользователя нельзя сразу вставлять в HTML?

MVC и архитектура

4. За что отвечают Model, View и Controller?
5. Почему Router не следует считать частью Controller?
6. Чем MVC отличается от выбора между монолитом и микросервисами?
7. Какие издержки появляются при выделении микросервисов?

Полезные ресурсы: Web и PHP

Полезные ресурсы: архитектура и практика

Архитектура приложения

• Model-View-Controller — https://martinfowler.com/eaaCatalog/modelViewController.html
• Laravel: Request Lifecycle — https://laravel.com/docs/lifecycle

Анализ HTTP

• Chrome DevTools: Network — https://developer.chrome.com/docs/devtools/network/