Overview & System Architecture
Core ArchitectureHigh-performance Tactical Situation Display (TSD) Track Rendering & Management Platform built for defense and maritime surveillance applications.
Live Tactical Platform & WebGL2 Performance Walkthrough
Video walkthrough demonstrating 10,000+ tactical contacts rendered via MapTalks & WebGL2 hardware instancing at 60 FPS, background kinematics Web Workers, real-time CRUD entity management, and pure-Go SQLite persistence synchronization.
Executive Summary
The Tactical Situation Display (TSD) platform is an advanced naval and maritime tracking application designed to ingest, render, manipulate, and persist dense operational entity tracks in real-time.
Engineered as a decoupled dual-stack solution, it combines a cutting-edge WebGL2 instanced rendering engine on the frontend with a resilient, pure-Go SQLite persistence backend.
High-Level Architecture Topology
The system is organized into two primary autonomous services communicating over structured REST APIs with complete Protocol Buffer schema parity:
1. Tactical Display Frontend (Client Layer)
• MapTalks & WebGL2 Hardware Instancing: Renders 10,000+ tactical contacts simultaneously in a single GPU draw call using custom vertex/fragment shaders and 2D texture arrays.
• Multi-Threaded Web Workers: Background threads (trackMover.worker.ts and trackHistory.worker.ts) calculate spherical kinematics and breadcrumb polylines without blocking the 60 FPS UI main thread.
• Zustand Core Store: Decoupled reactive state management keeping track telemetry and selected entity details synchronized across React components, WebGL layers, and background workers.
• HTTP / REST Client: Handles asynchronous synchronization, optimistic UI updates, and error recovery against the persistence backend.
2. Persistence Backend Service (Server Layer)
• Go 1.22+ Standard HTTP Routing: Lightweight, pattern-matched REST endpoints handling CRUD operations and health monitoring without third-party framework overhead.
• Symmetrical Domain Validation: Strict data boundary enforcement (coordinates, bearing, speed, callsign formatting) matching frontend validator rules.
• Pure-Go SQLite Database (WAL Mode): High-concurrency embedded persistence using modernc.org/sqlite with Write-Ahead Logging enabled for non-blocking concurrent reads and writes.
• Protocol Buffers Parity: Complete schema definition (proto/entity.proto) maintaining full compatibility with enterprise gRPC-Web and APISIX gateway architectures.
3. Inter-Service Communication Contract
• Transport: Standard HTTP/1.1 REST with JSON payloads, enabling zero-friction development and immediate reviewer evaluation.
• CORS Security: Configured to accept cross-origin requests specifically from the frontend development port (http://localhost:8123).
• Resilient Fault Handling: Frontend features non-blocking degraded mode with automatic retry mechanisms and informative error diagnostics if the backend is unreachable.
Technology Stack Matrix
| Domain / Layer | Frontend Technology | Backend Technology | Architectural Rationale |
|---|---|---|---|
| Language | TypeScript 5.x (Strict Mode) | Go (Golang) 1.22+ | End-to-end static type safety & high-throughput concurrency. |
| UI & Routing | React 18.3.1 (Concurrent Mode) | Standard net/http (Pattern Matching) | Component lifecycle control & zero third-party web framework overhead. |
| Rendering Engine | WebGL2 Hardware Instancing (MapTalks) | N/A (Headless persistence) | Single-draw-call rendering for 10k+ dynamic tactical entities. |
| State Management | Zustand Core Vanilla Stores | Domain Service State Machine | Decoupled store readable outside React lifecycle (Web Workers). |
| Database | Client-Side In-Memory GPU Buffer | SQLite (modernc.org/sqlite) | Zero-CGO Pure Go portable database with WAL concurrency. |
| Styling & Tokens | TailwindCSS + Custom HUD Palettes | N/A | Military-grade tactical CMS styling and contrast standards. |