Implementing Trading View Screen in Mobile Exchange App
Trading screen in exchange app is one of most technically dense mobile UIs. Candlestick chart with hundreds of data points, order book updating in real-time, order form with instant validation—all running at 60 fps with WebSocket stream of 10 updates per second. Performance here directly affects user's money.
Data Architecture and Real-time Updates
WebSocket and Data Stream Management
Exchange data arrives via WebSocket—subscriptions to pairs, tick receipt and order book updates. On iOS—URLSessionWebSocketTask (native, iOS 13+) or Starscream library for flexible reconnect logic. On Android—OkHttp WebSocket or Ktor WebSocket client.
Critical: throttling incoming data. WebSocket can send 20–50 updates/second for active pairs. Updating UI per update overloads main thread. Correct approach: accumulate updates in ConcurrentQueue on background thread, apply to UI at 60fps (via CADisplayLink on iOS or Choreographer on Android).
Order Book Data Model
Order book—sorted structure: bids sorted descending by price, asks ascending. SortedArray or TreeMap (Java) / custom AVLTree (Swift) for O(log n) insertion/deletion on updates. Update is patch: new level, changed volume, deleted level (volume = 0).
For iOS order book—NSFetchedResultsController pattern without CoreData: store bids: [(price: Decimal, size: Decimal)] and asks, on change diff via DeepDiff or Swift's CollectionDifference for minimal UITableView updates.
Candlestick Chart
Custom Rendering via Core Graphics
Standard UIKit / View too slow for interactive candlestick with 1000+ candles. Options:
Core Graphics / UIKit Drawing. UIView.draw(_:) with UIGraphicsGetCurrentContext(). Each candle—two rectangles (body and shadow) via context.fill(). For 500 candles in draw(_:)—8–12 ms on iPhone 12, fits 16ms frame budget. Not recommended for 2000+ candles or animated updates.
Metal. For professional trading apps with animated scalable chart—MetalKit. MTLBuffer with vertex data for candles, vertex shader draws rectangles in screen space. 10,000 candles—1–2ms render. TradingView (web) uses canvas/WebGL—same principle.
Ready Libraries. Charts (Daniel Gindi)—popular iOS/macOS library with CandleStickChartView. Non-real-time but good for periodic updates. LightweightCharts—official mobile wrapper over TradingView Lightweight Charts (WebView-based). Fastest path to production-ready chart with technical indicators.
Gestures and Chart Navigation
Pinch for zooming, pan for time axis movement. UIPinchGestureRecognizer + UIPanGestureRecognizer simultaneously via gestureRecognizer(_:shouldRecognizeSimultaneouslyWith:) -> true.
On zoom—visibleRange changes, load historical candles for new range via REST. Infinite scroll left: reaching leftEdge—request historical data, add to start without resetting position (update contentOffset by added candle width).
Crosshair on long press—UILongPressGestureRecognizer with minimumPressDuration = 0.1. On finger move—update crosshair position and OHLCV tooltip with candle data under cursor. Hit-test by X: candleIndex = Int((touchX - chartOriginX) / (candleWidth + candleSpacing)).
Order Form
Price/Volume Input and Validation
UITextField with inputView—custom digit keyboard instead system. Buttons for 25%, 50%, 75%, 100% of available balance. Decimal for storage, not Double.
Instant validation on input: minimum volume, price tick size, available balance. Combine publisher(for: \.text) on UITextField with debounce(0.1) and map { Decimal(string: $0) }.
Real-time order cost calculation: total = price * amount with commission. Updates on price or amount change. NSDecimalNumber.multiplying(by:) for precision.
Buy/Sell Toggle
Animated transition: form background smoothly changes color (green ↔ red), button text, direction icons. On iOS—UIView.animate(withDuration: 0.2) with backgroundColor change. Haptic .impact(.medium) on toggle.
Order Confirmation
Bottom sheet with order details before sending. UISheetPresentationController (iOS 15+) or custom. On confirm—button switches to loading state (UIActivityIndicatorView instead text), blocks re-tap. After API response—success animation (green checkmark with scale) or error with specific API text.
Performance and Optimization
UITableView for Order Book
Order book—UITableView with infinite potential height. UITableView.performBatchUpdates() for animated add/delete/update. At 10 updates/sec—batch changes: don't call performBatchUpdates per tick, collect over 100ms and apply together.
Order book cell—custom UITableViewCell with UILabels for price, volume and depth bar (visual strip proportional to level volume). Depth bar—UIView with width constraint, updated via UIView.animate. Don't redraw entire cell—only change constraint constant.
Profiling
Xcode Instruments > Time Profiler for hot spots in update loop. Core Animation instrument for frame drops. Target metrics: <16ms for WebSocket batch processing, <5ms for UI update, 0 dropped frames on order book scroll.
Android—Android Profiler in CPU+Memory+Network mode. systrace for long frame analysis in Choreographer.
Offline and Reconnect
Connection loss: overlay "No connection" over chart (don't replace screen), last known data visible. On recovery: auto reconnect WebSocket with exponential backoff (1s, 2s, 4s, 8s, max 30s), REST request for current order book snapshot and latest candles, seamless resume without chart position reset.
Timeline: 5 days. WebSocket integration with throttling, candlestick chart on Core Graphics or LightweightCharts, order book with batch updates, order form with validation and confirmation. Custom Metal-rendered chart with indicators and advanced analytics—additional 5–10 days.