Remote Rendering UI Extensibility
Article Summary
Joey Freund from Shopify reveals how they let third-party developers extend their UI without compromising security or performance. The secret? Rendering UI in one place while defining it in another.
Shopify needed a way to let millions of developers build extensions that feel native across web, iOS, and Android while keeping untrusted code sandboxed. Their solution, called remote rendering, separates UI definition from rendering using message passing. They built the open-source remote-ui library to handle the complex technical challenges.
Key Takeaways
- Remote rendering splits UI definition (sandbox) from rendering (host) via MessageChannel communication
- remote-ui library handles RPC, DOM-like APIs, and automatic memory management across platforms
- Extensions run in isolated web workers with restricted globals and separate domain security
- Same extension code renders natively in React (web), Kotlin (Android), and Swift (iOS)
- Powers product subscriptions and post-purchase extensions with consistent UX across platforms
Shopify built a cross-platform extension system that lets developers use familiar APIs while maintaining platform security, performance, and native look-and-feel through message-based remote rendering.
About This Article
Shopify needed third-party extensions to work consistently across web, iOS, and Android. The extensions had to match the native experience in terms of UX, performance, and accessibility. At the same time, the platform needed protection from malicious or poorly written code.
Shopify built remote rendering using the open-source remote-ui library. The approach separates UI definition, which runs in sandboxes, from rendering, which happens in hosts. They used MessageChannel for communication, added RPC abstractions, and implemented automatic memory management for event handlers.
This architecture let Shopify launch product subscriptions and post-purchase extensions with a single codebase. The same extension code renders natively across web, iOS, and Android using web workers, Kotlin, and Swift. Developers no longer need to rewrite code for each platform.
