下一章： OTT端登入态裝置穿透：掃碼登入與掃碼反登入 | 《優酷OTT網際網路大屏前端技術實踐》第二章>>> 點選免費下載下傳 《優酷OTT網際網路大屏前端技術實踐》>>>
作者| 阿裡巴巴文娛技術 默吉
轉眼間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大屏的前端建設之路，希望能夠為大家帶來啟發。