INTERACTIVE WEB

Interactive Web

Everything you need to build realtime, collaborative, and multiplayer web applications: from the first WebSocket connection to operational transforms, CRDTs, lag compensation, and rendering loops. Fourteen engineering guides, each focused on one problem, connected into a complete picture.

Interactive Web cluster map Four topic groups: transports, sync and state, collaboration, and multiplayer and rendering. TRANSPORT WebSocket Server-Sent Events WebRTC Data Channels SYNC AND STATE Realtime Data Sync Presence and Awareness Pub-Sub · Optimistic UI Event Streaming COLLABORATION OT Basics Conflict-Free CRDTs Collab Editing Arch MULTIPLAYER State Synchronization Latency + Reconciliation Rendering Loops

Transport layer

The three browser APIs that carry realtime data. Each has a different delivery model and a different use case.

01 WebSocket Fundamentals Full-duplex persistent connections, the handshake, framing, heartbeats, and reconnection with exponential backoff. Available now 02 Server-Sent Events One-way server push over HTTP, automatic reconnection, event IDs for replay, and when to choose SSE over WebSocket. Available now 03 WebRTC Data Channels Peer-to-peer data over SCTP/DTLS, SDP offer and answer, ICE with STUN and TURN, and reliable vs unreliable delivery. Available now

Sync and state

Patterns for keeping shared state consistent across clients and handling the asynchrony of a live network.

04 Realtime Data Synchronization Full-state broadcast vs delta updates, sequence numbers, gap detection, catch-up on reconnect, and idempotent handling. Available now 05 Presence and Awareness Online indicators, typing signals, live cursors, heartbeat expiry, and a self-contained awareness layer over WebSocket. Available now 06 Pub-Sub Messaging Patterns Topic channels, fan-out broadcast, hierarchical namespacing, subscription lifecycle, and a typed client dispatcher. Available now 07 Optimistic UI Updates Snapshot, apply, confirm or revert. Pending counters, animated rollbacks, server reconciliation, and Backbone save patterns. Available now 08 Event Streaming Architecture Append-only logs, event sourcing, consumer offsets, log compaction, replay for state rebuild, and the frontend stream client. Available now

Collaboration

Algorithms and architectures for concurrent editing where multiple users change the same data simultaneously.

09 Operational Transform Basics Insert and delete operations, the transform function, convergence, server-side OT coordination, and the limits of OT. Available now 10 Conflict-Resolution CRDTs G-Counter, LWW register, OR-Set, RGA for text, merge semantics, and when to use CRDTs instead of OT. Available now 11 Collaborative Editing Architecture Document model, sync layer, awareness layer, per-user undo, server-side permissions, and how the layers connect. Available now

Multiplayer and rendering

Shared world state across many clients, latency engineering, and the rendering loop that turns network data into pixels.

12 Multiplayer State Synchronization Authoritative server, client prediction, input queues, state interpolation, dead reckoning, and lag compensation. Available now 13 Latency and Reconciliation Measuring RTT and clock offset, hiding latency with prediction, smooth correction, jitter buffers, and reconnection. Available now 14 Realtime Rendering Loops The game loop, requestAnimationFrame, fixed-rate simulation, variable-rate render, network queue integration, frame budget. Available now - Capstone

Related clusters

The Interactive Web cluster builds on and connects to other clusters on this site.

Rendering Frontend Architecture Modern Frameworks Backbone.js Guide
Start with the Backbone.js Guide →
← Back to Home