Совместное редактирование таблиц в мобильном приложении на CRDT

Мы регулярно получаем запросы на реализацию совместного редактирования таблиц в мобильном приложении. Таблица — не текст. У неё есть структура: строки, столбцы, ячейки, формулы, зависимости между ячейками. Алгоритмы синхронизации, которые работают для текстовых документов (Y.js YText, 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 для ячеек — приемлемо в большинстве сценариев. Для критических данных (финансовые таблицы) нужен конфликт-детектор и UI для ручного resolve.

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

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

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

Пересчёт формул — тема отдельная. HyperFormula (hyperformula.js) — open-source движок формул (аналог Excel), работает в JavaScript. Поддерживает 400+ функций. Интегрируется с Y.js: при получении CRDT-обновления применяем его к HyperFormula через setSheetContent() и получаем пересчитанные значения.

Какие инструменты выбрать для мобильного табличного редактора?

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

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

Решения:

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

На нативном Android: RecyclerView с GridLayoutManager, виртуализация встроена. На iOS: UICollectionView с UICollectionViewCompositionalLayout для двумерной прокрутки со свободными размерами ячеек.

Кастомная ячейка-редактор: 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'е и перерисовываем только изменившиеся ячейки + зависимые формулы.

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

• Архитектура и прототип: выбор стека, схемы данных, CRDT-структур
• Интеграция Y.js + HyperFormula с нативными модулями
• Реализация кастомного рендерера с виртуализацией
• Настройка WebSocket-сервера и оптимизация трафика
• Тестирование под нагрузкой (до 50 одновременных пользователей)
• Документация и обучение команды
• Поддержка после деплоя (1 месяц)

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

Оценка

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

Свяжитесь с нами для оценки вашего проекта. Получите консультацию по архитектуре и срокам — это займёт не более 2 рабочих дней.

Интеграция 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 день — свяжитесь для консультации.