# Итоги миграции frontend на React

Дата завершения: 28.09.2026. Полный журнал процесса — в [`REACT_MIGRATION.md`](REACT_MIGRATION.md),
архитектура итогового решения — в [`FRONTEND.md`](FRONTEND.md).

---

## Что сделано

По модели strangler (этапы 1–5, все изменения не закоммичены — коммит по решению владельца):

| Этап | Содержимое | Статус |
|------|-----------|--------|
| 1. Точка входа и вход в систему | `index.html`, страница логина | Завершён |
| 2. Интерфейс студента | SPA `student/` | Завершён |
| 3. Интерфейс преподавателя | SPA `teacher/` (пожелания, заявки) | Завершён |
| 4. Страница настроек | Отдельный SPA `admin/settings/` (4 вкладки) | Завершён |
| 5. Основная админ-панель | Shell + hash-router + **15 вкладок** в 6 волнах | Завершён |

Волны этапа 5: `dashboard`, `classrooms`, `subjects` → `users`, `groups`, `university-structure` →
`teacher-requests`, `department-workspace` → `auditorium-workload`, `academic-calendar` →
`schedule-view`, `schedule-versions`, `schedule-quality`, `teacher-absences` → `schedule`
(конструктор правил + абсорбция панели разовых правок).

**Удалено 45 legacy-файлов** (~19 000 строк vanilla-кода): все `admin/js/views/*.js`
и `admin/views/*.html`, `admin/js/main.js`, переходный слой `LegacyTabView.jsx` + `legacy-views.js`,
дублирующие утилиты `async-combobox.js` и `pagination.js` (заменены общими React-компонентами
`AsyncCombobox.jsx` и `Pagination.jsx`).

**Добавлено 75 React-файлов** (~23 200 строк): оболочки четырёх SPA, 15 вкладок админки,
19 сервисов с чистой логикой, общая дизайн-система (`react/shared/ui/`), render-хелперы для тестов.

---

## Насколько стало лучше

### Скорость загрузки и переключения вкладок

| Метрика (gzip) | До (legacy) | После (React) |
|----------------|-------------|---------------|
| Переключение вкладки админки | 2 запроса: `fetch` HTML-фрагмента + lazy JS | **1 запрос**: один lazy-chunk |
| Средний размер вкладки | HTML + JS отдельно | ~5,1 КБ (128 571 байт / 25 chunk'ов) |
| Общие chunk'и (кэшируются между страницами) | — | 79 217 байт (лимит 85 000) |
| Холодная загрузка админки | — | 84 857 байт (лимит 90 000) |

- HTML-фрагменты больше **не загружаются через `fetch`** — вкладка рендерится сразу из
  одного кэшируемого JS-chunk'а, исчезли двойные сетевые задержки и парсинг HTML на каждое
  переключение.
- Runtime, дизайн-система и утилиты вынесены в общие chunk'и: повторные визиты и переходы
  между страницами (логин → студент → админка) переиспользуют кэш браузера.
- Каждая вкладка загружается отдельно (`React.lazy` + `Suspense`) — пользователь качает
  только то, что открывает.

### Качество и надёжность

- **237 тестов** проходят (`npm run check`), против ~170 на момент начала этапа 5:
  контракты API, payload-валидация, DOM-рендер каждой вкладки, бюджеты bundle, CSP,
  разрешение всех lazy-вкладок (регрессия на React error #306 поймана и закрыта тестом).
- Логика вынесена в **чистые сервисы** (`*-service.js`) — тестируются в Node без браузера
  и DOM-заглушек.
- Единая дизайн-система вместо копипасты виджетов: кастомные селекты, `AsyncCombobox`,
  `ConfirmDialog`, `Pagination`, `MaskedDateInput` — одинаковое поведение и a11y везде.
- Устранён класс ошибок ручного DOM: React-state вместо `innerHTML`/`classList`,
  модалки — условный рендер вместо `hidden`-флагов, позиционирование меню — Web Animations API.

### Безопасность (не ослаблена)

- CSP-хэши: `[]` — ни одного элемента вне политики.
- JWT по-прежнему только в памяти, без inline-скриптов и inline-стилей
  (проверяется тестами `security-policy.test.mjs`).
- Сообщения об ошибках не вставляют текст исключений через `innerHTML`.

### Сопровождаемость

- Один стек вместо двух: не нужно поддерживать параллельно vanilla-модули и React.
- −19 000 строк legacy-кода, +4 965 строк тестов.
- URL/REST-контракты и русский UI сохранены — для пользователей миграция незаметна.

---

## Бюджеты bundle (итог, лимиты не поднимались с волны 1)

| Entry point | Размер gzip | Холодная загрузка | Лимиты |
|-------------|-------------|-------------------|--------|
| Логин | 2 493 | 81 710 | 10 000 / 85 000 |
| Студент | 3 431 | 82 648 | 20 000 / 90 000 |
| Преподаватель | 10 145 | 89 362 | 20 000 / 90 000 |
| Настройки | 8 466 | 87 683 | 20 000 / 90 000 |
| Админ-панель | 5 640 | 84 857 | 20 000 / 90 000 |
| Lazy-вкладки админки | 128 571 (25 chunk'ов, по одной за раз) | — | 150 000 |

---

## Проверка

```bash
cd frontend
npm ci
npm run build
npm run check   # 237/237 тестов, бюджеты, CSP
```