Design and Implementation of a Reactive Data System in Tubes

This article introduces Tubes, a high‑performance terminal rendering solution used in major Alibaba e‑commerce events, and explains why a reactive data system is essential for handling split‑screen rendering where Tubes (execution units) may need to run multiple rounds.

Two implementation approaches are compared: (1) a loop‑based system that requires developers to manually control the number of execution cycles with APIs such as once , and (2) a reactive data system that automatically re‑executes only the Tubes whose input data has changed. The loop‑based method is simple but imposes a high cognitive load on developers, while the reactive approach eliminates extra boilerplate and improves execution efficiency.

The reactive data system is built on three core concepts: reactive data , dependency collection , and dependency triggering . Tubes are designed to be idempotent—re‑executing only when their input changes. Developers can control when reactivity is triggered using a custom Set/Get API, for example:

const data = this.store.get('data'); // bind dependency here const name = data.name; // no getter triggered data.name = name + '!'; // no setter triggered this.store.set('data', data); // trigger reactivity

Internally, Tubes store dependency metadata in a hidden __dep__ property and also maintain a hash‑table where each key‑path maps to a list of dependent Tubes. The following pseudo‑code shows how a get operation records the current Tube and effect:

function get(keypath) { this.ctx.tb.store.effect = effect; this.ctx.tb.store.tube = tube; const res = this.ctx.tb.store.get(keypath); this.ctx.tb.store.tube = null; this.ctx.tb.store.effect = null; return res; }

Using a hash table changes the time‑complexity of dependency lookup from O(N) to O(1). Benchmarks on low‑end Android devices show a 1,349.8× speed‑up for reads and a 452.6 ms reduction in first‑screen rendering time, while write performance remains unchanged.

In summary, the hash‑table‑based reactive data system provides a scalable, low‑overhead way to automatically schedule Tubes, delivering significant performance gains for large‑scale e‑commerce front‑ends.