618 大促背後的淘系前端技術體系

2020年618大促已經過去，作為淘系每年重要的大促活動，淘系前端在其中扮演着什麼樣的角色，如何保證大促的平穩進行？又在其中應用了哪些新技術？

淘系技術特此推出「618 系列|淘系前端技術分享」，為大家介紹 618 中的前端身影。本篇的作者是來自于營銷活動團隊的墨冥，為大家介紹618大促背後的淘系前端技術體系。

前言

持續近一個月的618電商大促終于落下帷幕。筆者有幸成為阿裡這次618大促的前端負責人，借着這個機會跟大家分享一下支撐618大促背後的前端技術體系，作為阿裡淘系618前端技術分享系列的開篇。

業務背景

2020開年的前幾個月，肆虐的新冠肺炎疫情把人們封印在家中，對中國的服務業、旅遊業等線下經濟産生了巨大的沖擊，同時也大大促進了電商網購、線上辦公、線上醫療等服務的發展。對電商平台、商家、消費者來說，今年的618，成為了疫情之後國内最大的電商消費節點，對拉動内需，促進國内消費，帶動就業起到非常關鍵的作用。

阿裡作為電商領域的引領者，今年618大促一貫地保持了對友商的競争優勢，創造了新的數字消費記錄，業務玩法和政策上也有了一些新的變化。例如：

• 超長的售賣周期：5.25預售、5.29開門紅、6.4多波段品類日、6.16狂歡日
• 消費券發放：平台、各地政府和商家一共發放了超100億元的消費券和補貼
• 直播帶貨：通過直播帶貨讓使用者更好地感覺商品，提升流量變現效率，形成電商導購的新模式
• 互動任務體系：618理想生活列車，做任務，賺喵币，瓜分10億平台和商家福利
• ......

經過多年的沉澱和發展，淘系前端已經建構出了一套較為完備的技術體系，用以支撐阿裡包含618、雙11在内的電商營銷活動業務。接下來筆者将簡單介紹淘系前端技術體系以及這個技術體系上基于618大促的場景訴求，技術演進的創新點。

淘系前端技術體系

淘系前端技術體系大圖

▐ 工程體系

• 前端研發規範：統一的編碼規範、元件規範、子產品規範等，確定跨業務，跨團隊之間的研發品質和協同效率

  釋出工具：雲端建構的前端釋出工具集。通過配套的規範、流程定義、權限管理以及資料日志提高前端開發效率，保證團隊開發過程的一緻性和可複制性，提升代碼品質和安全

調試工具：支援source map、斷點調試、本地代理、雲真機等能力在内的調試工具集

本地IDE：內建釋出工具、調試工具能力的本地開發環境

WebIDE：基于Web，輕量化的內建開發環境，使用浏覽器即可進行前端編碼研發

▐ 基礎架構

• 終端架構：基于 Rax （已開源，超輕量，高性能，易上手的類React 多端渲染引擎） 的終端架構。Rax DSL 通過建構不同的産物可運作于Web、Weex、小程式等容器，提供豐富的元件生态，做到一碼多端，幫助前端高效研發無線頁面

  

• 中背景架構：基于 ICE （飛冰，已開源）的中背景前端研發架構。支援微前端、豐富的中背景元件、領域模闆，幫助前端快速建構中背景應用

  

• 互動架構：基于阿裡内部高效、高性能、可擴充的互動引擎EVA（尚未開源）的互動架構。提供豐富的互動素材、元件生态，幫助前端高效研發互動玩法
• 直播架構：基于阿裡内部自研播放器、流媒體服務的直播架構。提供多端一緻的播放器，低延時通道，可靠的雙向通信機制，幫助前端高效研發豐富的短視訊/直播玩法

▐ 技術平台

• 搭投平台：基于豐富的子產品體系和搭投服務，以No Code 方式讓業務能夠搭建成千上萬的頁面，并提供可營運的資料投放管理能力。

  

• 中背景研發平台：基于ICE架構，提供Pro Code、Low Code、No Code 三種方式讓前端、開發高效研發中背景頁面和應用
• 互動研發平台：基于EVA互動架構，提供通過流程編排生成互動玩法的能力，并沉澱玩法庫提供給業務直接使用
• 直播開放平台：基于ALive直播架構，提供直播、互動、營銷一體化解決方案，賦能二方、三方直播能力

▐ 線上服務

• 網關接入：前端頁面統一的網關接入層，提供域名管理、回源服務、限流、灰階等能力
• 渲染引擎：基于 Node.js 編寫的服務端渲染模版的容器，為阿裡提供全平台的統一前端模版渲染引擎

▐ 端

• 用戶端：

  1、PHA：Progressive Hybrid App，漸進式混合應用， 提供用戶端内的輔助能力，提升 webview 渲染性能與體驗

2、

Weex

：一個可以使用現代化的 Web 技術開發動态高性能原生應用的架構

• 浏覽器：

  1、PWA：Progressive Web App，使用多種技術來增強Web App的能力，如通知推送，離線緩存等

618技術亮點

基于以上淘寶前端技術體系和這次618的業務訴求，淘系前端進一步做了許多技術和方案的亮點創新，例如PHA、同層渲染、前端智能化探索、極緻性能體驗、營銷互動提效、小程式、資損防控等，相關技術方案将以系列文章的方式做一些總結和沉澱，讓我們先簡單一睹為快

▐ 互動生産力進化之路

今年618我們帶來了名為“幸運列車”的互動遊戲，攜全國各地的特色農貨和美食，讓大家在這個夏天尋味中國。從2019年雙十一的 “蓋樓 ”到今年618的 “開列車”，在大促互動遊戲背後，是業務多變性、産品穩定性和研發效率的多重博弈。這篇文章将介紹淘系互動前端團隊如何應對研發效率 & 産品穩定性的挑戰，内容涵蓋“互動智能測試” & “彈窗規模化生産”這兩個技術方案。

▐ 618會場性能保障全揭秘

作為一名前端工程師，更高的性能、更流暢的體驗是長久不變的追求目标。而作為大促鋒線，會場頁面的性能表現直接影響了億萬消費者的購買體驗。那麼在今年的618，我們是如何讓消費者們在上千張的會場頁面裡能夠逛的知心、挑的稱心、買的開心呢？這篇文章将簡要介紹今年的618，我們是如何通過預緩存、請求優化、監控測試等方案來保障會場頁面體驗的。

▐ 億級使用者高穩定性視訊播放器養成計劃

2020直播帶貨是電商導購的新模式之一。PHA 架構的優秀性能，使大量業務回歸跨平台和開放的Web體系，但原生系統的播放器對于直播/短視訊來說，穩定性、性能、播放能力支援均難以達到使用标準。這篇文章将介紹此背景下，我們如何通過同層渲染技術實作在Web中使用阿裡淘系自研的Native播放器，做到期間0故障，整體無降級，端crash率穩定。

▐ 資損防控-代碼掃描技術揭秘

現如今，日常業務的資損防控工作在安全生産環節中已經變得越來越重要。尤其是每逢大促活動（譬如本次618大促），一旦出現資損故障更容易引發重大損失。如果隻是通過 code review 之類的方式，效率低且其品質參差不齊，無法得到保障。這篇文章将介紹我們如何通過引入代碼掃描，在每次代碼送出時都能自動檢測出代碼中的資損風險并給出告警，進而在研發階段就能提前發現問題并及時修複。

▐ P2C - 需求智能出碼的思考

AI技術的飛速發展，使得機器代替人編碼産生了可能性。P2C，即通過智能算法由結構化産品需求文檔直接生成可用前端代碼的技術方案。實作P2C，将給代碼研發帶來巨大的效率突破。這篇文章将主要圍繞自動化生成代碼的目标，分享我們在這一過程中的所思所想，以及我們在618會場中的實踐。

▐ 旗艦店小程式更新，承上啟下的一步

為了建設更加開放的生态能力、更加豐富的商家營運能力，我們在過去一段時間操刀了旗艦店小程式更新。旗艦店作作為流量大、架構複雜、穩定性要求高的典型場景，技術挑戰極大，整個過程遇到的問題非常多。在本次618大促，店鋪是如何落地小程式技術方案？又是如何建設小程式的性能體驗？最後又是如何保障店鋪的大促穩定性？這篇文章會重點介紹店鋪的小程式架構、性能優化方案、穩定保障措施等，圍繞店鋪在小程式上的實踐，分享在整個過程中遇到的問題和經驗。

▐ 頻道業務黑科技-行業魔方

過去的一年，天貓行業的業務發展促使快速建場、高效用場的需求愈發強烈，而行業前端的開發方式仍是勞動密集型，對行業頻道這類長尾業務弊大于利。得益于淘系前端的積累，去年底開始，天貓行業與UED、産品團隊合作完成了TaoUI元件規範，并建設了織網元件中心來支撐行業沉澱下來的物料，那麼，如果按照一定的規範，使用直接的資料模型直接驅動元件，是不是大部分普适的子產品就不需要開發了呢？于是，行業魔方應運而生。在這次天貓服飾行業618會場的商品内容中支援了混排 Feeds流，這篇文章将分享通過更通用、輕量的方案為營銷會場帶來了更豐富的體驗，讓使用者不僅買得爽，還能看得爽。

結語

作為阿裡淘系618前端技術分享系列的開篇，本文主要是抛磚引玉，從整體上介紹淘系前端技術體系以及在618大促中的技術亮點，請期待後續詳細的各項專題詳細分享文章。

淘系前端團隊

618雖然已經結束，但更大規模的雙11全球狂歡節馬上就要啟動。高複雜度、大規模的營銷活動業務場景持續推動着淘系前端技術體系朝着極緻方向疊代演進，期待更多的同學加入阿裡淘系前端團隊，一起來創造618、雙11的新曆史，此時此刻，非你莫屬！

履歷投遞📮：[email protected]

關注「淘系技術」微信公衆号，一個有溫度有内容的技術社群~