Home▸Networks & Graph Theory▸gRPC vs REST: Wire-Byte Heatmap & Waterfall

gRPC vs REST: Wire-Byte Heatmap & Waterfall

Interactive 2D simulator: encode the same mobile API record as JSON (REST) and as Protocol Buffers (gRPC) with a real byte-level encoder, see every wire byte drawn as a colored cell in a byte heatmap, then watch a network waterfall race both across 2G/3G/4G/5G profiles.

Networks & Graph Theory2DModerate60 FPS📱 Mobile-adapted⇄ 3D version

Mobile apps constantly choose between REST/JSON and gRPC/Protocol Buffers for talking to a backend, but the size difference is usually described in vague percentages. This simulator builds a real API record from a configurable schema, encodes it two ways with an actual byte-accurate JSON serializer and a hand-written Protocol Buffers wire-format encoder (varint tags, length-delimited strings, fixed32 floats — the same rules real gRPC stacks use), draws every resulting byte as a colored cell in a 2D heatmap so the structural difference is visible byte-by-byte, then computes true transfer time across four cellular network profiles from bandwidth and round-trip latency. A network waterfall chart — the same visualization browser dev tools use — races both formats' transfer bars so the gap is something you watch, not just a number.

⚙ Under the hood

Encode the same mobile API record as JSON (REST) and Protocol Buffers (gRPC) with a byte-accurate wire-format encoder, watch every single wire byte drawn as a colored cell in a 2D heatmap grid, then race both formats across 2G/3G/4G/5G network profiles on a network waterfall chart.

networkingmobilegrpcrest-apiprotobufserialization

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install