# didi/chameleon

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/didi-chameleon).**

8,966 stars · 690 forks · JavaScript · Apache-2.0 · archived

## Links

- GitHub: https://github.com/didi/chameleon
- Homepage: http://cml.didi.cn/
- awesome-repositories: https://awesome-repositories.com/repository/didi-chameleon.md

## Description

Chameleon is a cross-platform application framework and component library used to develop applications for the web and various mini-app platforms from a single shared codebase. It functions as a multi-platform build pipeline that compiles source code into different target formats while providing an MVVM-based user interface system for managing application state.

The framework employs a polymorphic protocol to extend custom components and APIs, allowing for platform-specific implementations while maintaining cross-end compatibility. It includes a specialized build tool for static analysis that validates markup syntax and detects circular dependencies during the compilation process.

The project covers a broad range of capabilities, including unified system API integration for accessing hardware features, a standardized markup and stylesheet system for UI development, and performance optimization through lazy loading and subpackage splitting. It also provides command-line tools for project scaffolding and the automation of the build and deployment workflow.

## Tags

### Development Tools & Productivity

- [Cross-Platform Build Targets](https://awesome-repositories.com/f/development-tools-productivity/cross-platform-build-targets.md) — Compiles a single codebase into various target formats for web and diverse mini-app platforms. ([source](https://github.com/didi/chameleon/blob/master/CHANGELOG.md))
- [Development Lifecycle and Workflow Automation](https://awesome-repositories.com/f/development-tools-productivity/development-environment-management/development-lifecycle-workflow-automation.md) — Offers command-line tools to manage the full development lifecycle from debugging to publishing. ([source](https://github.com/didi/chameleon/blob/gh-pages/doc/quick_start/readme-en.md))
- [Project Scaffolding](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/project-scaffolding-configuration/project-scaffolding.md) — Provides CLI tools for generating project scaffolding and build pipelines to manage the development lifecycle. ([source](https://github.com/didi/chameleon#readme))
- [Static Analysis Tools](https://awesome-repositories.com/f/development-tools-productivity/static-analysis-tools.md) — Provides static analysis tools to validate markup syntax and detect circular dependencies during the build process.
- [Build Automation](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/build-task-automation/build-automation.md) — Provides a specialized scaffolding tool and bundling pipeline to automate the development and publishing workflow. ([source](https://github.com/didi/chameleon/blob/master/README.md))

### Mobile Development

- [Multi-Platform App Compilers](https://awesome-repositories.com/f/mobile-development/multi-platform-app-compilers.md) — Provides a build system that compiles a single shared codebase into web and various mini-app platform formats.
- [Cross-Platform Application Development](https://awesome-repositories.com/f/mobile-development/cross-platform-application-development.md) — Shares a single codebase across web and mobile platforms to ensure consistent behavior. ([source](https://github.com/didi/chameleon/blob/master/README.md))

### Web Development

- [Cross-Platform Frameworks](https://awesome-repositories.com/f/web-development/cross-platform-frameworks.md) — Functions as a framework for developing applications that run across web and mobile mini-app platforms from a single shared codebase.
- [Build Automation Pipelines](https://awesome-repositories.com/f/web-development/front-end-development-workflows/build-automation-pipelines.md) — Provides an automated sequence for scaffolding, static analysis, bundling, and deploying across multiple target formats.
- [MVVM State Management](https://awesome-repositories.com/f/web-development/mvvm-state-management.md) — Uses the Model-View-ViewModel pattern with data binding to synchronize application state with the user interface.
- [Code Splitting](https://awesome-repositories.com/f/web-development/dynamic-loading-strategies/code-splitting.md) — Divides the application into smaller independent subpackages to optimize loading and meet platform size constraints.
- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Employs lazy loading and subpackage splitting to reduce initial load times and satisfy platform size constraints.
- [Lazy Loading](https://awesome-repositories.com/f/web-development/lazy-loading.md) — Implements route-level code splitting to defer loading of components and reduce initial bundle size.
- [Syntax Validators](https://awesome-repositories.com/f/web-development/markup-compilers/syntax-validators.md) — Provides utilities that validate the structural correctness of markup before it is compiled into target formats. ([source](https://github.com/didi/chameleon/blob/gh-pages/doc/quick_start/readme-en.md))
- [Lazy Loading Strategies](https://awesome-repositories.com/f/web-development/performance-optimizations/lazy-loading-strategies.md) — Reduces initial bundle size by deferring the loading of components and routes until they are required. ([source](https://github.com/didi/chameleon/blob/master/CHANGELOG.md))

### Part of an Awesome List

- [Framework Capability Extensions](https://awesome-repositories.com/f/awesome-lists/devtools/core-and-community-extensions/framework-capability-extensions.md) — Allows the definition of custom APIs and components to support platform-specific features through a polymorphic protocol. ([source](https://github.com/didi/chameleon/blob/gh-pages/doc/quick_start/readme-en.md))
- [Core Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/core-frameworks.md) — A multi-end development framework supporting web,小程序, and mobile.
- [Development Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/development-frameworks.md) — Multi-platform development framework with unified code.

### Hardware & IoT

- [Unified System APIs](https://awesome-repositories.com/f/hardware-iot/unified-hardware-interfaces/unified-system-apis.md) — Provides a unified set of platform-independent functions to interact with hardware and system features like location and storage.

### Operating Systems & Systems Programming

- [Platform Support](https://awesome-repositories.com/f/operating-systems-systems-programming/platform-development-integration/platform-support.md) — Enables the addition of support for new target platforms via plugins with custom configuration and build logic. ([source](https://github.com/didi/chameleon/blob/master/CHANGELOG.md))

### Software Engineering & Architecture

- [MVVM Architectures](https://awesome-repositories.com/f/software-engineering-architecture/mvvm-architectures.md) — Utilizes the MVVM architectural pattern to separate user interface layout from application state and logic.
- [Platform-Specific API Implementations](https://awesome-repositories.com/f/software-engineering-architecture/polymorphism-patterns/platform-specific-api-implementations.md) — Employs a polymorphic protocol to map unified component and API interfaces to platform-specific implementations.
- [System API Wrappers](https://awesome-repositories.com/f/software-engineering-architecture/token-standard-implementations/safe-interaction-wrappers/system-api-wrappers.md) — Provides a unified wrapper to interact with hardware and system features across different environments.
- [Circular Dependency Resolution](https://awesome-repositories.com/f/software-engineering-architecture/dependency-resolution-engines/circular-dependency-resolution.md) — Analyzes the module graph during the build process to identify and report circular imports. ([source](https://github.com/didi/chameleon/blob/master/CHANGELOG.md))
- [Coding Standards](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/coding-standards.md) — Analyzes code during development to highlight warnings and error locations based on defined standards. ([source](https://github.com/didi/chameleon/blob/master/README.md))
- [Static Analysis](https://awesome-repositories.com/f/software-engineering-architecture/static-analysis.md) — Integrates a static analysis pipeline to validate markup syntax and detect circular dependencies during compilation.
- [Module Dependency Analysis](https://awesome-repositories.com/f/software-engineering-architecture/static-analysis/module-dependency-analysis.md) — Analyzes dependency trees and markup syntax at build time to detect circular imports and template errors.
- [Template Syntax Validators](https://awesome-repositories.com/f/software-engineering-architecture/template-integrity-validators/template-syntax-validators.md) — Validates component templates for correct lifecycle functions and variable usage during development. ([source](https://github.com/didi/chameleon/blob/master/CHANGELOG.md))

### User Interface & Experience

- [Cross-Platform UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/cross-platform-ui-frameworks.md) — Provides a framework for developing graphical user interfaces that run consistently across web and various mini-app platforms.
- [Cross-Platform UI Toolkits](https://awesome-repositories.com/f/user-interface-experience/cross-platform-ui-toolkits.md) — Ships a library of standardized UI elements and a markup language to ensure consistent interfaces across multiple platforms.
- [Custom Component Extensions](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions.md) — Implements a polymorphic protocol for integrating specialized frontend elements and platform-specific components. ([source](https://github.com/didi/chameleon#readme))
- [Markup Languages](https://awesome-repositories.com/f/user-interface-experience/markup-languages.md) — Provides a standardized markup language and stylesheet system for defining reusable interface elements across platforms.
- [Standard UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/standard-ui-component-libraries.md) — Provides a library of built-in interface elements like buttons, pickers, and dialogs for constructing consistent pages. ([source](https://github.com/didi/chameleon/blob/gh-pages/doc/quick_start/readme-en.md))
- [Template-Based UI Systems](https://awesome-repositories.com/f/user-interface-experience/template-based-ui-systems.md) — Creates user interfaces that separate logic from presentation using template syntax and style sheet systems. ([source](https://github.com/didi/chameleon#readme))
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Allows the creation of reusable UI components using standard markup for placement within native projects. ([source](https://github.com/didi/chameleon#readme))
- [Global CSS Stylings](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/global-css-stylings.md) — Supports the definition of stylesheets that apply global baseline styles across the entire application. ([source](https://github.com/didi/chameleon/blob/master/CHANGELOG.md))

### Testing & Quality Assurance

- [Static Code Analysis](https://awesome-repositories.com/f/testing-quality-assurance/static-code-analysis.md) — Automates scanning of source code to detect bugs and maintainability issues during the build process. ([source](https://github.com/didi/chameleon#readme))