DreamBox统一视图开发框架
DreamBox 是一个为客户端打造的、具有动态化功能、性能优秀的统一视图开发框架。
DreamBox 本身是一个视图容器,容器内部的内容可以通过线上下发的方式任意动态化更新。而且并不集成运行时虚拟机,最大程度贴近原生开发,没有中间商吃内存、耗性能。
目标
DreamBox
立志于能在双端的原生视图框架和运行时之上搭建一个统一的、具备动态化能力、可以灵活扩展的视图开发框架,同时保持优秀的运行时性能,并不断建设组件和落地生态,降低50%的客户端视图开发工作量,让开发人员腾出双手做更多更有意义的事情。
基本原理
DreamBox
选择了:
- 仿照Android约束布局进行DSL的初版定义,后期结合实际情况分支发展。这样一来,大大降低Android开发者的学习门槛。另外,有限的DSL规则和属性远比学习一门真正的语言来的更快,iOS开发同学的掌握速度也较快
- 不集成语言运行时,进行静态解析。通过这种方式,让DB的运行时生命周期足够短暂,避免依附View存活而带来的持续的内存消耗问题。另一方面,因为没有语言运行时,动态解析的性能损耗大大降低
粗粒度上,DreamBox
通过以下几个步骤完成了整体功能:
- 开发者编写DSL
- 编译器编译DSL为DB Runtime可以接受的数据格式
- DB Runtime解析数据并映射为原生数据、绑定交互事件
- 原生运行时进行渲染并传递交互事件
- DB Runtime响应交互事件做动作
简而言之,DreamBox
定义了一套统一的DSL,在Android和iOS的原生视图框架和运行时的基础上,搭建了另一个运行时。这个运行时生命周期短、内存损耗小,将这一套DSL分别映射成两个系统能够接受的数据,完成了展现一致、体验一致的视图页面。
功能特性
先通过一个Gif简单认识下
DreamBox
将一个视图中的各种元素分为三类:
- 视图元素,这类元素就是直接展示在用户眼前的View。这类元素可以动态化改变其内部属性和外部布局
- 交互、回调元素,视图的点击、长按等交互事件或动作发生后的回调统称为这类元素。它们是视图背后交互逻辑的触发点
- 动作元素,如网络请求、日志、弹窗、打电话等等这些隐藏在视觉背后的、由交互、回调元素触发的归为此类
比如:一个卡片的组成是图片+按钮,当按钮点击时,跳转另一个页面。这句话中,图片、按钮以及他们的布局关系就是视觉元素
,按钮的点击就是交互、回调元素
,最后的跳转就是动作元素
。
DreamBox
所支持的功能特性有:
- 支持视图元素的复杂约束关系布局,每一个元素可以在横纵坐标轴上相对于其他元素进行标记定位,相比
flex
这能支持一些更复杂的场景需求 - 不仅仅是视图元素,支持对以上三个元素都进行动态修改
- 支持三方进行DSL扩展,以适应更加复杂、更加具体的需求场景
- 支持通过
Event API
与原生运行时进行双工通信,满足一些DB框架无法满足的功能需求 - 支持通过
Playground
或debug-tool
的集成达成实时调试预览的效果 - 支持单个App中多个引擎实例集成,互不干扰
- 支持复杂的数据使用场景,包含内置固定、二次请求以及原生透传
- 内置10余个视图组件,包含列表和流式布局
- 内置10余个动作功能,部分基础功能接入方可以自行接管具体实现
- 细粒度低至View,可在页面中自由嵌入使用
详细功能请参见开发手册
评论