卡梅龙

2024-04-05 11:23:24

滴滴跨端框架 Chameleon 的前世今生

滴滴技术 2020-06-05 21:42:07 799 收藏 1

桔妹导读：历经近20个月打磨，滴滴在 GitHub 上开源的跨端解决方案 Chameleon（中文名卡梅龙，中文意思变色龙，简写CML），是一款真正专注于让一套代码运行多端的跨端框架，一端所见即多端所见。目前联合普惠出行共建整个跨端生态，各项规划在快速推进。

Chameleon是什么？

▍初识Chameleon

基于Chameleon框架开发项目，一份代码可以运行于所有小程序平台 ( 微信、支付宝、百度、头条、qq )、H5、客户端以及快应用，再也不用学习新平台框架啦。仿网易严选的Chameleon demo如下：

通过下面视频给大家介绍下：

更多内容查看官网：https://cml.didi.cn

▍谁在用Chameleon

CML 已在滴滴众多业务产品中实践验证 (顺风车、青桔单车、滴滴代驾、跑腿、企业级、停泊车、滴滴登录、滴滴收银台、国际化、滴滴团队版等)，越来越多的外部团队开始基于 CML 开发跨端项目 (百度视频小程序、百度首创新房通、老爸评测商城等)。

接下来将详细介绍 Chameleon 项目的研发背景和技术原理。

我们为什么要做跨端？

▍技术趋势

从2013年Facebook开源React，到2015年衍生的ReactNative的项目；从2014年Vue的发布，到2016年阿里巴巴推出的Weex项目；Google在2018年发布flutter1.0；都希望帮助开发者通过一套代码库高效构建多平台精美应用（手机、Web、桌面）。

▍业务背景

2017腾讯推出微信小程序后，支付宝、百度、QQ紧随其后，纷纷推出自家小程序平台，在技术实现原理、接口设计刻意模仿微信小程序。对于业务来说，都希望搭上这些流量入口的便车。滴滴出行在微信钱包、支付宝、QQ、Android快应用都有相关入口，而且用户流量占比不低。

技术创新离不开业务场景的落地。我们的业务场景包括了H5、微信小程序、支付宝、QQ小程序，还有安卓、ios。面对同样功能，在各平台都要重复实现，开发和维护成本成倍增加，工作量翻了好几番。而当时的技术趋势是百花齐放，无统一的语言。

▍我们的目标是什么

早在2017年5月，我们就启动名为 MPV （MiniProgram View)一套代码运行Web和小程序的解决方案。当时微信小程序架构整体闭源，文档资料甚少，刚开始时走了不少弯路，比如在web端mock小程序环境执行，采用小程序的DSL,生命周期等等。MPV在webapp上实践最终实现效果如下：

Webapp交易流程（左）微信交易流程（右）

在跨web和小程序的MPV实践积累下，在2018年启动跨N端的Chameleon项目，目标是：真正让一套代码运行N端，一端所见即多端所见。

终于在去年1月，经过数十位开发人员一年半的精细打磨和经验积累后，在上百页面中实践应用，在github上开源了，目前将近7500+star。

背后的设计是什么？

▍基本设计原理

虽然不同端环境千变万化，无论小程序、Weex、React-Native、Flutter、快应用，它们万变不离其宗都包含 MVVM 架构设计思想。

View: Render Engine，包括微信/支付宝/百度/QQ/头条/钉钉小程序、web端、客户端（Weex），后续支持更多MVVM为标准的端。
View Model：CML（Chameleon Markup Language）作为框架定义的标准DSL，结合数据绑定、事件系统，可以构建出页面的结构。同时为了降低学习成本，还支持Vue Template语法。
Model: 使用JavaScript语言，其优点显著：学习成本低、具备跨端属性（基于V8、JavaScriptCore）和组件建设较好、生态活跃。同时提供大量基础统一API接口。

Chameleon是结合各种跨端技术（Weex、React-Native）和产品业务(微信/支付宝/百度/QQ小程序、快应用)的共同技术特点——MVVM架构设计的。终极目标是任意使用MVVM架构设计的终端，都能以Chameleon开发并运行。

▍如何实现

CML为了实现这个目标，做了以下工作：

定义标准的 Language(CML DSL)、Framework 与 Library（内置组件和 API）协议层；
在编译阶段将 CML DSL 转译成各端 DSL，只编译 Language 层面足够基础且稳定的代码；
在各端运行时阶段分别实现 Framework ；
在各端运行时阶段分别实现 Library（内置组件和 API）。
为用户提供多态协议，方便扩展以上几方面的内容，触达底层端特殊属性，同时提升可维护性。

实现思路很简单，所有设计为了 MVVM 标准化，不做多余设计。从 MVVM 角度来看的话，实现包括：

View（视图层）
- 各端 Render Engine （如Web端Vue、小程序引擎、RN/Weex 引擎等）
- CML内置组件库：组件标签（如view、input、text、block 与 cell 等），他们是界面组成的基础元素，衍生出复杂界面。
ViewModel（关联层）
- DSL 语法解析
- 数据绑定
- 组件调用
- 事件系统
- ……
Model（逻辑层）
JavaScript 代码
CML Runtime 框架
Chameleon API：多态协议定义统一接口，cml.request、cml.store 等

总的来说，跨端框架最核心的工作是统一，chameleon 定义了标准的跨端协议，通过编译时+运行时的手段去实现各端的代码和功能，希望既能用一套代码完成所有跨端需求，将相同的业务逻辑完成收敛到同一层系统里面，又不会因为代码的合并导致可维护性变差。

具体到实现原理的架构图如下：

其中，运行时和基础库部分利用多态协议实现各端的独立性与框架的统一性。Chameleon 目前支持的端都是采用这种方式，我们定义了扩展一个新端所需要实现的所有标准，用户只需要按照这些标准实现即可完成一个新端的扩展。

▍具体体现细节

实现DSL解析能力

利用 babel 转化为 ast 语法树，在对 ast 语法树解析的过程中，对于每个节点通过 tapable 控制该节点的处理方式，比如标签解析、样式语法解析、循环语句、条件语句、原生组件使用、动态组件解析等，达到适配不同端的需求，各端适配互相独立，互不影响，支持快速适配多端。CML的模板解析的整体架构如下图所示

实现运行时框架

下图是运行时框架的核心类图，继承于基类构造器，定义了应用、页面、组件的构造器，通过多态分别调用。针对不同端的输入，通过适配器类分别适配，同时，在运行时核心类中增强各端运行时的能力。

目前基于这套分层设计，快速扩展了许多端，包括支付宝、百度、qq小程序、头条小程序

实现工程化能力

Chameleon 不仅具有跨端编译和运行时能力，而且是一个功能完备的工程化工具。工程师使用 Chameleon 开发，不止解决跨端问题，还弥补改进了工程开发过程中的效率、质量、性能与稳定性问题，让工程师专注有意义的业务，成长更快。

解决跨端一致性和差异化

一致性和差异化一直是跨端里面的难题，CML 在这方面做了许多努力，包括生命周期的统一、事件系统、尺寸单位、布局外观一致、组件化方案、数据管理等等。特别强调的是，组件化和界面一致性是最容易忽视，也是最影响开发体验的非常重要的点。

下面的表格概括了Chameleon在细节方面做的努力：

Chameleon具备完善的功能

Chameleon不仅解放生产力，而且拥有业内先进的工程化设计，丰富的基础库，独创多态协议，提供标准的 MVVM 架构开发模式统一各类终端。

▍极致前端开发体验

得益于团队在工程化设计上的尝试与实践，CML 拥有先进的工程化理念，整体开发、打包构建等流程非常高效。CML 解决了本地开发时的各种痛点，包括提供 dev 服务、mock 数据、热更新、自动刷新、调试窗口、线上资源代理等能力，大大提高本地开发效率。你可以*引入各种 npm 依赖包，组件化开发，模块化复用，使用 ES6 特性以及 CSS 样式预处理等等。

同时，CML 非常重视框架的稳定性，从代码质量、测试可靠度、语法检查、生产环境等环节出发，提供稳定可靠的跨端解决方案。

▍生态化建设丰富

Chameleon 的生态不管组件库、API库，还是编辑器插件、调试工具 DebugKit、Xeditor 都在疯狂迭代，持续更新。官方维护的 chameleon-ui-builtin、cml-ui、light-ui、chameleon-ui-miniapp 组件库已经超过 60+ 组件，由普惠出行前端团队主导合作共建的 c-design 组件库也包含了 20+ 组件

▍*定制