Блок 1 · Урок 2 из 7

Как работает веб-приложение целиком

Путь одного запроса — от тапа по ссылке до картинки на экране. Где выполняется код и почему именно от этого зависят и скорость, и безопасность.

⏱ ≈ 9 минут 🧱 фундамент курса 🎯 цель: грамотный заказчик

Зачем это вам

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

Действующие лица

Два героя: клиент и сервер

Любое веб-приложение — это разговор двух сторон. Они общаются запросами и ответами.1,2

📱

Клиент

Браузер на вашем устройстве (телефон, ноут). Показывает страницу и реагирует на ваши действия. Спрашивает.

🖥️

Сервер

Чужой компьютер в интернете, который хранит и отдаёт данные и страницы. Пользователь его не видит. Отвечает.

🍽️ Аналогия — ресторан. Вы (клиент) делаете заказ официанту; кухня (сервер) готовит и выдаёт. На кухню вы не заходите — общаетесь только через заказы (запросы) и блюда (ответы).

Главное

Путь одного запроса

Что происходит, когда вы открываете страницу приложения. Цветная метка показывает, где происходит каждый шаг:

  1. браузер
    Вы вводите адрес или тапаете ссылку (например, webdev-course.gildiya7.ru).
  2. сеть
    DNS превращает имя сайта в числовой адрес сервера (IP). Это «телефонная книга интернета».
  3. браузер → сервер
    Браузер шлёт запрос на этот сервер: «дай мне такую-то страницу».
  4. сервер
    Сервер отвечает: присылает HTML (структуру), а к нему CSS (оформление) и JS (поведение).
  5. браузер
    Браузер рисует страницу из этих файлов — вы видите интерфейс.
  6. браузер → сервер
    JS «оживляет» страницу и часто делает доп. запросы за данными (к API) — уже без перезагрузки.
  7. сервер → база
    Эти данные обычно лежат в базе данных; сервер достаёт их и отдаёт обратно браузеру.

Самое важное

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

Один и тот же проект исполняется в трёх разных местах — и от этого зависит, что можно, а что опасно.

🖥️ На сервере

видит только владелец

Серверный код, работа с базой данных, секретные ключи. Пользователь сюда не заглянет — здесь безопасно хранить секреты.

📱 В браузере (на клиенте)

видно пользователю

Всё, что доезжает до пользователя: фронтенд HTML/CSS/JS. Любой может открыть инструменты разработчика и это посмотреть.

🏗️ Во время сборки (build)

один раз при выкладке

Отдельный момент до запуска: сборщик (например, Vite — про него блок 4) превращает исходники в готовые файлы. Происходит при публикации, а не при каждом заходе пользователя.

Запомните одно правило

Что попало в браузер — то видно всем

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

Это прямой мост к блоку 5 («Безопасность»). Если агент предлагает «вызвать платный API прямо из браузера с ключом» — это красный флаг, ключ украдут.

Что это даёт на практике

Фраза агента → что он имеет в виду

«Это сделаем на клиенте»
Выполнится в браузере: мгновенно и без сервера. Но видно пользователю — секреты класть нельзя.
«Это надо на сервере»
Выполнится на сервере: можно безопасно работать с базой и ключами. Чуть медленнее — нужен запрос туда-обратно.
«Подставим на этапе сборки»
Зашьётся в файлы один раз при выкладке. На лету не меняется — для смены нужна пересборка.
«Сходим в API за данными»
Браузер сделает отдельный запрос уже после загрузки страницы (подробно — блок 3).

DNS — служба, переводящая имя сайта в числовой адрес сервера (IP). «Телефонная книга интернета».

Запрос / ответ — сообщение клиента серверу («дай…») и сообщение сервера в ответ.

База данных — место на стороне сервера, где данные хранятся надолго (подробно — блок 2).

Сборка (build) — момент превращения исходников в готовые файлы, до запуска приложения.

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. Что пользователь МОЖЕТ посмотреть, если откроет инструменты разработчика в браузере?

2. Куда НЕЛЬЗЯ помещать секретный ключ от платного API?

3. Приложение читает данные из базы данных. Где это происходит?

4. Зачем нужен DNS?

Куда мы идём

Программа курса — 7 блоков