How Chameleon Enables One‑Code Multi‑Platform Development for H5, Mini‑Programs, and More

Overview

Chameleon is Didi's cross‑platform solution that allows a single codebase to run on H5, native‑like performance, and multiple mini‑program ecosystems (WeChat, Alipay, Baidu, Android quick apps). It addresses the explosion of entry points that otherwise require duplicated implementations, cutting development and maintenance costs.

Design Philosophy

The framework follows the classic “split and merge” principle: decompose complex problems into isolated services and then merge common requirements into a unified front‑end middle‑platform. Chameleon provides a unified language framework and a polymorphic protocol to extract a consistent front‑end middle‑service across platforms.

Target Architecture

Based on the MVVM pattern, Chameleon aims for a unified MVVM experience across all target environments.

Development Language

Similar to web development, Chameleon uses CML (Chameleon Markup Language) for structure, CMSS (Chameleon Style Sheets) for styling, and JavaScript for logic. CML defines components with a Vue‑like syntax, supports template features such as conditional rendering, list rendering, and data binding. CMSS inherits most CSS capabilities and can preprocess with Less or Stylus.

Rich Components and APIs

Built‑in components include button, switch, radio, and checkbox; extended components such as c-picker, c-dialog, and c-loading are also provided. The npm package chameleon-api offers network requests, data storage, geolocation, system information, animation, and other utilities.

Customizable API and Component Extension

Thanks to the polymorphic protocol, developers can freely add new APIs or components without depending on framework updates, and existing native components can be imported directly into cross‑platform projects.

Smart Lint and Progressive Cross‑Platform Adoption

The IDE provides intelligent linting that highlights non‑compliant code and shows error locations in the command line. Projects can adopt Chameleon incrementally, reusing existing components without massive refactoring.

Maintainability and Consistency

The protocol isolates platform differences, ensuring a single codebase remains maintainable. Consistency spans framework lifecycle, built‑in components, event communication, routing, layout, component scope, and communication.

Tooling and Build

Chameleon leverages Webpack for bundling and supplies a CLI scaffolding tool that streamlines development, debugging, testing, and deployment across the full workflow.

Event Context

Chameleon was presented at the OSCAR Open‑Source Pioneer Day on April 11, 2019, where its architecture, features, and use cases were demonstrated.