作者 | 阿里文娱前端技术专家-默吉
责编 | 郑丽媛
头图 | CSDN 下载自视觉中国

转眼间2020年已过半，我投身到OTT端开发已经5年有余，回首OTT端（酷喵APP）前端建设历程，感慨良多。经历了从0到1的艰难起步，也经历了从1到N的合力前行；有过通宵达旦的debug之夜，也有过阳光和顺的高光时刻。以下和大家分享优酷OTT端前端的技术历程。

背景

OTT是什么？

简单来说，“OTT”名词解释为over the top，原为篮球运动名词，“过顶传球”之意，后引申为通过互联网向用户提供各种应用服务，这种服务主要由运营商之外的第三方提供。

OTT端上都有什么？

OTT端开发规范和逻辑与手机端APP属于一脉，一般由Android系统做底层支持，由APP开发人员开发不同类型软件应用。本文中的OTT端建设，为优酷“OTT端酷喵APP”建设。

前端在OTT端扮演什么角色？

说起来，前端开发与APP Native开发为互补关系，OTT端酷喵APP主框架为Native开发实现，而活动坑位投放、部分APP功能页、快速发版补位项目则需要前端介入开发,尤其以“活动坑位投放”最为常见，因其内容形式多样化，发版频率高等特点，并不适合使用Native开发，二者恰巧是前端优势所在。

这几年我们都做了什么？

自2015年的“OTT影视大厅”APP，到后来的“华数牌照方影视”APP，再到现在的“酷喵APP”，历经多轮端APP衍生发展，多次迭代升级优化前端相关能力。

那么OTT端与其它端有很大不同吗？

是的，纵观M端、PC端以及Pad端，用户可以通过鼠标、键盘、触控方式进行页面交互，但在OTT端所有基本操作均依赖“遥控器”进行操作，这也就决定了其人机交互与其它端存在本质差异，“焦点引擎”概念应运而生。

焦点引擎

我们先来看看TV用户交互的现状，我们只有一个遥控器，上下左右和ok键能分别映射到键盘的四个方向键和enter键；我们可以监听document的key事件来做焦点的切换逻辑。那么问题来了，作为一个业务开发者，难道要为每个页面花精力去处理“按了一下右键，下一步应该选中哪一块区域”诸如此类的问题？难道就不能像鼠标操作那样指哪打哪？

其实，所谓的“指哪打哪”是认知学上的问题。而无论在什么设备下，用户和开发者对人机交互都有符合心理预期的诉求。只是PC和手机上页面的人机交互都已经做得十分到位，而TV则不然。所以，我们希望通过一些手段，使TV上的页面交互更顺畅自然，尤其对于业务开发者，你的代码逻辑、风格，还有代码量能够趋近于PC和手机端的H5页面就是我们最大的愿景。

作为专注于TV前端开发的团队，我们设计了一套组件树管理和焦点管理的机制，来对TV上的交互行为进行抽象。使它托管页面中焦点的切换，帮助开发者从繁琐的焦点处理中释放出来，开发者只需要专注于业务代码的书写，提高开发效率。

接下来，我们从组件树、焦点管理两个方面对“焦点引擎”进行简单介绍：

组件树

通过对TV端页面的切分，我们大致确定了使用频次比较高的一些模块：水平/垂直列表、多方向无序排列模块、滚动列表等。

我们希望把这些模块抽象成组件，组件内部可以自动实现各个元素间的焦点切换。同时，一个页面中的各个组件间的切换也应该对开发者透明。为此，我们把这些组件以树形结构组织，组件的层次关系有助于生命周期管理和事件流传递，为焦点管理的实现提供良好基础。

Widget是组件的基础类，拥有指向其父节点的属性parentWidget，同时实现增删改查方法管理子节点数组childWidgets。上述模块都是基于基础类的扩展。具体而言，基础类并不直接实现其子节点间的焦点切换功能，而是交由扩展类内部实现，如水平列表实现左右按键的焦点切换，多方向无序排列模块实现了多种焦点感知算法，滚动列表实现了TV端焦点切换时的页面滚动逻辑。下面的例子展现了一个页面的模块划分到组件树的映射过程：

需要强调的是，虽然html天然就是树形结构，但由于TV中焦点管理相关的逻辑和事件并没有原生实现，所以我们仍然需要把dom树映射成组件树以方便功能注入。

焦点管理

焦点管理主要有两个技术点，其一是事件模拟和组件树中的事件流管理，其二是焦点链路的构建。

尽管js里支持keydown、focus、blur这样的事件，但这些事件只能够在可选中的元素（focusable elements）或document上触发。TV上对于可选中的定义则要复杂得多，几乎所有的视觉元素都是可选中的，默认的切换行为往往无所适从。

我们对组件模块增加on、detach、fire这样的事件管理方法，事件的触发允许在组件树中冒泡。另外实现了Event.Base事件类，可以方便地扩展出事件流中传递的事件，如Event.KeyEvent、Event.FocusEvent、Event.SelectEvent等。

有了事件的模拟，焦点情况已然明朗开来：如果是组件切换逻辑的触发，整个流程应该从最左端开始；如果通过调用组件的focus()方法进行聚焦，则从focus这一步开始。焦点切换的执行流程大致如下图所示，

以上就是OTT端的特色点“焦点引擎”介绍，这属于技术层面的基础架构支撑。回归到业务中，正如上文所讲，“活动坑位投放”开发为前端开发业务重头戏，我们以“可视化搭建”为方向，提高开发效率、提升页面质量。并在其它业务并行情况下，进行能力升级，积极拓展前端赋能。

前端能力覆盖也由最早期活动投放页面开发，延伸到现阶段的OTT端页面搭建、半屏互动、APP功能单元、质量监控等多个领域。而在前端加载体验方面，也取得质的提升，尤其是秒开率、crash率等指标。在这个漫长的建设过程中，我们大体经历了三个阶段 “石器时代”、“农耕时代”、“工业时代”。

时代建设

石器时代---源码开发时期（AWP）

最开始主要以源码开发为主，每个活动都需要开发同学从零开始搭建，效率低，当活动积累了一定阶段后，我们抽离出通用组件，开发效率上稍有好转，比如3天的开发变成了1.5天。但本质上没有解决问题，尤其是当运营的活动页面需要频繁调整时，前端同学被折磨的死去活来。运营一点内容的修改，比如更换图片的位置大小等，前端都会发布新的版本，硬编码的这种方式确实是硬伤。尤其到了双11，前端集体上阵，被活动页面折磨的好生痛苦……这个时期持续了半年多，大家寻找着新的方式。

问题：源码开发比较方便，符合前端开发习惯，通过常用组件的沉淀效率有所提升，但无法解决活动页面频繁调整的问题。

【AWP源码开发】

农耕时代---模版开发时期（TMS/Zbra）

这个时期主要是模版化时期，通过坑位的配置解决开发效率的问题，技术同学与UED沟通制定出通用的OTT端通用型模版，例如每周大片专题模版、棋牌抽奖活动、倒计时模版等等，基本解决了运营效率的问题。

问题：这种方式依然有局限性，需要用约定的形式规范化内容，限制运营同学的创造力。这一阶段持续了半年之久，可以满足运营的基础需求，但面对不断推陈出新的活动形式，模版方式显得越来越力不从心……

【TMS活动模版】

【Zebra斑马模版】

工业时代---可视化搭建时期（ARK搭建平台）

最终，我们参考了阿里集团的可视化搭建系统，2017年尝试打造一套适合TV端的搭建方案。如果从零开始，肯定是一条漫长之路，涉及很大的开发量。由于之前一直在使用阿里集团内B搭建系统，我们发现这些能力B系统都基本具备，那么我们为什么不借力，站在巨人的肩膀上？于是我们将页面的托管能力收敛到B系统的底层服务上。接下来，我们开始了研发阶段，当时投入的同学还历历在目，服务端开发震动负责对接B系统的所有node服务，我主要负责前端部分，经过2个多月的努力，我们发布了第一个beta版本「2016-11-04」。

【ARK可视化搭建】

超越时代---前端多元化赋能

在完成标准化、高效化建设后，满足日常运营需求已不在话下，而我们则将方向转移至技术多元化赋能上，逐步完成多项创新建设，推动业务建设。

• 半屏互动

依托现行weex技术栈灵活的发版及快读覆盖能力，通过前端、客户端、播放器等多方共同努力，借助OTT酷喵APP自身硬件特性及用户使用习惯，开创性的完成“半屏互动”建设。该能力建设既满足了用户线运营“大量级曝光”的诉求，也满足会员线运营“精准投放、提高渗透”的诉求。根据数据结果来看非常成功，尤其在曝光UV量级上，实现端内投放曝光UV提升约200%的惊人数据。

• 同步登录态

OTT从开发语言、操作理念等都遵循手机APP相关规范，不同之处在于手机APP为触屏操作，OTT一般为遥控器操作；OTT端的最常见登录，与常见的PC端扫码登录一致，由OTT端展示登录二维码，手机端扫码操作确认登录，即“扫码登录”；我们希望将OTT端登录态同步至手机端，由手机端完成相应操作，同时避免手机端无登录态、登录账号不统一等带来业务操作上的偏差，即“扫码反登”。

• 质量监控

长期以来，TV端投放页面，存在用户投诉-bug定位困难的情况，客服及技术线同学难以获取用户相应错误数据；使用客户端隐藏debug又存在操作繁琐，沟通困难情况。经过调研后，APP端质量平台能力与OTT端该诉求吻合，因此集合Rax开发方、质量平台、Rax容器方三方共建，完善OTT端质量平台，即实时日志监控。

• 前端可视化搭建收单

OTT酷喵会员线-“收单能力”升级已经取得一定成果，借助同步登录态、单商品收银台等前端创新能力的落地，直接推动了OTT端登录率近10%提升，并简化购买链路，实现可视化搭建，“一步扫码付费”，该组合能力领先业内。另外，OTT半屏收银台的开发上线，使OTT酷喵用户触达能力迎来重大升级，依托播放页，实现一步扫码付费，较大程度简化付费链路，提高了转化率。

• 积分商城

OTT积分商城是围绕积分的发放与兑换，建立符合大屏端运营特点的用户管理体系，用户通过多种行为获取积分，再通过不同玩法或商品兑换消耗积分，从而为用户增长、用户活跃与留存提供有效抓手。

积分商城二期功能已全部完成，支持积分的有序发放，酷喵自身权益、（阿里生态）二三方虚拟权益与电视淘宝权益的兑换，为OTT用户运营的基础能力打下了基础。之后，与电视淘宝打通，完成账号绑定、加购、下单、付费等能力建设，后续将实现双方资源互补。

以上就是优酷OTT大屏的前端建设之路，希望能够为大家带来启发。

更多精彩推荐
☞“背叛”乔布斯，库克做对了
☞设计一款编程语言有多难？Ruby 创始人揭秘
☞出身寒门，逆袭为身家过百亿的谷歌 CEO，劈柴哥传奇
☞拆解蚂蚁支付业务
☞脑机接口技术：融资噱头还是文明推手？
☞20张图，带你搞懂高并发中的线程与线程池！

点分享点点赞点在看