Cap'n Web: Cloudflare Workers + React
-
Network RTT is simulated on the server (configurable via SIMULATED_RTT_MS/SIMULATED_RTT_JITTER_MS in wrangler.toml).
+
Network RTT (round-trip-time) is simulated on the server (configurable via SIMULATED_RTT_MS/SIMULATED_RTT_JITTER_MS in wrangler.toml).
This demo calls the Worker API in two ways:
- - Pipelined batch: dependent calls in one round trip
- - Sequential non-batched: three separate round trips
+ - Pipelined (batched): dependent calls in one round trip
+ - Sequential (non-batched): three separate round trips
- {pipelined && (
+ {(pipelined && sequential) ? (<>
Pipelined (batched)
HTTP POSTs: {pipelined.posts}
Time: {pipelined.ms.toFixed(1)} ms
-
- {JSON.stringify({
- user: pipelined.user,
- profile: pipelined.profile,
- notifications: pipelined.notifications,
- }, null, 2)}
+
+
+
Response
+
{JSON.stringify({
+ user: pipelined.user,
+ profile: pipelined.profile,
+ notifications: pipelined.notifications,
+ }, null, 2)}
+
- )}
- {sequential && (
Sequential (non-batched)
HTTP POSTs: {sequential.posts}
Time: {sequential.ms.toFixed(1)} ms
-
- {JSON.stringify({
- user: sequential.user,
- profile: sequential.profile,
- notifications: sequential.notifications,
- }, null, 2)}
+
+
+
Response
+
{JSON.stringify({
+ user: sequential.user,
+ profile: sequential.profile,
+ notifications: sequential.notifications,
+ }, null, 2)}
+
- )}
- {(pipelined && sequential) && (
Summary
Pipelined: {pipelined.posts} POST, {pipelined.ms.toFixed(1)} ms
- Sequential: {sequential.posts} POSTs, {sequential.ms.toFixed(1)} ms
-
- )}
+
+
Sequential: {sequential.posts} POSTs, {sequential.ms.toFixed(1)} ms
+
+
+ ) : null}
)
}
-function TraceView({ trace }: { trace: Trace }) {
- const width = 700
- const rowHeight = 22
- const gap = 8
- const rows = [ 'Network', ...trace.calls.map(c => c.label) ]
- const totalHeight = rows.length * (rowHeight + gap) + 10
- const scale = (t: number) => (t / Math.max(trace.total, 1)) * width
-
- // Deduplicate call labels in case of repeats
+function TraceView({ trace, maxTime }: { trace: Trace, maxTime: number }) {
const renderedCalls = trace.calls.map((c, i) => ({...c, idx: i}))
return (
-