Розробка торгового терміналу для криптовалют

Трейдер втрачає до 5% прибутку через лаги терміналу — це доведений факт. Кожна мілісекунда затримки обертається втратами на високочастотних стратегіях. Ми розробляємо термінали, які не гальмують. Наші інженери з 5+ річним досвідом побудували 12 проектів для проп-трейдингових фірм та DeFi-фондів. Високочастотна торгівля вимагає латентності менше 100 мс. Зв'яжіться з нами — оцінимо ваш проект за 2 дні та запропонуємо рішення під ключ.

Ключові компоненти терміналу

Charting System — серце терміналу. Відображення OHLCV свічок, технічних індикаторів, об'ємів. TradingView Lightweight Charts — стандартний вибір для кастомних рішень. Для повноцінних терміналів — TradingView Advanced Charts через Data Feed API або повністю кастомна реалізація на Canvas/WebGL.

Order Book — стакан заявок у реальному часі. Візуалізація bid/ask рівнів, depth chart (кумулятивний об'єм), групування по тіку. Критично: оновлення відбувається без перемальовування всього компонента — лише змінені рядки.

Order Form — форма виставлення ордерів. Підтримка типів: market, limit, stop-limit, trailing stop. Розрахунок розміру в % від депозиту, в базовій/котируваній валюті, за кількістю лотів.

Positions/Orders Panel — управління відкритими позиціями та активними ордерами. Швидке закриття, зміна параметрів ордерів.

Trade Feed — стрічка останніх угод з підсвічуванням великих угод. Portfolio/Balance — зведена інформація по рахунку: баланси, margin ratio, P&L.

Архітектура frontend

// Структура React-застосунку терміналу interface TerminalLayout { left: { symbolSearch: SymbolSearchPanel; watchlist: WatchlistPanel; }; center: { chart: ChartPanel; orderBook: OrderBookPanel; tradeFeed: TradeFeedPanel; }; right: { orderForm: OrderFormPanel; positions: PositionsPanel; orders: OrdersPanel; balance: BalancePanel; }; bottom: { orderHistory: OrderHistoryPanel; alerts: AlertsPanel; }; } 

Resizable layout через react-grid-layout або react-mosaic — трейдери хочуть налаштовувати розташування панелей.

Чому WebSocket стан — вузьке місце?

Термінал отримує дані з декількох WebSocket-потоків одночасно. Керування цим станом — нетривіальне завдання. Використовуємо Zustand з атомарними оновленнями:

import { create } from 'zustand'; interface MarketDataStore { orderBook: OrderBook | null; trades: Trade[]; currentPrice: number | null; updateOrderBook: (diff: OrderBookDiff) => void; addTrade: (trade: Trade) => void; } export const useMarketDataStore = create<MarketDataStore>((set, get) => ({ orderBook: null, trades: [], currentPrice: null, updateOrderBook: (diff) => set((state) => { if (!state.orderBook) return state; const newBids = new Map(state.orderBook.bids); const newAsks = new Map(state.orderBook.asks); for (const [price, qty] of diff.bids) { if (qty === 0) newBids.delete(price); else newBids.set(price, qty); } for (const [price, qty] of diff.asks) { if (qty === 0) newAsks.delete(price); else newAsks.set(price, qty); } return { orderBook: { bids: newBids, asks: newAsks, timestamp: diff.timestamp } }; }), addTrade: (trade) => set((state) => ({ trades: [trade, ...state.trades].slice(0, 1000), currentPrice: trade.price, })), })); 

Як віртуалізація підвищує продуктивність у 25 разів?

Order book з 200+ рівнями, що оновлюється 10 разів на секунду — серйозне навантаження на DOM. Віртуалізація списку (react-virtual, tanstack/virtual) рендерить лише видимі рядки: 500 рядків у DOM -> 20 видимих, що дає приріст у 25 разів порівняно з повним рендерингом.

Web Workers для розрахунків — важкі обчислення (агрегація стакану, розрахунок індикаторів) виносяться в Worker, щоб не блокувати UI thread:

// orderbook.worker.ts self.onmessage = (e: MessageEvent) => { const { type, data } = e.data; if (type === 'PROCESS_DIFF') { const processed = applyDiff(data.currentBook, data.diff); const aggregated = aggregateByTick(processed, data.tickSize); self.postMessage({ type: 'BOOK_UPDATED', data: aggregated }); } }; 

requestAnimationFrame throttling — оновлюємо DOM не частіше 60 разів на секунду, буферизуючи вхідні оновлення.

Backend: Gateway сервіс

Термінал не підключається напряму до бірж — це архітектурна помилка для production-систем. Проміжний Gateway сервіс:

• Мультиплексує одне біржове WebSocket-з'єднання для множини клієнтів (знижує навантаження в 10 разів)
• Кешує поточний стан стакану
• Аутентифікує клієнтські з'єднання
• Обмежує rate limits

from fastapi import FastAPI, WebSocket from starlette.websockets import WebSocketDisconnect import asyncio app = FastAPI() class MarketDataGateway: def __init__(self): self.subscribers: dict[str, list[WebSocket]] = {} self.book_cache: dict[str, OrderBook] = {} async def subscribe(self, symbol: str, ws: WebSocket): if symbol not in self.subscribers: self.subscribers[symbol] = [] asyncio.create_task(self.connect_to_exchange(symbol)) self.subscribers[symbol].append(ws) # Відправляємо поточний снапшот новому підписнику if symbol in self.book_cache: await ws.send_json(self.book_cache[symbol].to_dict()) async def broadcast(self, symbol: str, data: dict): dead_connections = [] for ws in self.subscribers.get(symbol, []): try: await ws.send_json(data) except Exception: dead_connections.append(ws) for ws in dead_connections: self.subscribers[symbol].remove(ws) 

TradingView інтеграція

TradingView Advanced Charts (платна ліцензія) — стандарт для професійних терміналів. Кастомний DataFeed адаптер:

const dataFeed: IdatafeedChartApi = { onReady: (callback) => { callback({ supported_resolutions: ['1', '5', '15', '60', '240', 'D', 'W'], supports_marks: true, supports_time: true, }); }, getBars: async (symbolInfo, resolution, periodParams, onHistoryCallback) => { const candles = await api.getCandles( symbolInfo.name, resolution, periodParams.from, periodParams.to ); onHistoryCallback(candles.map(toTradingViewBar), { noData: candles.length === 0 }); }, subscribeBars: (symbolInfo, resolution, onRealtimeCallback) => { wsGateway.on(`candle:${symbolInfo.name}:${resolution}`, onRealtimeCallback); }, }; 

Мобільна версія

Повноцінний термінал на мобільному — інша UX-задача. Основні паттерни:

• Swipe між секціями (chart/orderbook/orders) замість multi-panel layout
• Bottom sheet для форми ордера
• Спрощений стакан (лише 10-20 рівнів)
• Push-сповіщення для алертів за ціною та виконанням ордерів

React Native з WebView для TradingView чарту або нативна реалізація через react-native-canvas для простих графіків.

Продуктивність та SLA

Вимоги до продуктивності:

Типові помилки при розробці

• Пряме підключення клієнта до біржі без Gateway — масштабування та безпека страждають
• Відсутність віртуалізації списків — при 200+ рівнях стакану UI починає гальмувати
• Оновлення всього компонента order book при кожній зміні, замість інкрементального оновлення
• Ігнорування rate limits бірж — призводить до блокування ключа API

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

• Проектна документація та архітектурний опис
• Репозиторій з кодом (React frontend, Python gateway, деплой скрипти)
• Інтеграція з біржами за вашим списком
• Навчання команди замовника роботі з кодом
• Технічна підтримка 3 місяці після релізу

Замовте розробку торгового терміналу під ключ. Отримайте консультацію — пишіть, ми оцінимо проект за 2 дні.