How Alibaba’s Taobao Gold Upgrade Revolutionized Frontend Game Development

Overview

This article is based on the April 21 "Alibaba Taobao Frontend User Experience Optimization Live Series" session titled "Taobao Gold User Experience Upgrade".

Business Introduction

Taobao Gold is a feature on the mobile Taobao homepage where users can collect virtual coins. The product evolved from a simple daily sign‑in button to a gamified experience with farms (庄园) and later a town (小镇) to increase user engagement and dwell time.

Upgrade Highlights

The upgrade added storylines, levels, titles, rankings, and collaborative actions such as assistance and joint effort to enrich the user experience. It also required stronger operational capabilities and more flexible user outreach.

Technical Challenges

Need for multi‑channel operation and rapid user outreach.

Asset volume increased ~20× compared to the previous version, raising design‑development coordination demands.

Scene complexity grew significantly, with more interactive buildings.

Diverse user device performance demanded high stability and compatibility.

Layered Framework

A mixed development model (DOM + Canvas) was adopted. The rendering stack is divided into four layers from bottom to top:

Background layer – varies with game chapters and seasonal themes.

Game layer – renders buildings and decorations using Canvas.

Business layer – handles core gameplay such as sign‑in, assistance, and joint actions.

Message layer – provides customizable pop‑ups for operations and messaging without requiring a new version release.

Communication between layers uses a standard event system.

Game Layer Implementation

The game layer is built with a custom engine (Eva.js) based on an ECS architecture. Components such as ImgComponent and TranslationComponent enable image rendering and transition animations.

Scene Construction Process

Designers create 2.5D assets using a grid canvas (TileMap). Assets are modeled in 3D (C4D) and rendered to 2D images—a process known as "three‑to‑two"—to achieve realistic depth while keeping production efficient.

Visual Production Workflow

Visual assets follow a 2.5D style, using a grid canvas as a reference. The workflow moves from line‑art to 3D modeling, then rendering, allowing standardized and mass‑produced assets.

TileMap Placement

Each building’s position is calculated on the TileMap grid, converting grid coordinates to screen coordinates, and depth is handled accordingly.

Editor Efficiency

A custom editor streamlines scene creation, integrates directly with the asset platform for validation and optimization, and exports DSL files that Eva.js can render.

Animation Implementation

Two main animation types are used:

Bone animation (DragonBones) for simple transformations.

Frame animation for complex effects such as 3D rotation and shadows, optimized with compression and stitching algorithms.

Stability and Performance Optimization

Given the 20× asset growth, a downgrade platform evaluates device scores and applies strategies: high‑end devices receive bone and frame animations, while low‑end devices fall back to static images or CSS/JS animations to maintain frame rates.

Accessibility Support

Taobao serves a broad user base, including visually impaired users. The team applied WAI‑ARIA roles and attributes to DOM elements and mapped interactive Canvas objects to invisible DOM nodes with appropriate ARIA labels, enabling screen readers to convey information.

WAI‑ARIA Guidelines

Roles describe element purpose; ARIA attributes convey state and properties. The implementation demonstrates adding ARIA to custom div‑based buttons for sign‑in actions.

Canvas Accessibility

Interactive Canvas objects are mirrored to DOM elements with calculated positions, sizes, and ARIA metadata, allowing screen readers to access them.

Conclusion

The presentation covered the Taobao Gold product journey, technical hurdles during the upgrade, and concrete frontend solutions—including layered architecture, mixed DOM‑Canvas rendering, animation techniques, performance safeguards, and comprehensive accessibility measures.

Final Remarks

The series of Taobao frontend user experience sessions has concluded, with an upcoming talk on open‑sourcing the Eva.js engine.