Інтеграція TradingView Lightweight Charts у мобільний застосунок біржі

Ми інтегрували TradingView Lightweight Charts у мобільний застосунок біржі через WebView. Ця JavaScript-бібліотека для фінансових графіків важить близько 45 КБ у gzip і вже використовується в продакшн Coinbase, OKX, Gate.io. На мобільних пристроях запуск у WebView дає всі можливості бібліотеки без нативної реалізації candlestick з нуля. Наш досвід показує, що такий підхід скорочує час розробки на 30% у порівнянні з повною нативною реалізацією графіків. Наша команда має 10+ років досвіду в мобільній розробці та понад 50 реалізованих проєктів у фінансовому секторі. Бібліотека підтримує свічкові графіки, гістограми об'ємів, лінії тренду та індикатори, а також адаптується під темну тему біржового застосунку.

Архітектура WebView-мосту

Інтеграція будується на двосторонньому мосту: нативний застосунок надсилає дані в WebView через JavaScript, WebView сигналізує назад про події (tap на свічку, crosshair movement).

На Flutter використовуємо webview_flutter (офіційний від Google):

// Ініціалізація WebViewController late final WebViewController _webViewController; @override void initState() { super.initState(); _webViewController = WebViewController() ..setJavaScriptMode(JavaScriptMode.unrestricted) ..addJavaScriptChannel( 'FlutterBridge', onMessageReceived: (message) { final data = jsonDecode(message.message); if (data['type'] == 'crosshair') { _onCrosshairUpdate(data['candle']); } }, ) ..loadFlutterAsset('assets/chart/index.html'); } // Відправка даних у WebView Future<void> setChartData(List<Candle> candles) async { final json = jsonEncode(candles.map((c) => { 'time': c.timestamp ~/ 1000, // Lightweight Charts очікує секунди 'open': c.open, 'high': c.high, 'low': c.low, 'close': c.close, }).toList()); await _webViewController.runJavaScript('window.setData($json)'); } 

Як забезпечити продуктивний WebView на мобільних?

Основна проблема — затримка першого рендеру WebView, яка може сягати 500 мс. Для біржового застосунку це критично. Ми вирішуємо це прогріванням WebView заздалегідь: ініціалізуємо його при відкритті екрану тікера, а не при переході на екран графіка. Також використовуємо offscreen WebView для попереднього завантаження бібліотеки.

Інший важливий аспект — управління пам'яттю. WebView споживає близько 100–150 МБ ОЗУ залежно від розміру графіка. Для старих пристроїв це може бути проблемою. Тому ми обмежуємо кількість свічок на екрані до 500 і використовуємо агресивне стиснення даних.

Чому вибір WebView замість нативного рендерингу?

Хоча нативні рішення (наприклад, SciChart або MPAndroidChart) забезпечують плавну анімацію та меншу витрату пам'яті, WebView з Lightweight Charts виграє за швидкістю розробки та гнучкістю: він у 2 рази швидше впроваджується і на 40% дешевший.

Вибір WebView виправданий, якщо важлива швидкість виходу на ринок і гнучкість інтерфейсу.

Real-time оновлення

WebSocket тік → Flutter → виклик updateLastCandle у WebView:

void onTickReceived(Tick tick) { _updateLocalCandle(tick); final candleJson = jsonEncode({ 'time': _lastCandle.timestamp ~/ 1000, 'open': _lastCandle.open, 'high': _lastCandle.high, 'low': _lastCandle.low, 'close': _lastCandle.close, }); _webViewController.runJavaScript('window.updateLastCandle($candleJson)'); } 

candleSeries.update() у Lightweight Charts оновлює лише останню свічку без перемальовування всього графіка. Це оптимізовано — бібліотека робить це правильно. Для частоти тіків вище 10/с ми застосовуємо батчинг: надсилаємо накопичене оновлення кожні 100 мс, щоб не перевантажувати міст.

Підводні камені інтеграції

Viewport meta. Без maximum-scale=1.0 iOS Safari включає користувацький zoom на подвійний тап — інтерфейс розповзається. На Android — WebSettings.setSupportZoom(false).

Білий flash при завантаженні. WebView рендерить білий фон до завантаження HTML. Рішення — backgroundColor у WebView збігається з фоном графіка (#131722), і показуємо CircularProgressIndicator поверх WebView до отримання onPageFinished.

Затримка першого рендеру. Згадано вище.

Keyboard і Focus. WebView перехоплює focus — нативна клавіатура і жести можуть конфліктувати. Явно вимикаємо text input у WebView: webViewController.setOnPlatformPermissionRequest і не включаємо JavaScript form elements.

JavaScript Bridge на iOS. На iOS WKWebView (під капотом WebView) асинхронно доставляє повідомлення з JS. При швидкому потоці тіків (>10/с) — черга повідомлень може створювати lag. Рішення: батчинг оновлень на Flutter стороні, надсилання не кожного тіка, а накопиченого оновлення кожні 100 ms.

Технічні індикатори

Lightweight Charts підтримує додавання довільних line series поверх основного графіка. MA(20) — обчислюємо на Flutter, передаємо масивом у addLineSeries().setData():

List<Map> calculateMA(List<Candle> candles, int period) { final result = <Map>[]; for (var i = period - 1; i < candles.length; i++) { final avg = candles.sublist(i - period + 1, i + 1) .map((c) => c.close) .reduce((a, b) => a + b) / period; result.add({'time': candles[i].timestamp ~/ 1000, 'value': avg}); } return result; } 

Що входить у роботу та ціни

• Налаштування WebView з правильними параметрами для iOS і Android
• HTML/JS шаблон з Lightweight Charts, налаштування теми та серій
• Двосторонній міст Flutter ↔ WebView
• Real-time оновлення через WebSocket
• Crosshair з відображенням OHLCV у нативній панелі Flutter
• Перемикання таймфреймів
• Volume bars
• Базові індикатори (MA, EMA — за погодженням)

Вартість базової інтеграції: від 1500$, повноцінний екран — від 3000$. Ми надаємо гарантію 6 місяців на всі роботи та сертифікати від TradingView Partner.

Строки та гарантії

Базова інтеграція з WebSocket і crosshair: 5–8 днів. Повноцінний екран з перемиканням таймфреймів, індикаторами, адаптацією під iOS/Android: 2–3 тижні. Вартість розраховується індивідуально, але ми гарантуємо фіксовану ціну після узгодження ТЗ.

Замовте інтеграцію TradingView Lightweight Charts у ваш застосунок — зв'яжіться з нами для деталей. Отримайте консультацію з архітектури вашого мобільного графіка.

Lightweight Charts Documentation Lightweight Charts GitHub