Protobuf vs JSON Encoding Lab (Interactive)
Encode a live message field-by-field with tags and varints, byte for byte, against the JSON equivalent. Change field values and watch integer-to-varint sizes, default-value omission, and total payload shrink versus JSON — then pick among the four gRPC streaming modes.
Protobuf vs JSON Wire Encoding
Field tags instead of names, varints instead of fixed ints: count every byte on the wire.
message User { ... }
FIELD-BY-FIELD BINARY LAYOUT
int32 id = 1 (tag 1B + varint 1B)2B
string name = 2 (tag + len varint + 6B utf8)8B
bool is_active = 3 (tag + 1B)2B
repeated items = 4 (1× embedded message (no field names))15B
repeats key names + quotes + whitespace
69% smaller · 7× faster (de)serialization
4 streaming modes (HTTP/2 transport)
rpc GetUser(req) returns (resp) — one request, one response.
1 HTTP/2 stream, 1 DATA frame each way · REST-equivalent
How It Works Under the Hood
JSON re-spells every field name, quotes, and whitespace on every record; Protocol Buffers transmit only a 1-byte field tag (field number bit-shifted with wire type) plus the value, and encode integers as varints that cost 7 bits per byte — so 42 is one byte where a 32-bit int needs four. proto3 omits default values entirely, making sparse messages nearly free, and repeated embedded messages inherit the same compact rules. Layered on HTTP/2 binary framing, gRPC gains multiplexing, typed .proto contracts that compile stubs in every language, and four streaming modes from unary to full bidirectional.
Core Architectural Principles
- Varints: ceil(7 bits per byte) encoding — small integers cost 1 byte, tags cost 1 byte instead of field names.
- proto3 omits default/zero values; backward compatibility requires never reusing field numbers.
- Four RPC modes over HTTP/2: unary, server-stream, client-stream, and bidirectional streaming.
Explain why Protobuf is smaller and 5-10x faster than JSON mechanically — field tags replace key strings, varints compress small integers, no whitespace or parsing-heavy string allocation. Then state the standard pattern: REST/JSON at the public edge, gRPC transcoded at the gateway for internal service-to-service traffic.
70-85% smaller payloads, compile-time contracts, and native streaming, versus binary opacity in cURL and needing grpcurl or Envoy gRPC-Web for browsers.