文档章节

Chameleon跨端框架——壹个理想主义团队的开源作品

Chameleon社区
 Chameleon社区
发布于 02/01 13:49
字数 2488
阅读 942
收藏 25

文章较长,信息量很大,请耐心阅读,必然有收获。下面正文开始~

  • 背景
  • 解决方案
  • 原理
  • 久经考验
  • 生产应用举例
  • 易用性好
  • 多态协议
  • 学习成本低
  • 渐进式接入
  • 业内对比
  • 后期规划
  • 理想主义

历经近20个月打磨,滴滴跨端方案chameleon终于开源了https://github.com/didi/chameleon, 真正专注于一套代码运行多端。

背景

微信月活10亿月活、支付宝4亿月活、百度3.3亿月活;2018 Q3中国Android手机占智能手机市场超过80%;无论BAT还是Android快应用都是中国互联网用户的真正用户入口,作为小型互联网公司都希望能搭上小程序的风口,从而蹭一波流量。

计算机技术历史发展告诉我们,每一种新技术出现都会经历"各自为政"的阶段,小程序技术也不例外。微信小程序作为首创者,虽然其他小程序都在技术实现原理、接口设计刻意模仿,但是作为一线开发者面对同样的应用实现往往需要重复开发、测试,从前1单位的工作量变成了N单位的工作量。

滴滴的研发工程师是其中最显著的"受害者"之一,滴滴出行在微信钱包、支付宝、Android快应用都有相关入口,用户流量占比不低。

各类原生跨端框架并驾齐驱:

  1. 从Facebook在2013年开源react,这个项目本身越滚越大。从最早的WebUI引擎衍生的ReactNative项目,目标更是宏伟。
  2. Vue.js于2014年左右发布,逆流而上占据了大量用户群体,2016年阿里巴巴也基于vue发布了weex项目,可以用vue编写Native APP。
  3. Google在2018年末正式发布了面向未来的跨Andoid、IOS端Flutter1.0.0,作为面向未来的跨端框架,前景一片光明。

解决方案

虽然不同各端框架环境千变万化,无论各类小程序、Weex、React-Native、Flutter、快应用,它们万变不离其宗的是MVVM架构设计思想。Chameleon希望既能用一套代码完成所有端需求,将相同的业务逻辑完成收敛到同一层系统里面,又不会因为项目的抽象一致导致可维护性变差。

让MVVM跨端环境大统一:以各个跨端技术(Wee x、React-Native、WebView浏览器、Flutter)和产品业务(微信小程序、快应用、支付宝小程序、百度智能小程序、今日头条小程序、其他各类小程序)的共同技术特点——MVVM架构设计, 以统一MVVM跨端架构平台为目标的程序语言框架Chameleon(任意使用MVVM架构设计的终端,都能以Chameleon开发并运行)。

View:

ChameleonSDK包括各类小程序、web端、客户端(React-Native、Weex、Flutter),目前支持微信小程序、Web、Weex三类,后续支持更多MVVM为标准的端。

View Model:

CML(Chameleon MarkupLanguage)是框架设计的一套标签语言,结合基础组件、事件系统、数据绑定,可以构建出页面的结构。同时为了降低学习成本支持类VueTemplate。

原理

久经考验

2017年时微信小程序发布,滴滴作为白名单用户首先开始尝试接入。这时候我们专门成立了一个1、2人的小项目组,完成一个名为MPV的项目,一期目标是“不影响用户发挥,不依赖框架方的原则性实现一套代码运行web和微信小程序”。MPV研发完成后,在多个项目实践中,确实完成了超过90%代码重用,总体上开发效率和测试效率都有了明显提升,同时暴露出更多问题:

  • 可维护性问题,没有隔离公用代码和各端差异代码。
  • 方向选择错误,MPV使用了小程序语法标准(小程序的生命周期、API接口等),导致用户使用上无法清晰理解使用规范。
  • 各端周边小型差异点太多。
  • 模板DSL语法不规范。
  • 两端界面效果不一致。
  • 多端调试成本高。
  • 工程化建设落后。
  • 不能直接使用各端已有生态组件,即缺乏标准规范接入某个端已有开源组件。

2018年4月我们把跨端项目规模进一步扩大,跨N端的解决方案命名为Chameleon/kmiln/,简写CML,中文名卡梅龙;中文意思变色龙,意味着就像变 色龙一样能适应不同环境的跨端整体解决方案。

Chameleon在MPV的实践积累下,不仅解决了遇到的各种问题,后续的规划更加明确,目标真正专注于让一套代码运行多端,提供标准的MVVM模式统一各类终端。

经过一年数十位前端开发人员在上百页面中的实践经验积累,于近日正式开源:https://github.com/didi/chameleon

生产应用举例

易用性好

一套代码运行多端理念,被人挑战最多的如何保证易用性。

  • 开发快,整体开发流程要高效。
  • 简洁性,各端开发定制化空间大,且公用代码不会混杂某端代码。
  • 性能好,不能增加产出文件包大小。
  • 一致性,多端实现效果一致。

多态协议

多端合并后各端差异化实现在所难免,一开始是差异化代码和业务逻辑混杂在一起。这就尴尬了,如果你觉得以上不复杂,假设有4、5个端呢,业务逻辑掺杂跨端逻辑,产品逻辑别打断,可读性差,需求变更,牵一发动全身,每个端都要测试,跨端代码效率变得适得其反。

下图各端差异化代码也和逻辑混合在一起

多态协议设计的灵感来自于Apache Thrift - 可伸缩的跨语言服务开发框架,本质上跨端也属于跨语言。 它能让Chameleon开发者快速接入各个客户端底层功能或者差异化业务实现,避免可读性差、可维护性差的问题。

多态协议通过定义标准接口(interface),各端模块各自独立实现,编译时和运行时对实现的接口输入输出做检查。

主要2个目标:

  • 保障多端可维护性
  • 编译时拆分多端代码

当用户按照标准规范扩展个别产品效果多端不一致或特定底层能力多端不一致的的功能时,多态协议可以有效隔离公用代码和各端差异代码,保证”河水不犯井水“。

举例:当你像开发一个图表功能组件时,可能用到 echarts :
  1. 在项目中分别按照web版本 npm install echarts 和微信版本下载相关文件
  2. 然后定义一个多态组件 charts
  3. 在 charts/charts.interface 定义该组件的输入和输出
  4. 分别在 charts/charts.wx.cml 和 charts/charts.web.cml 里面调用微信版本(可使用微信小程序组件文件夹)和web版本(可调用.vue后缀文件)
  5. 最后就能在项目中使用该组件

产出包里面只包含该组件其中一端的代码;因输入输出的限制,该组件调用上完全一致,不用根据某端做特殊逻辑处理。你可以将该echart多态组件单独放置在一个仓库里面单独维护并发布;其他人无需关系内部细节,直接npm install echart即可使用。

学习成本低

VM层的CML语法是关联视图层和逻辑层的抽象DSL,其有学习成本问题是被热心很多帮助我们的同学提的最多建议,本身其CML学习成本已经非常低,无非是数据双向绑定、事件绑定、组件树、条件语句、循环遍历等等。一开始我们是拒绝的,后来综合考虑之下,还是妥协支持了类vue语法,让开发者更快上手CML。

渐进式接入

很多人已经开发小程序了,又不愿意大多阔斧重新改造,也希望使用CML?当然可以,两种方式使用CML:

业内对比

业内其他框架和我们的目标不一样,我们是希望真正一套代码运行多端,而其他框架无非是“某个小程序语法增强”或者“推广某个框架写小程序 ”,但却是有重合点,列举一下功能对比:

后期规划

理想主义

  1. 我们忍受不了自己的时间浪费在重复劳动上。
  2. 要么不做要做就到极致,一套代码运行多端本来就是理想主义,这条路很艰苦,我们却偏执的坚信一定要尽最大努力做出来,作为一个不那么自 信的人,不做到好用是不敢发布出来的。
  3. CML框架各个细节都要做到极致,我们不能容忍有设计上的缺陷,所以常常CML周会上团队成员讨论6个小时直到深夜。

快速开始:https://cmljs.org/doc/quick_start/quick_start.html

常见问题: https://cmljs.org/doc/framework/faq.html

欢迎加入贡献代码:didi/chameleon

© 著作权归作者所有

共有 人打赏支持
Chameleon社区
粉丝 4
博文 1
码字总数 2488
作品 0
东城
私信 提问
加载中

评论(1)

briefbot
briefbot
这个是面向什么群体的?
滴滴开源跨平台统一 MVVM 框架 Chameleon

近日,滴滴在 GitHub 上开源了跨端解决方案 Chameleon,简写 CML,中文名卡梅龙;中文意思变色龙,意味着就像变色龙一样能适应不同环境的跨端整体解决方案,具有易用、开发快、高性能等特点。...

程六金
01/29
0
10
滴滴跨端解决方案 - Chameleon

研发同学在端内既追求 H5 的灵活性,也要追求性能趋近于原生。 面对入口扩张,主端、独立端、微信小程序、支付宝小程序、百度小程序、安卓厂商联盟快应用,单一功能在各平台都要重复实现,开...

匿名
01/29
0
5
「黑客松之春」华丽来袭:用 Amaze UI ,为开源助力

活动寄语 Amaze UI 从 2014 年 8 月开源至今已经 6 个月,这半年间 Amaze UI 团队致力于一件事:为开发者打造最好用的前端框架。目前看没有偏离这个方向。 Amaze UI 团队很高兴能与 GitCafe 团...

云适配
2015/02/10
2.2K
2
Chameleon快速上手简易教程

CML特点是“一端所见即多端所见”,你只需开发一次就能跑所有端。 跟随这个教程,开启你的chameleon跨端开发。 1 起步 1.1 安装运行环境 开发chameleon项目的第一步是要安装运行环境和全局安...

Chameleon社区
02/13
0
0
开源是你发布软件到企业这个工具链的重要组成部分

每个企业的软件产品都多多少少用了许多工具。我们的一些企业用户报告他们在整个产品化过程中使用了50多个工具,这包括从代码的开发到产品的发布。对于今天的大多数开发组织来说,这些工具是由...

oschina
2016/03/23
504
0

没有更多内容

加载失败,请刷新页面

加载更多

Httpd 整合 Tomcat 步骤

环境:Tomcat8 + Httpd2.4 工作原理:借助于Tomcat的AJP连接器实现Apache与Tomcat的通信 配置步骤: 1. 配置httpd.conf 新增: Include conf/extra/mod_jk.conf 修改:添加 index.jsp <IfM...

ZeroneLove
昨天
1
0
Docker笔记3——容器命令(未写完,明天整理接着写)

未写完,明天整理接着写 新建并启动容器 docker run docker run [OPTIONS] IMAGE [COMMEND] [ARG...] OPTIONS: --name=[容器新名字] :为容器指定一个名称 -d:后台运行容器,并返回容器ID,...

HappyBKs
昨天
1
0
2018个人年终总结

感谢领导的信任和指导,新的一年获得了很多成长和提高,改掉了很多不好的习惯。 在这一年里,我在领导的帮助下,主要完成了以下功能: 1、完成上海银行版本投资营销相关功能的开发。 2、完成车...

万山红遍
昨天
11
0
保密工作与linux系统的发展

保密工作从性质上可以分成商业方面的保密和国家安全方面的保密。由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件。加上单位已近通过武器装备科研生产单位二级...

linux-tao
昨天
3
0
Spark共享变量

概述 Spark程序的大部分操作都是RDD操作,通过传入函数给RDD操作函数来计算。这些函数在不同的节点上并发执行,但每个内部的变量有不同的作用域,不能相互访问,所以有时会不太方便,Spark提...

仟昭
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部