Реалтайм-коллаборация в мобильном приложении: Yjs и CRDT-интеграция

Мы часто сталкиваемся с запросами на real-time collaboration в мобильных приложениях. Yjs — CRDT-библиотека на JavaScript, которую всё чаще тащат в React Native-проекты, рассчитывая получить Google Docs-опыт. Реальность сложнее: Yjs проектировался под браузерное окружение, у него нет официального Flutter SDK, а Hermes на старых RN-версиях встречает WASM-бинарник @automerge/automerge с паникой при инициализации. Разберём, где настоящие грабли.

За 8+ лет опыта в мобильной разработке и 15+ внедрений коллаборативных фич мы выработали подход, который позволяет избежать типовых ошибок. Оценим ваш проект за 2 дня — свяжитесь с нами для консультации. Yjs documentation

Как устроена синхронизация в Y.js

Каждый Y.Doc содержит внутренний стейт-вектор — Map<clientId, maxClock>. При подключении двух клиентов они обмениваются своими стейт-векторами и запрашивают только дельту: Y.encodeStateAsUpdateV2(doc, remoteStateVector). Это дифференциальный протокол — при реконнекте не нужно передавать весь документ.

Транспортный уровень реализован через провайдеры:

Для React Native: y-websocket на транспортном уровне работает через react-native-get-random-values + нативный WebSocket. Персистентность — кастомный провайдер поверх react-native-sqlite-storage или op-sqlite.

Основные сложности интеграции Y.js в React Native

Основные проблемы три: отсутствие готового провайдера для RN, нестабильный WebSocket на iOS в фоне и конфликты при частых обновлениях. Каждая из них требует нестандартных решений.

Как настроить SQLite-провайдер для React Native?

Готового y-sqlite-провайдера для RN нет. Минимальная реализация:

import * as Y from 'yjs';
import { openDatabase } from 'react-native-sqlite-storage';

const db = openDatabase({ name: 'collab.db' });

db.transaction(tx => {
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS ydocs (id TEXT PRIMARY KEY, update BLOB, ts INTEGER)'
  );
});

ydoc.on('updateV2', (update: Uint8Array, origin: unknown) => {
  if (origin === 'sqlite-load') return;
  const encoded = Buffer.from(update).toString('base64');
  db.transaction(tx => {
    tx.executeSql(
      'INSERT OR REPLACE INTO ydocs (id, update, ts) VALUES (?, ?, ?)',
      [docId, encoded, Date.now()]
    );
  });
});

db.transaction(tx => {
  tx.executeSql('SELECT update FROM ydocs WHERE id = ?', [docId], (_, result) => {
    if (result.rows.length > 0) {
      const raw = Buffer.from(result.rows.item(0).update, 'base64');
      Y.applyUpdateV2(ydoc, new Uint8Array(raw), 'sqlite-load');
    }
  });
});

При частом редактировании updateV2 триггерится при каждом символе. Батчинг обязателен — debounce на 300–500 мс или накопление через Y.mergeUpdatesV2. Кастомный SQLite-провайдер с батчингом уменьшает нагрузку на диск до 70% по сравнению с наивной реализацией. Закажите интеграцию и получите готовый провайдер с батчингом.

Awareness и фоновый режим

Awareness (курсоры, онлайн-статус) через y-protocols/awareness требует активного WebSocket. При переходе приложения в фон на iOS WebSocket может быть убит через 30–60 секунд. Вызывайте awareness.setLocalState(null) в обработчике AppState.change → background, иначе пользователь будет висеть в списке онлайн.

ClientID и реконнект

clientID Y.js генерируется случайно при создании Y.Doc. Если пересоздавать Y.Doc при каждом маунте, стейт-вектор сервера накапливает мёртвые записи. Фикс: храните ydoc в ref или глобальном стейте, не пересоздавайте.

Сравнение y-websocket и Hocuspocus

Сравним основные варианты серверной части:

Hocuspocus сокращает время настройки серверной части в 2 раза по сравнению с ручной реализацией y-websocket. Для большинства проектов он закрывает 90% потребностей без написания custom-сервера.

Персистентность в офлайн-режиме: стек решений

Мы используем комбинацию кастомного SQLite-провайдера с батчингом и серверной персистентности через Hocuspocus. Клиентская база данных хранит последние 200 операций, а при восстановлении соединения применяется дифференциальный протокол Y.js — передаётся только дельта. Это сокращает трафик до 70% и экономит разработчико-часы.

Flutter: Y.js через JS runtime

Для Flutter нативного порта Y.js нет. Варианты:

• flutter_js — запускает V8/QuickJS, весит ~5 МБ. Y.js работает, но производительность на больших документах оставляет желать.
• Нативный Dart CRDT: crdt пакет от Cachapa — реализует LWW-CRDT, не совместим с Y.js по протоколу.
• Rust FFI через yrs (Rust-реализация Y.js) + flutter_rust_bridge — наиболее производительный путь, но 4–6 недель только на биндинги.

Объём работ по интеграции

При заказе услуги вы получаете:

• Полный аудит текущей архитектуры на предмет совместимости с Y.js
• Кастомный SQLite-провайдер или адаптацию Hocuspocus
• Настройка awareness с корректной обработкой фонового режима
• Конфигурация батчинга и mergeUpdatesV2 для снижения нагрузки на диск
• Серверная часть (Hocuspocus или custom y-websocket с аутентификацией)
• Документация по интеграции и код-ревью ваших инженеров
• 2 недели технической поддержки после релиза

Сроки и стоимость

React Native + Y.js + кастомный SQLite-провайдер + Hocuspocus бэкенд: 6–10 недель. Flutter через yrs FFI: 10–16 недель. Затраты на внедрение окупаются за счет сокращения времени выхода на рынок. Стоимость рассчитывается индивидуально после анализа требований.

Получите консультацию и предварительную оценку проекта. Наши инженеры помогут избежать типичных ошибок Yjs.

Интеграция API в мобильное приложение: с чего начать

Запрос уходит, ответ не приходит, timeout — 30 секунд. Пользователь смотрит на спиннер. Сети нет — мобильная карта в метро. Или сеть есть, но сервер вернул 200 с HTML-страницей ошибки вместо JSON — и приложение крашит при JSONDecoder.decode(). Мы видим такие кейсы на каждом втором проекте. Поэтому интеграция API в мобильное приложение — это не просто вызов endpoint'а, а проектирование надёжного сетевого слоя: обработка ошибок, кэширование, offline-режим, certificate pinning. Закажите аудит текущего сетевого слоя — оценим проект за 1 день.

Почему стандартные библиотеки недостаточны? URLSession и OkHttp предоставляют базовый HTTP-клиент, но для production нужны retry с exponential backoff, валидация статус-кодов, типизированная десериализация и мониторинг состояния сети. Без этого приложение теряет данные и пользователей. Мы уже 5 лет занимаемся мобильной разработкой и реализовали более 30 проектов с интеграцией API на iOS, Android и Flutter — от стартапов до enterprise-решений.

Как выбрать протокол для интеграции API?

REST остаётся стандартом для большинства проектов. Но когда на экране профиля нужно 5 полей из 40, GraphQL исключает over-fetching и сокращает трафик на 30–60%. gRPC оправдан при тысячах запросов в минуту (trading, IoT) — бинарная сериализация в 3–5 раз быстрее JSON. WebSocket — единственный выбор для real-time без polling (сообщения, уведомления).

Пример из практики: для финтех-приложения мы заменили REST (40 полей) на GraphQL — размер ответа сократился с 12 КБ до 2,5 КБ, время рендера экрана упало на 70%. Экономия трафика составила около 15 000 ₽ в месяц при 100 000 активных пользователей.

Как обеспечить надёжность соединения и offline-first

Пользователи теряют сеть в метро, лифте, тоннеле. Мобильное приложение обязано работать без интернета — хотя бы в read-only режиме. Мы внедряем паттерн offline-first:

1. При открытии экрана сначала показываем данные из локального кеша (Core Data / Room).
2. Параллельно выполняем сетевой запрос, обновляем UI после ответа.
3. Если сеть недоступна — показываем кешированные данные и метку «нет соединения».
4. При восстановлении сети автоматически синхронизируем изменения.

Для кэширования HTTP-ответов используем URLCache (iOS) и OkHttp Cache (Android) с поддержкой Cache-Control. Для структурированных данных — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback отслеживают состояние сети и триггерят обновление.

REST и выбор клиентской библиотеки

Alamofire (iOS) — де-факто стандарт для Swift-проектов. Поверх URLSession добавляет request chaining, response validation, automatic retry, certificate pinning через ServerTrustManager. AF.request() с .validate() возвращает ошибку для любого статус-кода вне 200–299. Без .validate() Alamofire считает 404 и 500 успешными ответами. С Swift Concurrency — async-версия через serializingDecodable.

Retrofit (Android) — аннотационный HTTP-клиент поверх OkHttp. Интерфейс с аннотациями компилируется в реализацию. @GET, @POST, @Path, @Query, @Body — декларативное описание API. OkHttp под капотом: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — логирование в debug-сборке. Authenticator — автоматический refresh токена при 401.

Ktor (KMM/Flutter) — мультиплатформенный HTTP-клиент. На iOS работает через Darwin engine (URLSession), на Android — через OkHttp. Единый код для обеих платформ при KMM-архитектуре.

GraphQL: когда REST не справляется

REST возвращает фиксированную структуру. Экран профиля требует name, avatar, email — сервер отдаёт 40 полей. Over-fetching. GraphQL решает это: клиент запрашивает ровно нужные поля. Это критично для мобайла, где трафик и время парсинга — реальные ограничения. Apollo iOS и Apollo Kotlin генерируют типизированные классы по схеме: schema.graphql + query-файлы → строгие типы на этапе компиляции. Subscriptions через WebSocket — real-time без polling. Ограничение: GraphQL сложнее кешировать на уровне HTTP. Apollo использует нормализованный in-memory кеш InMemoryNormalizedCache — запросы с пересекающимися данными обновляют кеш без дублирования. Apollo GraphQL Documentation

WebSocket: real-time без лишнего трафика

Polling (setInterval каждые 5 секунд) — трата батареи и трафика. WebSocket — постоянное двунаправленное соединение. iOS: URLSessionWebSocketTask (нативный, iOS 13+). Android: OkHttp WebSocket. Обязательная обработка reconnect: при onFailure — экспоненциальный backoff (1с → 2с → 4с → 8с → максимум 60с). Socket.IO — надстройка с автоматическим reconnect, но для новых проектов предпочтительнее нативный WebSocket (меньше зависимостей).

gRPC: для высоконагруженных сервисов

gRPC с protobuf — бинарная сериализация: меньше размер, быстрее парсинг. grpc-swift для iOS, grpc-kotlin для Android. Protobuf-схема компилируется в типизированные классы. Streaming (server-side, client-side, bidirectional) — нативная возможность. Порог применения: высокая частота запросов (trading, IoT) или критичная latency. Для обычного CRUD REST проще в дебаге и мониторинге.

Certificate Pinning и безопасность

Корпоративный proxy может перехватить HTTPS через подмену сертификата. Certificate pinning предотвращает это: приложение принимает только конкретный сертификат или публичный ключ. Alamofire: ServerTrustManager с PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner с SHA-256 хешем. Операционная сложность: при ротации сертификата старые версии приложения перестают работать. Решение — pinning на публичный ключ CA или поддержка нескольких пинов с grace period. Подробнее о certificate pinning на Wikipedia

Что входит в работу

Мы передаём: исходный код сетевого слоя, документацию по используемым библиотекам, инструкцию по ротации сертификатов, поддержку в течение 2 недель после сдачи.

Сроки и стоимость

Реализация сетевого слоя с REST, retry, кэшированием и offline-режимом — 1–2 недели. Добавление GraphQL или WebSocket — ещё 1–2 недели. gRPC — 2–3 недели, включая кодогенерацию. Стоимость рассчитывается индивидуально после анализа API и требований к offline-поведению. Оценим проект за 1 день — свяжитесь для консультации.