滴滴重磅开源跨平台统一MVVM框架Chameleon

近日&＃xff0c;滴滴在GitHub上开源了跨端解决方案 Chameleon&＃xff0c;简写CML&＃xff0c;中文名卡梅龙&＃xff1b;中文意思变色龙&＃xff0c;意味着就像变色龙一样能适应不同环境的跨端整体解决方案&＃xff0c;具有易用、开发快、高性能等特点。下文将详细介绍Chameleon项目的研发背景和性能特点。

背景

研发同学在端内既追求h5的灵活性&＃xff0c;也要追求性能趋近于原生。 面对入口扩张&＃xff0c;主端、独立端、微信小程序、支付宝小程序、百度小程序、Android厂商联盟快应用&＃xff0c;单一功能在各平台都要重复实现&＃xff0c;开发和维护成本成倍增加。迫切需要维护一套代码可以构建多入口的解决方案&＃xff0c;历经近20个月打磨&＃xff0c;滴滴跨端解决方案Chameleon终于发布&＃xff0c;真正专注于让一套代码运行多端。

设计理念

软件架构设计里面最基础的概念“拆分”和“合并”&＃xff0c;拆分的意义是“分而治之”&＃xff0c;将复杂问题拆分成单一问题解决&＃xff0c;比如后端业务系统的”微服务化“设计&＃xff1b;“合并”的意义是将同样的业务需求抽象收敛到一块&＃xff0c;达成高效率高质量的目的&＃xff0c;例如后端业务系统中的“中台服务”设计。

而 Chameleon 属于后者&＃xff0c;通过定义统一的语言框架&＃43;统一多态协议&＃xff0c;从多端&＃xff08;对应多个独立服务&＃xff09;业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”。

跨端目标

虽然不同各端环境千变万化&＃xff0c;但万变不离其宗的是 MVVM 架构思想&＃xff0c;Chameleon 目标是让MVVM跨端环境大统一。

学习全景图

开发语言

从事过网页编程的人知道&＃xff0c;网页编程采用的是HTML &＃43; CSS &＃43; JS这样的组合&＃xff0c;同样道理&＃xff0c;chameleon中采用的是 CML &＃43; CMSS &＃43; JS。

JS语法用于处理页面的逻辑层&＃xff0c;与普通网页编程相比&＃xff0c;本项目目标定义标准MVVM框架&＃xff0c;拥有完整的生命周期&＃xff0c;watch&＃xff0c;computed&＃xff0c;数据双向绑定等优秀的特性&＃xff0c;能够快速提高开发速度、降低维护成本。

CML&＃xff08;Chameleon Markup Language&＃xff09;用于描述页面的结构&＃xff0c;我们知道HTML是有一套标准的语义化标签&＃xff0c;例如文本是\u0026lt; span\u0026gt; 按钮是\u0026lt; button\u0026gt;。CML同样具有一套标准的标签&＃xff0c;我们将标签定义为组件&＃xff0c;CML为用户提供了一系列组件。同时CML中还支持模板语法&＃xff0c;例如条件渲染、列表渲染&＃xff0c;数据绑定等等。同时&＃xff0c;CML支持使用类VUE语法&＃xff0c;让你更快入手。

CMSS(Chameleon Style Sheets)用于描述CML页面结构的样式语言&＃xff0c;其具有大部分CSS的特性&＃xff0c;并且还可以支持各种css的预处语言less stylus。

通过以上对于开发语言的介绍&＃xff0c;相信你看到只要是有过网页编程知识的人都可以快速的上手chameleon的开发。

丰富的组件

在用CML写页面时&＃xff0c;chameleon提供了丰富的组件供开发者使用&＃xff0c;内置的有button switch radio checkbox等组件&＃xff0c;扩展的有c-picker c-dialog c-loading等等&＃xff0c;覆盖了开发工作中常用的组件。

详情请查看&＃xff1a;https://cmljs.org/doc/component/component.html

丰富的API

为了方便开发者的高效开发&＃xff0c;chameleon提供了丰富的API库&＃xff0c;发布为npm包chameleon-api&＃xff0c;里面包括了网络请求、数据存储、地理位置、系统信息、动画等方法。

详情请查看&＃xff1a;https://cmljs.org/doc/api/api.html

自由定制API和组件

基于强大的多态协议&＃xff0c;可自由扩展任意API和组件&＃xff0c;不强依赖框架的更新。各端原始项目中已积累大量组件&＃xff0c;也能直接引入到跨端项目中使用。

智能规范校验

代码规范校验&＃xff0c;当出现不符合规范要求的代码时&＃xff0c;编辑器会展示智能提示&＃xff0c;不用挨个调试各端代码&＃xff0c;同时命令行启动窗口也会提示代码的错误位置。

详情请查看&＃xff1a;
https://cmljs.org/doc/framework/linter.html

渐进式跨端

很多人已经开发小程序了&＃xff0c;又不愿意大多阔斧重新改造&＃xff0c;也希望使用CML&＃xff1f;当然可以&＃xff0c;2种方式使用CML&＃xff1a;

先进前端开发体验

Chameleon 不仅仅是跨端解决方案。基于优秀的前端打包工具Webpack&＃xff0c;吸收了业内多年来积累的最有用的工程化设计&＃xff0c;提供了前端基础开发脚手架命令工具&＃xff0c;帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。

框架

Chameleon 不仅仅是跨端解决方案&＃xff0c;让开发者高效、低成本开发多端原生应用。基于优秀的前端打包工具Webpack&＃xff0c;吸收了业内多年来积累的最有用的工程化设计&＃xff0c;提供了前端基础开发脚手架命令工具&＃xff0c;帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。

框架提供了自己的视图层描述语言CML 和 CMSS&＃xff0c;以及基于 Javascript 的逻辑层框架&＃xff0c;并在视图层与逻辑层间提供了数据传输和事件系统&＃xff0c;让开发者能够专注于数据与逻辑。

脚手架工具

基于node开发的脚手架工具&＃xff0c;提供简洁的命令&＃xff0c;进行初始化与构建项目。

目录结构

\u0008提供规范化的项目结构&＃xff0c;适合于企业级大型应用的开发&＃xff0c;CML单文件组件的开发模式更有利于提高开发效率与优化文件组织结构。

视图层与逻辑层

视图层由 CML 与 CMSS 编写&＃xff0c;逻辑层由JS编写&＃xff0c;chameleon的核心是一个标准\u0008响应式数据驱动视图更新的MVVM框架。

多态协议

提供了跨端时各端底层组件与接口统一的解决方案&＃xff0c;使开发者可以自由扩展原生api与组件\u0008。

规范校验

为了提高开发的效率与代码的可维护性&＃xff0c;chameleon提供了全面的代码规范与校验&＃xff0c;\u0008帮助开发者能够得到更好的开发体验。

后续规划

有关安装、使用过程以及常见问题解答&＃xff0c;请查看以下链接&＃xff1a;

• FAQ&＃xff1a;https://cmljs.org/doc/framework/faq.html

• GitHub&＃xff1a;https://github.com/didi/chameleon

• chameleon官网&＃xff1a;cml.js.org

更多内容&＃xff0c;请关注前端之巅。