前言
在電商領域，互動是一個重要的使用者增長方案，在提升使用者黏性、活躍以及拉新上都發揮著重要的作用。今年雙11，淘系互動團隊推出了“超級星秀貓”，我們不蓋樓、不開車，全民參與養貓出道，3只風格各異的萌貓咪一經問世，瞬間俘獲了無數消費者的心。通過 EVA 互動體系一整套解決方案，大幅提升研發效率，支撐全民養貓貓在手淘、貓客、支付寶等多個 APP 互通。藉助客戶端能力及 EVA 互動體系將效能與記憶體良好控制，讓多數使用者體驗高清穩定的互動，實現 0 故障及秒開，同時星秀貓參與人數再創新高。這篇文章將主要從頁面渲染基建、EVA 研發體系和全域性穩定性方案 3 個方面，來具體闡述淘系互動前端團隊是如何做到雙11互動又快又好又穩的。
（更多幹貨請關注【淘系技術】公眾號）
頁面渲染基建
不知道大家有沒有發現，今年的雙11養貓互動（以下簡稱雙11互動）頁面開啟特別快，具體可看下面與去年雙11互動主頁在 iPhone 11 PRO 機器手機淘寶上的主頁載入對比視訊。不僅如此，還有個明顯的變化是以往互動頁面的標配--進度條沒有了。
見多識廣的你也許會問，是不是今年雙11互動使用了 Native 版本？是不是今年雙11互動使用了快取方案？是不是今年雙11互動也使用了預渲染技術？然而，答案是，都沒有，今年雙11互動與歷年狂歡城一樣，仍然是 web 頁面，且資源全部走 CDN 無額外快取。
那麼，我們是如何做到如此順滑的載入體驗呢？這就要從 Solution 說起。
Solution 是天馬搭建體系的概念，主要解決的問題是將模組+資料組合成頁面，簡單理解就是負責頁面渲染 Layout
自去年618起，淘系互動團隊全部業務都開始遷移到天馬搭建體系，Solution 也使用了官方推薦的通用 Solution。但是，通用 Solution 由於其通用性，冗雜了淘寶/天貓 60% 以上業務邏輯（粗略估計），體積大的同時易受其他業務影響導致穩定性風險高；而互動由於其業務特殊性，很多優化甚至穩定性保障方案的實現也需要在 Solution 層面進行定製。基於此，淘系互動團隊定製了自己的頁面渲染方案，即互動專用 Solution，這也是今年雙11互動之所以那麼快的核心原因。
得益於天馬團隊提供的新版 Solution 解決方案，既提供了標準化端渲染機制，又提供了基於外掛進行業務定製的能力，還提供了產品化平臺。互動專用 Solution 是在上述解決方案的基礎上擴充套件實現，主要做了以下事情：
- 精簡基礎依賴/邏輯，去除非必要依賴及非必要邏輯
- 根據互動場景定製模組載入順序，提供分批載入能力（當前主要是首屏/非首屏）
- 提供資料處理能力，通過去除渲染無關欄位實現資料自動瘦身
- 內建基於客戶端評分的穩定性保障方案，保障互動頁面穩定性，詳見下面穩定性方案章節
- 增加資源及模組載入監控，保障穩定性
- 整合互動通用能力，包括規範化 CSS/通用的渲染干預能力/常用的移動端除錯方案/頁面上下線能力等
EVA 研發體系
今年雙11互動，非常多的使用者反饋貓貓們太好看了、太萌了、特別可愛，很多人都紛紛來諮詢小編是如何開發出來的。
接下來將重點闡述雙11星秀喵加工廠--EVA 研發體系，TA 是淘系互動團隊提供的從素材上傳到端上渲染的互動研發的一整套解決方案，以引擎、框架、工具、平臺為支點，致力於為廣大前端帶來簡單舒適的互動研發體驗。
EVA 研發體系，提供互動研發一條龍服務，我們是認真的
EVA Store：素材上傳服務
大家看到的星秀喵，並不是3D模型，而是如假包換的2D骨骼動畫。它使用 Spine 製作，通過網格自由變形和蒙皮技術在視覺上呈現“3D軸”的偏轉，應用此類技術的動畫軟體還有大名鼎鼎的 Live2D。在 Spine 強大動畫創作的支援下，雙11的星秀喵才有了“3D化”的動畫化表現力。一個標準的Spine動畫檔案包含一張雪碧圖、一份骨骼資料以及一份動畫資料，那麼，我們應該如何上傳到 CDN 呢？
EVA 為了解決互動業務中常見且頻繁的動畫和模型素材，提供了一站式的素材上傳服務 EVA Store，包括幀動畫、雪碧圖、DragonBones、Spine、音訊等，這些互動素材的協議標準是由阿里巴巴經濟體互動小組統一制定。
EVA JS：2D 互動引擎
互動引擎是互動研發的基礎，一款好的互動引擎能大大降低研發成本，EVA JS 應運而生。EVAJS 是一款輕量級，用於開發互動遊戲的前端框架。EVA JS 支援外掛體系，所有的互動遊戲能力都是由外掛提供的。EVA JS 一方面能夠讓前端互動遊戲開發更加專業，另外一方面幫助前端開發者無需深度學習互動遊戲技術即可開發互動遊戲。TA 的整體設計是以遊戲行業最佳實踐的 ECS 設計模式為基礎，拆分核心功能和元件能力，按需使用。
EVA JS 引擎
值得一提的是，EVA JS 還提供了無障礙化的支援。以往，遊戲區實現無障礙需要手動在圖層上新增輔助 DOM 來指定無障礙內容。今年雙11，EVA JS 研製了 Canvas 上的無障礙技術，能夠在手機淘寶/支付寶客戶端上自動識別無障礙物件上的互動事件，降低研發成本的同時，讓廣大有障礙人士也能全方位體驗到擼貓的樂趣，真正做到了互動無障礙體驗。
雙11養貓無障礙體驗
EVA JS 計劃在2021年6月份前完成開源，瞭解更多，可參考 淘系前端互動引擎EVAJS架構與生態實現
Rax EVA：Rax 解決方案
素材和引擎都準備好後，就可以上手開始寫程式碼了。市面上大多數的遊戲引擎無法和 JSX、Hooks 結合在一起，這樣，開發者就需要學習“兩套框架”，再加上游戲引擎的學習成本也不低，整體上增加了開發門檻。為解決門檻高、上手難的問題，淘系互動前端團隊設計了一套用於開發互動的 Rax 解決方案--Rax EVA，TA 是一個能夠在Rax技術體系下，利用 EVA JS 的遊戲研發能力，開發動畫、遊戲類場景的框架。它可以讓開發同學用熟悉的 JSX 和 Hooks 語法編寫動畫、遊戲場景的程式碼。
例如，我們把上一章節上傳好的 Spine 動畫顯示出來（此處為示意版虛擬碼）
另外，對於前端來說，DOM 和 CSS 有天然的排版能力，這也是它們的優勢。而遊戲引擎是通過圖形引擎渲染的，並不具備 CSS 那樣高階的排版能力。於是在整個遊戲互動的專案裡，即存在 Canvas 又存在 DOM+CSS，也就是所謂的混合開發。Rax EVA 也為這類混合開發提供了方便快捷的方式，在 EVA 元件內，使用background / hud 這兩個原生標籤劃分了遊戲區域Z軸方向的三層佈局，在這兩個標籤內以及 EVA 元件外，任何DOM 標籤或其他熟悉的 JSX 都可以照常使用。
互動專案分層最佳實踐
EVA Ware：彈窗規模化生產
除了基礎的遊戲研發外，EVA 研發體系還提供了一系列的低程式碼工具或服務，其中表現尤為突出的就是在今年 618 互動中就表現優異的彈窗規模化生成方案（以下稱 Super Modal）。
互動研發最大的工作量之一就是彈窗的開發，相比今年 618，今年雙11互動彈窗數量更甚。得益於 Super Modal 在彈窗研發上的抽象，所有的彈窗樣式都是在平臺上簡易拖拽複製生成，通過 DSL+Runtime 提供端上穩定的渲染服務。彈窗的樣式、文案可以作為頁面配置項快速修改，前端在開發彈窗功能時，不用過多關注彈窗的樣式問題，專注於彈窗的顯示、關閉邏輯即可。除此之外， Super Modal 還在今年 618 功能的基礎上，增加了相對定位佈局、自定義元件、彈窗佇列管理器外掛等功能，並提供了簡單的專案管理能力，進一步降低了彈窗開發的成本。
Super Modal 核心理念
瞭解更多，可參考 2020年618淘系技術分享-互動生產力進化之路
全域性穩定性方案
細心的同學會發現，今年雙11互動主頁動效特別多，除了開場視訊外，養貓和比拼的主介面上每個區域都在各種動。你一定在好奇，為什麼你沒有感覺到卡或者出現閃退的情況呢？這一切的背後，除了手機淘寶客戶端架構組底層升級外，也有全域性穩定性方案在護航。
互動場景中存在大量動效、視訊，而過高的記憶體佔用可能會引發客戶端 crash 影響業務結果。一邊是客戶端需要更炫酷的玩法去支撐業務發展，一邊是一些裝置效能較差的使用者反饋卡頓，如何讓所有裝置都能流暢的參與互動呢？比起不顧一切的上動效或是一刀切的砍玩法，顯然存在一個更合理的選項--體驗分級。淘寶技術質量團隊提供了名為 Kite 的獲取裝置評分的統一降級 SDK，結合互動特性，如下圖所示，我們將裝置劃分為 4 個等級，其中，容災等級時頁面將進入到一個異常兜底頁面，用於應對一些低版本或者相容性較差的機器場景。至此，我們完成了體驗分級。
互動裝置分級
接下來，就是針對不同裝置等級的機型做不同降級方案，這也是互動的穩定性保駕護航重要的一環。基於客戶端架構組提供的穩定性指標，我們需要整體考慮頁面的記憶體、幀率、CPU 3 個指標，而動效、圖片尺寸、遊戲區畫布尺寸、FPS 等配置則直接影響這 3 個指標的結果。然而，眾所周知，在實際的開發過程中，對每張圖片、每個動效做針對性的降級往往需要各種配置項，且人人蔘與，操作起來非常繁瑣和耗時。因此，淘系互動前端團隊在上面體驗分級的基礎上，通過 1 份靜態全域性降級規則 + 1 個執行時獲取配置的穩定性保障 SDK，設計了一套完整的全域性穩定性保障方案。
全域性穩定性保障方案
正是這套穩定性方案，讓雙11互動在極大程度做到了高清互動、符合了架構組驗收標準而且線上 22 天全程 0 故障。TA 讓互動穩定性保障更加系統，也已經成為營銷互動的標配。
總結展望
今年雙11整體節奏從之前的“光棍節”到今年的“雙節棍”，在這樣變化的背景下，今年雙11互動依然做到了參與人數再創新高。未來，我們希望完善 EVA 體系，通過不同的技術方案不斷地優化我們的開發方式和生產關係，逐漸讓更多的人來開發互動，實現“人人可開發，處處有互動”。
加入我們
淘系互動團隊目前負責“芭芭農場”、“金幣小鎮”、“淘寶人生”等手淘內千萬級的互動產品，重點打造雙促、春節、市場PR等S/A級營銷互動，同時為商家、達人、主播等沉澱和提供私域內的互動玩法。如果你對 工程/搭建/低程式碼研發方向 或者 WebGL/圖形渲染/特效方向 等存在興趣，歡迎微信聯絡/釘釘進群瞭解更多，完整 Job Model。
