Chameleon跨端框架——一个理想主义团队的开源作品
出品 | 滴滴技术
作者 | 张楠 Conan
前言:历经近20个月打磨,滴滴跨端方案chameleon终于开源了https://github.com/didi/chameleon, 真正专注于一套代码运行多端
一、背景
微信月活10亿月活(超过网民数量,用户多个账号?)、支付宝4亿月活、百度3.3亿月活;2018 Q3中国Android手机占智能手机市场超过80%;无论BAT还是Android快应用都是中国互联网用户的真正用户入口,作为小型互联网公司都希望能搭上小程序的风口,从而蹭一波流量。
计算机技术历史发展告诉我们,每一种新技术出现都会经历"各自为政"的阶段,小程序技术也不例外。微信小程序作为首创者,虽然其他小程序都在技术实现原理、接口设计刻意模仿,但是作为一线开发者面对同样的应用实现往往需要重复开发、测试,从前1单位的工作量变成了N单位的工作量。
滴滴的研发工程师是其中最显著的"受害者"之一,滴滴出行在微信钱包、支付宝、Android快应用都有相关入口,用户流量占比不低。
各类小程序已经能覆盖中国所有网民,从Facebook在2013年开源react,这个项目本身越滚越大。从最早的WebUI引擎衍生的ReactNative项目,目标更是宏伟。
Vue.js于2014年左右发布,逆流而上占据了大量用户群体,2016年阿里巴巴也基于vue发布了weex项目,可以用vue编写NativeAPP。
Google在2018年末正式发布了面向未来的跨Andoid、IOS端Flutter1.0.0,作为面向未来的跨端框架,前景一片光明。
二、解决方案
虽然不同各端框架环境千变万化,无论各类小程序、Weex、React-Native、Flutter、快应用,它们万变不离其宗的是MVVM架构设计思想。Chameleon希望既能用一套代码完成所有端需求,将相同的业务逻辑完成收敛到同一层系统里面,又不会因为项目的抽象一致导致可维护性变差。
让MVVM跨端环境大统一:以各个跨端技术(Weex、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的实践积累下,有了一定的底气和把握,后续的规划更加明确。
可维护性问题,没有隔离公用代码和各端差异代码。
方向选择错误,MPV使用了小程序语法标准(小程序的生命周期、API接口等),导致用户使用上无法清晰理解使用规范。
各端周边小型差异点太多。
模板DSL语法不规范。
两端界面效果不一致。
多端调试成本高。
工程化建设落后。
不能直接使用各端已有生态组件,即缺乏标准规范接入某个端已有开源组件。
2018年4月我们把跨端项目规模进一步扩大,跨N端的解决方案命名为Chameleon/kmiln/,简写CML,中文名卡梅龙;中文意思变色龙,意味着就像变 色龙一样能适应不同环境的跨端整体解决方案。
Chameleon在MPV的实践积累下,不仅解决了遇到的各种可维护性问题,后续的规划更加明确,目标真正专注于让一套代码运行多端,提供标准的MVV M模式统一各类终端。
经过一年数十位前端开发人员在上百页面中的实践经验积累,在本周正式开源: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?当然可以,2种方式使用CML:
说明/类型 | 整个项目使用CML | 公用组件使用CML |
---|---|---|
关系图 | ||
说明 |
业务层需求在各端环境高度类似, 原本需要针对不同端重复开发、重复测试, 那么使用Chameleon将整个项目”从上至下“都用一套代码运行。 |
原本公用组件需要重复开发、重复测试, 使用一套代码开发公用组件, 各个端可以直接使用公用组件 |
举例 | 首页、详情页、订单 | 分享组件、支付组件、地图组件、picker组件 |
十、业内对比
业内其他框架和我们的目标不一样,我们是希望真正一套代码运行多端,而其他框架无非是“某个小程序语法增强”或者“推广某个框架写小程序 ”,但却是有重合点,列举一下功能对比:
十一、后期规划
十二、理想主义
1. 我们忍受不了自己的时间浪费在重复劳动上。
2. 要么不做要做就到极致,一套代码运行多端本来就是理想主义,这条路很艰苦,我们却偏执的坚信一定要尽最大努力做出来,作为一个不那么自 信的人,不做到好用是不敢发布出来的。
3. CML框架各个细节都要做到极致,我们不能容忍有设计上的缺陷,所以常常CML周会上团队成员讨论6个小时直到深夜。
快速开始:cml.js.org/doc/quick_s…
常见问题: https://cmljs.org/doc/framework/faq.html
张楠,共享出行类业务线增长研发后端与前端技术团队负责人,2015年加入滴滴,滴滴跨端解决方案chameleon开源项目负责人。
转载于:https://juejin.im/post/5ccfa5aae51d45368c317c83
Chameleon跨端框架——一个理想主义团队的开源作品相关推荐
- Chameleon跨端框架——壹个理想主义团队的开源作品
文章较长,信息量很大,请耐心阅读,必然有收获.下面正文开始~ 背景 解决方案 原理 久经考验 生产应用举例 易用性好 多态协议 学习成本低 渐进式接入 业内对比 后期规划 理想主义 历经近20个月打磨 ...
- uniapp开发实例github_跨端开发痛点?送你一款Vue最流行的跨端框架——uni-app
前言 今天来聊一下前端必备技能--小程序开发. 从最早发布的微信小程序,到后来的支付宝小程序.字节跳动小程序.百度小程序.QQ小程序,还有最近发布的360小程序,面对这么多套的代码,开发者该如何开发呢 ...
- RN-UI随机异常引出的跨端框架问题排错成本
1. 问题记录 短信召回需求 当用户收到短信后,点击链接启动本地版 APP,外部调起 RN 招聘页面. QA 反馈问题 在 vivo.华为等机器上,大概率出现 RN 页面崩溃,如下截图: 排查过程 ( ...
- uni-app:基于Vue的跨端框架(闪电演讲内容整理) | 掘金开发者大会
感谢掘金提供机会,跟大家闪电分享一下uni-app ^_^ 一句话介绍uni-app :一款基于vue的跨平台前端框架: 多说两句就是:开发者通过编写 Vue.js 代码,uni-app 将其编译到i ...
- 小程序多端框架全面测评 | 程序员硬核评测
作者 | 凹凸实验室 责编 | 伍杏玲 [CSDN 编者按]最近前端界多端框架频出,各巨头公司纷纷造出各家的轮子,例如滴滴的Chameleon.美团的Mpvue.京东的Taro.DCloud的uni- ...
- 顶级 Swift 服务端框架对决 Node.js
本文讲的是顶级 Swift 服务端框架对决 Node.js, 前言 最近我在做服务端 Swift 工作时,我被问到这样的问题: 「在服务端 Swift 能否击败 Node.js?」 Swift 是一个 ...
- 游戏服务端框架之本服实时排行榜
目录 设计背景 知识储备 数据结构封装 排行榜设计 设计背景 在游戏服务端框架之使用Redis实现跨服排行榜这篇文章里,讲述了如何使用Redis设计一个全服排行榜工具. 本文主要介绍如何实现一个本服的 ...
- 项目实训-千寻-服务端框架搭建
1.项目创建 服务端的开发工具,自然是选用Intellij IDEA了.新建项目,选择WebApplication.记得勾选create web.xml复选框.然后,基本就是一路"下一步&q ...
- Synergy,一个软件团队质量改进之路之一 --- 规划
关于质量改进 ISO9001:2000的核心思想是持续改进 ISO关于质量管理有8项原则: 原则一: 以顾客为关注焦点 原则二: 领导作用 原则三: 全员参与 原则四: 过程方法 原则五:管理的系统方 ...
最新文章
- “双一流”本科生可得13.2万补贴!这座城市发布重磅人才新政
- Singleton Pattern
- 返回的到的数据做整合_成功的整合营销有哪些秘诀
- ssh(struts,spring,hibernate)开发的初步集成01--依赖
- MySql-phpMyAdmin
- OpenShift 4 - DevSecOps Workshop (10) - 向Stage环境部署应用镜像
- 腾讯回应封杀质疑;王思聪评社交软件;董明珠连任格力董事长;| 极客头条...
- php接口防止app重复提交,AOP防止接口重复提交
- 苹果8黑屏无法强制开机_iphonexsmax死机黑屏,iphonexsmax无法开机
- 在MAC上安装mangodb
- 物联网技术的基站能耗监控解决方案
- 公司年会要求搞一个抽奖程序,及时安排一波
- 联想微型计算机m4350q升级,拆解:高度集成化的联想M4350q
- SQL注入SQLmap简单用法,和SQL注入写入一句话木马
- 健身日记 第二个平台期
- 《跑步人生》 作者:村上春树
- java程序员创业需要_java程序员出路有哪些
- linux动态监控机制
- 家居收纳打造一个美好的家-央央家政家居收纳
- Cannot serialize; nested exception is org.springframework.core.serializer.support.SerializationFail
热门文章
- 【无标题sdasd】
- Android蓝牙协议栈学习
- 傅立叶变换与小波分析(浅析)
- 嵌入式软件工程师面试题目整理(一)
- python打地鼠游戏代码_Python 0基础开发游戏:打地鼠(详细教程)VS code版本
- 我在CSDN的2022:突破零粉丝,4个月涨粉4000+,2023年目标5万+
- Freemarker+Fmpp简介
- apt-get install E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing
- python中将str转成数字_python如何将字符转换为数字
- 计算机学报杂志官网在线出版,计算机学报