写点什么

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

  • 2019-01-29
  • 本文字数:2095 字

    阅读完需:约 7 分钟

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

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

背景

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

设计理念

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


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

跨端目标

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


学习全景图

开发语言

从事过网页编程的人知道,网页编程采用的是 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 等等,覆盖了开发工作中常用的组件。


详情请查看:https://cmljs.org/doc/component/component.html

丰富的 API

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


详情请查看:https://cmljs.org/doc/api/api.html

自由定制 API 和组件

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

智能规范校验

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


详情请查看:


https://cmljs.org/doc/framework/linter.html

渐进式跨端

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


先进前端开发体验

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

框架

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


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

脚手架工具

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

目录结构

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

视图层与逻辑层

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

多态协议

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

规范校验

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

后续规划


有关安装、使用过程以及常见问题解答,请查看以下链接:



更多内容,请关注前端之巅。



2019-01-29 07:0018321

评论

发布
暂无评论
发现更多内容

扫码填表时,如何快速填充上次提交的内容?

草料二维码

YashanDB谈数据库未来出路和方向——回归商业本质 | YashanDB DTCC 2024 首秀

极客天地

观测云对接 Pinpoint 最佳实践

观测云

Pinpoint

望繁信科技携手松下信息,共话制造业的数智应用之道

望繁信科技

数字化转型 流程挖掘 流程智能

ETL数据集成丨为什么没有做好ETL的BI工具最终都会失败?

RestCloud

数据处理 BI ETL 数据集成

如何根据API返回值优化商品搜索关键词

技术冰糖葫芦

API Explorer API 测试 API】 API 策略

为什么重写hashCode一定也要重写equals方法?

不在线第一只蜗牛

Java 基础

云手机:TikTok运营的必备工具

Ogcloud

云手机 海外云手机 tiktok云手机 云手机海外版 tiktok运营

深度挖掘市场趋势:利用京东商品列表数据接口进行高效数据分析的技术实践

tbapi

京东商品列表数据接口

免费做ppt的网站哪个好?这个AI制作PPT神器不容错过!

职场工具箱

效率工具 职场 PPT AIGC AI生成PPT

成为顶尖1%前端开发者的10项必备技能

伤感汤姆布利柏

电商搜索革命:大模型如何重塑购物体验?| AICon

京东零售技术

LLM 企业号2024年8月PK榜

程序员如何选择博客平台?

博客趣

个人博客 博客搭建 博客平台

图解Kafka:Kafka架构演化与升级!

王磊

ClkLog埋点分析系统常见问题-埋点集成篇Sec. 1

ClkLog

开源 埋点 用户行为分析 画像 埋点分析

XSKY 亮相中国移动智算存储论坛,共话 AI 存储创新之路

XSKY星辰天合

软件测试学习笔记丨SQL子查询实战练习

测试人

软件测试

京东商品列表数据接口:开启电商数据洞察之门

tbapi

京东API接口 京东商品列表数据接口

火山引擎联合Unity中国,共探游戏行业云计算+AI新场景

新消费日报

万字揭秘:助力单测提效,覆盖率八成无忧!

京东零售技术

测试 单元测试 企业号2024年8月PK榜

如何利用代理IP提升跨境市场竞争力?

IPIDEA全球HTTP

大型数字化企业怎么定义?为什么说大型数字化企业更需要堡垒机?

行云管家

数字化 等保

无需多部备用机,云手机方便又便宜!

Ogcloud

云手机 海外云手机 云手机海外版 云手机群控 云手机推荐

掌握VS Code:提升前端开发效率的秘诀

秃头小帅oi

Python中的random模块及相关模块详解

我再BUG界嘎嘎乱杀

Python 编程 后端 random 开发语言

低代码开发与项目管理工作流优化

不在线第一只蜗牛

项目管理 低代码 定制化

滴滴重磅开源跨平台统一MVVM框架Chameleon_开源_Conan_InfoQ精选文章