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

Трейдер теряет до 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 дня.