✦ Preact Signals Terminal

High-Frequency Trading Terminal built with Preact Signals to showcase extreme granular reactivity without Virtual DOM diffing overhead.

---

✨ Highlights

• High-frequency trading order book simulation optimized for rendering speed.
• Seamless infinite-scrolling ticker tape showcasing continuous signal updates.
• 100% fine-grained reactivity using @preact/signals—bypassing Virtual DOM diffing entirely for data rows.
• Dynamic control panel to stress-test rendering (configurable tick rate, batch size).
• FPS counter hooked into browser rendering loops to visualize performance.
• Tailwind CSS 3 for a sleek, dark-mode terminal aesthetic.

🧱 Project Structure

The app is built as a set of standalone components focused on absolute rendering performance:

src/
|-- main.tsx
|-- app.tsx
|-- store.ts
|-- index.css
`-- components/
    |-- Controls.tsx
    |-- FPSCounter.tsx
    |-- OrderBook.tsx
    `-- TickerTape.tsx

store.ts orchestrates the mock matching engine and all reactive state directly via Signals. The UI components directly consume these signals.

🛠️ Tech Stack

• Preact 10 with Vite 8
• @preact/signals for all state
• TypeScript 6.0
• Tailwind CSS 3

🔌 Architecture

The core philosophy of this project is demonstrating the power of Preact Signals:

• Bypassing VDOM Diffing: Prices and amounts in the Order Book are updated at 60 FPS without ever triggering a top-level component re-render.
• Batched Engine Updates: The mock matching engine updates thousands of items per tick while maintaining 60 FPS.
• Granular Subscriptions: Each cell in the UI subscribes strictly to the signal of its specific data point.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🧪 Build & Checks

npm run build
npm run preview

🌐 Vercel Deployment

The repository includes vercel.json for Vite static deployment:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.