How Alibaba’s EVA Framework Delivered Lightning‑Fast Double 11 Interactive Cats

Page Rendering Infrastructure

During Double 11, the “Super Star Show Cat” interactive page loaded extremely fast on iPhone 11 Pro, without the usual progress bar. The speed was achieved without native apps, caching, or pre‑rendering; the page remained a pure web page served entirely via CDN.

The team built a custom “Interactive‑specific Solution” on top of the Tianma (天马) Solution framework, stripping unnecessary dependencies, defining a staged module loading order (first‑screen vs non‑first‑screen), automatically slimming data by removing rendering‑irrelevant fields, and embedding client‑side stability monitoring.

Simplified core dependencies and logic.

Custom module load sequence with batch loading for first‑screen and non‑first‑screen resources.

Data processing to automatically trim unused fields.

Built‑in client‑score based stability guarantee.

Resource and module loading monitoring.

Integrated common interactive capabilities such as standardized CSS, rendering interventions, mobile debugging, and page lifecycle management.

EVA Development System

EVA provides an end‑to‑end solution from asset upload to runtime rendering. EVA Store handles 2D skeletal animation assets (Spine, Live2D, DragonBones) and other media, following a unified protocol defined by Alibaba’s interactive group.

EVA JS is a lightweight front‑end framework for interactive games. It follows an ECS design pattern, offers a plugin system, and supports accessibility on Canvas by automatically exposing interactive elements to assistive technologies.

EVA JS also provides a Canvas‑based accessibility solution that identifies interactive objects without requiring manual DOM overlays.

Rax EVA – Rax Integration

Rax EVA combines the Rax framework (JSX, Hooks) with EVA JS, allowing developers to write interactive scenes using familiar React‑like syntax while leveraging EVA’s game engine capabilities.

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});

Rax EVA also supports mixed development where Canvas‑based game layers coexist with DOM + CSS layers, using background and hud tags to define Z‑order.

Super Modal – Scalable Popup Production

Super Modal abstracts popup creation into a DSL + runtime system, enabling drag‑and‑drop style configuration, dynamic layout, custom components, and queue management, dramatically reducing development effort for the large number of popups used during Double 11.

Global Stability Solution

To keep the experience smooth on devices with varying performance, the team applied a device‑scoring SDK (Kite) to classify phones into four levels and apply corresponding degradation strategies, such as reducing image size, animation complexity, and canvas dimensions.

A static global downgrade rule combined with a runtime stability SDK monitors memory, frame rate, and CPU usage, ensuring zero crashes and 22 days of uninterrupted operation during the Double 11 campaign.

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 interactive development so that “anyone can develop, interaction everywhere” becomes a reality.