其他分享
首页 > 其他分享> > 卡梅龙

卡梅龙

作者:互联网

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

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

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

1

Chameleon是什么?

初识Chameleon

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

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

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

谁在用Chameleon

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

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

2. 

我们为什么要做跨端?

技术趋势

从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。

3. 

背后的设计是什么?

基本设计原理

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

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

如何实现

CML为了实现这个目标,做了以下工作:

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

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

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

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

具体体现细节


4. 

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+ 组件

自由定制

▍智能规范校验

具备全面的语法检查功能,Chameleon会严格“管制”输入输出值的类型和结构,同时会严格检查业务层 JS 代码,当出现不符合规范要求的代码时,编辑器会展示智能提示,不用挨个调试各端代码,同时命令行启动窗口也会提示代码的错误位置。

▍渐进式跨端

将 Chameleon组件导出成各端组件,你可以在任意端原有项目中使用 Chameleon开发的组件;另外,我们还提供在原有项目中集成 Chameleon 跨端能力的webpack plugin:easy-chameleon。

可维护性好

独创多态协议标准,充分隔离各端差异化实现,轻松维护一套代码实现跨多端。

多端高度一致

深入到编程语言维度保障一致性,包括框架、生命周期、内置组件、事件通信、路由、布局外观、尺寸单位、组件作用域、组件通信等高度统一。

Chameleon Native SDK

针对 Native SDK 我们主要从原生能力扩展、性能与稳定等三个方面做了工作,包括端能力支持、加载/执行耗时优化、灰度发布、无损降级等。

MVVM+跨端标准协议

基于 MVVM+ 跨端标准协议,你可以自由扩展新端,快速支持任意 MVVM 架构模式的终端,如淘宝小程序、React Native 等等;以不变(项目代码)应万变(多端),从“各自为政”到真正大统一。

可视化搭建跨端应用

线上入口:https://api.didiyun.com/xeditor/home/popular

通过拖拽组件能快速制作、发布上线跨多端页面,可降低多端界面开发 60% 的工作量。

欢迎有兴趣的同学加入我们的用户群,也欢迎有共同愿景的同学加入我们一起共建。

联系我们

Github页面:

https://github.com/didi/chameleon

标签:CML,MVVM,Chameleon,卡梅龙,程序,跨端,组件
来源: https://blog.csdn.net/gwdgwd123/article/details/111478409