Реалтайм-коллаборация в мобильном приложении: 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.