一、前言
各位早早聊的同学大家好，本文主要介绍《如何在滴滴快速落地 Chameleon》。
主要的内容分为两部分：
- 第一部分是 Chameleon 的整个发展历程，包括前期调研、技术方案调研、技术实现落地等；
- 第二部分的话，简单介绍下目前滴滴内部有哪些业务线在用 Chameleon，应用过程中遇到问题如何解决的。
其他先不多说，先上图展示下目前在滴滴各业务线的使用情况。
大家可以在小程序里搜 <滴滴货运>、<新桔代驾>、<滴滴顺风车>、<滴滴代驾>、<滴滴跑腿>、<青桔单车>、<滴滴团队版>、<滴滴企业级>、<桔研问卷>、<智慧交通码>、<桔研社>。
以上滴滴各个业务线的小程序都是用 Chameleon 写的，有没有比较优秀的样子呢？
感兴趣的可以去 Github: https://github.com/didi/chameleon 体验一波，点点 star 哈，感谢各位同学的支持。
二、自我介绍
简单做下自我介绍，我是来自顺风车终端技术组的前端工程师 JiM，目前在顺风车主要负责 Chameleon 的开发工作。
三、CML简介
接下来介绍下本次的主角。
从 18 年初开始调研开发 Chameleon 至今，Chameleon 也有近两年的工作经验了，时间过得真快，Chameleon 这两年工作经验可真够丰富的，它不仅承载了滴滴顺风车的前端大部分业务，还在滴滴代驾、滴滴跑腿、青桔单车、桔研问卷、滴滴顺风车、滴滴企业级打车、滴滴打车团队版等各个业务线贡献着自己的能量。
目前 Chameleon 已经支持的端包括：H5/Native(weex)/微信小程序/支付宝小程序/百度小程序/QQ小程序/字节跳动小程序/快应用。
- Github地址 : https://github.com/didi/chameleon，欢迎各位同学 star（手动比心）；
- 官网地址：cml.didi.cn。
这里有官方微信群和 QQ 群，各位同学感兴趣的可以加下。
四、跨端开发背景
先简单介绍下跨端开发的背景吧，大家都知道，前端圈儿是一个发展特别迅速的圈子，甚至被广大开发者戏称为 “前端娱乐圈”，究其原因，就是前端发展太快了，今天这个很流行，明天可能就过时了。
最开始的时候，广大开发者要兼容各个浏览器，所以有了 jQuery 大放异彩。后来的时候，前端逐渐出现了模块化，标准化，此时 seajs、requirejs 登上历史的舞台。再后来，node.js 的出现，让前端生态爆炸似的发展和成长，出现了一些工程化解决方案，比如 Webpack。到如今，各个小程序的出现，再次让跨端开发，一套代码多端运行成为了摆在各个开发者面前技术难点。
那么如何才能真正的做到一套代码，多端运行，真正的彻底解放人力，提速增效？如何才可以兼容各个端开发，真正让开发者不再为多端适配、重复开发而感到“秃然”和迷茫？
基于此背景，我们就设想通过开发一个框架来满足这种跨端开发的需求。
五、Chameleon发展历程
接下来我主要介绍下，滴滴开源框架 Chameleon 的成长历程，它是如何一步步在滴滴诞生-成长-稳定的，以及最后得以承载滴滴出行 10+ 业务线的需求。
让我们一起来了解其 <诞生>，<成长>，<落地应用> 的一些故事吧。
探索-诞生期
业务背景
简单介绍下背景，滴滴出行业务需求承载主要包括 APP（iOS/Android）、H5 页面、以及微信小程序、支付宝小程序。
在这种多端开发的背景下，原来的业务需求带来的问题就很大：
- 重复开发；
- 代码无法复用；
- 沟通成本高。
在这样的背景下，团队开始着手考虑自研一个开发框架用以节省人力，提效增速。
技术背景
那么什么样的框架才能满足我们的需求呢？在明确需求之后，我们需要对技术背景有足够的认知和了解，底层支撑比如 jscore、Native 通信、各端原生 UI 组件、各端 DSL 协议。对于基本的技术背景有了一定的了解之后，我们同样需要确立开发指导思想。
指导思想
基于这些基础的技术背景以及 MVVM 开发模式，对 UI、API 接口、DSL 协议进行了统一封装，通过运行时对路由、生命周期进行适配，抹平各端差异，真正可以达到一套代码跨多端的目的。
实现-成长期
基本目标
基本的技术架构和开发指导思想确立之后，我们可以根据以下四个维度进行细化设计实现，包括：
- 基础能力：脚手架设计、数据 mock、内置 API/UI 适配；
- 核心编译：提供模板编译、运行时适配、路由层统一；
- 灵活性设计：各端路由按需配置、自定义工程化配置、多态协议等；
- 严谨性：由于各端代码的差异性，为了最大限度的保证稳定性，我们自研了全局变量校验、多态接口校验、代码规范检查等。
技术架构
语言层面：统一了一套 DSL，模板语法层面支持类 Vue 的语法，和原生小程序的语法。
内置生态库层面：统一了各端的 UI 层能力、API 接口能力，统一了这些能力之后，同时依赖于 Chameleon 的多态协议的设计，开发者也可以自行开发对应端的某些特殊的能力。
框架层：Chameleon 在编译层统一了生命周期、数据响应、各端的事件系统、布局能力、路由能力、状态管理、尺寸单位等。
通过以上的技术实现，保证开发者可以以开发 Vue 项目的体验方式快速开发跨 Web/weex，以及各个小程序的应用，极大的降低了人力成本，提高了开发效率。
编译原理
这里介绍下 Chameleon 框架层面编译能力提供的核心功能。
对 Chameleon 规范下的业务代码，适配了各端 UI、API、路由、数据响应、样式能力之外，我们还提供了代码校验以及工程化的各种能力，包括数据 mock、本地开发、Web 端跨域能力、代码压缩等。
以上主要介绍了 Chameleon 技术架构方面的设计和实现，接下来我们看下基于以上技术架构，Chameleon 是如何组织代码的。
统一DSL
首先 Chameleon 中 .cml 文件，类似于 .vue 文件，相比于 Vue 多了一部分 JSON 的配置，template 部分语法支持两种语法，既支持类 Vue 的语法，也支持类小程序的语法，无论来自 Vue 还是小程序的开发者都可以快速上手开发，script 部分也基本和 Vue 的保持一致，包括生命周期，data，props，computed，watch 等等，style 部分对样式单位进行了统一，定义了 cpx 单位作为基准，样式适配多端，JSON 部分可以用于引入组件。
模板编译
对于 template 部分的编译，我们在框架的编译层支持了两套语法，无论是小程序的开发者，还是 Vue 的开发者，几乎零成本就可以上手开发。
同时基于 Vue 的语法扩展了诸多小程序端不支持的能力，比如统一事件系统，扩展样式语法等，让广大开发者以开发原生 Vue 项目的体验去开发一个跨多端项目：
- CML语法参考：http://cml.didi.cn/docs/cml.html；
- 类Vue语法参考：http://cml.didi.cn/docs/cml-vue.html。
逻辑对象
对于 script 中的部分，chameleon 在编译层对生命周期、数据响应等进行了统一，抹平了各端生命周期的差异以及拉齐了数据响应能力，同样使得开发者无需向小程序那样手动进行 setData 的操作，达到类似于 Vue 开发体验。
样式语法
样式语法层面，我们提供了基础样式，抹平各端样式上的差异，同时定义了 cpx 样式单位，统一了各端开发样式规范，提供了多态样式的能力，可以针对某一端具体的样式单独实现特殊的样式需求。
多态协议
除此之外，为了尽可能保证开发者的开发效率，尽可能覆盖某些框架没有兼顾到的能力，Chameleon 独创了多态协议，在此协议的基础上，允许开发者以多态协议调用对应端底层支持的能力：
比如，多态接口，如果框架内置的 API 接口没有某个能力的实现，开发者完全可以根据多态接口自行实现，毫无阻碍，再比如，多态组件，某个业务组件在各端实现差异性很大，不能通过一套代码来适配，那么完全可以通过多态组件各自适配，再或者说，在业务代码中，某一端要特殊实现某个样式，那么可以通过多态样式去针对该端单独进行覆盖和设计。
组件/接口生态库
根据 CML 设计的统一 DSL 以及多态协议，我们目前提供了 cml-ui、chameleon-ui-builtin、light-ui、chamelon-api 等适配多端的 UI 组件库以及 API 库。
所有相关的仓库都在这里 https://github.com/chameleon-team，大家感兴趣可以看看加深了解。
最后，我们再从业务代码到产出物的角度了解下 Chameleon。
以多态协议为基础的 CML 业务代码，经过 Chameleon 编译之后，编译成各端的代码，比如 Web 端就是编译成 HTML、JS、CSS，weex 端就编译成 weexJSFile，小程序端编译成 js、json、wxss、wxml。
CMl 业务代码经过编译之后到各个端的基本对应关系如下：
成熟-稳定期
好，废话说了那么多，我们的标题是《如何在滴滴快速落地 Chameleon》但却讲了 Chameleon 的很多原理性和架构层的设计问题，是不是有点跑偏了，其实不然，正是基于 Chameleon 这些设计，灵活开发、内置 UI/API 能力抹平差异、多端适配等，才使得 Chameleon 在正式开源之初就已经在滴滴内部各个业务线就提前使用。
落地各业务线
支撑了滴滴出行 10+ 的业务线以及应用，人力成本降低了 50% 以上。
各业务线应用情况
这里是 Chameleon 在各个业务线应用的情况，包括滴滴顺风车、滴滴代驾、滴滴跑腿、青桔单车、滴滴团队版、滴滴企业级、桔研问卷、滴滴货运、新桔代驾、智慧交通码、桔研社等。
提速增效
最终我们也成功的达到了我们的目标提速增效。
六、推荐一本书
最后，给大家推荐一本我大学比较喜欢的一本书吧，没办法，毕业以后确实看书的时间少太多了，这个得改。
七、团队简介
最后简单介绍下我们团队吧，目前 HC 也有空缺，欢迎各位投递简历，女生更好哈，帮我们集齐七仙女。
八、CML视频入门教程
在 PPT 的最后，我这里准备了一个视频教程，也欢迎大家围观。
别忘了点下方送稻谷
若有收获，就点个赞吧
0 人点赞
