优酷前端技术：如何支撑营销活动？

优酷前端团队自 2017 年开始承担优酷营销活动的开发工作，到 2020 年初，已经有 90%以上的营销活动前端是由平台化、组件化的搭建方式来支撑。在支撑营销活动的进程中，技术方案也进行了几次迭代和建设，本文将把这些演变进行总结。

一、2017 年及以前：原生 JavaScript 支撑的 TV 营销活动，初识搭建的魅力

挑战：低性能的设备、不一样的交互方式

关键词：原生开发、焦点管理引擎、初识搭建

相对于手机端和 PC 端的前端页面开发，TV 端的开发有很大的不同：

首先是性能和兼容性，相比价格更高的手机和性能优秀的 PC 浏览器，200 元上下的网络电视机顶盒在硬件水平上有很大的差距；加上系统的高度定制，在某些特性上已经失去了较多的兼容性。因此，TV 端活动营销的开发方式在当时是比较原生的前端开发方式，无框架的约束可以让开发人员更底层更针对性的对页面进行优化，以便能达到较好的交互性能和兼容性。

其次：用户交互方式的不同使得 TV 端开发有额外的工作，其中最主要的不同就是对焦点的管理，相对于触屏交互和鼠标，TV 端的交互输入设备是遥控器，用户能做的操作是上、下、左、右、确定、返回（当然，现在的电视智能系统已经把语音控制作为更广泛的交互方式了）。对此，团队创造了一套通用的焦点引擎来统一对焦点进行管理及自动智能切换，该方案至今仍在部分 TV 端开发中应用。

开发方式确定 &重要方案解决后，对于研发同学的效率提升已经有了很大的保证，但是活动的增加仍然需要大量的研发低价值投入，没有解决能力的复用，因此：“组件化搭建”便成了释放生产力的最重要的抓手，也是此时，团队正式初步开始构建属于我们自己的搭建系统。

“搭建”作为阿里巴巴集团前端委员会四大方向之一，而营销活动也是搭建最重要的落地业务方之一，以此为契机，团队顺势而为构建了最具特色的 TV 端活动搭建系统“ARK 系统”：将可复用的组件通过拖拽的方式放置到面板上，生成最终页面。

“搭建”系统的出现极大的解放了前端研发同学对低价值重复活动的开发投入，让技术同学能够更多的从可复用、可配置的方向去思考活动的实现，做到做一次任意用，在业务上也让玩法得到沉淀，让经验得到共享。

二、2017 双 11：引入框架的源码开发的移动端 H5 活动支撑

挑战：埋点、跳转、唤端

关键词：埋点规范化、跳转 &唤端统一、开发规范

对于团队来说，2017 年是一个比较挑战的一年，团队从 TV 端营销活动开发开始承接优酷部分重要运营平台的开发工作，到 2017 年双 11，优酷第一次“真正意义”上的参与双 11：猫晚优酷独播、双 11 大促之后的免单返场营销活动等，第一次找到了优酷 X 天猫的玩转双 11 的更好的方式。

在支撑 2017 年双 11 营销活动的过程中，由于 React、Vue 等框架的崛起，团队在营销活动领域开始尝试性的引入部分框架来代替纯原生开发的方式，加上之后的优酷周年活动、2018 春节战役、三月战役等，框架在为团队的营销活动的支撑中做出了重要的贡献。几次战役打下来，团队成功积累了优酷移动端营销活动的基础能力如埋点规范、跳转唤端规范等，加上对集团搭建体系的进一步调研，我们也在继续寻求建设更适合优酷业务方向的移动端搭建技术解决方案和系统。

（每个活动顶部高度定制，但是首屏之后的内容导流区、售卖区是可以进行强复用的）

三、2018 世界杯战役：初具搭建能力的 Weex　页面

挑战：高时效性、高灵活性

关键词：CMS 数据分发+搭建、weex 云构建

2018 年俄罗斯世界杯对于优酷来说是一次意义重大的赛事，网络独播带来的大量流量需要有更加灵活、时效性更高、更新更快速的页面。因此基于优酷的 CMS 内容分发平台，针对特殊的“世界杯”频道，定制了基于 CMS 提供组件搭建能力和数据分发能力+云构建生成最终 weexbundle 的初具搭建能力的解决方案，该方案在一个月的世界杯期间稳定的支撑了“世界杯”频道页及部分其他页面的运营需求。组件化+分离运营+分离开发，为后续构建更适用于营销活动的搭建平台积累了丰富的经验。

四、2018 双 11：新搭建平台的第一次战役练兵

挑战：稳定性、规范

关键词：Weex 开发规范、看齐集团技术体系

基于世界杯战役中团队对 Weex 搭建的成功经验和积累的相关能力，世界杯战役之后，团队正式开始快速推进符合优酷特色的新的营销活动搭建平台“统一活动营销平台”的开发工作，经过 1 个多月的开发工作，于 2018 年 9 月正式上线，并在 10 月在站内推广，并在 2018 年双 11 战役中作为主要承接平台高效承接了双 11 的战役需求。新平台在基础能力上没有做太多重复的建设，而是在集团搭建方案的服务之上针对优酷和文娱的特色，做了更多符合自身业务的定制。

之后在 2019 春节战役，2019 暑期战役中，统一活动营销平台一直作为营销活动的主力搭建平台，为高效高质的优酷营销活动服务。

五、2019 双 11：属于文娱的活动营销平台

挑战：提效

关键词：流程规范、精细化、智能化、文娱向

到 2019 年双 11 战役，经过一年迭代优化的统一活动营销平台”已经成为具备较为灵活的精细化投放能力、全方面解决多人共同运营、多端（Phone、PC、Pad）搭建能力、智能识别搭建能力等高效运营提效的平台，同时平台所支撑的业务也从优酷向文娱各业务方扩充，借助平台，让整个文娱的营销活动能力通、数据通、运营通。

以上便是关于优酷营销活动的关键节点和里程碑。回顾下来，这些方案的演进和落地还是有着必要的“刻意设计”，每年优酷的核心三战役是：春节战役、暑期战役、双 11 战役，基于这些将团队方案、平台进行提前设计，建设在平日、练兵在战役中，技术团队只有提前设想、落实计划、跟踪进度、确认结果，才能在一个个的时间点上完成应有的建设，拿到该拿到的结果。

作者介绍：

阿里文娱前端技术专家听鸿