前端早早聊大会-与掘金联合举办-全年学习

一、前言

各位早早聊的同学大家好,本文主要介绍《如何在滴滴快速落地 Chameleon》。

主要的内容分为两部分:

  • 第一部分是 Chameleon 的整个发展历程,包括前期调研、技术方案调研、技术实现落地等;
  • 第二部分的话,简单介绍下目前滴滴内部有哪些业务线在用 Chameleon,应用过程中遇到问题如何解决的。

屏幕快照 2020-06-24 上午10.32.45.png

其他先不多说,先上图展示下目前在滴滴各业务线的使用情况。

屏幕快照 2020-06-24 上午10.57.21.png

大家可以在小程序里搜 <滴滴货运>、<新桔代驾>、<滴滴顺风车>、<滴滴代驾>、<滴滴跑腿>、<青桔单车>、<滴滴团队版>、<滴滴企业级>、<桔研问卷>、<智慧交通码>、<桔研社>。

以上滴滴各个业务线的小程序都是用 Chameleon 写的,有没有比较优秀的样子呢?
感兴趣的可以去 Github: https://github.com/didi/chameleon 体验一波,点点 star 哈,感谢各位同学的支持。

二、自我介绍

简单做下自我介绍,我是来自顺风车终端技术组的前端工程师 JiM,目前在顺风车主要负责 Chameleon 的开发工作。

三、CML简介

接下来介绍下本次的主角。

从 18 年初开始调研开发 Chameleon 至今,Chameleon 也有近两年的工作经验了,时间过得真快,Chameleon 这两年工作经验可真够丰富的,它不仅承载了滴滴顺风车的前端大部分业务,还在滴滴代驾、滴滴跑腿、青桔单车、桔研问卷、滴滴顺风车、滴滴企业级打车、滴滴打车团队版等各个业务线贡献着自己的能量。

目前 Chameleon 已经支持的端包括:H5/Native(weex)/微信小程序/支付宝小程序/百度小程序/QQ小程序/字节跳动小程序/快应用。

这里有官方微信群和 QQ 群,各位同学感兴趣的可以加下。

屏幕快照 2020-06-24 上午10.57.55.png

四、跨端开发背景

屏幕快照 2020-06-24 上午10.50.44.png

先简单介绍下跨端开发的背景吧,大家都知道,前端圈儿是一个发展特别迅速的圈子,甚至被广大开发者戏称为 “前端娱乐圈”,究其原因,就是前端发展太快了,今天这个很流行,明天可能就过时了。

最开始的时候,广大开发者要兼容各个浏览器,所以有了 jQuery 大放异彩。后来的时候,前端逐渐出现了模块化,标准化,此时 seajs、requirejs 登上历史的舞台。再后来,node.js 的出现,让前端生态爆炸似的发展和成长,出现了一些工程化解决方案,比如 Webpack。到如今,各个小程序的出现,再次让跨端开发,一套代码多端运行成为了摆在各个开发者面前技术难点。

那么如何才能真正的做到一套代码,多端运行,真正的彻底解放人力,提速增效?如何才可以兼容各个端开发,真正让开发者不再为多端适配、重复开发而感到“秃然”和迷茫?

基于此背景,我们就设想通过开发一个框架来满足这种跨端开发的需求。

五、Chameleon发展历程

屏幕快照 2020-06-24 上午10.55.02.png

接下来我主要介绍下,滴滴开源框架 Chameleon 的成长历程,它是如何一步步在滴滴诞生-成长-稳定的,以及最后得以承载滴滴出行 10+ 业务线的需求。

让我们一起来了解其 <诞生>,<成长>,<落地应用> 的一些故事吧。

探索-诞生期

业务背景

屏幕快照 2020-06-24 上午10.55.20.png

简单介绍下背景,滴滴出行业务需求承载主要包括 APP(iOS/Android)、H5 页面、以及微信小程序、支付宝小程序。

在这种多端开发的背景下,原来的业务需求带来的问题就很大:

  • 重复开发;
  • 代码无法复用;
  • 沟通成本高。

在这样的背景下,团队开始着手考虑自研一个开发框架用以节省人力,提效增速。

技术背景

屏幕快照 2020-06-24 上午10.55.31.png

那么什么样的框架才能满足我们的需求呢?在明确需求之后,我们需要对技术背景有足够的认知和了解,底层支撑比如 jscore、Native 通信、各端原生 UI 组件、各端 DSL 协议。对于基本的技术背景有了一定的了解之后,我们同样需要确立开发指导思想。

指导思想

屏幕快照 2020-06-24 上午10.55.39.png

基于这些基础的技术背景以及 MVVM 开发模式,对 UI、API 接口、DSL 协议进行了统一封装,通过运行时对路由、生命周期进行适配,抹平各端差异,真正可以达到一套代码跨多端的目的。

实现-成长期

基本目标

屏幕快照 2020-06-24 上午10.55.47.png

基本的技术架构和开发指导思想确立之后,我们可以根据以下四个维度进行细化设计实现,包括:

  • 基础能力:脚手架设计、数据 mock、内置 API/UI 适配;
  • 核心编译:提供模板编译、运行时适配、路由层统一;
  • 灵活性设计:各端路由按需配置、自定义工程化配置、多态协议等;
  • 严谨性:由于各端代码的差异性,为了最大限度的保证稳定性,我们自研了全局变量校验、多态接口校验、代码规范检查等。

技术架构

屏幕快照 2020-06-24 上午10.55.56.png

语言层面:统一了一套 DSL,模板语法层面支持类 Vue 的语法,和原生小程序的语法。

内置生态库层面:统一了各端的 UI 层能力、API 接口能力,统一了这些能力之后,同时依赖于 Chameleon 的多态协议的设计,开发者也可以自行开发对应端的某些特殊的能力。

框架层:Chameleon 在编译层统一了生命周期、数据响应、各端的事件系统、布局能力、路由能力、状态管理、尺寸单位等。

通过以上的技术实现,保证开发者可以以开发 Vue 项目的体验方式快速开发跨 Web/weex,以及各个小程序的应用,极大的降低了人力成本,提高了开发效率。

编译原理

屏幕快照 2020-06-24 上午10.56.05.png

这里介绍下 Chameleon 框架层面编译能力提供的核心功能。

对 Chameleon 规范下的业务代码,适配了各端 UI、API、路由、数据响应、样式能力之外,我们还提供了代码校验以及工程化的各种能力,包括数据 mock、本地开发、Web 端跨域能力、代码压缩等。

以上主要介绍了 Chameleon 技术架构方面的设计和实现,接下来我们看下基于以上技术架构,Chameleon 是如何组织代码的。

统一DSL

屏幕快照 2020-06-24 上午10.56.13.png

首先 Chameleon 中 .cml 文件,类似于 .vue 文件,相比于 Vue 多了一部分 JSON 的配置,template 部分语法支持两种语法,既支持类 Vue 的语法,也支持类小程序的语法,无论来自 Vue 还是小程序的开发者都可以快速上手开发,script 部分也基本和 Vue 的保持一致,包括生命周期,data,props,computed,watch 等等,style 部分对样式单位进行了统一,定义了 cpx 单位作为基准,样式适配多端,JSON 部分可以用于引入组件。

模板编译

屏幕快照 2020-06-24 上午10.56.21.png

对于 template 部分的编译,我们在框架的编译层支持了两套语法,无论是小程序的开发者,还是 Vue 的开发者,几乎零成本就可以上手开发。

同时基于 Vue 的语法扩展了诸多小程序端不支持的能力,比如统一事件系统,扩展样式语法等,让广大开发者以开发原生 Vue 项目的体验去开发一个跨多端项目:

逻辑对象

屏幕快照 2020-06-24 上午10.56.29.png

对于 script 中的部分,chameleon 在编译层对生命周期数据响应等进行了统一,抹平了各端生命周期的差异以及拉齐了数据响应能力,同样使得开发者无需向小程序那样手动进行 setData 的操作,达到类似于 Vue 开发体验。

样式语法

屏幕快照 2020-06-24 上午10.56.38.png

样式语法层面,我们提供了基础样式,抹平各端样式上的差异,同时定义了 cpx 样式单位,统一了各端开发样式规范,提供了多态样式的能力,可以针对某一端具体的样式单独实现特殊的样式需求。

多态协议

屏幕快照 2020-06-24 上午10.56.45.png

除此之外,为了尽可能保证开发者的开发效率,尽可能覆盖某些框架没有兼顾到的能力,Chameleon 独创了多态协议,在此协议的基础上,允许开发者以多态协议调用对应端底层支持的能力:

比如,多态接口,如果框架内置的 API 接口没有某个能力的实现,开发者完全可以根据多态接口自行实现,毫无阻碍,再比如,多态组件,某个业务组件在各端实现差异性很大,不能通过一套代码来适配,那么完全可以通过多态组件各自适配,再或者说,在业务代码中,某一端要特殊实现某个样式,那么可以通过多态样式去针对该端单独进行覆盖和设计。

组件/接口生态库

根据 CML 设计的统一 DSL 以及多态协议,我们目前提供了 cml-ui、chameleon-ui-builtin、light-ui、chamelon-api 等适配多端的 UI 组件库以及 API 库。

所有相关的仓库都在这里 https://github.com/chameleon-team,大家感兴趣可以看看加深了解。

屏幕快照 2020-06-24 上午10.56.53.png

最后,我们再从业务代码到产出物的角度了解下 Chameleon。

屏幕快照 2020-06-24 上午10.57.00.png

以多态协议为基础的 CML 业务代码,经过 Chameleon 编译之后,编译成各端的代码,比如 Web 端就是编译成 HTML、JS、CSS,weex 端就编译成 weexJSFile,小程序端编译成 js、json、wxss、wxml。

CMl 业务代码经过编译之后到各个端的基本对应关系如下:

屏幕快照 2020-06-24 上午10.57.07.png

成熟-稳定期

好,废话说了那么多,我们的标题是《如何在滴滴快速落地 Chameleon》但却讲了 Chameleon 的很多原理性和架构层的设计问题,是不是有点跑偏了,其实不然,正是基于 Chameleon 这些设计,灵活开发、内置 UI/API 能力抹平差异、多端适配等,才使得 Chameleon 在正式开源之初就已经在滴滴内部各个业务线就提前使用。

落地各业务线

支撑了滴滴出行 10+ 的业务线以及应用,人力成本降低了 50% 以上。

屏幕快照 2020-06-24 上午10.57.13.png

各业务线应用情况

这里是 Chameleon 在各个业务线应用的情况,包括滴滴顺风车、滴滴代驾、滴滴跑腿、青桔单车、滴滴团队版、滴滴企业级、桔研问卷、滴滴货运、新桔代驾、智慧交通码、桔研社等。

屏幕快照 2020-06-24 上午10.57.21.png

提速增效

屏幕快照 2020-06-24 上午10.57.31.png

最终我们也成功的达到了我们的目标提速增效

六、推荐一本书

最后,给大家推荐一本我大学比较喜欢的一本书吧,没办法,毕业以后确实看书的时间少太多了,这个得改。

屏幕快照 2020-06-24 上午10.57.40.png

七、团队简介

最后简单介绍下我们团队吧,目前 HC 也有空缺,欢迎各位投递简历,女生更好哈,帮我们集齐七仙女。

屏幕快照 2020-06-24 上午10.57.47.png

八、CML视频入门教程

在 PPT 的最后,我这里准备了一个视频教程,也欢迎大家围观。

5分钟.mp4 最后,再次谢谢大家腾出宝贵时间参会,谢谢大家!我是 JiM。感兴趣的可以扫描下方二维码加我微信。

IMG_7045.PNG


别忘了点下方送稻谷