Technical Design of General Capabilities for Taobao Playground New‑User Activity

Business background: Taobao app is transitioning from a pure shopping platform to a lifestyle platform. The Taobao Playground serves as a key entry for the interactive game matrix, aiming to improve user retention and distribution capabilities.

Requirement analysis: The activity is a short‑term (7‑day) new‑user rights campaign. Common capabilities needed across activities include user segmentation, activity lifecycle management, task system, subscription, guide, and animation components.

General capability construction – Message passing and update:

mx is a data‑flow solution that provides a unified event communication center. Developers register events, emit, listen, and manage data through Evt and Store objects.

// 事件管理
export const Evt = {
  // ...
  IndexHall: getModuleEvent
('IndexHall'),
};

// 数据管理
export const Store = {
  // ...
  IndexHall: getModuleStore
('IndexHall'),
};

function getModuleEvent
(moduleName: PageName) {
  return {
    emit: function
(name: T, data?: E[T]): void {
      mx.event.emit(`${moduleName}.${String(name)}`, data);
    },
    on: function
(name: T, callback: (data: E[T]) => void, needMakeup?: boolean): void {
      mx.event.on(`${moduleName}.${String(name)}`, callback, needMakeup);
    },
    off: function
(name: T, callback?: (data?: E[T]) => void): void {
      mx.event.off(`${moduleName}.${String(name)}`, callback);
    },
    once: function
(name: T, callback: (data: E[T]) => void): void {
      const wrapCallback = (data) => {
        callback(data);
        this.off(name, wrapCallback);
      };
      this.on(name, wrapCallback);
    },
  };
}

Event type registration example:

declare namespace IIndexHall {
  interface IEvent {
    Event_Envelope_Init: () => void;
    Event_Envelope_Open: any;
    Event_Envelope_Refresh: () => void;
  }
}

Evt.IndexHall.on(ENVELOPE_EVENT.Event_Envelope_Init, (data) => {
  data && Evt.IndexHall.emit(ENVELOPE_EVENT.Event_Envelope_Refresh, data);
  const activityData = getActivityData(data, TASK_TYPE.MISSION_UPGRADES_AND_EARNS_REWARDS);
  Store.IndexHall.update('activityData', activityData);
});

Message delivery – popup and announcement components are defined with unified props (onConfirm, onClose, data) and injected via a modal name, allowing each modal to customize its content and style.

Subscription handling includes asynchronous functions for subscribe, unsubscribe, and status update, with tracking hooks.

export async function subscriptionAsync() {
  doTracker({logkey: '/xxxx.xxxx.xxxx', gmkey: 'CLK'});
  try { await subscription(); } catch (e) { logError(e); }
}

export async function unsubscriptionAsync() {
  doTracker({logkey: '/xxxx.xxxx.xxxx', gmkey: 'CLK'});
  try { await unsubscription(); } catch (e) { logError(e); }
}

export const setSubscriptionStatus = async () => {
  try {
    const subscriptionStatus = await checkSubscriptionStatus();
    Store.IndexHall.update('subscriptionStatus', subscriptionStatus);
    logInfo('订阅状态', subscriptionStatus);
  } catch (e) { logError(e); }
};

Task system: A floating layer displays prism tasks. The component receives props such as visible , onShowCallback , onCloseCallback , and optional styling parameters, encapsulating display logic and callbacks.

Animation components – CountdownTimer and FlyAnimation are built as reusable React components. CountdownTimer manages time state via useEffect , useRef , and updates UI based on server and client timestamps.

FlyAnimation receives start/end positions, duration, image, count, and other parameters. It creates DOM elements, mounts a React root, and returns a Promise so callers can await animation completion.

await FlyAnimationComponent({
  startPos: document.getElementById(`envelope${level}`) || { x: 0, y: 0 },
  endPos: document.getElementById('envelopeAmount') || { x: 343, y: 690 },
  during: 800,
  flyImage: ICON.open_envelope,
  flyNumber: 5,
  singleDelay: 0.1,
  endScale: 0.6,
});

Conclusion: By abstracting these common capabilities—event system, message delivery, subscription, task handling, and animation—developers can rapidly iterate on new activities while keeping the codebase reusable, maintainable, and scalable.