remote-ui allows you to create custom component APIs in JavaScript that can be used to render UI from a context other than the UI thread, like a web worker. This technique can be a powerful performance optimization by isolating application code on a background thread, leaving only the platform-native components on the UI thread. It can also be used as a way for third party code to generate UI in a safe, dynamic, and highly-performant way, without relying on iframes.
remote-ui is a collection of projects that work together to provide the capability of remotely rendering UI:
@remote-ui/coregives you the tools to create a “remote root”: a root for a tree of component nodes that can communicate operations (adding or removing children, changing properties of components) through a tiny wire format suitable forpostMessagecommunication. This remote root can enforce validations, like restricting the available components, their children, and their allowed properties. Finally, this library offers some helpful utilities for implementing “hosts” of a remote root; that is, code running on the UI thread that can transform the communication format of a remote root into platform-native components.@remote-ui/rpcis a small wrapper forpostMessage-like interfaces. Its key feature is flexible support for serializing functions (implemented via message passing), with additional helper functions to help with the memory management concerns of serializing functions. While not strictly necessary, passing functions as component properties (e.g.,onPressof aButtoncomponent) is often very useful, and so all libraries in this project assume the use of thisrpclibrary in order to provide seamless handling of function component properties.@remote-ui/web-workersmakes it easy to use remote-ui to offload application code to a web worker. It does so through small runtime utilities and a collection of build tool integrations that allow you to author web workers with all the comfort of your existing tools and libraries.
The main API of remote-ui, provided by @remote-ui/core, is small, and similar to the DOM. This makes it well-suited as a target for other libraries, which can provide different tradeoffs of performance and developer ergonomics for code executing in the remote environment. The “host” side is also meant to be flexible, allowing you to map the simple “tree of components” structure from the remote environment into many different UI libraries on the main thread. This repo provides bindings to the host and/ or remote parts of remote-ui for a few popular libraries:
Legend:
Host 🌎: provides a host layer that can map remote-ui components to UI components
Remote 🛰️: provides a way to manage the tree of remote-ui components in the remote context
| Library | Host 🌎 | Remote 🛰️ |
|---|---|---|
@remote-ui/react |
✅ | ✅ |
@remote-ui/vue |
✅ | ✅ |
@remote-ui/dom |
✅ | ❌ |
@remote-ui/htm |
❌ | ✅ |
Finally, this repo also contains a number of utility libraries for working with remote-ui:
@remote-ui/testingprovides a test-friendlyRemoteRootobject, and a collection of helpful Jest assertions.@remote-ui/traversalprovides DOM-like APIs for finding components in aRemoteRoot.@remote-ui/async-subscriptionhelps you build subscriptions that work when all functions must be asynchronous, like they are when passed over the bridge created by@remote-ui/rpc.
We’ve prepared some guides for getting the most out of remote-ui:
- Recommendations on component API design patterns.
- Performance considerations when using remote-ui.
We have created a local vanilla-js example project.
Alternatively, you can also run this app directly in your browser or try out a react-based example app.
Want to learn even more? Read through the comprehensive example, a written guide that documents a fully-featured implementation of remote-ui across both the host (browser) and remote (web worker) environments.
Check out our contributing guide.
MIT © Shopify, see LICENSE.md for details.
