本文介紹了大淘寶 Web 領域的工程師們正在做哪些技術工作、有什麼技術產品。
背景
2022 年，大淘寶前端團隊進行了調整：重新組織生產關係，按業務線拆分整合進對應的業務技術團隊，同時保留了大前端虛線組織，確保研發基建的一致性、技術的持續投入以及推進人員的成長。整個變化涉及超過三百人的前端團隊，經過了半年多的運轉，整個團隊在技術上也進行了對應的聚焦和收斂。新的組織協作形態下，大淘寶 Web 領域的工程師們正在做哪些技術工作、有什麼技術產品，特在 2023 年開年之際向行業前端同學進行分享。
淘寶 Web 技術地圖
我們按工程、研發、應用三個領域進行分層梳理了淘寶的技術地圖（注：爲降低理解成本，特進行了簡化）：
- 工程：包括前端工程和研發質量保障，提供前端開發需要的研發平臺、研發工具、調試、監控告警等。
- 研發：包括運行容器、開發框架、搭建體系。運行容器有 Web 容器、 自研 Hybrid 容器以及雲原生 JavaScript 容器。開發框架有前端框架和 Node.js 框架。搭建是自研的低/零代碼系統（內部代號天馬）。
- 應用：基於工程和研發，面向不同場域、不同用戶提供相應的應用，包括面向 C 端消費者的前臺應用，面向 B 端商家、達人、運營的中後臺應用。
技術產品介紹
對技術地圖陳列的主要技術產品，我們儘量用最樸素、簡練的方式介紹其定位和能力。
▐前端工程 - O2
O2 是阿里巴巴集團內部的前端工程解決方案品牌，致力於打造支撐 Web 開發者軟件交付全週期平臺，涵蓋了需求管理、開發工具（本地&在線）、CI/CD 平臺、在線構建和掃描檢測能力與標準化前端動靜態資源交付部署服務等。當前交付給 Web 開發者的核心功能有兩大子品牌 O2 Space 和 O2 Code。
- 研發平臺 - O2 Space
O2 Space 是一個一站式 Web 研發交付平臺，能力包括應用管理、變更及迭代發佈操作、代碼構建與靜態掃描等。
- 研發平臺 - O2 Code
O2 Code 是基於開源框架：OpenSumi 深度定製的 IDE，涵蓋本地和 Web 版本，與阿里巴巴集團內部大量前端基礎設施高度集成，致力於成爲最懂 Web 研發的開發工具。
▐研發質量
- JSTracker
JSTracker 是端到端的前端監控與數據分析平臺，依託線上大數據分析與挖掘，重點建設前端安全生產、體驗度量與業務分析等方向。具體包括以下幾方面：
安全生產：專注於前端安全生產 “1-5-10” 中 “1 分鐘報警、 5 分鐘定位問題”的目標。通過建設非預期渲染檢測，業務監控等基礎能力，提供端到端的灰度監控、實時報警能力提升線上問題的發現率；通過源碼定位、全鏈路日誌、模式分析等能力提升線上問題的定位效率。
體驗度量：從用戶瀏覽頁面的真實感受與技術可實現爲出發點，建立跨端場景（Weex/Web/Native）頁面性能度量標準與統計標準，幫助業務更好的發現與解決體驗問題。
業務分析：通過分析用戶瀏覽產品的交互行爲，發現業務潛在交互體驗問題。
JSTracker 架構圖
▐磨刀石
磨刀石是基於阿里巴巴手機中臺開發的一個面向開發者的在線雲手機開發調試平臺，它是一個在線真機實驗室。通過磨刀石，開發者不需要擁有真機設備，就能在不同品牌、不同系統及版本的手機上進行調試、測試、跑自動化任務等。
▐運行容器
在淘寶，主要存在三種運行容器：基於 Web 的 PHA 容器、面向跨端研發的 Weex 容器&引擎、基於雲原生的 JavaScript 容器 Noslate。
- Web 容器 - PHA
PHA 全稱是 *Progressive Hybrid App *，是用於提升 Hybrid 體驗的框架，在遵循 Web 標準的同時，PHA 提供了漸進式增強的策略、性能極佳的富交互組件來創建 Hybrid 應用，讓這些 Web 應用具有與 Native 相同的用戶體驗。藉助容器/內核能力打造端上極致的 Web 體驗，支持的能力包括但不限於：數據預請求、離線資源緩存功能、WebView 模板化、App Worker、Tab 框架方案、下拉刷新體驗、啓動屏體驗、富交互組件。
▐跨端容器&引擎 - Weex 2.0
Weex 是一個可以使用現代化 Web 技術開發高性能應用的跨端框架。Weex 2.0 是在 Weex 1.0 基礎上做了大幅架構升級的新版本，定位依然是面向 Web 標準和前端生態，通過自繪渲染引擎、高效字節碼引擎等核心升級，在標準化程度、性能、開發體驗方面相比 1.0 版本都有大幅提升。其設計核心聚焦在以下幾點：
- 兼容主流前端生態：Weex 2.0 可以滿足絕大部分業務場景對 Web 標準的需求，並且支持主流的前端框架（React、Vue）以及 JS 遊戲引擎（Pixi、Three.js、Laya、Cocos），前端開發者可低成本上手且開發經驗可複用。
- 更好的性能和體驗定製能力：Weex 2.0 選擇自研路線，具備高度定製性，在渲染引擎、字節碼引擎上做了大量優化提升性能，同時重點增強了富交互能力，對於複雜、精細化的體驗定製需求（如手勢、動畫、轉場、無限列表），Weex 2.0 都可以勝任。
- 輕量化&可擴展性：Weex 2.0 在用戶界面上交付的是輕量視圖，可以和原生容器、框架聯動，適應複雜多變的業務形態（如頁面、模塊、卡片、彈層），同時提供靈活可控、標準化的集成方式（如同層渲染、紋理融合、JS 引擎 Binding），使得 Weex 2.0 和音視頻、3D、XR 等創新體驗能夠更緊密融合。
- 動態性&多端一致性：天然具備動態迭代能力，開發構建產物可遠程下發；同時藉助於自繪渲染引擎，可做到像素級的多端一致性。
▐雲原生容器 - Noslate
JavaScript 是目前流行度最高、開發者數量最龐大的編程語言。
早年 Node.js 等技術的出現，使得前端能力邊界得到擴展，在越來越多的業務場景中扮演部份服務端研發的角色。
但隨着雲原生/Serverless 等新架構概念的引導，彈性效率成爲了全新的架構設計目標。爲了能夠讓 JavaScript 任務擁有更高的彈性效率，進而滿足在泛終端、全棧交付等領域的效率期待，我們逐步深入探索的過程中逐漸形成了 Noslate Project （原 Alinode Cloud），旨在提升雲原生場景下 JavaScript 的被調度性能，解決診斷性黑盒問題。
Noslate 是最新的面向雲原生場景，面向 Serverless 架構下的新產品，目標是通過提供完整的技術產品方案，將 JavaScript 打造成雲原生時代最靈活的交付語言。目前 Noslate Node.js 發行版已經在進行鍼對阿里雲 Ampere、阿里雲倚天的定製優化，未來計劃包括支持龍蜥社區中的其他架構。
2022 年 10 月，我們將 Noslate 項目正式開源[1]。Noslate 它主要由三個子項目組成，分別體現了我們在提升 Javascript 任務彈性效率過程最關注的核心問題：
- Noslate Workers：隨着探索的深入，我們設計了面向輕量端雲同構場景的 W3C Web-interoperable JavaScript 輕量化容器方案。在交付靈活度上和資源、執行效率上形成平衡，現在主要應用於中心化的 SSR 渲染等輕量任務場景，效果顯著。
- Noslate Debugger：在支撐業務過程中，我們發現在彈性效率提升後，對於異常和崩潰變得難以定位，得益於 Linux 系統 Coredump 機制的啓發，因此設計了基於 Corefile 對問題進行離線診斷的 Noslate Debugger 產品，幫助用戶實現問題的回溯和實時定位。
- Node.js Distribution：初期針對函數計算冷啓動場景優化，降低 Node.js 用戶代碼加載耗時，形成了針對性的 Node.js 發行版本。
▐開發框架
-
前端框架 - ICE
飛冰 (ICE) 是開箱即用的終端應用研發體系，包含應用框架 (ice.js)、包開發 (ICE PKG)、微前端 (ICESTARK)、調試工具 (AppDevTools)、API 體系等。
ice.js 應用框架是整個體系的核心，它致力於提供開箱即用的框架能力，基於社區流行的 React 渲染，迄今已發佈了兩個大版本，並廣泛服務於阿里內部和社區用戶。內置工程配置、狀態管理、數據請求、權限管理等最佳實踐，讓開發者可以更加專注於業務邏輯。同時面向不同場景沉澱了多種解決方案，包括但不限於多端小程序、中後臺應用、Weex 2.0 應用、搭建等。
ICE PKG 是面向 NPM 包開發的解決方案，提供 React 組件、Rax 組件、Node 模塊、前端類庫 等多場景 NPM 包的研發，提供標準的文檔預覽和打包能力，同時在大淘寶技術通過定義組件標準，打通搭建模塊與源碼組件的差異。
ICESTARK 是面向大型 Web 應用的微前端解決方案，提供巨型應用的管理最佳實踐。通過微應用的研發，解決多個開發團隊協同問題，還帶來了安全的沙箱、優秀的性能體驗。
UNI API 是面向跨多終端/容器的統一 API 體系，它致力於提供前端統一的跨容器（引擎）以及 Native 的橋通道能力。
AppDevTools 是面向客戶端本地調試的開發者工具，它致力於解決集團內 Web 技術棧開發者在 App 中無法調試，定位問題難，度量性能難的問題。
▐Node.js 框架 - Midway
Midway 是 Node 架構團隊基於漸進式理念研發的 Node.js 框架。自 2014 年，Node 架構團隊提出了業界流行的前後端分離技術，就不斷的在 Node 領域深耕成長。
最新的 Midway 基於 TypeScript 開發，結合了面向對象 OOP + Class + IoC 與函數式 FP + Function + Hooks 兩種編程範式，並在此之上支持了 Web / 全棧 / 微服務 / RPC / Socket / Serverless 等多種場景，致力於爲用戶提供簡單、易用、可靠的 Node.js 服務端研發體驗。
▐搭建體系
-
天馬
天馬是大淘寶技術自研的面向 C 端頁面搭建和數據投放解決方案，提供從研發、搭建、渲染、數據投放的一體化服務，支持一次搭建、多端（H5/Native/PC/小程序）渲染的能力，服務了阿里巴巴大部分 C 端搭建場景。
天馬爲前端開發者提供了一整套模塊研發方案，遵守一致規範的研發產物可以在各類頁面研發搭建場景使用。
-
斑馬
斑馬系統是基於天馬服務的通用搭建產品，也作爲天馬的 playground 和搭建範例。它提供了多樣化的搭建模式及開放的搭建擴展能力，致力於讓搭建更簡單。
斑馬目前核心提供了畫布搭建（無代碼不依賴前端角色的自由佈局搭建方式）、文檔搭建（專注於文本流頁面的搭建方式）、模塊搭建（以模塊爲標準進行積木式搭建）、源碼搭建（在源碼應用的基礎上增加運營數據投放能力）。同時斑馬也對外開放了搭建流程定製 - 業務可以不接入天馬，直接基於斑馬的能力，構建自己的業務搭投流程。
▐前臺應用
基於 Web 工程和跨端架構團隊提供的各種研發能力和解決方案，各業務場域的 Web 團隊在各自的場景裏也沉澱了一些特定領域的技術產品。
前臺場景主要有基礎產品、用戶增長、互動場景、內容消費。
-
基礎產品 - 新奧創
新奧創是淘系基礎鏈路的端到端解決方案，解決跨端、動態化、業務定製等電商基礎鏈路場景的常見問題。新奧創體系整體由以下 3 部分組成：
- 研發平臺：提供日常研發操作平臺，囊括全鏈路的研發、調試、發佈鏈路，是用戶日常端到端開發的主陣地。配合端渲染 DSL、天馬等第三方組件平臺，組成整體研發鏈路。
- 運行時：包括服務端 SDK、前端與客戶端 SDK，前者負責生成奧創協議；後者將奧創協議渲染成用戶展示界面。通過協議解析、組件引擎完成頁面的佈局渲染，同時提供監控、日誌等相關能力。
-
質量保障：通過差異檢測評估多端功能一致性，通過線上用戶行爲錄製，生成並自動化運行測試用例，線上線下全方位保障新奧創業務穩定性。
![]()
-
用戶增長 - ATC
在用戶增長領域，我們往往會在淘寶 App 以外投放各種廣告內容，或是將站內的一些頁面投放到 App 外，吸引目標用戶點擊，當目標用戶點擊這些廣告或是內容，他們將被引入到 App 內，我們把這個過程稱爲喚端。而喚端是一個看似簡單、但實則有很多工程技術細節、並可深度運營的業務節點，爲此我們着手設計對應的平臺，提供給不同業務一站式的支撐各種喚端需求（如策略配置、分析能力等），提升成功率和精細化運營能力。
Starlink JS SDK 是一套前端接入方案，它提供了 H5 頁面上的喚端能力，結合服務平臺，具備各類擴展能力。
同時，我們也在探索更多的端外用戶觸點，例如用戶手機桌面 widget，用戶系統日曆等，並通過服務化進行開放。此外，我們也在關注用戶進端體驗，通過分析並優化鏈路卡點，目標使體驗絲般順滑。
-
互動場景 - EVA
在人口紅利開始萎縮，各個 App 都開始以娛樂化互動作爲重要手段來爭取用戶的在線時長。因此在諸如互動業務領域內，我們就需要打造核心輕量化、研發速度快、用戶體驗好的互動技術，它是 Web 技術的一塊特定領域，融合了圖形、渲染、動畫以及前端工程和軟件工程等知識。
大淘寶互動前端團隊打造了完全自研的互動研發體系 EVA，包括：
- Eva.js/Hilo3D：性能卓越、自研的 2D/3D 引擎框架，提供強大的組件能力，均已開源。
- EVA Workstation：管理項目彙總信息，鏈接多個平臺，自動生成項目文檔。
- EVA Store：管理和處理互動動畫類素材，也是阿里互動資產中臺的基礎服務。
- EVA Figure：針對虛擬人物形象的渲染、動作、表情、穿着等統一解決方案。也是淘寶人生 3D 形象、明星 IP 3D 形象主渲染解決方案。
同時 EVA 體系的建設也和阿里互動方向緊密結合在一起，打造阿里最優秀的互動解決方案，並最終實現我們的願景：人人可開發、處處有互動。
-
內容消費
隨着直播、短視頻產品持續升溫，內容化也成了大淘寶的核心戰略之一。大淘寶在內容消費領域打造了淘寶直播、逛逛、點淘等核心內容場，我們的工程師面向 C 端消費重點打造了播放器 VideoX 和開放技術 ALive。
播放器 - VideoX
VideoX 是內容前端團隊基於電商業務背景打造的面向大終端場景的前端播放器，使用 W3C 規範的 API 在各渲染容器（WebView、PHA、Weex、MiniApp）上播放主流的視頻格式（H.264、H.265）和媒體協議（FLV、HLS）。
面向 Web 場景：提供 React-VideoX 播放器組件，藉助 WebAssembly、MSE、WebGL 等前沿技術拓展瀏覽器的播放能力。
面向多端場景：提供 Rax-VideoX 播放器組件，已支持 WebView、PHA、Weex、MiniApp 容器，在手淘內使用同層渲染調用原生播放內核，提供強大的播放能力。
整個產品能力包括播放器規範、播放器內核、播放器組件、播放器配套設施：
開放技術 - ALive
ALive 提供了直播間、短視頻等全屏頁內的互動營銷解決方案，大家在淘寶直播間裏看到的各類互動玩法都是由 ALive 承載：
ALive 構建了一個靈活、高效的直播容器，解決性能問題；提供一套直播間組件開發的工程鏈路，解決效能問題：
- 直播容器：支持多種類型組件（如直播間右側掛件、主播推送的消息卡片）、支持主播排序（如支持主播主動配置順序，調整渲染優先級）；統一規範的組件協議（如組件行爲、自定義消息協議）；通過組件的沙箱環境來確保互動穩定性。
- 工程鏈路：統一腳手架增強調試能力（如直播間模擬、調試代理、熱更新、編譯檢測等）；Debug 工具是基於直播容器的一個開發控制檯，提供日誌調試、容器化 API 調用、數據 Mock 等功能；常用基礎庫提供包括直播間常用互動的基礎組件庫、kit 工具庫等。
▐中後臺應用
各業務域除了前臺場景的應用，還有面向 B 端的中後臺應用技術，受衆主要有商家、達人、運營三類人羣。
-
商家
千牛
千牛作爲一站式商家工作臺，滿足商家全場景經營訴求，技術側建設面向商家視⻆的一站式工作臺，統一構建商家場景化經營動線，分階段把各個基礎鏈路產品進行業務重構接入新千牛工作臺。
給前端們帶來的技術挑戰是如何建設 B/C 一體的開放技術體系，滿足手淘開放的業務訴求；優化商家 PC /無線應用技術體系，實現快速且高質量迭代能力。核心包括以下兩件事情：
商家研發技術體系升級：商家微應用&微模塊技術體系的建設，包含運行容器、研發工程鏈路和元數據服務，規範業務應用研發標準和交付標準；各應用性能榜單，包括各類維度的體驗數據大盤，使問題可被分類跟蹤解決。
淘寶小程序 BC 一體的端到端開放技術體系建設：PC 和無線小程序從 0 到 1 的建設、淘寶小程序跟支付寶小程序的融合，建設業務開放解決方案和業務開放平臺。
淘寶店鋪
店鋪作爲一個超級流量產品，是消費購物和內容分發核心交易鏈路重要的一環。店鋪技術團隊需要面向千萬的賣家和億級別的消費者打造一套高效、簡潔的框架，構建分層的店鋪，升級店鋪行業垂直化的能力，讓消費者在店鋪可以逛起來。
同時提供面向 ISV 的開放解決方案，爲商家提供更豐富的店鋪運營能力。店鋪技術團隊從三個方向去建設：
- 消費者體驗：業務上有歷史包袱重、角色多樣、技術架構複雜等難點，同時精細化運營帶來業務邏輯日益繁複，對整個技術架構提出了更高的要求。將小程序、weex、web 等多種技術棧統一收斂爲 Dx + web 的 web 同構架構，該架構上線後對於消費者體驗和研發效率都有大幅度的提升。
- 商家&小二體驗：基於商家經營方式和行業小二的專業能力，實現不同行業屬性、不同經營屬性的商家細粒度管控能力。基於“配平”平臺爲商家提供更高效的裝修模板，同時行業店鋪提供更多的經營工具。
- 開放能力：以小部件技術體系爲基礎，提供更高效和更豐富的開發能力，和 ISV 一起爲商家提供豐富的運營工具；同時基於阿里巴巴模塊規範提供符合端側規範的二方 LiveCard 開放能力。
▐達人
-
淘寶主播·直播推流
我們基於 Electron 打造了一站式的淘寶主播工作臺。使得我們可以圍繞主播全鏈路，提升播前、開播、場控、播後、數據診斷等環節的體驗及效率。基於 Electron 和微前端方案，開發調試體驗與瀏覽器端無差，前端客戶端各司其職，同時提供了實時智能場控數字化、可視化、智能化的運營能力。
基於 Electron 跨端的特性，雙端迭代變得可行並高效。
親拍·視頻剪輯
同樣基於 Electron，我們打造了視頻模板生產和視頻剪輯工具：
基於 WebRTC 還構建了 Web 雲剪輯產品，實時的雲端媒體處理，前後端完全解耦，提供輕量易集成的 Web 在線視頻生產服務。
下圖展示了 Web 雲剪輯在淘寶直播業務中落地的口播剪輯器，主播可以從直播回放中截取片段並通過 ASR 自動生成字幕，快速完成直播精簡短視頻，供二次傳播：
無論是 Electron 剪輯還是 Web 雲剪輯，它們共用了一套剪輯 UI 庫實現，這得益於我們 GUI + 剪輯內核解耦的架構設計：
視頻剪輯技術生態
▐運營
-
運營工作臺
電商發展 20 餘年，形成了相當複雜運營體系，目標定位基於人、貨、場、商全局構建技術及體驗一致，標準化、數據化、高效易用運營操作系統的運營工作臺應運而生。
運營工作臺提供產研及權限、工具等能力的基礎平臺，基於人貨場商構建的運營操作單元(PU)能力，通過 PU 基於運營動線構建的標準化操作流程(SOP)及最終針對各個業務域交付的站點解決方案，最終以運營工作臺統一入口的站點以一致的體驗提供給運營同學使用：
在運營工作臺業務體系能力的建設的基礎上，我們通過對業務不同層次的抽象，前端側核心打造了面向中後臺應用的通用低代碼搭建 Iceluna 以及與業務場景更深結合的無代碼研發解決方案 ORCA，大幅的提高了前端的標準化交付能力。同時通過體驗度量中心的建設，將運營小二的操作流暢度和系統的穩定性整體監控起來，形成體驗的常態化治理能力。
運營工作臺前端架構
-
營銷場製作平臺 - 方舟
方舟是面向營銷活動及日常態營銷業務的場解決方案，基於搭建、智能化技術爲淘系營銷業務提供場製作及場管理能力。希望能通過算法和數據賦能的場製作方案、以及面向營銷業務的產品化協同機制幫助營銷業務從人工運營向數據化運營轉變。我們在淘寶裏看到的所有會場均是由運營在方舟上搭建產出的：
