滴滴跨端解决方案 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,吸收了业内多年来积累的最有用的工程化设计,提供了前端基础开发脚手架命令工具,帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。

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

评论(6)

用双手撸码
用双手撸码
目前不建议入手,坑比较多
飞飞1234
飞飞1234
不错,抽空试试
sjz子游
sjz子游
怎么安装呢?
zhjphp
zhjphp
京东也造了一套,哪个好?
iman123
iman123
让我想到了黑苹果的引导器了
开源中国神盾局局长
开源中国神盾局局长
新轮子吗?老司机求带

Uber 上市了,国内对标的“滴滴”有什么开源软件?

Uber 上周上市了,我们整理了 Uber 的一些开源软件,详细列表请看这里。 滴滴是对标 Uber 的中国公司,滴滴在开源领域也有不少知名的开源项目。 下面是开源中国整理的滴滴公司的开源项目: ...

2019/05/14 07:33

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

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

2019/01/29 08:25

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

Hystrix:HystrixCollapser请求合并

偶尔在spring4all,看到DiDi关于hystrix请求合并的一篇文章 Spring Cloud Hystrix的请求合并,查阅资料又整理了一下。 具体业务概念,什么是请求合并?请求合并优缺点?可以参考DiDi的文章,...

2017/11/30 21:40
988
0
可以放在页面任何地方de 天气插件

<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>天气</title> <meta name="viewport"content="width=device-width,initial-scale=1"/> <styletype="text/css"> .xc{ width: 200...

2017/10/22 14:55
20
0
在Solr4.9中使用IKAnalyzer,实现同义词,扩展词库,停顿词的添加

在使用solr4.9的过程中,使用了IKAnalyzer分词器,其中遇到了不少问题,现在做个记录,以备后续只用。 首先使用IKAnalyzer是看到群里有人介绍,但是貌似现在IKAnalyzer已经没人更新了。。。不...

2014/09/11 09:18
4.4K
0
swift 开源库

1. DZNEmptyDataSet [UI, 空table view解决方案] 2. PDTSimpleCalendar [UI, 可放入日历组件] 3. MagicalRecord [Core Data帮手实现活动记录模式] 4. Chameleon [UI, 颜色框架] 5. Alamofir...

2016/06/24 17:42
66
0
在PC 机上安装 MAC 10.7.1 黑苹果。开发APPLE 应用。

加入开源中国这么长时间,未对大家作贡献。实现抱歉。 所以想给力一下,好是做个开始。为大家介绍 黑苹果 MAC 10.7.1 的安装方案。 这个系统可能对想写APPLE 程序的朋友有帮助哦。。因为你不...

2011/10/31 11:05
3K
0
Spring Boot 整合 MyBatis

最近项目原因可能会继续开始使用MyBatis,已经习惯于spring-data的风格,再回头看xml的映射配置总觉得不是特别舒服,接口定义与映射离散在不同文件中,使得阅读起来并不是特别方便。 Spring...

2019/06/24 11:02
620
0
老师儿学习IOS 之 一 “实现description方法”

主讲输出信息的形式,和debug时输出信息的不同配置。

2014/03/27 21:53
128
0
Spring Cloud Alibaba基础教程:支持的几种服务消费方式(RestTemplate、WebClient、Feign)

通过《Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现》一文的学习,我们已经学会如何使用Nacos来实现服务的注册与发现,同时也介绍如何通过LoadBalancerClient接口来获取某个服...

2019/01/27 08:55
672
0
(转)直接拿来用!最火的iOS开源项目(二)

“每一次的改变总意味着新的开始。”这句话用在iOS上可谓是再合适不过的了。GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7,有的项目...

2013/06/21 10:41
3.9K
2

没有更多内容

加载失败,请刷新页面

返回顶部
顶部