Сравнение технологий с альтернативами¶
Уровень: L3 (deep-dive) | Вверх: README.md | Раздел: ../README.md
Фреймворки UI¶
| Критерий | React 18 | Vue 3 | Angular 17 | Svelte 5 |
|---|---|---|---|---|
| Экосистема | Крупнейшая: npm, компоненты, хуки | Большая, растущая | Полная встроенная | Малая, растущая |
| Производительность | Virtual DOM, Concurrent Features | Proxy-based reactivity | Zone.js, Ivy renderer | Compile-time, no runtime |
| Типизация | Через TSX, опциональная | Через <script setup lang="ts"> |
Встроенная (декораторы) | Через <script lang="ts"> |
| Мобильность/PWA | React Native, отличная PWA-поддержка | Capacitor, хорошая | Ionic, Angular PWA | SvelteKit, базовая |
| Компонентные библиотеки | Ant Design, MUI, Chakra, Mantine | Vuetify, Naive UI, Element Plus | Angular Material, PrimeNG | Skeleton, DaisyUI |
| Community (GitHub stars) | ~230k | ~48k | ~97k | ~80k |
| Кривая обучения | Средняя | Низкая | Высокая | Низкая |
Вывод: React выбран за крупнейшую экосистему компонентных библиотек (включая Ant Design 5 с Design Token System), наличие TanStack Query и Zustand для управления состоянием, а также Concurrent Features для фоновой синхронизации данных. Зрелость экосистемы критична для проекта с offline-first архитектурой и ML-интеграцией.
Сборщики¶
| Критерий | Vite 5 | Webpack 5 | esbuild | Turbopack |
|---|---|---|---|---|
| Холодный старт dev | ~200ms (ESM) | 5–30s | ~100ms | ~500ms |
| HMR | Мгновенный | 1–5s | Нет встроенного | Быстрый |
| Production build | Rollup (tree-shaking, splitting) | Webpack (полная оптимизация) | Минимальная оптимизация | В разработке |
| Конфигурация | Минимальная | Сложная | Программная | Минимальная |
| Плагины PWA | vite-plugin-pwa (Workbox) | workbox-webpack-plugin | Нет | Нет |
| Зрелость | Стабильный, 5-я мажорная версия | Зрелый стандарт | Утилита, не полный сборщик | Альфа/бета |
Вывод: Vite обеспечивает оптимальный баланс скорости разработки и качества production-сборки. Мгновенный HMR критичен при итеративной разработке мобильного интерфейса. Встроенная интеграция с Rollup гарантирует tree-shaking и code splitting. Плагин vite-plugin-pwa упрощает генерацию Service Worker с кэшированием через Workbox.
Компонентные библиотеки¶
| Критерий | Ant Design 5 | MUI 5 | Chakra UI 2 | Mantine 7 |
|---|---|---|---|---|
| Количество компонентов | 60+ | 50+ | 30+ | 50+ |
| Кастомизация темы | Design Token System (900+ токенов) | createTheme, sx prop | ChakraProvider, токены | CSS variables, токены |
| Размер бандла | ~200 KB (tree-shakeable) | ~300 KB | ~100 KB | ~150 KB |
| Формы | Form с валидацией, встроенные правила | Нет встроенных | Нет встроенных | useForm |
| Локализация | 50+ языков включая русский | 30+ языков | Нет встроенной | 20+ языков |
| Таблицы | Table, ProTable — мощнейшие | DataGrid | Нет | Table |
| Качество документации | Отличное, примеры, API | Отличное | Хорошее | Хорошее |
Вывод: Ant Design 5 выбран за Design Token System, позволяющую глубоко кастомизировать внешний вид без CSS-хаков. Встроенная локализация на русский язык упрощает работу с формами и компонентами. Богатый набор компонентов (Drawer, Modal, Tag, Select с поиском) покрывает потребности проекта без дополнительных зависимостей.
Менеджеры состояния¶
| Критерий | Zustand 5 | Redux Toolkit | MobX 6 | Jotai 2 |
|---|---|---|---|---|
| Размер бандла | ~1 KB | ~11 KB | ~16 KB | ~3 KB |
| Бойлерплейт | Минимальный | Средний (slices, reducers) | Минимальный (decorators) | Минимальный |
| DevTools | Через middleware | Redux DevTools | MobX DevTools | Jotai DevTools |
| TypeScript | Нативная поддержка | Нативная поддержка | Через декораторы | Нативная поддержка |
| Middleware | persist, devtools, immer | RTK middleware | Reactions, autorun | Нет встроенных |
| Provider | Не нужен | Обязателен | Не нужен | Обязателен |
| Подписки | Селекторы (granular) | useSelector | Автоматические | Атомарные |
Вывод: Zustand выбран за минимальный размер и отсутствие бойлерплейта. В проекте всего 2 стора (auth, outfitBuilder), Redux Toolkit был бы избыточен. Отсутствие Provider упрощает архитектуру, а встроенный persist middleware покрывает потребность в хранении токенов. Гранулярные подписки через селекторы предотвращают лишние ре-рендеры.
Управление серверным состоянием¶
| Критерий | TanStack Query 5 | SWR 2 | RTK Query | Apollo Client 3 |
|---|---|---|---|---|
| Кэширование | Многоуровневое (stale/fresh/gc) | stale-while-revalidate | Нормализованный кэш | Нормализованный кэш |
| Infinite Query | Встроенный useInfiniteQuery | useSWRInfinite | Нет встроенного | fetchMore |
| Offline | networkMode: 'always' | Нет | Нет | Через Apollo Link |
| Mutations | useMutation + invalidation | useSWRMutation | Endpoints + cache tags | useMutation |
| Optimistic updates | Встроенные | Ручные | Через onQueryStarted | Встроенные |
| DevTools | React Query DevTools | Нет | RTK DevTools | Apollo DevTools |
| Протокол | REST, GraphQL, любой | REST, GraphQL, любой | REST | Только GraphQL |
Вывод: TanStack Query выбран за мощное управление серверным кэшем с настраиваемым staleTime, встроенный useInfiniteQuery для ленты и networkMode: 'always' для работы в offline-режиме. В сочетании с Zustand обеспечивает чёткое разделение: Zustand — клиентское состояние (auth, UI), TanStack Query — серверное (items, outfits, reference data).