Мы часто сталкиваемся с запросами на 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). Это дифференциальный протокол — при реконнекте не нужно передавать весь документ.
Транспортный уровень реализован через провайдеры:
| Провайдер | Транспорт | Особенности |
|---|---|---|
y-websocket |
WebSocket | Официальный, есть серверная часть |
y-webrtc |
WebRTC DataChannel | P2P, нет в RN без полифила |
y-indexeddb |
IndexedDB | Только браузер |
| Кастомный | SQLite / AsyncStorage | Нужна ручная реализация для RN |
Для 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
Сравним основные варианты серверной части:
| Критерий | y-websocket | Hocuspocus |
|---|---|---|
| Аутентификация | Нет, требуется middleware | Встроенная через хуки |
| Персистентность | LevelDB (y-leveldb) | MongoDB, PostgreSQL, LevelDB |
| Масштабирование | Redis PubSub для кластера | Встроенная кластеризация |
| Время настройки | 3–5 дней | 1 день |
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.