Frontend и backend
Frontend отвечает за взаимодействие с пользователем в клиентском приложении. Backend принимает запросы, применяет правила, работает с данными и интеграциями.
Один пользовательский сценарий
sequenceDiagram actor User as Пользователь participant UI as Frontend participant API as Backend API participant DB as Database User->>UI: Отправляет форму UI->>API: POST + JSON API->>API: Проверяет контракт и правила API->>DB: Выполняет транзакцию DB-->>API: Результат API-->>UI: Status + response UI-->>User: Обновляет состояние экрана
Ответственность
| Вопрос | Frontend | Backend |
|---|---|---|
| как показать данные | да | нет |
| можно ли выполнить операцию | предварительная проверка для UX | окончательное решение |
| где хранить постоянные данные | локально только вспомогательное состояние | БД или система-владелец |
| как защитить операцию | отправляет credentials безопасным способом | аутентифицирует и авторизует |
| как сообщить ошибку | отображает понятный результат | возвращает стабильный error contract |
Frontend-валидация улучшает UX, но не защищает backend: клиентский запрос можно сформировать без интерфейса.
Связь через API
Граница включает больше, чем JSON:
- семантику HTTP method;
- idempotency;
- versioning;
- pagination;
- timeout;
- частичные ошибки;
- observability identifiers;
- совместимость старого клиента с новым backend.
Где бывает логика
Интерфейс может сортировать уже полученный список или скрывать недоступную кнопку. Правило, влияющее на целостность данных или права, должно проверяться на backend.
Backend не должен диктовать пиксельную структуру экрана, но его API неизбежно влияет на число запросов и удобство клиента. Сетевой N+1 — пример плохой границы: Кейс сетевой N plus 1.
Вопросы для собеседования
Можно ли доверять валидации frontend?
Нет. Backend обязан самостоятельно проверить вход и права.
Что такое CORS?
Политика браузера, ограничивающая чтение ответа JavaScript-кодом с другого origin. CORS не является механизмом авторизации backend.
Где обрабатывать формат ошибки?
Backend возвращает стабильный машинный контракт, frontend переводит его в подходящее состояние интерфейса.