Любой цифровой продукт — сайт, мобильное приложение, личный кабинет — состоит из нескольких частей с разными ролями. Когда вы знаете их названия и обязанности, разговор с разработчиком перестаёт быть набором незнакомых слов. Ниже десяток терминов на бытовых аналогиях; полный разбор по шагам вы найдёте в материале Как устроен сайт, а здесь — короткий словарь, чтобы идти дальше.
После урока вы сможете
- Объяснить своими словами, что такое фронтенд, бэкенд, база данных, API, сервер, домен и хостинг
- Нарисовать схему знакомого сервиса и подписать каждую часть
- Понимать, о чём говорит подрядчик на встрече, и задавать уточняющие вопросы
Содержание
Сначала картинка: магазин и дорога
Справочник MDN объясняет работу веба через сравнение с покупкой в магазине: ваш компьютер или телефон — это дом, из которого вы идёте за покупкой; сервер — магазин, где лежат страницы сайта; интернет-соединение — дорога между ними. Адрес магазина вы узнаёте из адресной книги, а заказ делаете на языке, понятном обеим сторонам. Дальше мы используем этот образ и добавим к нему остальные детали.
Словарь
Клиент
- Что это на бытовом языке
- Ваш телефон или компьютер с браузером: вы приходите в магазин
- Что значит в разговоре
- «Это работает на клиенте» — на вашем устройстве
Сервер
- Что это на бытовом языке
- Компьютер, который хранит сайт и отвечает на запросы: сам магазин
- Что значит в разговоре
- «Запрос ушёл на сервер» — программа обращается к удалённому компьютеру
Фронтенд
- Что это на бытовом языке
- Витрина и зал: то, что вы видите и нажимаете
- Что значит в разговоре
- Внешний вид, кнопки, формы, удобство на телефоне
Бэкенд
- Что это на бытовом языке
- Подсобка и касса: то, что скрыто от покупателя
- Что значит в разговоре
- Проверка данных, расчёты, права доступа, связь с другими системами
База данных
- Что это на бытовом языке
- Склад и картотека: аккуратное хранилище товаров, клиентов, заказов
- Что значит в разговоре
- Где и в каком виде лежат данные; кто может их читать и менять
API
- Что это на бытовом языке
- Окошко для заказов: договорённый способ, которым одна программа просит другую что-то сделать
- Что значит в разговоре
- «Подключим по API» — две системы будут обмениваться данными сами
Домен
- Что это на бытовом языке
- Адрес магазина на вывеске, например
example.com - Что значит в разговоре
- Имя сайта; его регистрируют на срок и продлевают
DNS
- Что это на бытовом языке
- Адресная книга: по имени находит, где физически расположен сервер
- Что значит в разговоре
- «Поменяйте DNS-записи» — перенаправить имя на другой сервер
Хостинг
- Что это на бытовом языке
- Аренда помещения под магазин: компьютер, где работает сайт
- Что значит в разговоре
- «Сайт лежит на таком-то хостинге» — у вас есть договор и доступ
Приложение
- Что это на бытовом языке
- Программа для телефона или компьютера; часто тот же клиент и сервер
- Что значит в разговоре
- Мобильное приложение — клиент, который обращается к серверу компании
Как это складывается в одном действии
Возьмите пример: вы открываете сайт аптеки и ищете лекарство.
- Вы вводите адрес. Браузер (клиент) через DNS узнаёт, где находится сервер.
- Браузер просит у сервера страницу. Сервер отдаёт файлы — это то, что вы видите: фронтенд.
- Вы вводите название в строку поиска. Фронтенд отправляет запрос на бэкенд.
- Бэкенд обращается к базе данных: что есть в наличии, по какой цене.
- Бэкенд отдаёт список браузеру, и вы видите его на экране.
- Если нужно проверить наличие в аптеке-партнёре, бэкенд обращается к чужой системе по API.
Подробнее, как браузер и сервер обмениваются запросами и ответами, описано в статье MDN про клиент-серверное взаимодействие. Мы пока остановимся на общей картине.
Что спросить у подрядчика
Знание словаря даёт вам право задавать точные вопросы. Несколько примеров:
- «На каком хостинге будет жить сайт и на кого оформлен договор?»
- «Кто владеет доменом — я или вы?»
- «Где хранятся данные клиентов и кто имеет к ним доступ?»
- «С какими внешними системами сайт обменивается данными по API и что будет, если чужая система недоступна?»
Эти вопросы не требуют технических знаний, но выясняют главное: принадлежат ли вам ключевые части продукта. Более полный список — в материале Что такое API.
Что дальше
Следующий урок — Рабочее место и инструменты: что понадобится, чтобы начать практику, и от чего можно отказаться. Если захочется глубже разобраться в теме, откройте библиотечную статью Как устроен сайт — там те же понятия с диаграммами.