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

Background

Alipay’s client requires dynamic technology because repackaging apps is too slow for product operations. Cube originated from native page dynamic needs, later integrated into the Alipay mini‑program stack as a lightweight solution with small size, fast startup, and low memory usage, making it suitable for OTT devices.

What Are Large‑Screen Mini‑Programs?

Large‑screen mini‑programs run on smart TVs or set‑top boxes using the Cube stack. These devices typically have low Android versions (many below 4.4), limited memory (over 20% below 512 MB, over 60% below 1 GB), low‑end CPUs (around 20% dual‑core, many at 1.5 GHz), and are overall low‑end compared to phones.

Because of these hardware bottlenecks and strict release windows, a smaller, faster, and more economical dynamic stack is needed, and Cube’s design meets these requirements.

Focus Engine

Large‑screen devices are controlled via remote controllers, requiring a focus engine. The FocusEngine consists of FocusNode (focusable view), FocusTree (focus hierarchy), FocusFinder (focus search algorithm), FocusState (focus status manager), and FocusEffect (visual focus effect).

Implementation Details

FocusNode (focusable view)

A FocusNode is created for any view with the focusable attribute, providing requestFocus and clearFocus methods and emitting 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 (focus hierarchy)

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

FocusFinder (focus search)

FocusFinder implements the algorithm for finding the next focusable node in a given direction (up, down, left, right). It is based on Android’s FocusFinder but removes descendant focusability support and uses a default FOCUS_AFTER_DESCENDANTS strategy with five priority modes: CENTER_FIRST, LEFT_FIRST, RIGHT_FIRST, TOP_FIRST, BOTTOM_FIRST.

FocusState (focus status)

FocusState tracks whether a FocusNode is currently focused. When a node gains focus, it is marked as focused; leaf nodes such as text or image under a focused parent are marked as selected.

FocusEffect (visual effect)

FocusEffect defines the visual style of a focused node, typically using the 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 below represents the currently focused FocusNode.

Experience Optimization

Performance data for OTT devices (using the Taobao Lite mini‑program) shows the impact of various optimizations:

Key optimization areas include:

Package size: Remove unnecessary modules (AntUI, security DB, permission) and share native libraries.

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

Memory usage: Static block optimization, JNI Global Reference reduction, decoupling Activity Context from native code, native rendering‑tree memory fixes.

Startup performance: Class verification suppression, GC suppression, optimized Android InvocationHandler, bytecode execution to skip Parse/AST phases.

Development Experience

Developing large‑screen mini‑programs with Cube is almost identical to regular Alipay mini‑programs. Developers can debug Focusable DOM nodes using Chrome DevTools, as shown below.

Exploration and Application

Cube has been used to create various product forms, including half‑screen live rooms for Double‑Eleven, tab‑style desktop homepages, embedded mini‑programs under search ads, and full‑screen OTT mini‑programs.

Future Thoughts and Outlook

Future work will further refine the rendering pipeline to improve startup speed, reduce Parse and AST overhead by leveraging bytecode execution, and lighten the Platform layer to lower coupling with underlying rendering systems. Additional scenarios such as mini‑games and 3D will also be explored.