滴滴跨端框架 Chameleon 的前世今生
桔妹导读：历经近20个月打磨，滴滴在 GitHub 上开源的跨端解决方案 Chameleon（中文名卡梅龙，中文意思变色龙，简写CML），是一款真正专注于让一套代码运行多端的跨端框架，一端所见即多端所见。目前联合普惠出行共建整个跨端生态，各项规划在快速推进。
1.
Chameleon是什么？
2.
我们为什么要做跨端？
▍业务背景
2017腾讯推出微信小程序后，支付宝、百度、QQ紧随其后，纷纷推出自家小程序平台，在技术实现原理、接口设计刻意模仿微信小程序。对于业务来说，都希望搭上这些流量入口的便车。滴滴出行在微信钱包、支付宝、QQ、Android快应用都有相关入口，而且用户流量占比不低。
▍我们的目标是什么
早在2017年5月，我们就启动名为 MPV （MiniProgram View)一套代码运行Web和小程序的解决方案。当时微信小程序架构整体闭源，文档资料甚少，刚开始时走了不少弯路，比如在web端mock小程序环境执行，采用小程序的DSL,生命周期等等。MPV在webapp上实践最终实现效果如下：
Webapp交易流程（左） 微信交易流程（右）
在跨web和小程序的MPV实践积累下，在2018年启动跨N端的Chameleon项目，目标是：真正让一套代码运行N端，一端所见即多端所见。
终于在去年1月，经过数十位开发人员一年半的精细打磨和经验积累后，在上百页面中实践应用，在github上开源了，目前将近7500+star。
3.
背后的设计是什么？
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开发并运行。
定义标准的 Language(CML DSL)、Framework 与 Library（内置组件和 API）协议层；
在编译阶段将 CML DSL 转译成各端 DSL，只编译 Language 层面足够基础且稳定的代码；
在各端运行时阶段分别实现 Framework ；
在各端运行时阶段分别实现 Library（内置 组件和 API）。
为用户提供多态协议，方便扩展以上几方面的内容，触达底层端特殊属性，同时提升可维护性。
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 目前支持的端都是采用这种方式，我们定义了扩展一个新端所需要实现的所有标准，用户只需要按照这些标准实现即可完成一个新端的扩展。
实现DSL解析能力
利用 babel 转化为 ast 语法树，在对 ast 语法树解析的过程中，对于每个节点通过 tapable 控制该节点的处理方式，比如标签解析、样式语法解析、循环语句、条件语句、原生组件使用、动态组件解析等，达到适配不同端的需求，各端适配互相独立，互不影响，支持快速适配多端。CML的模板解析的整体架构如下图所示
实现运行时框架
下图是运行时框架的核心类图， 继承于基类构造器，定义了应用、页面、组件的构造器，通过多态分别调用。针对不同端的输入，通过适配器类分别适配，同时，在运行时核心类中增强各端运行时的能力。
目前基于这套分层设计，快速扩展了许多端，包括支付宝、百度、qq小程序、头条小程序
实现工程化能力
Chameleon 不仅具有跨端编译和运行时能力，而且是一个功能完备的工程化工具。工程师使用 Chameleon 开发，不止解决跨端问题，还弥补改进了工程开发过程中的效率、质量、性能与稳定性问题，让工程师专注有意义的业务，成长更快。
解决跨端一致性和差异化
一致性和差异化一直是跨端里面的难题，CML 在这方面做了许多努力，包括生命周期的统一、事件系统、尺寸单位、布局外观一致、组件化方案、数据管理等等。特别强调的是，组件化和界面一致性是最容易忽视，也是最影响开发体验的非常重要的点。
下面的表格概括了Chameleon在细节方面做的努力：
4.
Chameleon具备完善的功能
得益于团队在工程化设计上的尝试与实践，CML 拥有先进的工程化理念，整体开发、打包构建等流程非常高效。CML 解决了本地开发时的各种痛点，包括提供 dev 服务、mock 数据、热更新、自动刷新、调试窗口、线上资源代理等能力，大大提高本地开发效率。你可以自由引入各种 npm 依赖包，组件化开发，模块化复用，使用 ES6 特性以及 CSS 样式预处理等等。
Chameleon 的生态不管组件库、API库，还是编辑器插件、调试工具 DebugKit、Xeditor 都在疯狂迭代，持续更新。官方维护的 chameleon-ui-builtin、cml-ui、light-ui、chameleon-ui-miniapp 组件库已经超过 60+ 组件，由普惠出行前端团队主导合作共建的 c-design 组件库也包含了 20+ 组件
Chameleon 既有统一性又可以定制差异化，提供了针对工程级别、项目、组件、方法、样式等各种类型的定制化能力。 可自由扩展任意 API 和组件，不强依赖框架的更新。各端原始项目中已积累大量组件，也能直接引入到跨端项目中使用，同时保证多端业务逻辑充分隔离，维护性很高。此外，还支持多态协议重载能力。
▍智能规范校验
具备全面的语法检查功能，Chameleon会严格“管制”输入输出值的类型和结构，同时会严格检查业务层 JS 代码，当出现不符合规范要求的代码时，编辑器会展示智能提示，不用挨个调试各端代码，同时命令行启动窗口也会提示代码的错误位置。
欢迎有兴趣的同学加入我们的用户群，也欢迎有共同愿景的同学加入我们一起共建。
作者简介 ▬ Chameleon负责人，专注于跨端开发领域，推动Chameleon在公司内外多个业务产品落地，致力于提升跨端研发效率和体验。
推荐阅读 ▬
更多推荐 ▬
技术干货 / Recommended Article