• Stars
    star
    9,024
  • Rank 3,792 (Top 0.08 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 5 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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,吸收了业内多年来积累的最有用的工程化设计,提供了前端基础开发脚手架命令工具,帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。

联系我们

[email protected]

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 实现的精致移动端组件库。

More Repositories

1

DoKit

一款面向泛前端产品研发全生命周期的效率平台。
Java
19,956
star
2

cube-ui

🔶 A fantastic mobile ui lib implement by Vue
JavaScript
9,110
star
3

VirtualAPK

A powerful and lightweight plugin framework for Android
Java
8,949
star
4

LogicFlow

A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架,支持实现脑图、ER图、UML、工作流等各种图编辑场景。
TypeScript
6,812
star
5

KnowStreaming

一站式云原生实时流数据平台,通过0侵入、插件化构建企业级Kafka服务,极大降低操作、存储和管理实时流数据门槛
Java
6,747
star
6

booster

🚀Optimizer for mobile applications
Kotlin
4,752
star
7

nightingale

An enterprise-level cloud-native monitoring system, which can be used as drop-in replacement of Prometheus for alerting and management.
Go
4,510
star
8

mpx

Mpx,一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架
JavaScript
3,531
star
9

mand-mobile

💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
Vue
3,429
star
10

sharingan

Sharingan(写轮眼)是一个基于golang的流量录制回放工具,适合项目重构、回归测试等。
Go
2,182
star
11

tinyid

ID Generator id生成器 分布式id生成系统,简单易用、高性能、高可用的id生成系统
Java
2,071
star
12

ChineseNLP

Datasets, SOTA results of every fields of Chinese NLP
HTML
1,767
star
13

DiDiPrism

小桔棱镜,一款专注移动端操作行为的利器! A powerful tool (iOS & Android) that focuses on mobile operation behavior!
Objective-C
1,699
star
14

gendry

a golang library for sql builder
Go
1,500
star
15

DDMQ

DDMQ is a distributed messaging product with low latency, high throughput and high availability.
Java
1,286
star
16

Hummer

一套移动端高性能高可用的动态化跨端开发框架
Objective-C
1,283
star
17

rdebug

Rdebug — Real Debugger
PHP
1,155
star
18

echo

Echo是一款桌面端调试工具,旨在提高客户端的研发调试效率
Objective-C
1,022
star
19

DroidAssist

A lightweight Android Studio gradle plugin based on Javassist for editing bytecode in Android.
Java
881
star
20

AoE

AoE (AI on Edge,终端智能,边缘计算) 是一个终端侧AI集成运行时环境 (IRE),帮助开发者提升效率。
C++
870
star
21

turbo

Turbo is a light-weight flow engine framework, support BPMN2.0. 一款轻量级流程引擎服务框架,可作为底层服务支持各类流程设计、低代码设计、工作流、服务编排等场景
Java
798
star
22

DRouter

Android Router Framework
Java
711
star
23

AgileTC

AgileTC is an agile test case management platform
JavaScript
642
star
24

falcon-log-agent

用于监控系统的日志采集agent,可无缝对接open-falcon
Go
554
star
25

epage

一款基于schema的低代码可视化页面配置工具
Vue
441
star
26

super-jacoco

Java
430
star
27

GateKeeper

A high-performance Golang gateway that supports rapid development and plug-inization
Go
428
star
28

sds

SDS是一个基于Java开发的简单、易用、高性能的服务降级系统,支持限流、熔断和降级等功能,服务端必备!!
Java
406
star
29

KnowSearch

面向Elasticsearch研发与运维人员,围绕集群、索引构建的零侵入、多租户的Elasticsearch GUI管控平台
Java
377
star
30

kemon

An Open-Source Pre and Post Callback-Based Framework for macOS Kernel Monitoring.
C
368
star
31

di18n

一种自动转换、基于配置的前端国际化方案
JavaScript
286
star
32

pile.js

pile.js components build with React.
CSS
267
star
33

ES-Fastloader

Quickly build large-scale ElasticSearch indices by using the fault tolerance and parallelism of Hadoop
Java
259
star
34

KnowAgent

基于日志模板构建,采集任务动态管控、数据质量精确度量,一站式日志采集平台
Java
243
star
35

LogiCommon

Java版 认证、鉴权、管理、任务调度通用功能组件
Java
213
star
36

Tips

JavaScript
187
star
37

maskdetection

C++
179
star
38

xiaoju-survey

「快速」打造「专属」问卷系统, 让调研「更轻松」
Vue
167
star
39

DreamBox

DreamBox是一个为客户端开发者打造的统一视图开发框架,具有性能好、可动态更新的特点
Java
165
star
40

dlflow

DLFlow is a deep learning framework.
Python
156
star
41

hetsann

Source Codes of HetSANN in the AAAI'20 paper: An Attention-based Graph Nerual Network for Heterogeneous Structural Learning.
Python
140
star
42

collection

go collection package for fasting coding
Go
127
star
43

didi.github.io

didi website
HTML
125
star
44

athena

A release version for https://github.com/athena-team/athena
Python
123
star
45

JuShaTa

JuShaTa是一个Java容器,提供模块隔离及模块热加载能力。
Java
114
star
46

logbook

Java
108
star
47

levin

A Quick Way to Bulk Loading
C++
104
star
48

heteta

HetETA: Heterogeneous Information Network Embedding for Estimating Time of Arrival
Python
101
star
49

thrift-mock

A lightweight java test library for mocking thrift server
Java
90
star
50

mand-mobile-rn

💰 Mand Mobile for React Native, designed for financial scenarios.
TypeScript
87
star
51

TrafficIndex

TTI ,Smart Transportation Industry Standard
C++
85
star
52

slime-validator

JavaScript library of validation based on Plugin system and make data validation be easy.
JavaScript
85
star
53

vue-tmap

一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 Vue3 的高性能地图组件库
TypeScript
81
star
54

mtmc-vt

MTMC Vehicle Tracking For AI City challenge 2019
Jupyter Notebook
69
star
55

sgt

didiyun super-agent daemon
Go
57
star
56

FeatureProbe

开源的高效可视化『功能』管理平台,提供灰度发布、AB实验、配置变更全功能。
53
star
57

ALITA

ALITA is a layer-based data analysis tool. The front-end see
Java
50
star
58

react-tmap

一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 react 的高性能地图组件库
TypeScript
45
star
59

benchmark-thrift

An open source application designed to load test Thrift applications
Java
44
star
60

elastic-trib

elasticsearch cluster command line tool.
Go
39
star
61

mpx-cube-ui

基于"Mpx 小程序框架"的移动端基础组件库
TypeScript
25
star
62

yarc

基于 eBPF 的流量录制工具
C
24
star
63

paladin

Scala
20
star
64

MEEP

End-to-end framework to build automatic agents (chatbots) for task-oriented dialogs
Python
18
star
65

tg-flow

Go
18
star
66

Unify

Dart
15
star
67

ALITA_UI

ALITA is a layer-based data analysis tool. The back-end see
JavaScript
13
star
68

wmt2021_triangular_mt

The baseline model code for WMT 2021 Triangular MT
Python
13
star
69

MeetDot

Python
11
star
70

DAIBench

Shell
10
star
71

WorkTrans

Python
10
star
72

didi-tech-edu

9
star
73

daedalus

JavaScript
6
star
74

tmap-types

腾讯地图 js api 类型声明,主要用于 react-tmap 和 vue-tmap 组件库
4
star
75

Json-adapter

Java
3
star