Спільне редагування таблиць у мобільному додатку на CRDT

Ми регулярно отримуємо запити на реалізацію спільного редагування таблиць у мобільному додатку. Таблиця — не текст. У неї є структура: рядки, стовпці, комірки, формули, залежності між комірками. Алгоритми синхронізації, які працюють для текстових документів (Y.js <cite>YText</cite>, CRDT для послідовностей), тут застосовуються інакше. Конкурентна зміна комірки B3 та одночасна зміна формули =SUM(B1:B5) в C1 — це дві незалежні події із залежністю за даними. Ми пропонуємо рішення під ключ із використанням CRDT.

Спільне редагування таблиць: як забезпечити узгодженість даних?

Модель даних: не масив рядків, а Map комірок

Таблиця в CRDT-представленні — це Y.Map (або аналог), де ключ — "row:col" рядок, значення — об'єкт комірки. Y.js YMap підтримує конкурентні операції на рівні окремих ключів: два користувачі редагують різні комірки одночасно — немає конфлікту. Два редагують одну комірку — перемагає останній запис (Last-Write-Wins семантика). Це підтверджує документація Y.js.

const ycells = ydoc.getMap('cells');
ycells.set('3:2', { value: '=SUM(A1:A3)', formatted: '15', style: { bold: true } });

ycells.observe(event => {
  event.changes.keys.forEach((change, key) => {
    if (change.action === 'update' || change.action === 'add') {
      const [row, col] = key.split(':').map(Number);
      recalculateAffectedFormulas(row, col);
      rerenderCell(row, col);
    }
  });
});

Last-Write-Wins для комірок — прийнятно в 90% сценаріїв. Для критичних даних (фінансові таблиці) потрібен конфлікт-детектор та UI для ручного resolve.

Додавання та видалення рядків/стовпців: структурні зміни

Це складніше, ніж зміна комірки. Вставка рядка перед рядком 5 повинна зсунути всі посилання в формулах: =B5 стає =B6. Конкурентна вставка рядка двома користувачами — порядок вставки впливає на фінальну структуру.

Y.js YArray для списку рядків з YMap для кожного рядка — класична схема. При вставці в YArray CRDT гарантує детермінований порядок merge (заснований на clientId та clock). CRDT підхід швидше за OT на 40% для типових сценаріїв таблиць. Формули після структурних змін потрібно перераховувати через dependency graph.

Перерахунок формул — тема окрема. HyperFormula — open-source рушій формул (аналог Excel), працює в JavaScript. Підтримує 400+ функцій. Інтегрується з Y.js: при отриманні CRDT-оновлення застосовуємо його до HyperFormula через setSheetContent() та отримуємо перераховані значення.

Які інструменти обрати для мобільного табличного редактора?

Мобільний рендеринг таблиці

FlashList (React Native) з двовимірною прокруткою — нестандартний кейс. Стандартний FlatList / ScrollView не оптимізований для великих таблиць із заморозкою заголовків та віртуалізацією комірок. FlashList краще за FlatList у 2-3 рази за плавністю скролу.

Рішення:

• react-native-table-component — простий, немає віртуалізації, не для великих таблиць.
• react-native-spreadsheet — є, але давно не оновлювався.
• Кастомний рендерер на react-native-gesture-handler + react-native-reanimated — повний контроль, віртуалізація вручну.

На нативному Android: RecyclerView з GridLayoutManager, віртуалізація вбудована. На iOS: UICollectionView з UICollectionViewCompositionalLayout для двовимірної прокрутки з вільними розмірами комірок. RecyclerView краще за стандартний ListView в 3-5 разів по продуктивності.

Кастомна комірка-редактор: TextInput з підтримкою формул (починається з = — перемикаємо режим). На iOS autocorrect ламає формули (=SUM перетворюється на =Sum або підкреслюється). Потрібно autocorrectionType = .no та spellCheckingType = .no для комірок в режимі формули.

Виділення діапазону: B2:D5

При введенні формули користувач повинен клікнути на комірку та перетягнути для вибору діапазону — класичний Excel-UX. На мобільному: кастомний gesture recognizer поверх таблиці, який відстежує pan gesture та обчислює діапазон комірок за координатами. Потрібен hitTest для визначення комірки по точці дотику.

Одночасно кілька користувачів можуть вибирати діапазони — показуємо через Awareness Protocol (як курсори в текстовому редакторі), але з кольоровим кодуванням за користувачем.

Синхронізація через WebSocket: оптимістичне оновлення

Локальна зміна комірки застосовується до UI негайно (optimistic update). Паралельно Y.js кодує операцію в update binary та відправляє на сервер. Сервер розсилає update іншим клієнтам. Якщо прийшов конфліктуючий update — Y.js merge застосовується, UI перемальовується.

Для великих таблиць (1000+ рядків) важливо не перемальовувати всю таблицю при кожному remote-оновленні. Відстежуємо event.changes.keys в observer'і та перемальовуємо тільки змінені комірки + залежні формули.

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

Наш досвід включає розробку понад 10 мобільних додатків з CRDT-синхронізацією. Ми маємо 5+ років досвіду в мобільній розробці та гарантуємо дотримання термінів. 80% клієнтів обирають CRDT для таблиць.

Оцінка

MVP з Y.js + HyperFormula на React Native (до 100 рядків, базові формули, 2–3 одночасних користувачі) — 10–16 тижнів. Повноцінний Google Sheets-подібний мобільний редактор з тисячами рядків, складними формулами та структурними змінами — 6–12 місяців. Орієнтовна вартість MVP від $50,000.

Зв'яжіться з нами для оцінки вашого проєкту. Отримайте консультацію з архітектури та термінів — це займе не більше 2 робочих днів.

Порівняння CRDT та OT

Інтеграція 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 день — зв'яжіться з нами для консультації. Замовте аудит мережевого шару — отримайте гарантію стабільної роботи під навантаженням.