亲爱的朋友,你好,欢迎来到何平网络科技&织梦之家,你可以免费观看大量视频教程以及大量模板下载!

【第1521期DEDECMS织梦官网】Chameleon跨端框架-织梦之家(dedehome.com)

时间:2019-03-12 18:00 来源:织梦之家作者:织梦之家 点击:
在跨平台方案上除了有Flutter外,滴滴也出了一个Chameleon变色龙,一种适应差异情况的跨端整体办理方案,相识看看。这时候我们专门创立了一个1、2人的小项目组,

种种小措施已经能包围中国所有网民,从Facebook在2013年开源react,这个项目自己越滚越大。从最早的WebUI引擎衍生的ReactNative项目,方针更是雄伟。

Vue.js于2014年阁下宣布,逆流而上占据了大量用户群体,2016年阿里巴巴也基于vue宣布了weex项目,可以用vue编写NativeAPP。

Google在2018年末正式宣布了面向将来的跨Andoid、IOS端Flutter1.0.0,作为面向将来的跨端框架,前景一片光亮。

办理方案

让MVVM跨端情况大统一:以各个跨端技能(Weex、React-Native、WebView/欣赏器、Flutter)和产物业务(微信小措施、快应用、付出宝小措施、百度智能小措施、今天头条小措施、其他种种小措施)的配合技能特点——MVVM架构设计, 以统一MVVM跨端架构平台为方针的措施语言框架Chameleon(任意利用MVVM架构设计的终端,都能以Chameleon开拓并运行)。

View:

ChameleonSDK包罗种种小措施、web端、客户端(React-Native、Weex、Flutter),今朝支持微信小措施、Web、Weex三类,后续支持更多MVVM为尺度的端。

View Model:

CML(Chameleon MarkupLanguage)是框架设计的一套标签语言,团结基本组件、事件系统、数据绑定,可以构建出页面的布局。同时为了低落进修本钱支持类VueTemplate。

道理

【第1521期DEDECMS织梦官网】Chameleon跨端框架

久经磨练

2017年时微信小措施宣布,滴滴作为白名单用户首先开始实验接入。这时候我们专门创立了一个1、2人的小项目组,完成一个名为MPV的项目,一期方针是“不影响用户发挥,不依赖框架方的原则性实现一套代码运行web和微信小措施”。MPV研发完成后,在多个项目实践中,确实完成了高出90%代码重用,总体上开拓效率和测试效率都有了明明晋升,同时袒暴露更多问题,在MPV的实践积聚下,有了必然的底气和掌握,后续的筹划越发明了。

2018年4月我们把跨端项目局限进一步扩大,跨N端的办理方案命名为Chameleon/kmiln/,简写CML,中文名卡梅龙;中文意思变色龙,意味着就像变 色龙一样能适应差异情况的跨端整体办理方案。

Chameleon在MPV的实践积聚下,不只办理了遇到的各类可维护性问题,后续的筹划越发明了,方针真正专注于让一套代码运行多端,提供尺度的MVV M模式统一种种终端。

颠末一年数十位前端开拓人员在上百页面中的实践履历积聚,在本周正式灰度开源:https://github.com/didi/chameleon。

出产应用举例

【第1521期DEDECMS织梦官网】Chameleon跨端框架

易用性好

一套代码运行多端理念,被人挑战最多的如何担保易用性。

要害词:

多端归并后各端差别化实此刻所不免,一开始是差别化代码和业务逻辑稠浊在一起。这就难堪了,假如你以为以上不庞大,假设有4、5个端呢,业务逻辑掺杂跨端逻辑,产物逻辑别打断,可读性差,需求改观,牵一动员全身,每个端都要测试,跨端代码效率变得适得其反。

下图各端差别化代码也何物逻辑殽杂在一起

【第1521期DEDECMS织梦官网】Chameleon跨端框架

多态协议设计的灵感来自于Apache Thrift - 可伸缩的跨语言处事开拓框架,本质上跨端也属于跨语言。

它能让Chameleon开拓者快速接入各个客户端底层成果可能差别化业务实现,制止可读性差、可维护性差的问题。

多态协议通过界说尺度接口(interface),各端模块各自独立实现,编译时和运行时对实现的接口输入输出做查抄。

主要2个方针:

当用户凭据尺度类型扩展个体产物结果多端纷歧致或特定底层能力多端纷歧致的的成果时,多态协议可以有效断绝公用代码和各端差别代码,担保”河水不犯井水“。

【第1521期DEDECMS织梦官网】Chameleon跨端框架

举例:当你像开拓一个图表成果组件时,大概用到 echarts :

产出包内里只包括该组件个中一端的代码;因输入输出的限制,该组件调用上完全一致,不消按照某端做非凡逻辑处理惩罚。

你可以将该echart多态组件单独安排在一个客栈内里单独维护并宣布;其他人无需干系内部细节,直接npm install echart即可利用。

进修本钱低

VM层的CML语法是关联视图层和逻辑层的抽象DSL,其有进修本钱问题是被热心许多辅佐我们的同学提的最多发起,自己其CML进修本钱已经很是低,无非是数据双向绑定、事件绑定、组件树、条件语句、轮回遍历等等。一开始我们是拒绝的,厥后综合思量之下,照旧妥协支持了类vue语法,让开拓者更快上手CML。

渐进式接入

许多人已经开拓小措施了,DEDE模板下载,又不肯意大多阔斧从头改革,也但愿利用CML?虽然可以,2种方法利用CML:

整个项目利用CML

【第1521期DEDECMS织梦官网】Chameleon跨端框架

业务层需求在各端情况高度雷同,原本需要针对差异端反复开拓、反复测试,那么利用Chameleon将整个项目”从上至下“都用一套代码运行。

好比:首页、详情页、订单

公用组件利用CML

【第1521期DEDECMS织梦官网】Chameleon跨端框架

原本公用组件需要反复开拓、反复测试,利用一套代码开拓公用组件,各个端可以直接利用公用组件

好比:分享组件、付出组件、舆图组件、picker组件

业内比拟

业内其他框架和我们的方针纷歧样,我们是但愿真正一套代码运行多端,而其他框架无非是“某个小措施语法加强”可能“推广某个框架写小措施 ”,但却是有重合点,罗列一下成果比拟:

CML

通例成果(模板、数据打点、组件组成):CML/VUE、VUEX、单文

统一性:路由、项目、页面、组件、API、尺寸单元等各端利用一致

差别化:多态协议断绝差别化

Taro

通例成果(模板、数据打点、组件组成):JSX、redux、单文件

统一性:react框架、微信小措施组件、微信小措施API,奉告用户差别,织梦模板,用户按端兼容性调用

差别化:情况变量判断殽杂差别化

wepy

通例成果(模板、数据打点、组件组成):VUE、VUEX、单文件

统一性:仅支持微信小措施,不存在统一性

差别化:仅支持微信小措施,不存在差别性

Mpvue

通例成果(模板、数据打点、组件组成):Vue、Vuex、单文件

统一性:仅支持微信小措施,不存在统一性

差别化:情况变量判断殽杂差别化

weex

通例成果(模板、数据打点、组件组成):VUE、VUEX、单文件

统一性:vue框架、weex组件、weex API多端一致(只支持web+native)

差别化:情况变量判断殽杂差别化

weex

通例成果(模板、数据打点、组件组成):种种原生小措施

统一性:小措施模板、无、多文件

差别化:仅支持自身小措施,不存在差别性

后期筹划 易用性增强

A、查抄能力增强:潜在错误阻断在编辑时

B、编辑器插件语法查抄:Sublime text、Visual Studio Code、Webstorm

C、Chameleon playground:Debug东西增强

D、编辑器插件:代码提示

E、图形化界面建设和打点项目

框架优化

A、包巨细:优化各包巨细到70%(uglily后当前weex 136k wx 99.3k web 143k)

B、多端界面一致性增强:组件建设Web Component化

C、统一内置能力增强:Canvas、舆图、音频等

D、静态资源干系依赖:处事端按依赖自动加载资源包

端品类扩展

A、付出宝小措施:能力支持(测试中)

B、百度小措施:能力支持(测试中)

C、快应用:能力支持

D、端扩展协议尺度化:用户自由扩展新端

组件扩展

A、c-design:“开箱即食”的组件库 c-design ,任意端用户直接安装可用

B、垂直类组件库:金融、电商范例组件库

端能力扩展

A、Native API:Chameleon Native SDK能力向小措施靠齐

流程优化

快速开始:https://cmljs.org/doc/quick_start/quick_start.html

常见问题: https://cmljs.org/doc/framework/faq.html

感谢支持织梦之家,你的支持,我们的无限动力!!!
    “DEDECMS教程”欢迎分享!:

    相关标签:程序(721)框架(5)代码运行(3)webUI(3)Flutter(2)

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%

    欢迎您报错,或提出宝贵建议,我们将第一时间处理,为大家营造一个良好网上交流平台,感谢支持织梦之家!