How GaiaX Powers High‑Performance Cross‑Platform UI Rendering on Mobile

GaiaX is a cross‑platform template engine widely used in Alibaba's Youku, Taopiaopiao, and Damai products, offering high performance, stability, and ease of use. The open‑source project is available at https://github.com/alibaba/GaiaX .

Core Concepts

GaiaX is a high‑performance rendering engine developed by the Youku Application Technology Center. It works as a view‑reconstruction framework that converts templates into native view components on both Android and iOS.

Component Design Draft : Design mock‑ups provided by designers for developers to implement.

GaiaStudio : A drag‑and‑drop tool for creating node hierarchies, styling, and data binding, producing a template file.

Template File (DSL) : Consists of three sub‑DSLs—index.json (node hierarchy), index.css (styles), and index.databinding (data‑binding logic).

GaiaX SDK : Parses the template, builds a node tree and a view tree, and finally produces native views for rendering.

End‑Side Rendering : The processed templates generate native Android Views and iOS UIViews that are inserted into the host UI.

Architecture Design

The architecture follows three layers—Foundation, Core, and Service—each containing independent modules.

Foundation Layer : Includes the Stretch module, a Rust‑written cross‑platform FlexBox layout library that computes absolute positions for nodes.

Core Layer :

Template Data Management (Cache & Data Source)

Template Parsing & Conversion (Parsing, Conversion, Expression, Animation)

Rendering (Node & Layout, View & Rendering)

Context Module

Service Layer : Provides external APIs (e.g., createView, bindData) and extensibility modules such as expression, Lottie, and event extensions.

Rendering Pipeline

The end‑to‑end rendering flow involves six modules: Business side, Template Data Management, Template Parsing & Conversion, Context, Node & Layout, and View & Rendering.

Business Side : Supplies business and template IDs, creates a GXTemplateItem, and calls createView to obtain a native view.

Template Data Management : Retrieves or caches the template entity.

Template Parsing & Conversion : Parses index.json, index.css, and index.databinding into node trees, style maps, and data‑binding logic.

Context Module : Builds GXTemplateContext to hold lifecycle information.

Node & Layout Module : Uses Stretch to convert FlexBox‑based nodes into absolute‑layout nodes.

View & Rendering Module : Constructs the view tree, binds styles, events, animations, and data, then hands the root view to the platform for display.

Detailed Mechanics

Node‑Tree Calculation

The node tree bridges the custom DSL and native views. FlexBox combined with index.json defines positions, which Stretch converts into absolute layout coordinates usable on both Android and iOS.

View‑Hierarchy Merging

To reduce unnecessary work, empty or style‑less view nodes are merged during runtime, eliminating extra reflection and binding steps. Merging rules require the node to be a view type, have no style, no virtual parent, and no animation, event, tracking, or data‑binding logic.

Text Auto‑Fit Logic

Since Stretch handles static layouts, GaiaX adds text‑auto‑fit rules: single‑line text fixes height and computes width; multi‑line text fixes width and computes height. Layout is first calculated with Stretch, then re‑calculated after any style changes, and flexGrow is set to 0 after fitting.

Series Articles

The following GaiaX open‑source deep‑dive articles are planned: 1) Cross‑platform technology based on Youku business; 2) Detailed dynamic template engine guide; 3) New features for Stretch; 4) Expression design as dynamic logic foundation; 5) ReactNative vs GaiaX rendering core analysis; 6) Efforts for cross‑platform consistency; 7) End‑to‑end template development system.

Team Introduction

The team belongs to Youku Product Technology & Innovation Center's Application Technology Department, aiming to improve multi‑platform UI component development efficiency. GaiaX is open‑source on GitHub, and the team invites mobile and front‑end developers to collaborate.