Как fullstack соединяет фронт и бэк: контракты, кодген, сквозные фичи
↑ 9.1 Техлид на бэкенде · ← Предыдущая
Зачем это на собесе
Ценность fullstack-инженера — в стыке: контракты, совместимость и сквозной вертикальный срез.
Объяснение
Точки стыка:
| Область | Практика |
|---|---|
| Контракт API | OpenAPI как источник истины; изменения через ревью схемы; проверка совместимости в CI (oasdiff) |
| Кодген клиента | из OpenAPI (openapi-typescript, Orval, Kiota, NSwag) — типы фронта совпадают с бэком |
| Валидация | одинаковые правила: схема на бэке, зеркальная на фронте (Zod/Valibot генерируется или пишется параллельно) |
| Ошибки | единый формат (ProblemDetails) и словарь кодов → локализованные сообщения на фронте |
| Аутентификация | OIDC/JWT, refresh, единый провайдер (Keycloak); понимание cookie/CSRF |
| Реалтайм | SignalR/SSE/WebSocket, переподключение и пропущенные события |
| Пагинация/фильтры | согласованные параметры и типы курсоров |
| Файлы | pre-signed URL, прогресс загрузки |
| Окружения | конфигурация фронта на этапе выполнения, CORS, проксирование |
| Наблюдаемость | сквозной trace_id от браузера до БД, RUM (Sentry) |
| Тестирование | контрактные тесты, e2e (Playwright) на реальном стенде |
Вертикальный срез: фича проходит через все слои сразу (БД → API → UI → тесты → деплой), за флагом, небольшими порциями.
# CI: схема — источник истины
- run: dotnet build && dotnet run --project Api -- --generate-openapi openapi.json
- run: npx oasdiff breaking origin/main:openapi.json openapi.json --fail-on ERR
- run: npx openapi-typescript openapi.json -o web/src/api/schema.d.ts && git diff --exit-code # кодген актуаленРоль на стыке: объяснять ограничения обеих сторон, находить несогласованности до релиза, вести общий контракт и договорённости.
Нюансы и подводные камни
- Ручные типы на фронте расходятся с бэком.
- Ломающие изменения API без совместимости: фронт и бэк деплоятся не одновременно.
- Дублирование бизнес-правил на фронте и бэке: главная — на бэке, фронт — для UX.
- Игнорирование обработки ошибок сети и частичных отказов в UI.
- Различия часовых поясов и форматов дат/чисел.
Практика
- Включите генерацию TS-клиента из OpenAPI в CI и сломайте контракт намеренно.
- Реализуйте единый обработчик ProblemDetails во фронтенде.
- Сделайте сквозную фичу малым вертикальным срезом за флагом.
Вопросы с ответами
Как удерживать синхронными типы фронта и бэка?
OpenAPI как источник истины, кодген клиента и проверка совместимости схемы в CI.
Где должна жить бизнес-валидация?
На бэкенде как источник истины; на фронте — дублирование ради удобства пользователя.