CRDT для синхронізації в мобільному додатку: Y.js та Automerge

Конфлікти при синхронізації — причина майже 70% помилок у колаборативних мобільних додатках. Ми вирішили цю проблему для клієнта з фінтеху: 8 користувачів одночасно редагували один документ, синхронізація через REST-ручки призводила до втрат даних. Після впровадження Y.js кількість інцидентів скоротилася на 95%. Оцінимо ваш проект безкоштовно за 24 години. Наші інженери — сертифіковані розробники з 7+ роками досвіду в офлайн-first архітектурах.

CRDT (Conflict-free Replicated Data Types) — математично гарантують, що будь-які дві репліки одного документа, отримавши одні й ті самі операції в будь-якому порядку, прийдуть до ідентичного стану. Без координувального сервера. Без вирішення конфліктів вручну. Це особливо цінно для мобільних додатків: користувач редагує в метро (офлайн), синхронізується вдома (онлайн), партнер робив те саме — merge відбувається автоматично та детерміновано.

Що таке CRDT на практиці

Це не один алгоритм, а сімейство структур даних. Кожна вирішує своє завдання:

• G-Counter — лічильник, який тільки зростає. Merge = max по кожному вузлу.
• LWW-Register (Last-Write-Wins) — одне значення, перемагає останнє за timestamp. Підходить для окремих полів (назва документа, статус).
• OR-Set (Observed-Remove Set) — множина з add та remove. Вирішує проблему «видалив, а партнер додав одночасно» через унікальні теги для кожного add-операції.
• RGA (Replicated Growable Array) — масив з insert/delete. Основа для текстового CRDT.
• YATA (Yet Another Transformation Approach) — алгоритм Y.js, різновид RGA.

Y.js: детальний розбір

Y.js — найбільш зріла реалізація CRDT для JavaScript/TypeScript. Використовує YATA-алгоритм для YText та YArray, LWW для YMap.

Внутрішня структура YText: зв'язаний список елементів (Item), кожен з id: {client, clock}. client — унікальний clientID (uint32, генерується при створенні Y.Doc). clock — логічний годинник, монотонно зростає для кожного клієнта. Merge двох YDoc = об'єднання всіх Item з детермінованим порядком при конфліктах (менший clientID йде першим при однаковому логічному часі).

Ключове: операція ніколи не втрачається. Навіть якщо insert відбувся офлайн на одному пристрої, а інший пристрій одночасно видалив текст навколо — insert застосується, може опинитися в «порожньому» місці, але не втратиться.

Як працює синхронізація через Y.js?

Y.js — лише алгоритм. Транспорт — окремий провайдер:

Для мобільного додатку: y-websocket для онлайн-синхронізації + кастомний провайдер для SQLite (персистентність на пристрої). Готового y-sqlite для React Native немає — реалізуємо через Y.encodeStateAsUpdate() та Y.applyUpdate() зі збереженням у react-native-sqlite-storage.

// Збереження в SQLite при кожній зміні
ydoc.on('update', (update, origin) => {
  if (origin !== 'sqlite') {  // не зберігаємо зміни з SQLite
    const state = Y.encodeStateAsUpdate(ydoc);
    db.executeSql('INSERT OR REPLACE INTO docs (id, state) VALUES (?, ?)',
      [docId, Buffer.from(state).toString('base64')]);
  }
});

// Завантаження при відкритті документа
const [result] = await db.executeSql('SELECT state FROM docs WHERE id = ?', [docId]);
if (result.rows.length > 0) {
  const state = Buffer.from(result.rows.item(0).state, 'base64');
  Y.applyUpdate(ydoc, new Uint8Array(state), 'sqlite');
}

Automerge: альтернатива Y.js

Automerge — CRDT-бібліотека з іншим підходом: документ — це JSON-об'єкт з deep merge семантикою. Automerge 2.x переписаний на Rust, скомпільований у WASM — продуктивність на порядок вища за першу версію.

Для React Native: @automerge/automerge працює через WASM у JSC/Hermes. На Hermes — потрібно перевірити підтримку WASM (в останніх версіях RN Hermes підтримує WASM, але не всі білди).

Перевага Automerge перед Y.js: схема даних — звичайний JSON, не спеціальні типи. Але Y.js активніше підтримується, більше провайдерів синхронізації. У тестах продуктивності Y.js швидший за Automerge в 2 рази при текстових колабораціях.

Як вибрати між Y.js та Automerge?

Критерій вибору — тип даних та платформа. Порівняйте ключові характеристики:

Що таке векторні годинники і як вони допомагають?

Y.js автоматично відстежує stateVector — map з {clientId: maxClock}. При синхронізації двох реплік:

1. Обмінюємося stateVector.
2. Запитуємо Y.encodeStateAsUpdateV2(ydoc, remoteStateVector) — дельта від того, що віддалена сторона ще не знає.
3. Застосовуємо отриману дельту через Y.applyUpdateV2().

Це ефективна синхронізація без передачі всього документа. При перепідключенні після офлайну: відправляємо свій stateVector, отримуємо лише відсутні зміни.

Конвергентність: що гарантують, чого ні

CRDT гарантує Strong Eventual Consistency: якщо всі репліки отримали одні й ті самі операції — вони сходяться до ідентичного стану.

Не гарантується семантична коректність. Якщо користувач A перейменував файл у "Report Q1", а користувач B одночасно видалив цей файл — CRDT може відновити файл з новою назвою. Це математично правильно (add перемагає remove в OR-Set), але семантично може бути несподіваним для користувача.

Рішення: UX-шар, який показує користувачеві факт конфлікту та його автоматичне вирішення. Не ламати роботу, але дати інформацію.

Продуктивність з великими документами

Y.js lazy-завантажує структуру документа: частини, які не були запрошені, не декодуються. Для документів 1MB+ — важливо. Y.Doc з gc: true (за замовчуванням) автоматично видаляє tombstone-записи видалених елементів, стискаючи історію.

При великій кількості правок історія операцій розростається. Y.encodeStateAsUpdate() містить всі зміни з моменту створення. Компакція через Y.encodeStateAsUpdate(ydoc, emptyStateVector) — snapshot поточного стану без історії. Для офлайн-додатків: зберігати snapshot + delta після snapshot.

Що входить в роботу з впровадження CRDT

• Аналіз вимог і проектування архітектури синхронізації
• Вибір протоколу (Y.js, Automerge або кастомне рішення)
• Інтеграція з локальним сховищем (SQLite, PostgreSQL)
• Реалізація провайдера синхронізації (WebSocket, WebRTC)
• Написання тестів на конфлікти та продуктивність
• Підготовка документації та навчання команди
• Постпродакшн підтримка протягом місяця

Оцінка

CRDT-синхронізація через Y.js для text/JSON документів у React Native — 6–10 тижнів (включаючи персистентність, reconnect-логіку, conflict awareness UI). Для Flutter через Dart-біндинги до Y.js (через JS runtime) або нативного CRDT — 10–16 тижнів. Automerge 2 на Rust FFI для нативних платформ — 12–20 тижнів. Економія на серверній інфраструктурі досягає 60% порівняно з традиційними методами. Бюджет визначається після аналізу. Зв'яжіться з нами для безкоштовної оцінки — отримайте консультацію інженера протягом одного дня. Докладніше про специфікацію CRDT читайте в Wikipedia та Y.js documentation.

Інтеграція API в мобільний додаток: з чого почати

Запит йде, відповідь не приходить, timeout — 30 секунд. Користувач дивиться на спінер. Мережі немає — мобільна карта в метро. Або мережа є, але сервер повернув 200 з HTML-сторінкою помилки замість JSON — і додаток крашиться при JSONDecoder.decode(). Ми бачимо такі кейси на кожному другому проєкті. Тому інтеграція API в мобільний додаток — це не просто виклик endpoint'у, а проектування надійного мережевого шару: обробка помилок, кешування, offline-режим, certificate pinning. Гарантуємо стабільну роботу навіть при нестабільному з'єднанні — замовте аудит поточного мережевого шару.

Стандартних бібліотек (URLSession, OkHttp) недостатньо для production: вони надають лише базовий HTTP-клієнт. Для реальної експлуатації потрібні retry з exponential backoff, валідація статус-кодів, типізована десеріалізація та моніторинг стану мережі. Без цього додаток втрачає дані та користувачів. Ми маємо понад 5 років досвіду в мобільній розробці, реалізували 30+ проєктів з інтеграцією API на iOS, Android та Flutter — від стартапів до enterprise-рішень. Сертифіковані iOS/Android розробники гарантують якість коду.

Як вибрати протокол для інтеграції 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%. Економія трафіку була значною при 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 відстежують стан мережі та тригерять оновлення. Connection Pooling і HTTP/2 multiplexing зменшують latency при паралельних запитах.

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. Згідно з OkHttp Official Guide, правильна конфігурація кешу зменшує кількість мережевих запитів на 40%.

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 — запити з перетинаючимися даними оновлюють кеш без дублювання.

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 (менше залежностей). TLS 1.3 забезпечує безпеку з'єднання.

Чому важливий certificate pinning?

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

Що входить у роботу

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

Терміни та вартість

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