How Youku Built a TV‑Focused Front‑End Framework with a Focus Engine

Background

OTT (Over‑the‑Top) refers to delivering applications and services over the internet, bypassing traditional carriers. In the TV context, interaction is limited to a remote control, which maps its directional and OK keys to keyboard arrows and Enter. Youku’s OTT product, the "Cool Cat" app, has been under development for more than five years, evolving from a pure native implementation to a hybrid where front‑end code handles high‑frequency activity slots and rapid releases.

Focus Engine

Component Tree

TV pages are divided into frequently used modules such as horizontal/vertical lists, multi‑direction unordered layouts, and scrollable lists. These modules are abstracted into components that automatically manage focus transitions between their internal elements. Components are organized into a tree structure, providing clear parent‑child relationships, lifecycle management, and event propagation, which simplifies focus handling across the whole page.

The base class Widget stores a reference to its parent ( parentWidget) and manages a child array ( childWidgets). Sub‑classes implement specific focus logic: horizontal lists handle left/right keys, unordered layouts provide various focus‑awareness algorithms, and scrollable lists trigger page scrolling when focus moves.

Focus Management

Two technical aspects are central: event simulation with bubbling through the component tree, and constructing a focus chain. Standard DOM events (keydown, focus, blur) only fire on focusable elements, but on TV almost every visual element is conceptually focusable. The framework adds on, detach, and fire methods to components, and defines an Event.Base class that can be extended to Event.KeyEvent, Event.FocusEvent, Event.SelectEvent, etc.

With simulated events, the focus flow becomes deterministic: when a component triggers a focus change, the process starts from the leftmost element; when a component’s focus() method is called, the flow begins at that point. The overall execution sequence is illustrated below.

Era Construction

Stone Age – Source‑Code Development (AWP)

Initially each activity required a full code build, leading to low efficiency. Over time common components were extracted, reducing development time from three days to 1.5 days, but frequent UI tweaks still forced full releases, causing operational pain, especially during large events like Double‑11.

Farming Age – Template Development (TMS/Zebra)

Templates for recurring activity slots (weekly blockbuster, game‑lottery, countdown, etc.) were created, allowing operators to configure pages without code changes. This improved speed but constrained creative freedom and eventually could not keep up with evolving activity formats.

Industrial Age – Visual‑Building Platform (ARK)

Inspired by Alibaba’s internal visual‑building system, a TV‑specific platform was built on top of the existing B‑system services. After two months of effort, the first beta was released on 2016‑11‑04, providing a drag‑and‑drop environment for page assembly.

Beyond the Industrial Age – Multi‑Dimensional Front‑End Empowerment

Half‑Screen Interaction: Leveraging the Weex stack, a half‑screen interactive layer was created, increasing exposure UV by ~200%.

Sync Login State: Implemented QR‑code login on TV and synchronized the session to mobile devices, improving login rates by ~10%.

Quality Monitoring: Integrated real‑time log monitoring across Rax, quality platform, and container layers to simplify bug tracing.

Visual Order Capture: Enabled one‑click QR payment for OTT purchases, streamlining the checkout flow.

Points Mall: Built a points‑based marketplace tailored to large‑screen usage, supporting multi‑party redemption and driving user growth.

These capabilities have transformed the OTT front‑end from a maintenance burden into a scalable, high‑quality platform that supports rapid activity deployment, robust monitoring, and innovative user‑centric features.