Реализация Whiteboard (совместная доска) в мобильном приложении

Реализация Whiteboard (совместная доска) в мобильном приложении

При одновременном рисовании нескольких пользователей на одной доске возникают конфликты изменений. Мы решаем эту проблему с помощью CRDT (Conflict-free Replicated Data Types) — синхронизация холста в реальном времени без блокировок. Разрабатываем whiteboard под ключ на Flutter или React Native с нулевой задержкой. Оценим ваш проект за один день.

Совместная доска — бесконечный холст с объектами: линии, фигуры, стикеры, изображения, текст. Пользователи рисуют пальцами или стилусом с поддержкой pressure sensitivity, видят действия друг друга в реальном времени. На мобиле ключевые вызовы — пальцевый ввод, pinch-to-zoom и рендеринг под нагрузкой. Мы гарантируем стабильную работу при 100+ одновременных пользователях.

Архитектура данных: объектная модель холста

Каждый объект на доске — документ в distributed state. Хорошо подходит Y.Map, где ключ — UUID объекта, значение — его свойства (тип, координаты, размер, цвет, z-index). Для составных объектов (путь из точек) — Y.Array точек внутри объекта.

const yobjects = ydoc.getMap('objects'); // Добавляем стрелку yobjects.set(uuid(), { type: 'arrow', x1: 100, y1: 200, x2: 400, y2: 350, strokeColor: '#1a1a2e', strokeWidth: 2 }); 

Конкурентное перемещение одного объекта двумя пользователями: Last-Write-Wins — приемлемо для координат. Конкурентное удаление объекта одним и изменение другим — стандартная проблема CRDT: операция изменения применяется к уже удалённому объекту и теряется. Нужна tombstones-логика или временное хранение «призрачных» объектов.

Рисование кистью: стриминг точек

Свободное рисование (freehand) генерирует 60–120 точек в секунду на 60Hz дисплее. Отправлять каждую точку через WebSocket — избыточно. Оптимизация:

1. Буферизация — отправляем batch точек каждые 50ms.
2. Алгоритм упрощения — Douglas-Peucker убирает избыточные точки с configurable epsilon. Кривая из 500 точек сжимается до 30–50 без видимой потери качества.
3. Stroke prediction — на iOS с Apple Pencil UITouch.predictedTouches предсказывают следующие точки, снижая воспринимаемую задержку.

Stroke как CRDT-объект: начинаем с временного Y.Array точек в Awareness (не в документе — не нужна полная история каждой точки). При завершении (touchEnd) — фиксируем упрощённый путь в документ как единый объект. Это сокращает трафик до 90%.

Как выбрать технологию рендеринга?

Выбор стека рендеринга зависит от платформы и требований к производительности:

React Native: react-native-skia (Skia graphics engine) — лучший вариант для производительного 2D-рендеринга. @shopify/react-native-skia поддерживает Path, Paint, Text, Image. react-native-svg — проще, но медленнее для анимированных объектов.

Flutter: CustomPainter с Canvas API — нативный путь. Для production используем кастомный CustomPainter с dirty-region optimization (перерисовываем только изменившийся регион через Canvas.clipRect).

iOS Native: Metal + MetalKit для максимальной производительности, UIBezierPath + CALayer для среднего уровня сложности. Apple PencilKit — готовый компонент с поддержкой Pencil, но ограниченная кастомизация.

Android Native: Canvas API с Path для простых случаев, OpenGL ES / Vulkan через GLSurfaceView для сложных.

Виртуализация бесконечного холста

При 1000+ объектах рендеринг всего холста в каждом кадре — проблема. Нужен spatial index (R-tree или простой grid-based) для определения объектов в текущем viewport. Рендерим только видимые объекты + небольшой буфер за краями viewport. rbush — JavaScript R-tree библиотека, работает в React Native.

Синхронизация: что отправлять и когда

Cursor/viewport awareness (позиция пользователя на холсте) — через Y.js Awareness, не в документ, 10fps достаточно.

Объекты в процессе создания — два режима:

• Временный preview через Awareness (другие видят незафиксированный объект).
• Только финальный объект после touchEnd (проще, но нет real-time preview рисования).

Первый режим даёт лучший UX, второй — меньше трафика и сложности.

Почему CRDT, а не OT?

CRDT (Yjs) обеспечивает автоматическое разрешение конфликтов без серверного координатора. OT требует центрального сервера для упорядочивания операций, что увеличивает задержку при плохом соединении. CRDT с Yjs в два раза быстрее OT в условиях нестабильной сети, что критично для мобильных приложений. Подробнее о CRDT и Yjs.

Как мы разрабатываем whiteboard: пошагово

1. Анализ требований — определяем стек, прорабатываем объектную модель и сценарии синхронизации.
2. Проектирование архитектуры — схема данных, выбор CRDT-библиотеки (Yjs), настройка WebSocket/WebRTC.
3. Реализация инструментов — кисть, фигуры, текст, изображения с оптимизацией рендеринга.
4. Интеграция синхронизации — подключение Yjs, тестирование конфликтов.
5. Оптимизация производительности — виртуализация холста, сжатие данных (коэффициент до 95% для путей), снижение задержки до 50 мс.
6. Тестирование на реальных устройствах — iOS/Android, разные версии ОС, нагрузка 100+ пользователей.
7. Деплой и поддержка — публикация в App Store/Google Play, документация API.

Типичные ошибки при реализации whiteboard

• Пренебрежение сжатием путей — отправка всех точек приводит к перегрузке канала. Используйте Douglas-Peucker.
• Синхронизация через OT — увеличивает задержку и требует сервер. Выбирайте CRDT.
• Рендеринг всего холста — падение FPS при 500+ объектах. Обязательно внедряйте виртуализацию.
• Игнорирование Apple Pencil prediction — лишняя задержка на iOS.

Этапы и сроки

Базовый whiteboard (фигуры, текст, стрелки, синхронизация) на Flutter или React Native — 10–16 недель. С рисованием кистью, pressure sensitivity, умным упрощением путей и виртуализацией холста — 20–32 недель. Стоимость рассчитывается индивидуально в зависимости от сложности.

Что входит в разработку whiteboard

• Документация архитектуры и API.
• Исходный код в репозитории с CI/CD.
• Интеграция с вашей системой аутентификации (опционально).
• Обучение команды заказчика.
• Гарантийная поддержка 3 месяца.

Свяжитесь с нами для оценки вашего проекта. Мы подберём оптимальный стек и предложим индивидуальные сроки.