滴滴跨端解决方案 Chameleon

滴滴跨端解决方案 Chameleon

Apache
JavaScript
跨平台
滴滴出行
2019-01-29
程六金

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

设计理念

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

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

跨端目标

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

Alt text

学习全景图

Alt text

开发语言

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

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

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

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

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

丰富的组件

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

丰富的API

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

自由定制API和组件

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

智能规范校验

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

渐进式跨端

既想一套代码运行多端,又不用大刀阔斧的重构项目,可以将多端重用组件用 Chameleon 开发,直接在原有项目里面调用。

先进前端开发体验

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

的码云指数为
超过 的项目
加载中

评论(5)

飞飞1234
飞飞1234
不错,抽空试试
sjz子游
sjz子游
怎么安装呢?
zhjphp
zhjphp
京东也造了一套,哪个好?
i
iman123
让我想到了黑苹果的引导器了
开源中国神盾局局长
新轮子吗?老司机求带

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

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

01/29 08:25

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

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

文章较长,信息量很大,请耐心阅读,必然有收获。下面正文开始~ 背景 解决方案 原理 久经考验 生产应用举例 易用性好 多态协议 学习成本低 渐进式接入 业内对比 后期规划 理想主义 历经近20个...

02/01 13:49
954
3
Contiki——Rime Stack分析

Contiki的Rime Stack的源代码追踪与分析。

2014/06/14 09:33
91
0
Contiki——Chameleon理解

Contiki通信架构中Chameleon的分析。

2014/06/14 09:36
29
0
Fiddler抓包滴滴报文查看举例

Fiddler以及证书的配置使用不说了。 使用手机打开滴滴APP,电脑上fiddler 报文1条如下,仅供学习 请求 已隐去电话,ID,地名,修改了经纬度 POST http://poi.map.xiaojukeji.com/mapapi/loca...

2018/10/31 00:56
31
0
关于使用VirtualAPK插件加载Activity的时候抛Activity找不到异常,未注册的问题

在使用didi/VirtualAPK插件的时候,抛ActivityNotFoundException的问题,如: 解决方案: 1,检查有没有在Application中初始化插件引擎 2,检查是否开启内存读写权限,并检查插件是否加载进指...

2018/08/27 16:50
49
0
[皇室战争]:2016年苹果中国区最佳游戏_广州达内Unity3D培训机构

AppStore今天公布了中国地区“2016年度最佳”游戏精选,年度最佳游戏由《部落冲突:皇室战争》获得,年度优秀游戏由《Chameleon Run》获得。 今年苹果还发布了包括“2016年我们喜欢一个人玩”...

2016/12/08 09:22
6
0
Rime&Contiki Chameleon

关于Contiki通信协议栈架构的论文摘要《An Adaptive communication Architecture for Wireless Sensor Nerworks》

2014/06/14 09:29
37
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部