摘要：跨端框架壹个理想主义团队的开源作品历经近个月打磨，滴滴跨端方案终于开源了真正专注于一套代码运行多端。这时候我们专门成立了一个人的小项目组，完成一个名为的项目，一期目标是不影响用户发挥，不依赖框架方的原则性实现一套代码运行和微信小程序。
Chameleon跨端框架——壹个理想主义团队的开源作品
历经近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开发并运行)。
ChameleonSDK包括各类小程序、web端、客户端(React-Native、Weex、Flutter)，目前支持微信小程序、Web、Weex三类，后续支持更多MVVM为标准的端。
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个端呢，业务逻辑掺杂跨端逻辑，产品逻辑别打断，可读性差，需求变更，牵一发动全身，每个端都要测试，跨端代码效率变得适得其反。
下图各端差异化代码也和逻辑混合在一起
-7b1535c36a260b577f497853d62268cb.png)
多态协议设计的灵感来自于Apache Thrift - 可伸缩的跨语言服务开发框架，本质上跨端也属于跨语言。
它能让Chameleon开发者快速接入各个客户端底层功能或者差异化业务实现，避免可读性差、可维护性差的问题。
多态协议通过定义标准接口(interface)，各端模块各自独立实现，编译时和运行时对实现的接口输入输出做检查。
主要2个目标:
保障多端可维护性
编译时拆分多端代码
当用户按照标准规范扩展个别产品效果多端不一致或特定底层能力多端不一致的的功能时，多态协议可以有效隔离公用代码和各端差异代码，保证”河水不犯井水“。
举例:当你像开发一个图表功能组件时，可能用到 echarts :产出包里面只包含该组件其中一端的代码;因输入输出的限制，该组件调用上完全一致，不用根据某端做特殊逻辑处理。你可以将该echart多态组件多带带放置在一个仓库里面多带带维护并发布;其他人无需关系内部细节，直接npm install echart即可使用。
学习成本低VM层的CML语法是关联视图层和逻辑层的抽象DSL，其有学习成本问题是被热心很多帮助我们的同学提的最多建议，本身其CML学习成本已经非常低，无非是数据双向绑定、事件绑定、组件树、条件语句、循环遍历等等。一开始我们是拒绝的，后来综合考虑之下，还是妥协支持了类vue语法，让开发者更快上手CML。
渐进式接入很多人已经开发小程序了，又不愿意大多阔斧重新改造，也希望使用CML？当然可以,两种方式使用CML:
业内对比业内其他框架和我们的目标不一样，我们是希望真正一套代码运行多端，而其他框架无非是“某个小程序语法增强”或者“推广某个框架写小程序 ”，但却是有重合点，列举一下功能对比:
快速开始：https://cmljs.org/doc/quick_start/quick_start.html
常见问题: https://cmljs.org/doc/framework/faq.html
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101505.html
摘要：中国互联网络信息中心发布的中国互联网络发展状况统计报告显示，截至年月，我国网民规模达亿人，微信月活亿支付宝月活亿百度月活亿另一方面，中国手机占智能手机整体的比例超过，月活约亿。在年末正式发布了面向未来的跨端的。 开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？ 原创： 嘉宾-张楠 开源中国 以往我们说某一功能跨多端，往往是指在诸如 PC、移动等不同类型的设备之...
摘要：基于对跨端工作的积累，规范了一套跨端标准，称之为协议开发者只需要按照标准扩展流程，即可快速扩展任意架构模式的终端。实现了微信端的基本扩展，用户可以以此为模板进行开发。新框架太多？学不动啦？有这一套跨端标准，今后再也不用学习新框架了。各个小程序按自己喜好各自为政？有了这套标准，再也不用重复开发各种新平台啦。如今前端比较流行的 React Native、Weex、Flutter 等跨平台开发框架...
摘要：但是从年微信推出小程序，到至今各大厂商都推出自己的小程序，跨端开发就不仅仅是技术的问题了。实现了微信端的基本扩展，用户可以以此为模板进行开发。 新框架太多？学不动啦？有这一套跨端标准，今后再也不用学习新框架了。 各个小程序按自己喜好各自为政？有了这套标准，再也不用重复开发各种新平台啦。 如今前端比较流行的 React Native、Weex、Flutter 等跨平台开发框架，对于开发来...
摘要：在编写跨端组件的正确姿势上篇中，我们介绍了如何使用第三方库封装跨端组件，但是绝大多数组件并不需要那样差异化实现，绝大多数情况下我们推荐使用语法统一实现跨端组件。 在chameleon项目中我们实现一个跨端组件一般有两种思路：使用第三方组件封装与基于chameleon语法统一实现。在《编写chameleon跨端组件的正确姿势(上篇)》中， 我们介绍了如何使用第三方库封装跨端组件，但是绝大...
阅读 2415·2021-11-25 09:43
阅读 1195·2021-09-07 10:16
阅读 2602·2021-08-20 09:38
阅读 2935·2019-08-30 15:55
阅读 1448·2019-08-30 13:21
阅读 883·2019-08-29 15:37
阅读 1434·2019-08-27 10:56
阅读 2091·2019-08-26 13:45
