Hosting Someone Else's App: Iframe Choreography

Mon, 01 Jan 0001 00:00:00 +0000

Most frontend architecture talks assume you control the whole page. This one doesn’t. Percona Monitoring and Management (PMM) ships a React/TypeScript shell that owns routing, navigation, and auth — and then embeds an entire third-party application, Grafana, inside an iframe it doesn’t control the internals of. The two apps have to feel like one product: shared theme, shared navigation, shared login state, no visible seam.

This talk walks through how that’s actually built: a custom CrossFrameMessenger that turns postMessage into typed, promise-based RPC calls with timeouts and listener lifecycles; and the handshake that gates showing the iframe until the guest app has actually finished loading. I’ll cover the race conditions this design has to defend against, how you test cross-frame code without an end-to-end browser suite for everything, and where the abstraction leaks.

Polish on Percona Community

Hosting Someone Else's App: Iframe Choreography