簡介： 你養貓了沒？
作者 | 淘系-瓏晴
在電商領域，互動是一個重要的用戶增長方案，在提升用戶黏性、活躍以及拉新上都發揮着重要的作用。今年雙11，淘系互動團隊推出了“超級星秀貓”，我們不蓋樓、不開車，全民參與養貓出道，3只風格各異的萌貓咪一經問世，瞬間俘獲了無數消費者的心。通過 EVA 互動體系一整套解決方案，大幅提升研發效率，支撐全民養貓貓在手淘、貓客、支付寶等多個 APP 互通。藉助客戶端能力及 EVA 互動體系將性能與內存良好控制，讓多數用戶體驗高清穩定的互動，實現 0 故障及秒開，同時星秀貓參與人數再創新高。這篇文章將主要從頁面渲染基建、EVA 研發體系和全局穩定性方案 3 個方面，來具體闡述淘系互動前端團隊是如何做到雙11互動又快又好又穩的。
頁面渲染基建
不知道大家有沒有發現，今年的雙11養貓互動（以下簡稱雙11互動）頁面打開特別快，具體可看下面與去年雙11互動主頁在 iPhone 11 PRO 機器手機淘寶上的主頁加載對比視頻。不僅如此，還有個明顯的變化是以往互動頁面的標配--進度條
沒有了。
點擊查看視頻
互動主頁加載對比，左：2019年雙11，右：2020年雙11，機型：iPhone 11 PRO
見多識廣的你也許會問，是不是今年雙11互動使用了 Native 版本？是不是今年雙11互動使用了緩存方案？是不是今年雙11互動也使用了預渲染技術？然而，答案是，都沒有，今年雙11互動與歷年狂歡城一樣，仍然是 web 頁面，且資源全部走 CDN 無額外緩存。
那麼，我們是如何做到如此順滑的加載體驗呢？這就要從 Solution 說起。
Solution 是天馬搭建體系(https://zhuanlan.zhihu.com/p/137470317 )的概念，主要解決的問題是將模塊+數據組合成頁面，簡單理解就是負責頁面渲染 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 動畫顯示出來（此處爲示意版僞代碼）
import {createElement, render} from 'rax';
import DriverUniversal from 'driver-universal';
import {Eva} from '@ali/rax-eva';
import Spine, {useSpineResource} from '@ali/rax-eva-spine';
function App() {
const catSrc = useSpineResource({
image: 'https://gw.alicdn.com/tfs/TB1YHC8Vxz1gK0jSZSgXXavwpXa-711-711.png',
altas: 'https://pages.tmall.com/wow/eva/b8597f298a5d6fe47095d43ef03210d4.atlas',
ske: 'https://pages.tmall.com/wow/eva/b5fdf74313d5ff2609ab82f6b6fd83e6.json',
});
return (
<Eva
width={750}
height={1334}
>
<scene>
<Spine
resource={catSrc}
animationName='idle'
anchorX={0.5}
anchorY={1}
/>
</scene>
</Eva>
);
}
render(<App />, document.getElementById('root'), {
driver: DriverUniversal,
});另外，對於前端來說，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 功能的基礎上，增加了相對定位佈局、自定義組件、彈窗隊列管理器插件等功能，並提供了簡單的項目管理能力，進一步降低了彈窗開發的成本。
瞭解更多，可參考 2020年618淘系技術分享-互動生產力進化之路。
全局穩定性方案
細心的同學會發現，今年雙11互動主頁動效特別多，除了開場視頻外，養貓和比拼的主界面上每個區域都在各種動。你一定在好奇，爲什麼你沒有感覺到卡或者出現閃退的情況呢？這一切的背後，除了手機淘寶客戶端架構組底層升級外，也有全局穩定性方案在護航。
點擊查看雙11互動主頁動效展示視頻
互動場景中存在大量動效、視頻，而過高的內存佔用可能會引發客戶端 crash 影響業務結果。一邊是客戶端需要更炫酷的玩法去支撐業務發展，一邊是一些設備性能較差的用戶反饋卡頓，如何讓所有設備都能流暢的參與互動呢？比起不顧一切的上動效或是一刀切的砍玩法，顯然存在一個更合理的選項--體驗分級。淘寶技術質量團隊提供了名爲 Kite 的獲取設備評分的統一降級 SDK，結合互動特性，如下圖所示，我們將設備劃分爲 4 個等級，其中，容災等級時頁面將進入到一個異常兜底頁面，用於應對一些低版本或者兼容性較差的機器場景。至此，我們完成了體驗分級。
互動設備分級
接下來，就是針對不同設備等級的機型做不同降級方案，這也是互動的穩定性保駕護航重要的一環。基於客戶端架構組提供的穩定性指標，我們需要整體考慮頁面的內存、幀率、CPU 3 個指標，而動效、圖片尺寸、遊戲區畫布尺寸、FPS 等配置則直接影響這 3 個指標的結果。然而，衆所周知，在實際的開發過程中，對每張圖片、每個動效做針對性的降級往往需要各種配置項，且人人蔘與，操作起來非常繁瑣和耗時。因此，淘系互動前端團隊在上面體驗分級的基礎上，通過 1 份靜態全局降級規則 + 1 個運行時獲取配置的穩定性保障 SDK，設計了一套完整的全局穩定性保障方案。
全局穩定性保障方案
正是這套穩定性方案，讓雙11互動在極大程度做到了高清互動、符合了架構組驗收標準而且在線 22 天全程 0 故障。TA 讓互動穩定性保障更加系統，也已經成爲營銷互動的標配。
總結展望
今年雙11整體節奏從之前的“光棍節”到今年的“雙節棍”，在這樣變化的背景下，今年雙11互動依然做到了參與人數再創新高。未來，我們希望完善 EVA 體系，通過不同的技術方案不斷地優化我們的開發方式和生產關係，逐漸讓更多的人來開發互動，實現“人人可開發，處處有互動”。
原文鏈接
本文爲阿里雲原創內容，未經允許不得轉載。