前言
优酷客户端是一个多平台【Phone、Pad、OTT、MacPC】的文娱生态综合体,为了降低多端产品迭代的开发成本,并提供给用户高性能、一致的产品体验,优酷技术团队在19年底启动了跨平台动态模板引擎技术方案的攻坚。
作为内容分发的主体,优酷客户端在产品展现层的主要特点是组件设计的规范化和卡片化。优酷动态模板引擎在问题定义上将组件作为了我们的问题空间模型,不仅很好的规避了如Weex、React Native等技术方案的复杂度和工程量,让我们可以快速实验及工程化。其次也在根本上让技术方案脱离JS Bridge的老路,保证了端侧的高性能。
概述
组件化在目前的移动端来说是非常常见的组件UI形态,在优酷客户端的分发场景中,组件则更多的承载了影剧综漫等内容的信息呈现。
当然,组件本身可以通过组合或嵌套来形成更加复杂的展现模式,但从原子化角度来讲,作为单一元素来看,组件有着非常强的结构化特征,抽象后其逻辑构成如下:
1.视觉元素:控件,图片、文本、富文本等
2.布局:视觉元素的位置控制信息及元素绘制样式信息,如坐标及字体、字号等
3.数据:要真实表达给用户的有意义的信息,如影剧综漫的名称、演职员、封面海报等
4.事件:对用户交互的反馈及逻辑响应,如点按钮收藏、预约、关注等
所有的原子化组件都可以抽象为上述的元数据,那如何把这套数据结构进行有机组合形成模板,并在多端场景按照同样的行为表现进行渲染,是本篇文章要详细进行阐述的内容。
什么是模板
在概述中介绍到,我们可以将原子化的组件抽象为元素、布局、数据、事件四类核心信息,其中元素信息,我们通过JSON数据结构进行组织,来描述组件中的元素构成及层级关系;布