Реалізація спільного редагування коду в мобільному застосунку
Уявіть: 10 розробників одночасно правлять один файл на планшетах. Курсори стрибають, рядки роз'їжджаються, а після синхронізації половина коду дублюється. Це типова картина при спробі адаптувати веб-IDE для мобільних пристроїв без урахування особливостей нативного стека. Ми створюємо collaborative code editor для iOS та Android, який працює стабільно навіть при втраті з'єднання. Стек — Swift/Kotlin + WebView з CodeMirror 6 та Y.js. На рахунку — 20+ проєктів (5 років на ринку мобільної розробки), де одночасне редагування використовують до 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 |
CodeMirror 6 завантажується в 2 рази швидше на мобільних пристроях. Для React Native ми використовуємо WebView з CodeMirror 6 та Y.js. Міст window.ReactNativeWebView.postMessage() / webViewRef.injectJavaScript() забезпечує комунікацію між нативним кодом і редактором. Альтернатива — нативний редактор через react-native-code-editor, але його функціонал обмежений (тільки highlighting). Мобільна IDE на базі такого підходу обробляє понад 15 мов підсвітки.
Як 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 одночасних користувачів без помітних затримок (середня затримка 30 мс). Економія на ліцензіях SaaS-редакторів — до $20 000 на рік для команди з 50 осіб.
Як інтегрувати CodeMirror і Y.js за 5 кроків
- Встановіть залежності:
yjs,y-codemirror.next,codemirror. - Створіть
Y.Docта підключіть провайдера (WebSocket / IndexedDB). - Прив'яжіть
yCollabдо поля редактора. - Налаштуйте awareness для відображення курсорів.
- Додайте UndoManager для скасування тільки своїх правок (на відміну від глобального undo).
Вимоги до платформ: iOS 14+ (WebKit), Android API 26+ (сучасний Chromium). Альтернатива: нативний редактор (react-native-code-editor) для простих сценаріїв.
Виконання коду: опціональна фіча
Для coding interview або навчальних платформ — запуск коду через API (Judge0, Piston) на сервері. Або WebAssembly-рантайм (Wasmer) у нативному середовищі. Результат виконання синхронізуємо через Y.js (в document) або окремий WebSocket канал. Вартість ліцензії CodeSandbox — від $12/місяць, наше рішення безкоштовне при самописному впровадженні.
Що входить в роботу
| Етап | Склад робіт |
|---|---|
| Аналітика | Технічне завдання, вибір стеку, прототип 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 вже сьогодні — отримайте консультацію з архітектури.