GaiaX: Youku Cross-Platform Dynamic Template Engine Technical Solution

Youku client is a multi-platform entertainment ecosystem spanning Phone, Pad, OTT, and MacPC. To reduce development costs across multiple platforms and deliver high-performance, consistent user experiences, Youku's technical team initiated the cross-platform dynamic template engine project at the end of 2019.

As the primary vehicle for content distribution, Youku client's product presentation layer features standardized and card-based component design. The dynamic template engine uses components as its problem space model, effectively avoiding the complexity and engineering overhead of solutions like Weex and React Native, enabling rapid experimentation and engineering. This approach also fundamentally avoids the traditional JS Bridge pathway, ensuring high performance on the client side.

Components can be abstracted into four core elements: visual elements (controls, images, text, rich text), layout (position control and style information), data (meaningful information to present to users), and events (user interaction feedback). The template engine organizes element information using JSON data structures, describes layout using CSS3-compliant flexbox, and binds data using XPath-like concepts to dynamically connect component text attributes with cloud JSON data.

The GaiaX engine follows a layered design with four tiers: the basic dependency layer introduces StretchKit, a high-performance layout engine written in Rust; the core rendering layer handles template parsing, virtual node tree construction, layout calculation, and expression parsing; the template center and service layers integrate with Youku's business architecture.

Key performance optimizations include: using StretchKit for its excellent performance and memory efficiency; AST-level simplification through active hierarchy optimization and flattening; thread reduction via DIFF operations on virtual node trees to only process changes when data actually changes; and asynchronous processing of data traversal, JSON parsing, and layout calculations.

Compared to Weex, ReactNative, and MTFlexbox, GaiaX uses JSON as DSL, supports component-level integration, requires no glue layer, and employs native component semi-async rendering. Performance tests show FPS scores of 54-58 on iOS (low-end to high-end devices) and 38-58 on Android devices.

The engine has been adopted by 15+ business teams at Youku, improving overall R&D efficiency by approximately 30% and reducing single component development effort from 0.5-1 person-days to 0.25-0.5 person-days. The project was open-sourced in October 2021 under Apache 2.0 license.