How Youku Cut Mobile UI Development Time by 30% with GaiaX & GaiaStudio

Background

Youku operates a multi‑screen, multi‑device entertainment ecosystem. Frequent UI upgrades and varied screen sizes caused duplicated component development across platforms, inflating engineering effort and slowing iteration.

Dynamic Template System

Since the end of 2019 the team built a cross‑platform dynamic development SDK that connects design, development and integration stages. By automating component integration, coding and debugging the system delivers roughly a 30% efficiency gain for distribution‑related projects.

GaiaSketch – Intelligent Design Platform

GaiaSketch is a Sketch plugin that automates annotation export, component code generation and standard asset‑library creation. Designers can build a shared library of components, styles, icons and pages. The plugin reads Symbol names that follow a hierarchical convention such as Foundation/Bar/TabBar, visualises them in Sketch and allows drag‑and‑drop insertion while keeping a link to the source library.

Exported layers can be converted to code formats used by the runtime engine, including GaiaX DSL, React, Rax, Vue and mini‑programs. The generated code follows a FlexBox‑based box model and optimises the node hierarchy to minimise depth.

GaiaX – Cross‑Platform Dynamic Template Engine

Architecture

Base Dependency Layer : Minimal dependencies; includes the high‑performance Rust layout engine StretchKit (https://github.com/vislyhq/stretch, ~170 KB).

Core Rendering Layer : Parses templates, builds a virtual node tree, performs layout calculation and evaluates expressions.

Template Center Layer : Provides business‑level services and reuses existing Youku capabilities.

Template Service Layer : Offers standardized rendering and integration services to upper‑level business modules.

Performance Results

Benchmarks on typical devices show low latency for template rendering:

iOS – low‑end: 54 ms, mid‑end: 57 ms, high‑end: 58 ms

Android – low‑end: 38.99 ms, mid‑end: 57.5 ms, high‑end: 58.81 ms

GaiaStudio – Low‑Code IDE

GaiaStudio is a visual, low‑code IDE built on Electron with Semantic UI. It bundles every layout and style property supported by GaiaX, allowing developers with little FlexBox knowledge to assemble templates through drag‑and‑drop and property panels.

Key features:

Template creation from scratch or import of GaiaSketch‑generated code.

Visual editing of attributes, animations and data bindings.

FastPreview – sub‑second rendering of templates on real devices for immediate feedback.

Motion Curve Engine (Gaia‑Motion‑Curve)

The motion‑curve solution standardises animation curves across iOS and Android. It provides seven built‑in curve types via a lightweight SDK, enabling developers to specify a curve enum and obtain consistent, high‑performance animations without manual calculations.

Implementation details:

iOS : Uses a Category‑based AOP approach. CALayer is extended with MotionCurveX to animate any animatable property. The SDK implements the seven curves at the algorithm level; developers only select the desired enum.

Android : Implements curves with Interpolator objects to avoid JNI overhead, delivering native‑level performance.

Open‑Source Projects

GaiaSketch – https://github.com/alibaba/GaiaSketch

GaiaX Dynamic Template Engine – https://github.com/alibaba/GaiaX

Gaia‑Motion‑Curve – https://github.com/alibaba/gaia-motion-curve