Convert Figma logo to code with AI

didi logochameleon

🦎 一套代码运行多端，一端所见即多端所见

9,015
692
9,015
276
View on GitHubView on NPM

Top Related Projects

dcloudio's avatar

uni-app

39,886

A cross-platform framework using Vue.js

NervJS's avatar

taro

35,461

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

ionic-team's avatar

ionic-framework

50,896

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

facebook's avatar

react-native

118,109

A framework for building native applications using React

flutter's avatar

flutter

164,677

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Quick Overview

Chameleon is a universal cross-platform framework that allows developers to build high-performance, battery-efficient, and feature-rich applications for multiple platforms, including web, iOS, and Android, using a single codebase.

Pros

  • Cross-Platform Compatibility: Chameleon enables developers to create applications that can run seamlessly across different platforms, reducing the need for separate codebases and development efforts.
  • Performance Optimization: The framework is designed to deliver high-performance applications, with a focus on battery efficiency and smooth user experiences.
  • Unified Development Experience: Chameleon provides a unified development experience, allowing developers to use a single codebase and familiar tools, such as Vue.js, to build applications for various platforms.
  • Extensive Ecosystem: The Chameleon ecosystem includes a wide range of built-in components, plugins, and tools, making it easier for developers to build feature-rich applications.

Cons

  • Learning Curve: Developers who are new to Chameleon may need to invest time in learning the framework's unique concepts and development workflow, which can be a barrier to entry.
  • Ecosystem Maturity: While Chameleon has a growing ecosystem, it may not have the same level of community support and third-party integrations as some more established cross-platform frameworks.
  • Platform-Specific Customization: Developers may still need to write platform-specific code to handle unique requirements or take advantage of platform-specific features, which can add complexity to the development process.
  • Documentation Quality: The quality and comprehensiveness of the project's documentation may vary, which can make it challenging for new users to get started or troubleshoot issues.

Code Examples

// Example 1: Creating a simple Chameleon component
<template>
  <view>
    <text>Hello, Chameleon!</text>
  </view>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

This code creates a simple Chameleon component that displays the text "Hello, Chameleon!".

// Example 2: Using Chameleon's built-in components
<template>
  <view>
    <button @click="handleClick">Click me</button>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleClick() {
      this.message = 'Button clicked!'
    }
  }
}
</script>

This example demonstrates the use of Chameleon's built-in button and text components, as well as how to handle user interactions and update the component's data.

// Example 3: Integrating Chameleon with Vue.js
import Vue from 'vue'
import Chameleon from 'chameleon-runtime'

Vue.use(Chameleon)

new Vue({
  el: '#app',
  template: '<HelloWorld />'
  components: {
    HelloWorld
  }
})

This code shows how to integrate Chameleon with a Vue.js application, allowing developers to use Chameleon components within their Vue.js projects.

Getting Started

To get started with Chameleon, follow these steps:

  1. Install the Chameleon CLI:

    npm install -g chameleon-tool

  2. Create a new Chameleon project:

    cml create my-app

  3. Navigate to the project directory and start the development server:

    cd my-app
cml dev

  4. Open your browser and navigate to http://localhost:8080 to see your Chameleon application running.

  5. Start building your application by modifying the code in the src/ directory. Chameleon will automatically reload the page when you save changes to your files.

For more detailed information on Chameleon's features, configuration, and advanced usage, please refer to the Chameleon documentation.

Competitor Comparisons

dcloudio logo

uni-app

39,886

A cross-platform framework using Vue.js

Pros of uni-app

  • Larger community and more active development, with over 37k stars on GitHub
  • Supports a wider range of platforms, including H5, iOS, Android, and various mini-programs
  • More comprehensive documentation and learning resources available

Cons of uni-app

  • Steeper learning curve due to its more complex architecture
  • Potentially slower performance compared to Chameleon's lightweight approach
  • Less flexibility in customizing the underlying framework

Code Comparison

uni-app:

<template>
  <view class="content">
    <text>{{ title }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello'
    }
  }
}
</script>

Chameleon:

<template>
  <view class="content">
    <text>{{ title }}</text>
  </view>
</template>

<script>
class Index {
  data = {
    title: 'Hello'
  }
}
export default new Index();
</script>

Both frameworks use a similar Vue-like syntax for component structure, but uni-app follows Vue more closely, while Chameleon uses a class-based approach for the component logic.

NervJS logo

taro

35,461

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

Pros of Taro

  • Larger community and more active development, with over 31k GitHub stars
  • Supports more frameworks including React, Vue, and Nerv
  • More comprehensive documentation and examples

Cons of Taro

  • Steeper learning curve due to its broader scope
  • May have more overhead for simpler projects
  • Less focus on specific optimizations for certain platforms

Code Comparison

Taro component:

import { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <Text>Hello, World!</Text>
      </View>
    )
  }
}

Chameleon component:

<template>
  <view class="index">
    <text>Hello, World!</text>
  </view>
</template>

<script>
class Index {
  created() {}
}
export default new Index();
</script>

Both frameworks aim to create cross-platform applications, but Taro offers more flexibility in terms of framework choice and has a larger community. Chameleon, on the other hand, provides a more focused approach with its own custom syntax, which may be easier to learn for developers new to cross-platform development. The code examples show that Taro uses a React-like syntax, while Chameleon employs a Vue-like template structure with custom scripting.

ionic-team logo

ionic-framework

50,896

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

Pros of Ionic Framework

  • Larger community and ecosystem, with more resources and third-party plugins
  • Supports multiple frameworks (Angular, React, Vue) for greater flexibility
  • More mature and battle-tested in production environments

Cons of Ionic Framework

  • Steeper learning curve, especially for developers new to web technologies
  • Larger bundle sizes, which can impact performance on low-end devices
  • More opinionated architecture, which may limit customization options

Code Comparison

Chameleon (Vue.js component):

<template>
  <view class="container">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data: () => ({ message: 'Hello, Chameleon!' })
}
</script>

Ionic Framework (React component):

import React from 'react';
import { IonContent, IonText } from '@ionic/react';

const HelloWorld: React.FC = () => (
  <IonContent>
    <IonText>Hello, Ionic!</IonText>
  </IonContent>
);

export default HelloWorld;

Both frameworks aim to simplify cross-platform development, but Ionic Framework offers a more comprehensive solution with wider framework support. Chameleon focuses on a unified development experience across platforms, while Ionic leverages web technologies for hybrid app development. The choice between them depends on project requirements, team expertise, and desired customization level.

facebook logo

react-native

118,109

A framework for building native applications using React

Pros of React Native

  • Larger community and ecosystem, with more third-party libraries and resources
  • Better performance for complex applications due to native rendering
  • Stronger corporate backing and long-term support from Facebook

Cons of React Native

  • Steeper learning curve, especially for developers new to React
  • More complex setup and configuration process
  • Potentially larger app size due to bundled JavaScript runtime

Code Comparison

React Native:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => (
  <View>
    <Text>Hello, React Native!</Text>
  </View>
);

Chameleon:

<template>
  <view>
    <text>Hello, Chameleon!</text>
  </view>
</template>

<script>
class App {}
export default new App();
</script>

React Native uses JSX syntax and React components, while Chameleon employs a Vue-like template structure. React Native's approach may be more familiar to React developers, whereas Chameleon's syntax might be easier for those with Vue experience.

Both frameworks aim to create cross-platform mobile applications, but React Native has a more established presence in the market. Chameleon, developed by DiDi, focuses on multi-end adaptation and may be more suitable for simpler applications or those targeting multiple platforms beyond just iOS and Android.

flutter logo

flutter

164,677

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Pros of Flutter

  • Larger community and ecosystem, with more resources and third-party packages
  • Better performance for complex UI and animations
  • More mature and stable, with backing from Google

Cons of Flutter

  • Steeper learning curve, especially for developers new to Dart
  • Larger app size compared to native applications
  • Limited access to platform-specific features without plugins

Code Comparison

Flutter:

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter App')),
        body: Center(child: Text('Hello, World!')),
      ),
    );
  }
}

Chameleon:

<template>
  <view class="container">
    <text>Hello, World!</text>
  </view>
</template>

<script>
export default {
  // Component logic here
}
</script>

Flutter uses Dart and a widget-based approach, while Chameleon uses a Vue-like syntax with HTML-style templates. Flutter's code is more verbose but offers more control over the UI structure. Chameleon's syntax is simpler and may be more familiar to web developers.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Chameleon Build Status license version

Chameleon/kəˈmiːlɪən/，简写CML，中文名卡梅龙；中文意思变色龙，意味着就像变色龙一样能适应不同环境的跨端整体解决方案。

English Introduction | 中文介绍

文档

新官网文档

CML.JS.org

仓库更新说明

本仓库仅包含编译时代码，全部开源代码参见：https://github.com/chameleon-team

master为稳定版本，除了紧急 bug 修复，每份代码提交都有很严格的发布流程规范，会先在分支经历一段时间灰度期，确认稳定可用后才会合并到 master， 进行中的项目分支介绍

CML 即 多端

支持平台：web、微信小程序、支付宝小程序、百度小程序、android(weex)、ios(weex)、qq 小程序、字节跳动小程序、快应用、持续更新中

一端所见即多端所见——多端高度一致，无需关注各端文档。

基于多态协议不影响各端差异化灵活性

web微信小程序native-weex百度小程序支付宝小程序

背景

研发同学在端内既追求 h5 的灵活性，也要追求性能趋近于原生。 面对入口扩张，App 客户端、微信小程序、支付宝小程序、百度小程序、Android 厂商联盟快应用、其他类小程序，单一功能在各平台都要重复实现，开发和维护成本成倍增加。迫切需要维护一套代码可以构建多入口的解决方案，滴滴跨端解决方案 Chameleon 终于发布。真正专注于让一套代码运行多端。

设计理念

软件架构设计里面最基础的概念“拆分”和“合并”，拆分的意义是“分而治之”，将复杂问题拆分成单一问题解决，比如后端业务系统的”微服务化“设计；“合并”的意义是将同样的业务需求抽象收敛到一块，达成高效率高质量的目的，例如后端业务系统中的“中台服务”设计。

而 Chameleon 属于后者，通过定义统一的语言框架+统一多态协议，从多端（对应多个独立服务）业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”。

跨端目标

虽然不同各端环境千变万化，但万变不离其宗的是 MVVM 架构思想，Chameleon 目标是让 MVVM 跨端环境大统一。

跨端目标

开发语言

代码示例

<template>
  <view>
    <text>{{title}}</text><text>{{reversedTitle}}</text>
  </view>
</template>

<script>
class Index  {
  data = {
    title: "chameleon"
  }
  computed = {
    reversedTitle: function () {
      return this.title.split('').reverse().join('')
    }
  }
  mounted() {}
  destroyed() {}
}
export default new Index();
</script>

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，同样道理，chameleon 中采用的是 CML + CMSS + JS。

JS语法用于处理页面的逻辑层，与普通网页编程相比，本项目目标定义标准 MVVM 框架，拥有完整的生命周期，watch，computed，数据双向绑定等优秀的特性，能够快速提高开发速度、降低维护成本。

CML（Chameleon Markup Language）用于描述页面的结构，我们知道 HTML 是有一套标准的语义化标签，例如文本是<span> 按钮是<button>。CML 同样具有一套标准的标签，我们将标签定义为组件，CML 为用户提供了一系列组件。同时 CML 中还支持模板语法，例如条件渲染、列表渲染，数据绑定等等。同时，CML 支持使用类 VUE 语法，让你更快入手。

CMSS(Chameleon Style Sheets)用于描述 CML 页面结构的样式语言，其具有大部分 CSS 的特性，并且还可以支持各种 css 的预处语言less stylus。

CML 采用与 Vue 一致的组件化方案、单文件组织方式、生命周期，同时数据响应能力对齐 Vue，数据管理能力对齐 Vuex，非常方便开发者上手、维护。

通过以上对于开发语言的介绍，相信你看到只要是有过网页编程知识的人都可以快速的上手chameleon的开发。

多端高度一致

深入到编程语言维度保障一致性，包括框架、生命周期、内置组件、事件通信、路由、界面布局、界面单位、组件作用域、组件通信等高度统一

丰富的组件

在用 CML 写页面时，chameleon 提供了丰富的组件供开发者使用，内置的有button switch radio checkbox等组件，扩展的有c-picker c-dialog c-loading等等,覆盖了开发工作中常用的组件。

丰富的 API

为了方便开发者的高效开发，chameleon 提供了丰富的 API 库,发布为 npm 包chameleon-api，里面包括了网络请求、数据存储、地理位置、系统信息、动画等方法。

自由定制 API 和组件

基于强大的多态协议，可自由扩展任意 API 和组件，不强依赖框架的更新。各端原始项目中已积累大量组件，也能直接引入到跨端项目中使用。

基于强大的多态协议，充分隔离各端差异化实现，轻松维护一套代码实现跨多端

规范校验

代码规范校验，当出现不符合规范要求的代码时，编辑器会展示智能提示，不用挨个调试各端代码，同时命令行启动窗口也会提示代码的错误位置。

渐进式跨端

既想一套代码运行多端，又不用大刀阔斧的重构项目？不仅可以用 cml 开发页面，也可以将多端重用组件用 cml 开发，直接在原有项目里面调用。

先进前端开发体验

Chameleon 不仅仅是跨端解决方案。基于优秀的前端打包工具 Webpack，吸收了业内多年来积累的最有用的工程化设计，提供了前端基础开发脚手架命令工具，帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。

联系我们

ChameleonCore@didiglobal.com

Beatles Chameleon 团队

负责人：Conan

内部成员：透心凉、Sgoddon、动机不纯、Jalon、Jack、卡尺哈哈、change、Observer、Kevin、guoqingSmile、Mr.MY、JiM、lzc、名字待定、朱智恒、亭、龚磊、w55、小龙、不懂小彬、荣景超

特别鸣谢

zheyizhifeng(头像空)broven(头像空)
zheyizhifeng（快应用）whuhenrylee（快应用）broven（阿里影业）Jeany（芒果 TV)

贡献者们

快应用官方研发团队、luyixin、z-mirror、夏夜焰火（百度） kingsleydon

微信 & QQ 交流群

微信


QQ

协议

Apache-2.0 license

Chameleon 基于 Apache-2.0 协议进行分发和使用，更多信息参见协议文件。

友情链接

DoraemonKit /'dɔ:ra:'emɔn/，简称DoKit， 一款功能齐全的客户端（ iOS 、Android、微信小程序 ）研发助手，你值得拥有。

Mand Mobile 一款优秀的面向金融场景的 移动端UI组件库。

Cube-UI 基于 Vue.js 实现的精致移动端组件库。

NPM DownloadsLast 30 Days