How Weex Powered Youku’s Double‑11 Live Stream: Architecture, Challenges & Solutions

Origin

Although Youku’s live‑streaming service was already stable, the Double‑11 event required a massive set of new interactive features—likes, shares, quizzes, treasure boxes, red‑packet rain—on top of the core live‑show functionality, and the venue design kept changing, making the existing native player difficult to adapt.

To meet these demands, the team decided to rewrite the live‑room with Weex, fully reproducing the native capabilities while adding support for all Double‑11 interactions. The old native room was kept only as a fallback.

Component Encapsulation

Before development began, the team divided the functionality into modules, deciding which parts would use Weex SDK or AliWeex native components and which native code would be wrapped as Weex components.

The final Weex live‑room architecture includes the following modules:

Venue framework built by Weex business code

Replay list tab: image‑text video list implemented with native Weex

Chat tab: complex chat bubbles and logic wrapped as a Weex component

Graphic live tab: images, text, video, product links wrapped as a Weex component

Player component: native Youku live player wrapped as a Weex component

Like tag: animation component wrapped as a Weex component

Custom tab: a WebView component with multiple functions

1) Use Baichuan capability to load Taobao products for side‑by‑side purchase
2) Load interactive H5 pages for red‑packet rain, quizzes, etc.
3) Load H5 pages from Alibaba Planet

Other functions such as navigation, sharing, and monitoring were exposed as Weex modules.

Interactive Feature Support

Operations staff edit interactive messages (host topics, skin changes, red‑packet rain) in the Youku live‑center. These messages are sent to the client via the PowerMsg channel, parsed by the Weex venue, and trigger the appropriate UI (topics, treasure boxes, rain pages).

Downgrade Logic

Unlike typical Weex‑to‑H5 fallback, the downgrade here switches to the native live‑room when loading, navigation, or runtime errors occur, requiring a custom downgrade implementation.

Challenges and Solutions

Gesture Conflict

The tab bar and custom Weex components conflicted: vertical gestures needed by the tab content, horizontal gestures needed by the tab bar. The solution was to create a custom Div tag that consumes vertical gestures for the child component while letting horizontal gestures propagate to the parent tab bar.

public boolean onInterceptTouchEvent(MotionEvent event){ boolean intercepted = false; switch(event.getActionMasked()){ case MotionEvent.ACTION_DOWN: intercepted = false; break; case MotionEvent.ACTION_MOVE: if(parentIntercepts){ intercepted = true; }else{ intercepted = false; } break; // ... } return intercepted; }

Because the custom solution broke ExpressionBinding, the team rewrote the WXGesture recognition code to restore high‑level gesture events (HORIZONTALPAN, VERTICALPAN) and trigger ExpressionBinding manually.

Screen‑Rotation Experience

Previously the activity rotated and the video filled the screen, causing a black screen during rotation. The new approach records the video view’s layout, detaches it to the window’s decor view during landscape, and re‑attaches it back to its original parent when returning to portrait, eliminating the black‑screen delay.

Video Corner Rendering

On Android the video leaked through the rounded corners of the TV‑frame image. Adding a borderRadius property to the custom video component and passing the radius to the native layer allowed the video view to be clipped with matching rounded corners.

Rendering Speed and Experience

Lazy loading was introduced: only the portrait layout is initialized at launch; landscape components are created on demand. Redundant invisible views were removed, and layout hierarchy was flattened, greatly improving load time.

Like‑animation performance was optimized by adding a feature flag to disable or throttle animations on low‑end devices, and by batching likes before triggering the animation.

Reducing Server Pressure

Static resources (Weex bundles, images) were pushed to clients via ZCache, cutting server QPS and improving load speed. A custom Mtop Weex module merged duplicate requests, caching responses for a short period, which reduced server load by over 100 k QPS.

Double‑11 Live Results

The Youku Double‑11 live stream achieved:

655 million user clicks guided to Tmall

2.09 million concurrent viewers

Extensive instrumentation confirmed stable performance and high availability.

Aftermath

Based on the Double‑11 success, the Weex live‑room has been rolled out to all Youku live‑streaming services and will support upcoming New‑Year and Spring Festival galas, with more interactive features and smoother loading experiences planned.