How Chameleon Enables One‑Code Multi‑Platform Development: Inside Didi’s Open‑Source Cross‑End Framework

What Is Chameleon?

Chameleon (CML) is an open‑source cross‑platform framework developed by Didi that allows a single codebase to run on multiple mini‑program platforms (WeChat, Alipay, Baidu, QQ, Toutiao), H5, native clients, and quick‑apps. It aims for "one‑code, many‑views" where what you see on one platform is rendered identically on all others.

Why Build a Cross‑Platform Solution?

Since the launch of WeChat Mini‑Programs in 2017, competing platforms quickly followed, each with its own APIs and runtime. Didi’s products (ride‑hailing, bike‑sharing, delivery, etc.) needed to appear on all these entry points, leading to duplicated implementations and soaring maintenance costs. The industry trend—React, React‑Native, Vue, Weex, Flutter—showed a demand for a unified development model, prompting Didi to create Chameleon.

Technical Background and Goals

In 2017 Didi started the MPV (MiniProgram View) project to run a single codebase on web and mini‑programs. After learning from MPV’s challenges (mocking mini‑program environments, DSL mismatches), the team launched Chameleon in 2018 with the goal of true N‑platform support, stable API contracts, and high developer productivity.

Core Design Principles

MVVM Architecture : All supported platforms share a common MVVM model, abstracting view rendering, data binding, and business logic.

Standard DSL (CML DSL) : A markup language that defines UI structure, supporting both native CML syntax and Vue‑style templates.

Multi‑Polymorphic Protocol : Unified interfaces (e.g., cml.request, cml.store) that can be implemented per platform while keeping the core logic unchanged.

Architecture Overview

The framework is divided into three layers:

View (Render Engine)

Platform‑specific render engines (Vue for web, mini‑program engines, Weex, React‑Native, etc.) interpret the compiled output.

ViewModel (CML DSL & Data Binding)

The DSL is parsed into an abstract syntax tree (AST) using Babel plugins. During compilation, platform‑specific code is generated while preserving a stable core. Data binding, event handling, component invocation, and routing are handled uniformly.

Model (Logic Layer)

Business logic is written in plain JavaScript, benefiting from low learning cost, V8/V8‑compatible execution, and a rich ecosystem of npm packages.

Implementation Details

Define a standard language (CML DSL), framework contracts, and library APIs.

Compile CML DSL to each platform’s DSL, ensuring only stable language features are emitted.

Provide runtime frameworks for each platform that implement the defined contracts.

Offer extensible multi‑polymorphic protocols so new platforms can be added by implementing the required adapters.

DSL Parsing

Babel transforms the DSL into an AST; custom plugins (tapable) control node handling for tags, styles, loops, conditions, native components, and dynamic components, enabling independent platform adaptations.

Runtime Framework

The runtime core defines application, page, and component constructors. Platform adapters inherit from these constructors, allowing unified lifecycle management and API calls across platforms.

Engineering Capabilities

Chameleon includes a full build toolchain: dev server, mock data, hot reload, automatic refresh, debugging UI, and support for npm dependencies, ES6, and CSS preprocessors. It improves local development efficiency by up to 60% compared to separate platform projects.

Features and Benefits

Consistency & Customization : Unified lifecycle, event system, layout, and component model, while allowing platform‑specific extensions.

Extensive Ecosystem : Built‑in component library (>60 components), UI kits, editor plugins, DebugKit, and XEditor.

Static Analysis & Smart Validation : Comprehensive syntax checking and type validation, with IDE hints and CLI error reporting.

Visual Development : Drag‑and‑drop builder (https://api.didiyun.com/xeditor/home/popular) reduces cross‑platform UI creation effort by ~60%.

Native SDK : Optimized native capabilities, performance improvements, gray‑release, and graceful degradation.

Adoption

Chameleon has been validated in dozens of Didi products (ride‑hailing, bike‑sharing, driver‑assist, delivery, enterprise services) and external projects (Baidu video mini‑program, Baidu new‑home, etc.). The GitHub repository (https://github.com/didi/chameleon) has accumulated over 7,500 stars.

Conclusion

By defining a standard MVVM‑based protocol and separating compilation from runtime, Chameleon achieves true cross‑platform development with high consistency, extensibility, and maintainability, enabling Didi and its partners to deliver unified experiences across the rapidly expanding mini‑program ecosystem.