簡介：2020年618大促已經過去，作為淘系每年重要的大促活動，淘系前端在其中扮演著什么樣的角色，如何保證大促的平穩進行？又在其中應用了哪些新技術？ 淘系技術特此推出「618 系列|淘系前端技術分享」，為大家介紹 618 中的前端身影。本篇的作者是來自于營銷活動團隊的墨冥，為大家介紹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的新歷史，此時此刻，非你莫屬！

簡歷投遞📮：moming.lq@alibaba-inc.com

關注「淘系技術」微信公眾號，一個有溫度有內容的技術社區~

原文鏈接：https://developer.aliyun.com/article/766529?

版權聲明：本文中所有內容均屬于阿里云開發者社區所有，任何媒體、網站或個人未經阿里云開發者社區協議授權不得轉載、鏈接、轉貼或以其他方式復制發布/發表。申請授權請郵件developerteam@list.alibaba-inc.com，已獲得阿里云開發者社區協議授權的媒體、網站，在轉載使用時必須注明"稿件來源：阿里云開發者社區，原文作者姓名"，違者本社區將依法追究責任。 如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至：developer2020@service.aliyun.com 進行舉報，并提供相關證據，一經查實，本社區將立刻刪除涉嫌侵權內容。

總結

以上是生活随笔為你收集整理的618 大促背后的淘系前端技术体系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。