How Alibaba’s EVA System Delivered Lightning‑Fast, Stable Double‑11 Interactive Cats

Introduction

In e‑commerce, interaction drives user growth, retention, and acquisition. For Double‑11, the Taobao interactive team launched the "Super Star Cat" experience, attracting millions of users across multiple apps. Using the EVA interaction system, they achieved high performance, low memory usage, zero failures, and instant loading.

Page Rendering Infrastructure

The Double‑11 page loads dramatically faster than previous years, even without native apps, caching, or pre‑rendering. The speed comes from a custom "Interactive‑Specific Solution" built on the Tianma Solution framework, which trims unnecessary dependencies, orders module loading (first‑screen vs. non‑first‑screen), automatically shrinks data, embeds stability monitoring, and integrates common interactive capabilities.

Simplified core dependencies and logic.

Custom module load order with batch loading.

Data processing to remove irrelevant fields.

Built‑in client‑side scoring stability guarantees.

Resource and module load monitoring.

Integrated common interactive features such as standardized CSS and mobile debugging.

EVA Development System

EVA provides an end‑to‑end solution for interactive development, covering asset upload, a 2D interaction engine, and tooling.

EVA Store: Asset Upload Service

Supports 2D skeletal animations (Spine, Live2D), sprite sheets, DragonBones, audio, etc., with standardized protocols.

EVA JS: 2D Interaction Engine

EVA JS is a lightweight front‑end framework for interactive games, offering a plugin system, ECS‑style architecture, and built‑in accessibility support for Canvas elements.

It also provides a Canvas‑based accessibility SDK that automatically exposes interactive elements to assistive technologies.

Rax EVA: Rax Integration

Rax EVA lets developers write interactive scenes using familiar JSX and Hooks, avoiding the need to learn separate game‑engine APIs. The following example demonstrates displaying a Spine animation:

<code>import {createElement, render} from 'rax';
import DriverUniversal from 'driver-universal';
import {Eva} from '@ali/rax-eva';
import Spine, {useSpineResource} from '@ali/rax-eva-spine';

function App() {
  const catSrc = useSpineResource({
    image: 'https://gw.alicdn.com/tfs/TB1YHC8Vxz1gK0jSZSgXXavwpXa-711-711.png',
    altas: 'https://pages.tmall.com/wow/eva/b8597f298a5d6fe47095d43ef03210d4.atlas',
    ske: 'https://pages.tmall.com/wow/eva/b5fdf74313d5ff2609ab82f6b6fd83e6.json',
  });
  return (
    <Eva width={750} height={1334}>
      <scene>
        <Spine resource={catSrc} animationName='idle' anchorX={0.5} anchorY={1} />
      </scene>
    </Eva>
  );
}

render(<App />, document.getElementById('root'), {driver: DriverUniversal});
</code>

Global Stability Solution

To ensure smooth performance across devices, the team implemented a device‑scoring SDK (Kite) that classifies phones into four levels and applies experience‑based degradation. A static global downgrade rule combined with a runtime stability SDK monitors memory, frame rate, and CPU, automatically adjusting assets, effects, and canvas sizes to prevent crashes.

The stability system kept the Double‑11 interaction online for 22 days with zero incidents, becoming a standard for marketing interactions.

Conclusion and Outlook

The Double‑11 interactive experience set new participation records while maintaining high performance and stability. Future work will continue to evolve the EVA ecosystem, simplifying development and expanding interactive capabilities for all developers.