Технические решения фронтенда¶

Уровень: L1 (overview) | ← Назад к оглавлению

Архитектурная диаграмма¶

graph TB
    User["👤 Пользователь"]

    subgraph SPA["React SPA"]
        direction TB
        subgraph Presentation["Presentation"]
            UI["🖥️ UI Components<br/><i>React 18</i>"]
            Hooks["🪝 Custom Hooks<br/><i>useWeather, useDebounce, ...</i>"]
        end

        subgraph DataLayer["Data Layer"]
            Offline["💾 Offline Layer<br/><i>Dexie / IndexedDB</i>"]
            Emb["🔍 Embeddings<br/><i>Web Worker</i>"]
        end

        subgraph SyncLayer["Sync Layer"]
            Sync["🔄 Sync Engine<br/><i>Operation Queue + Retry</i>"]
            API["📡 API Layer<br/><i>Axios</i>"]
        end

        PWA["⚡ PWA / SW<br/><i>Workbox</i>"]
    end

    Backend["⚙️ Backend API<br/><i>Kotlin / Spring</i>"]
    MinIO["📦 MinIO"]
    ML["🤖 ML Service"]

    User --> UI
    UI --> Hooks
    Hooks --> Offline
    Hooks --> Emb
    Offline --> Sync
    Sync --> API
    API --> Backend
    PWA -. "кеш медиа" .-> MinIO
    Backend --> ML

    style UI fill:#1890ff,color:#fff
    style Hooks fill:#1890ff,color:#fff
    style Offline fill:#52c41a,color:#fff
    style Emb fill:#52c41a,color:#fff
    style Sync fill:#faad14,color:#fff
    style API fill:#faad14,color:#fff
    style PWA fill:#722ed1,color:#fff
    style Backend fill:#595959,color:#fff
    style MinIO fill:#595959,color:#fff
    style ML fill:#595959,color:#fff

Диаграмма

Таблица технических решений¶

Решение	Проблема	Технология	Подробнее
API Layer	Единый HTTP-клиент с авторизацией и auto-refresh	Axios + interceptors	→ api-layer/
Offline-First	Работа без интернета, мгновенный отклик UI	Dexie.js (IndexedDB)	→ offline/
Sync Engine	Надёжная синхронизация офлайн-изменений	Operation Queue + Retry	→ sync-engine/
PWA	Установка на устройство, кеширование ресурсов	Workbox + vite-plugin-pwa	→ pwa/
Embeddings	Поиск похожих вещей/образов <5ms	Web Worker + Cosine Similarity	→ embeddings/
Custom Hooks	Переиспользуемая логика (погода, пагинация)	React Hooks	→ hooks/

Ключевые метрики¶

Метрика	Значение	Комментарий
Offline storage	IndexedDB (без лимита 5MB)	Blob-данные в отдельной таблице
Sync latency	<1s (при наличии сети)	Мгновенный оптимистичный UI
Embedding search	<5ms	Вычисление в Web Worker, не блокирует UI
SW cache strategies	5 правил	CacheFirst для медиа, StaleWhileRevalidate для API
Image precache	Batch по 10	requestIdleCallback для фонового кеширования
Retry policy	Exponential backoff 1s→60s	Max 5 попыток, jitter ±20%
Media compression	896×896 / quality 0.8	Перед загрузкой на сервер

Потоки данных¶

flowchart LR
    subgraph UI["UI Layer"]
        Pages --> Hooks
    end

    subgraph Data["Data Layer"]
        Hooks --> LocalDB[(IndexedDB)]
        Hooks --> EmbWorker[Web Worker]
    end

    subgraph Sync["Sync Layer"]
        LocalDB --> OpQueue[Operation Queue]
        OpQueue --> SyncEng[Sync Engine]
    end

    subgraph Network["Network Layer"]
        SyncEng --> API[Axios Client]
        API --> Backend[Backend API]
    end

    subgraph Cache["Cache Layer"]
        SW[Service Worker] --> Media[MinIO Media]
        SW --> RefAPI[Reference API]
    end

Диаграмма

Навигация¶

→ API Layer — HTTP-клиент, модули, auto-refresh
→ Offline — IndexedDB, репозитории, сервисы, хуки
→ Sync Engine — очередь операций, retry, цикл синхронизации
→ PWA — Service Worker, кеширование, обновления
→ Embeddings — векторный поиск, Web Worker, UI
→ Hooks — кастомные хуки и утилиты