How Alibaba’s EVA Framework Delivered Ultra‑Fast, Stable Double‑11 Interactive Pages

Preface

In the e‑commerce sector, interaction is a key growth tactic that boosts user retention, activity, and acquisition. During Double‑11, the Taobao interaction team launched the "Super Star Show Cat" campaign, delivering three distinct animated cats across multiple apps (Taobao, Cat Customer, Alipay) with a seamless, zero‑failure, instant‑load experience.

Page Rendering Infrastructure

The Double‑11 interactive page loads noticeably faster than previous years, even without native apps, caching, or pre‑rendering; all resources are served via CDN. The speed is achieved through a custom "Interaction‑Specific Solution" built on the Tianma construction system, which streamlines dependencies, orders module loading (first‑screen vs. non‑first‑screen), trims unnecessary data, and embeds client‑side stability monitoring.

Simplify core dependencies and logic.

Customize module load order with batch loading.

Automatically shrink data by removing non‑rendering fields.

Integrate client‑scored stability guarantees.

Monitor resource and module loading.

Provide unified CSS standards, rendering interventions, mobile debugging, and page lifecycle controls.

EVA Development System

EVA offers an end‑to‑end solution for interactive development, covering asset upload, rendering engine, framework, and low‑code tools, aiming to make interactive development simple and comfortable for front‑end engineers.

EVA Store: Asset Upload Service

Animations are 2D skeletal graphics created with Spine (or Live2D). EVA Store provides a one‑stop upload service for frames, sprite sheets, DragonBones, Spine files, audio, and other assets, following standards defined by Alibaba’s interaction group.

Eva.js: 2D Interaction Engine

Eva.js is a lightweight front‑end framework for interactive games. It supports a plugin system, follows the ECS design pattern, and separates core functionality from components for on‑demand usage. Notably, Eva.js adds canvas‑based accessibility support, automatically exposing interactive elements to assistive technologies on mobile Taobao and Alipay clients.

Rax EVA: Rax Solution

Rax EVA bridges the gap between JSX/Hooks and game engine development, allowing developers to write interactive scenes using familiar React‑like syntax. The following code demonstrates rendering a Spine animation within an Eva component:

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, allowing DOM/CSS layout alongside Canvas rendering through native background and hud tags for Z‑axis layering.

EVA Ware: Scalable Modal Production

Super Modal, a low‑code modal generation tool, abstracts modal creation into a drag‑and‑drop DSL with runtime rendering. It supports positioning, custom components, modal queue management, and project management, dramatically reducing modal development effort.

Global Stability Solution

To prevent crashes on low‑end devices, the team employs a device‑scoring SDK (Kite) that classifies devices into four tiers and applies tier‑specific degradation strategies. A static global downgrade rule combined with a runtime SDK monitors memory, frame rate, and CPU usage, ensuring the Double‑11 interactive page remained fault‑free for 22 days.

Summary & Outlook

Despite the evolving Double‑11 landscape, the interaction team achieved record participation by continuously refining the EVA system and stability mechanisms. Future goals include expanding EVA’s capabilities, simplifying development further, and realizing the vision of “everyone can develop, interaction everywhere.”