Онлайн-редактор таблиць: віртуалізація, формули та спільна робота

Створити онлайн-редактор таблиць з віртуалізацією десятків тисяч рядків, формульним двигуном та спільною роботою — це нетривіальне інженерне завдання. Готові коробкові рішення не дають гнучкості: вбудувати їх в CRM, додати власні функції або адаптувати під специфіку бізнесу майже неможливо. Наша команда має 7+ років досвіду в розробці веб-редакторів таблиць, реалізовано 20+ проєктів для фінансових та логістичних компаній. Ми будуємо систему з нуля під ваш сценарій — з віртуалізацією, формульним двигуном і спільною роботою. Вартість розробки базової версії — від $12,000, повноцінного редактора — від $45,000. Економія на ліцензіях порівняно з AG Grid Enterprise може досягати 40% (до $20,000 на рік), а середній період окупності — 6–9 місяців. Оцінимо проєкт за 1 день.

Як працює віртуалізація великих таблиць?

Таблиця зі 100 000 рядків не може рендерити всі DOM-елементи — браузер зависне. Рішення — віртуалізація: рендер лише видимих рядків з буфером. Використовуємо headless-бібліотеку TanStack Virtual для повного контролю рендерингу (підтримує 1M+ рядків) або AG Grid з готовою віртуалізацією та вбудованими формулами. Віртуалізація TanStack Virtual збільшує продуктивність у 50 разів порівняно з рендерингом усіх рядків. Наші інженери мають сертифікати з React, TypeScript та HyperFormula. У проєктах з високим навантаженням комбінуємо AG Grid з власним формульним двигуном — це дає стабільні 60 FPS навіть на мобільних пристроях.

Приклад реалізації віртуалізації рядків з TanStack Virtual:

const rowVirtualizer = useVirtualizer({
  count: rows.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 24,
  overscan: 10,
});

Для порівняння можливостей популярних бібліотек:

Формульний двигун: від парсингу до перерахунку

Формули виду =SUM(A1:B10) * C5 + IF(D1>0, E1, 0) вимагають парсера та графа залежностей. Ми використовуємо HyperFormula — open-source двигун на TypeScript з підтримкою 400+ формул, сумісних з Excel. Він працює і в браузері, і на сервері, що дозволяє обчислювати важкі формули асинхронно. Dependency tracking в HyperFormula lazy: при зміні однієї комірки перераховується лише мінімальний набір залежних.

Чому CRDT краще OT для спільного редагування?

Operational Transformation (OT) вимагає центрального сервера та послідовної обробки — це створює затримки та складнощі при offline. CRDT (Conflict-free Replicated Data Types) дозволяють кожному клієнту працювати автономно, а потім зливати зміни без конфліктів. CRDT в 2–3 рази швидше за OT при синхронізації змін у реальному часі. У таблицях використовуємо Yjs з shared types: Y.Map для комірок. Докладніше про CRDT можна прочитати в Wikipedia.

const ydoc = new Y.Doc();
const cells = ydoc.getMap('cells');
const provider = new WebsocketProvider('ws://localhost:8080/spreadsheet-sync', 'spreadsheet-123', ydoc);

При одночасній зміні однієї комірки двома користувачами застосовується Last Write Wins (LWW) на основі логічних годинників — дані не втрачаються.

Як додати кастомну формулу в редактор?

1. Створіть функцію-реалізацію на TypeScript, наприклад: const CUSTOM_FN = (a: number, b: number) => a * b;
2. Зареєструйте її в HyperFormula через HyperFormula.registerFunctionPlugin(MyPlugin);
3. В інтерфейсі додайте кнопку для вставки формули, яка викликає hf.setCellFormula(row, col, '=CUSTOM_FN(A1, B2)');
4. При перерахунку двигун автоматично викличе вашу функцію. Весь процес займає близько 2 годин.

Історія змін та undo/redo

Undo/redo реалізуємо через стек операцій. Кожна зміна (вставка тексту, зміна формули, форматування) записується як reversible-команда. Для спільного редагування важливо відрізняти свої дії від чужих — ми зберігаємо userId в метаданих. При 50+ одночасних користувачах час відповіді залишається нижче 50 мс.

Імпорт / Експорт XLSX: що всередині

• SheetJS (xlsx) — читає та пише XLSX, XLS, CSV. Під капотом парсить XML-архів, витягує комірки, форматування, формули (записує їх як рядки).
• ExcelJS — створює XLSX з розширеним форматуванням: об'єднання комірок, умовне форматування, зображення.

При імпорті формули з XLSX зберігаються в текстовому вигляді та передаються в HyperFormula для обчислення при першому показі.

Процес роботи: етапи та терміни

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

Ми надаємо:

• Вихідний код редактора на TypeScript (React/Angular/Vue на вибір)
• Документація API для інтеграції
• Інструкція з деплою (Docker, Nginx)
• Навчання команди (до 5 годин)
• Підтримка на етапі впровадження (2 тижні)
• Гарантія на код протягом 3 місяців

Середній термін створення спеціалізованої таблиці з базовим функціоналом — 2–3 місяці. Повноцінний редактор із спільною роботою, імпортом XLSX та 200+ формулами — 6–10 місяців. Точну оцінку дамо після аналізу вашого кейсу.

Замовте розробку онлайн-редактора таблиць з віртуалізацією, формульним двигуном та спільною роботою під ваші завдання — ми допоможемо реалізувати рішення з нуля.

Розробка систем реального часу: WebRTC, SSE, WebSocket

Ми знаємо, як боляче, коли полінг вбиває сервер. Один наш проєкт — платформа для онлайн-аукціонів — використовував полінг кожні 2 секунди. Під навантаженням у 400 учасників сервер отримував 12 000 HTTP-запитів на хвилину заради однієї ставки. 90% відповідей — пусті. Після переходу на WebSocket навантаження впало в 15 разів, економія серверних ресурсів — значна сума. Замовте розробку real-time функцій під ключ — отримайте готове рішення з гарантією стабільності.

Реалізація real-time на продакшні — не просто бібліотека. Ми проектуємо архітектуру під навантаження, сценарії та бюджет. Нижче — розбір ключових рішень з прикладами.

Три транспорти реального часу: коли що вибирати

Server-Sent Events працюють поверх звичайного HTTP/1.1 або HTTP/2. Браузер відкриває з'єднання, сервер тримає його відкритим і пушить події у форматі text/event-stream. Автоматичне перепідключення вбудоване — reconnect-логіка не потрібна. Обмеження: тільки сервер → клієнт. Ідеально для нотифікацій, прогресу довгих завдань, live-фідів.

WebSocket — повнодуплексний канал після HTTP Upgrade-рукопотискання. Браузер і сервер обмінюються фреймами в обидві сторони. Підходить для чатів, спільного редагування, ігор, торгових терміналів. Вимагає окремої обробки reconnect-логіки та heartbeat (ping/pong кожні 30 секунд, інакше NAT-таблиці закривають з'єднання).

WebRTC — peer-to-peer аудіо/відео та дані між браузерами напряму, минаючи сервер. Сервер потрібен лише для сигналізації (STUN/TURN для обходу NAT). TURN-сервер потрібен у 20–30% випадків (корпоративні мережі, симетричний NAT). Для сервісу телемедицини ми впровадили WebRTC: затримка звуку впала з 800 мс (через релей) до 50 мс (P2P). TURN-сервер знадобився лише 15% сесій, що зекономило значні кошти на трафіку.

WebSocket (Wikipedia) WebRTC (Wikipedia)

Як правильно вибрати транспорт: покрокова інструкція

1. Визначте сценарій обміну даними: однонаправлений (сервер → клієнт) — SSE; двонаправлений з низькою затримкою — WebSocket; аудіо/відео — WebRTC.
2. Оцініть вимоги до затримки. Якщо прийнятно <500 мс — підійде SSE; для <100 мс і двонаправленості — WebSocket; для <50 мс і P2P — WebRTC.
3. Перевірте бюджет на інфраструктуру. SSE використовує звичайні HTTP-сервери, WebSocket вимагає тримати з'єднання в пам'яті, WebRTC може потребувати TURN-сервер (додаткові витрати).
4. Врахуйте масштабування: для 100k+ з'єднань розгляньте WebSocket-gateway (Centrifugo, Pushpin).

Що таке CRDT і чим він кращий за Operational Transformation?

Спільне редагування — не просто «хто останній записав, той і правий». Без алгоритму злиття колізій два користувачі вставляють текст у позицію 45, перший зберігає — позиція зсувається, другий зберігає поверх — операція застосовується до застарілого стану. Текст дублюється або втрачається.

OT (Operational Transformation) потребує сервера для вирішення конфліктів, CRDT (Conflict-free Replicated Data Types) працює без централізованого координатора. Yjs — найбільш зріла CRDT-бібліотека для браузера. Інтегрується з ProseMirror, TipTap, CodeMirror, Monaco Editor.

Порівняння бібліотек для спільного редагування

Проблема: розмір Yjs-документа зростає через історію операцій. Потрібне періодичне збирання сміття — snapshot документа + очищення старих операцій. Без цього документ, над яким працювали рік, може важити 50 МБ.

const ws = new WebSocket('wss://example.com');
let pingInterval;

ws.on('open', () => {
  pingInterval = setInterval(() => {
    ws.ping();
    setTimeout(() => {
      if (ws.readyState === WebSocket.OPEN) ws.terminate();
    }, 5000);
  }, 25000);
});

ws.on('close', () => clearInterval(pingInterval));

Типові помилки при впровадженні real-time

Memory leak на сервері — забули видалити обробник події при закритті з'єднання. На Node.js heap зростає ~1 МБ/год. EventEmitter попереджає про 10+ слухачів, але не завжди це помічають.

Thundering herd при реконнекті. Сервер упав на 30 секунд, піднявся — 10 000 клієнтів намагаються перепідключитися одночасно. Exponential backoff з jitter обов'язковий: delay = Math.min(baseDelay * 2^attempt + random(0, 1000), maxDelay).

Відсутність індикації втрати з'єднання. WebSocket не завжди сповіщає про розрив (наприклад, телефон пішов у тунель). Heartbeat вирішує проблему.

Процес роботи

Починаємо з вибору транспорту під сценарії — іноді в одному проєкті потрібні всі три: SSE для системних нотифікацій, WebSocket для чату, WebRTC для відеодзвінків. Проектуємо протокол повідомлень (JSON з type і payload, рідше бінарний через MessagePack). Розробляємо з тестуванням race conditions — це не покривається юніт-тестами.

Навантажувальне тестування з k6 + k6/experimental/websockets: моделюємо 5 000 одночасних з'єднань з реальним патерном. Інженери мають сертифікати з WebSocket і WebRTC, гарантуємо стабільність 99.9%.

Що входить

• Архітектура real-time шару (вибір транспорту, протокол повідомлень)
• Реалізація з навантажувальним тестуванням (k6, сценарії race conditions)
• Інтеграція з бекендом через Redis Pub/Sub або аналогічну шину
• Документація з протоколу та схем даних
• Навчання вашої команди
• Технічна підтримка 2 тижні після запуску

Чому Centrifugo може бути вигіднішим за Socket.io?

Socket.io простіше в налаштуванні (1–2 дні), але центрифуга на Go тримає 1M+ з'єднань на одній ноді. Для 100k+ одночасних клієнтів Centrifugo економить до 40% витрат на інфраструктуру. Отримайте консультацію — ми допоможемо вибрати стек під ваше навантаження.

Строки

• Базовий WebSocket-чат або нотифікації поверх існуючого API: 1–3 тижні.
• Коллаборативний редактор з Yjs і persistence: 4–8 тижнів.
• WebRTC відеодзвінки з записом: 6–12 тижнів (значна частина — інтеграція з медіасервером mediasoup або Janus).

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