Remote Rendering: Shopify’s Take on Extensible UI

A deep dive into the latest generation of technology that allows developers to extend Shopify’s UI.

Shopify logo
Shopify
•
Joey Freund
•9 min read•advanced•
--
•View Original
JavaScriptJSONKotlinReactSwift

Overview

This article discusses Shopify's approach to remote rendering, a technique that separates UI definition from rendering, allowing third-party developers to create extensions that integrate seamlessly with Shopify's platform. It highlights the technical challenges, the architecture of the remote rendering system, and the tools available for developers to build and manage UI extensions securely.

What You'll Learn

1

How to implement remote rendering for Shopify extensions

2

Why message passing is crucial for communication between extensions and hosts

3

How to utilize the remote-ui library for building UI components

4

When to use sandboxing to enhance security for third-party extensions

Prerequisites & Requirements

  • Familiarity with JavaScript and web development concepts
  • Access to the remote-ui library and its documentation(optional)

Key Questions Answered

What is remote rendering and how does it work?
Remote rendering is a technique that separates the code defining the UI from the code rendering it, allowing third-party extensions to run in a secure sandbox. Communication between the extension and the host application occurs through message passing, ensuring that both can operate independently and securely.
What are the key components of the remote-ui library?
The remote-ui library includes several key components such as RPC for remote procedure calls, RemoteRoot for defining UI component trees, and RemoteReceiver for reconstructing these trees locally. These components facilitate efficient communication and rendering of UI extensions.
How does Shopify ensure the security of third-party extensions?
Shopify uses a sandboxing approach to run third-party code in an isolated environment, preventing it from negatively impacting the platform. This sandbox restricts access to certain JavaScript globals and allows the host to control what functionalities are exposed to the extension.
What challenges does remote rendering introduce?
Remote rendering introduces challenges such as defining an efficient message-passing protocol, implementing function calls across different languages, and ensuring UI updates are applied in a performant manner. These challenges are addressed through the architecture of the remote-ui library.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
Javascript
Used for implementing the host and extensions in the Shopify platform.
Backend
Kotlin
Implemented as a host language for cross-platform support.
Backend
Swift
Used for implementing hosts on iOS.
Library
Remote-ui
An open-source library for creating custom component APIs and managing UI rendering.

Key Actionable Insights

1
Leverage the remote-ui library to create seamless UI extensions for Shopify that enhance user experience.
By utilizing the library's components, developers can ensure their extensions maintain a consistent look and feel with Shopify's native UI, improving integration and user satisfaction.
2
Implement sandboxing for all third-party extensions to enhance security and reliability.
Sandboxing provides a controlled environment for executing untrusted code, which is crucial for maintaining the integrity of the Shopify platform while allowing developers to innovate.
3
Utilize message passing for communication between the host and extensions to decouple implementations.
This approach allows for greater flexibility in development, as hosts and extensions can be written in different programming languages and still communicate effectively.

Common Pitfalls

1
Failing to properly implement message passing can lead to communication issues between the host and extensions.
Without a well-defined protocol, extensions may not function correctly, leading to a poor user experience. Developers should ensure they follow the guidelines for RPC provided in the remote-ui documentation.

Related Concepts

Remote Rendering
Message Passing
Sandboxing
UI Extensibility