Design and Implementation of a Front-End Complex Event Processing Framework

Background Complex Event Processing (CEP) is widely used in Xianyu to provide real‑time services based on user behavior. Existing designs target the app client; this article introduces a pure front‑end CEP framework for out‑of‑app scenarios such as promotional offers after browsing multiple product pages.

Design Goals The framework must achieve real‑time user reach, dynamic strategy updates from the server, and support multiple containers (Mini‑program, Web, Weex).

Architecture The solution splits the workflow into three core modules: event collection, complex computation, and user reach. A server‑side platform manages strategies, while the front‑end executes rule matching and UI rendering. Data synchronization across pages relies on local storage with an in‑memory cache.

Event Collection User actions are captured non‑intrusively by injecting parameters into elements with specific markers (e.g., onClick). Standardized events (enter, leave, scroll, appear, click) and plugin‑based custom events (e.g., HTTP responses) are generated.

Complex Computation The front‑end implements an NFA‑based CEP engine inspired by the paper “Efficient Pattern Matching over Event Streams”. An API similar to Flink CEP (next, followedBy, notNext, where, etc.) builds pattern chains that are compiled into NFA. Performance tests show 20 strategies processing 200 events in 3.73 s, with a time‑slicing approach (similar to React Fiber) to avoid blocking the UI thread.

User Reach UI components for user intervention are loaded dynamically and abstracted to work across containers with a unified API.

Data Synchronization Because pages cannot communicate directly, the framework uses key/value local storage plus an in‑memory cache to sync behavior data and computation state across pages.

Future Outlook The framework is already deployed on Alibaba Mini‑program, Weex, and Web, achieving millisecond‑level latency for single‑strategy flows. Planned enhancements include full‑chain reach across client and server, richer operation tooling, and AI‑driven rule generation.