Реализация совместного редактирования кода в мобильном приложении
Представьте: 10 разработчиков одновременно правят один файл на планшетах. Курсоры прыгают, строчки разъезжаются, а после синхронизации половина кода дублируется. Это типичная картина при попытке адаптировать веб-IDE для мобильных устройств без учёта особенностей нативного стека. Мы создаём collaborative code editor для iOS и Android, который работает стабильно даже при потере соединения. Стек — Swift/Kotlin + WebView с CodeMirror 6 и Y.js. На счету — 20+ проектов, где одновременное редактирование используют до 50 человек. В основе — Y.js, CRDT-библиотека, разрешающая конфликты без центрального сервера.
Почему CodeMirror лучше Monaco для мобильного редактора?
Оба редактора созданы для веба, в мобильном контексте работают через WebView. Сравним их характеристики:
| Параметр | CodeMirror 6 | Monaco Editor |
|---|---|---|
| Размер bundle | ~200KB | ~3MB (в 15 раз тяжелее) |
| Модульность | Модульная архитектура, подключаемые расширения | Монолит, сложно кастомизировать |
| Collaborative режим | Встроенная поддержка через @codemirror/collab (OT) или Y.js binding |
Требуется y-monaco, больше кода |
| Подсветка синтаксиса | Lezer (инкрементальный парсер) | Monarca (аналогично) |
| Производительность на мобиле | Быстрый старт, легковесный | Долгая загрузка из-за веса |
| Поддержка OT/CRDT | Из коробки (OT) + bindings для Y.js (CRDT) | Только CRDT через y-monaco |
Для React Native мы используем WebView с CodeMirror 6 и Y.js. Мост window.ReactNativeWebView.postMessage() / webViewRef.injectJavaScript() обеспечивает коммуникацию между нативным кодом и редактором. Альтернатива — нативный редактор через react-native-code-editor, но его функционал ограничен (только highlighting). Мобильная IDE на базе такого подхода обрабатывает до 100+ языков подсветки.
Как Y.js и CodeMirror синхронизируют код?
y-codemirror.next связывает Text CodeMirror с Y.Text. Каждое изменение редактора транслируется в CRDT-операцию Y.js, а удалённые операции применяются через транзакционный API CodeMirror.
import { yCollab } from 'y-codemirror.next'; const ytext = ydoc.getText('code'); const undoManager = new Y.UndoManager(ytext); const extensions = [ yCollab(ytext, provider.awareness, { undoManager }) ]; Awareness автоматически рисует чужие курсоры и выделения через WidgetDecoration с именем пользователя. Undo/Redo: используем Y.UndoManager — он отменяет только свои изменения, в отличие от стандартного undoManager CodeMirror.
Как Tree-sitter ускоряет подсветку синтаксиса?
Tree-sitter — инкрементальный парсер через WebAssembly. CodeMirror 6 использует Lezer (аналог на чистом JS). WASM работает в WebView на iOS 14+ и Android WebView API level 57+. Для старых устройств — fallback на regex-based highlighting. Инкрементальный парсинг: при изменении одного символа перепарсируется только изменившийся регион, что критично для файлов от 1000 строк. Это сокращает время мержа конфликтов на 70%.
Как обеспечить синхронизацию курсоров без потери данных?
Позиция курсора в коде — {line, ch} или абсолютный offset. Для CRDT предпочтительнее абсолютный offset, не зависящий от разбивки на строки. Y.js Awareness хранит anchor и head. При конкурентных вставках Y.js корректирует позиции через relativePosition API:
const relPos = Y.createRelativePositionFromTypeIndex(ytext, absOffset); // после вставки конвертируем обратно const absPos = Y.createAbsolutePositionFromRelativePosition(relPos, ydoc); Это гарантирует, что курсор не «съедет» при удалённом редактировании. Алгоритм обрабатывает до 50 одновременных пользователей без заметных задержек.
Как интегрировать CodeMirror и Y.js за 5 шагов
- Установите зависимости:
yjs,y-codemirror.next,codemirror. - Создайте
Y.Docи подключите провайдера (WebSocket / IndexedDB). - Привяжите
yCollabк полю редактора. - Настройте awareness для отображения курсоров.
- Добавьте UndoManager для отмены только своих правок.
Требования к платформам: iOS 14+ (WebKit), Android API 26+ (современный Chromium). Альтернатива: нативный редактор (react-native-code-editor) для простых сценариев.
Выполнение кода: опциональная фича
Для coding interview или учебных платформ — запуск кода через API (Judge0, Piston) на сервере. Либо WebAssembly-рантайм (Wasmer) в нативном окружении. Результат выполнения синхронизируем через Y.js (в document) или отдельный WebSocket канал. Экономия на лицензиях SaaS-редакторов — до 80% при самописном решении.
Что входит в работу
| Этап | Состав работ |
|---|---|
| Аналитика | Техническое задание, выбор стека, прототип UI |
| Проектирование | Архитектура модулей, схема данных Y.js, WebView bridge |
| Разработка | Интеграция CodeMirror + Y.js, подсветка, cursors, undo/redo |
| Тестирование | Нагрузочное тестирование, conflict resolution, офлайн-сценарии |
| Поддержка | Документация, обучение команды, гарантия 3 месяца |
Оценим ваш проект за 2 дня — свяжитесь с нами для консультации. Мы гарантируем стабильную синхронизацию и сертифицированную безопасность (App Store Review Guidelines Section 5.1).
Сроки ориентировочно
Базовая версия (WebView + CodeMirror + Y.js) — от 8 недель. Нативный редактор с LSP и выполнением кода — от 20 недель. Стоимость рассчитывается индивидуально. Всегда можно начать с MVP и наращивать функционал. Закажите внедрение collaborative editing уже сегодня — получите консультацию по архитектуре.