Wukong: A Native Dynamic Card Solution for Mobile Apps

In HelloBike's APP, activities such as promotions and anniversaries demand faster response speed, higher efficiency, and personalized UI to shorten the trial‑and‑error cycle. UI customizability, rapid iteration, and high‑performance experience have always been core requirements in mobile development. As business lines expand, these demands become even stricter, but the inherent limitations of native app releases make it difficult to satisfy them.

To address these pain points, HelloBike built a native partial‑dynamic solution called Wukong . It has been validated in multiple business modules within the app.

What is Wukong? Wukong is a native high‑performance rendering engine originally customized for HelloBike's advertising system. It provides a complete cross‑platform native partial‑card dynamic display solution, focusing on business empowerment, UI customization, logic dynamism, shortened trial cycles, and improved human efficiency. Developers can create once, launch anytime, and reuse across platforms.

Technical Advantages

Supports dynamic UI & logic publishing, improving development and operation efficiency.

Low integration cost with native pages embedding dynamic views.

Consistent performance on Android and iOS, with real‑time preview (what‑you‑see‑is‑what‑you‑get).

Pure native UI rendering: small size, good performance, low memory usage.

System Introduction

Wukong follows the Flexbox layout specification from CSS3 to unify layout differences across platforms. XML is used as the view DSL, accompanied by a comprehensive XSD schema to guide correct XML authoring and reduce syntax errors.

The SDK includes a protocol layer that allows plug‑in capabilities such as custom components and custom bridges. Core SDK functions (network, analytics, routing, location, device info, etc.) are abstracted as interfaces, enabling easy replacement with custom implementations.

Implementation Principle

Wukong maps style descriptions, written according to defined constraints, to native layouts, achieving dynamic styling and logic. The workflow is:

Provide a template URL and business data source.

The SDK downloads the template, caches it (disk & memory), and parses it into a ViewModel (VM) containing raw data and JS expressions.

A virtual node (VNode) layer decouples VM from the actual View; a JS engine evaluates expressions to build the VNode tree.

The VNode tree is rendered into a native View tree. Subsequent loads use cached templates and diff‑based VNode updates for optimal performance.

Two critical components are the layout engine and the JS engine. Wukong uses the third‑party Yoga library (a Flexbox implementation) to ensure consistent layout on both iOS (replacing AutoLayout) and Android (replacing FlexBoxLayout). For the JS engine, iOS leverages JavaScriptCore, while Android adopts QuickJS to balance performance and binary size.

Development Tools

Wukong provides a suite of tools to accelerate development, debugging, and template validation. Each project contains a build directory for generated artifacts. Scripts can initialize projects, parse them, and launch a real‑time preview server. Multiple sub‑projects can coexist, allowing quick switching between dynamic card templates.

Developers use VSCode with XSD and lib.wukong.ts for code completion and IntelliSense. The real‑time preview server shows changes instantly and streams log information to the console for easy debugging.

Development Process

Create a standard project or sub‑project via script to avoid code management chaos.

Write template code in VSCode; validation tools ensure compliance before parsing.

Run the script to start the preview server; console logs show device connections.

Clients connect to the server for real‑time preview.

After code changes, re‑parse the project; the preview updates automatically.

Deploy the generated artifacts from the build directory to the backend for online publishing.

Publishing Process

In a typical app iteration, both Android and iOS developers, along with QA, integration, and release teams, are required, leading to long cycles. With Wukong's partial‑dynamic capability, only one developer is needed to create the template, eliminating the need for a full app release. After acceptance, the template can be updated online instantly, providing native user experience without waiting for an app version rollout. This dramatically shortens development and data‑recovery cycles, and new features can take effect in any online version.

Summary and Outlook

After more than a year of development, Wukong is now widely used in HelloBike's home page, wallet, personal center, search, and other modules, improving overall development efficiency by 50% and up to 80% in high‑traffic advertising areas. Future work will continue to enrich capabilities, optimize performance, lower learning costs, and provide richer tooling. The team invites experts to contribute suggestions and help build a stable, easy‑to‑use, and complete ecosystem for partial dynamic rendering.

Related Links

GitHub: https://github.com/hellof2e/Wukong

Wukong Documentation: https://hellobike.yuque.com/org-wiki-nlsyth/hec0gc/mput57lpnzvhnh7k

Yoga Layout: https://yogalayout.com/

QuickJS: https://bellard.org/quickjs/