全自研客户端技术方案：优酷跨端动态模板引擎优酷跨端动态模板引擎

前言

优酷客户端是一个多平台【Phone、Pad、OTT、MacPC】的文娱生态综合体，为了降低多端产品迭代的开发成本，并提供给用户高性能、一致的产品体验，优酷技术团队在19年底启动了跨平台动态模板引擎技术方案的攻坚。
作为内容分发的主体，优酷客户端在产品展现层的主要特点是组件设计的规范化和卡片化。优酷动态模板引擎在问题定义上将组件作为了我们的问题空间模型，不仅很好的规避了如Weex、React Native等技术方案的复杂度和工程量，让我们可以快速实验及工程化。其次也在根本上让技术方案脱离JS Bridge的老路，保证了端侧的高性能。

概述

组件化在目前的移动端来说是非常常见的组件UI形态，在优酷客户端的分发场景中，组件则更多的承载了影剧综漫等内容的信息呈现。

当然，组件本身可以通过组合或嵌套来形成更加复杂的展现模式，但从原子化角度来讲，作为单一元素来看，组件有着非常强的结构化特征，抽象后其逻辑构成如下：
1.视觉元素：控件，图片、文本、富文本等
2.布局：视觉元素的位置控制信息及元素绘制样式信息，如坐标及字体、字号等
3.数据：要真实表达给用户的有意义的信息，如影剧综漫的名称、演职员、封面海报等
4.事件：对用户交互的反馈及逻辑响应，如点按钮收藏、预约、关注等
所有的原子化组件都可以抽象为上述的元数据，那如何把这套数据结构进行有机组合形成模板，并在多端场景按照同样的行为表现进行渲染，是本篇文章要详细进行阐述的内容。

什么是模板

在概述中介绍到，我们可以将原子化的组件抽象为元素、布局、数据、事件四类核心信息，其中元素信息，我们通过JSON数据结构进行组织，来描述组件中的元素构成及层级关系；布局信息中布局关系通过符合css3规范的flexbox