How Cube’s FocusEngine Powers Fast, Lightweight OTT Mini‑Programs

Background

Alipay client has strong dynamic requirements; both iOS and Android cannot meet product operation needs with full package redistribution, so client‑side dynamic technology emerged.

Cube originated from native page dynamic demand and, with the rise of mini‑programs, became a lightweight Alipay mini‑program solution featuring small size, fast startup, and low memory usage, later extending to large‑screen devices.

What Is a Large‑Screen Mini‑Program?

A large‑screen mini‑program runs on smart TVs or set‑top boxes using the Cube mini‑program stack. These devices typically run low‑end Android versions, have limited memory (many under 1 GB), and low‑power CPUs.

Mostly Android, often below version 4.4.

Memory under 512 MB (>20%) or under 1 GB (>60%).

CPU often dual‑core around 1.5 GHz.

Overall low‑end hardware compared to phones.

Because of these hardware bottlenecks and limited OTA update windows, a smaller, faster, and more economical dynamic stack is needed; Cube’s mini‑program stack was designed to meet these constraints.

Focus Engine

FocusEngine handles remote‑control interaction on OTT devices, which differs from touch devices. It consists of FocusNode, FocusTree, FocusFinder, FocusState, and FocusEffect.

The original Cube stack lacked FocusEngine capabilities such as a FocusTree and focus search.

Implementation Details

Below are the unnamed heroes of the Cube rendering engine – the Focus implementation.

FocusNode (focusable view)

FocusNode maps a view with the focusable attribute to a concrete node that can request or clear focus and receive onFocusChange, onFocus, and onBlur callbacks.

<view id="focus-control" class="button" focusable="true" onFocus="handleFocus" onBlur="handleBlur">

  doRequestFocus() {
    my.createSelectorQuery().select('#focus-control').node().exec(function(ret) {
      const ref = ret && ret[0];
      ref.requestFocus();
    })
  }

FocusTree

FocusTree is a separate tree from LayerTree that maintains parent‑child relationships among FocusNodes. It can be inspected via DevTools or Android LayoutInspector.

FocusFinder

FocusFinder implements the core focus search algorithm, based on Android’s FocusFinder but customized for Cube. It removes Android’s descendant focusability, uses a default FOCUS_AFTER_DESCENDANTS strategy, and supports five priority strategies: CENTER_FIRST, LEFT_FIRST, RIGHT_FIRST, TOP_FIRST, BOTTOM_FIRST.

In the example, node A has focus. Nodes B and C intersect A horizontally, so weighted distance is used. Node E intersects A vertically, making it the preferred target for FOCUS_UP but not for FOCUS_LEFT. Nodes B and D allow horizontal cross‑column moves, while vertical moves are restricted, so FOCUS_LEFT selects B.

FocusState

FocusState manages the focus status of each FocusNode, marking the focused node and setting child text or image nodes to a selected state when appropriate.

FocusEffect

FocusEffect defines visual focus effects, typically implemented with CSS :focus pseudo‑class.

.button {
  margin-top: 30rpx;
  margin-left: 15rpx;
  width: 450rpx;
  height: 200rpx;
  border: 2rpx red solid;
}

.button:focus {
  border: 2rpx blue solid;
}

Actual Effect

The highlighted item in the screenshot indicates the currently focused FocusNode.

Experience Optimization

Performance data for OTT devices (using Taobao Mini‑Program as example) and optimization measures include:

Package size: remove unnecessary modules, share host APK SO.

Script engine: JSC/V8 on mobile, QuickJS on IoT.

Memory usage: static block optimization, JNI Global Reference optimization, decoupling Activity Context from native, rendering‑tree memory improvements.

Startup performance: class verification suppression, GC suppression, optimization of Android InvocationHandler, support for bytecode execution to skip parse/AST stages.

Development Experience

Developing large‑screen mini‑programs with Cube is almost identical to regular Alipay mini‑programs. Chrome DevTools can edit focusable DOM nodes directly.

Exploration and Application

Cube has been applied to various product forms: live‑room half‑screen mini‑programs for Double‑Eleven, desktop tab mini‑programs, embedded search‑ad mini‑programs, and full‑screen business‑operation mini‑programs.

Future Thoughts and Outlook

Future work will further refine the rendering chain to improve startup performance, reduce parse/AST steps, leverage bytecode execution, and lighten the platform layer. Additional scenarios such as mini‑games and 3D will be explored, and collaborations with third parties will expand the ecosystem.

If you need a smaller, faster, and more economical dynamic rendering stack with good developer experience, Cube is a strong candidate.