簡介：2020年618大促已經(jīng)過去，作為淘系每年重要的大促活動，淘系前端在其中扮演著什么樣的角色，如何保證大促的平穩(wěn)進(jìn)行？又在其中應(yīng)用了哪些新技術(shù)？ 淘系技術(shù)特此推出「618 系列|淘系前端技術(shù)分享」，為大家介紹 618 中的前端身影。本篇的作者是來自于營銷活動團(tuán)隊的墨冥，為大家介紹618大促背后的淘系前端技術(shù)體系。

2020年618大促已經(jīng)過去，作為淘系每年重要的大促活動，淘系前端在其中扮演著什么樣的角色，如何保證大促的平穩(wěn)進(jìn)行？又在其中應(yīng)用了哪些新技術(shù)？

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

前言

持續(xù)近一個月的618電商大促終于落下帷幕。筆者有幸成為阿里這次618大促的前端負(fù)責(zé)人，借著這個機(jī)會跟大家分享一下支撐618大促背后的前端技術(shù)體系，作為阿里淘系618前端技術(shù)分享系列的開篇。

業(yè)務(wù)背景

2020開年的前幾個月，肆虐的新冠肺炎疫情把人們封印在家中，對中國的服務(wù)業(yè)、旅游業(yè)等線下經(jīng)濟(jì)產(chǎn)生了巨大的沖擊，同時也大大促進(jìn)了電商網(wǎng)購、線上辦公、線上醫(yī)療等服務(wù)的發(fā)展。對電商平臺、商家、消費(fèi)者來說，今年的618，成為了疫情之后國內(nèi)最大的電商消費(fèi)節(jié)點(diǎn)，對拉動內(nèi)需，促進(jìn)國內(nèi)消費(fèi)，帶動就業(yè)起到非常關(guān)鍵的作用。

阿里作為電商領(lǐng)域的引領(lǐng)者，今年618大促一貫地保持了對友商的競爭優(yōu)勢，創(chuàng)造了新的數(shù)字消費(fèi)記錄，業(yè)務(wù)玩法和策略上也有了一些新的變化。例如：

• 超長的售賣周期：5.25預(yù)售、5.29開門紅、6.4多波段品類日、6.16狂歡日
• 消費(fèi)券發(fā)放：平臺、各地政府和商家一共發(fā)放了超100億元的消費(fèi)券和補(bǔ)貼
• 直播帶貨：通過直播帶貨讓用戶更好地感知商品，提升流量變現(xiàn)效率，形成電商導(dǎo)購的新模式
• 互動任務(wù)體系：618理想生活列車，做任務(wù)，賺喵幣，瓜分10億平臺和商家福利
• ......

經(jīng)過多年的沉淀和發(fā)展，淘系前端已經(jīng)構(gòu)建出了一套較為完備的技術(shù)體系，用以支撐阿里包含618、雙11在內(nèi)的電商營銷活動業(yè)務(wù)。接下來筆者將簡單介紹淘系前端技術(shù)體系以及這個技術(shù)體系上基于618大促的場景訴求，技術(shù)演進(jìn)的創(chuàng)新點(diǎn)。

淘系前端技術(shù)體系

淘系前端技術(shù)體系大圖

? 工程體系

• 前端研發(fā)規(guī)范：統(tǒng)一的編碼規(guī)范、組件規(guī)范、模塊規(guī)范等，確保跨業(yè)務(wù)，跨團(tuán)隊之間的研發(fā)質(zhì)量和協(xié)同效率
  發(fā)布工具：云端構(gòu)建的前端發(fā)布工具集。通過配套的規(guī)范、流程定義、權(quán)限管理以及數(shù)據(jù)日志提高前端開發(fā)效率，保證團(tuán)隊開發(fā)過程的一致性和可復(fù)制性，提升代碼質(zhì)量和安全

調(diào)試工具：支持source map、斷點(diǎn)調(diào)試、本地代理、云真機(jī)等能力在內(nèi)的調(diào)試工具集
本地IDE：集成發(fā)布工具、調(diào)試工具能力的本地開發(fā)環(huán)境
WebIDE：基于Web，輕量化的集成開發(fā)環(huán)境，使用瀏覽器即可進(jìn)行前端編碼研發(fā)

? 基礎(chǔ)架構(gòu)

• 終端架構(gòu)：基于Rax（已開源，超輕量，高性能，易上手的類React 多端渲染引擎） 的終端架構(gòu)。Rax DSL 通過構(gòu)建不同的產(chǎn)物可運(yùn)行于Web、Weex、小程序等容器，提供豐富的組件生態(tài)，做到一碼多端，幫助前端高效研發(fā)無線頁面
  
• 中后臺架構(gòu)：基于ICE（飛冰，已開源）的中后臺前端研發(fā)架構(gòu)。支持微前端、豐富的中后臺組件、領(lǐng)域模板，幫助前端快速構(gòu)建中后臺應(yīng)用
• 互動架構(gòu)：基于阿里內(nèi)部高效、高性能、可擴(kuò)展的互動引擎EVA（尚未開源）的互動架構(gòu)。提供豐富的互動素材、組件生態(tài)，幫助前端高效研發(fā)互動玩法
• 直播架構(gòu)：基于阿里內(nèi)部自研播放器、流媒體服務(wù)的直播架構(gòu)。提供多端一致的播放器，低延時通道，可靠的雙向通信機(jī)制，幫助前端高效研發(fā)豐富的短視頻/直播玩法

? 技術(shù)平臺

• 搭投平臺：基于豐富的模塊體系和搭投服務(wù)，以No Code 方式讓業(yè)務(wù)能夠搭建成千上萬的頁面，并提供可運(yùn)營的數(shù)據(jù)投放管理能力。
• 中后臺研發(fā)平臺：基于ICE架構(gòu)，提供Pro Code、Low Code、No Code 三種方式讓前端、開發(fā)高效研發(fā)中后臺頁面和應(yīng)用
• 互動研發(fā)平臺：基于EVA互動架構(gòu)，提供通過流程編排生成互動玩法的能力，并沉淀玩法庫提供給業(yè)務(wù)直接使用
• 直播開放平臺：基于ALive直播架構(gòu)，提供直播、互動、營銷一體化解決方案，賦能二方、三方直播能力

? 線上服務(wù)

• 網(wǎng)關(guān)接入：前端頁面統(tǒng)一的網(wǎng)關(guān)接入層，提供域名管理、回源服務(wù)、限流、灰度等能力
• 渲染引擎：基于 Node.js 編寫的服務(wù)端渲染模版的容器，為阿里提供全平臺的統(tǒng)一前端模版渲染引擎

? 端

• 客戶端：
  1、PHA：Progressive Hybrid App，漸進(jìn)式混合應(yīng)用， 提供客戶端內(nèi)的輔助能力，提升 webview 渲染性能與體驗

2、Weex：一個可以使用現(xiàn)代化的 Web 技術(shù)開發(fā)動態(tài)高性能原生應(yīng)用的框架

• 瀏覽器：
  1、PWA：Progressive Web App，使用多種技術(shù)來增強(qiáng)Web App的能力，如通知推送，離線緩存等

618技術(shù)亮點(diǎn)

基于以上淘寶前端技術(shù)體系和這次618的業(yè)務(wù)訴求，淘系前端進(jìn)一步做了許多技術(shù)和方案的亮點(diǎn)創(chuàng)新，例如PHA、同層渲染、前端智能化探索、極致性能體驗、營銷互動提效、小程序、資損防控等，相關(guān)技術(shù)方案將以系列文章的方式做一些總結(jié)和沉淀，讓我們先簡單一睹為快

? 互動生產(chǎn)力進(jìn)化之路

今年618我們帶來了名為“幸運(yùn)列車”的互動游戲，攜全國各地的特色農(nóng)貨和美食，讓大家在這個夏天尋味中國。從2019年雙十一的 “蓋樓 ”到今年618的 “開列車”，在大促互動游戲背后，是業(yè)務(wù)多變性、產(chǎn)品穩(wěn)定性和研發(fā)效率的多重博弈。這篇文章將介紹淘系互動前端團(tuán)隊如何應(yīng)對研發(fā)效率 & 產(chǎn)品穩(wěn)定性的挑戰(zhàn)，內(nèi)容涵蓋“互動智能測試” & “彈窗規(guī)模化生產(chǎn)”這兩個技術(shù)方案。

? 618會場性能保障全揭秘

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

? 億級用戶高穩(wěn)定性視頻播放器養(yǎng)成計劃

2020直播帶貨是電商導(dǎo)購的新模式之一。PHA 框架的優(yōu)秀性能，使大量業(yè)務(wù)回歸跨平臺和開放的Web體系，但原生系統(tǒng)的播放器對于直播/短視頻來說，穩(wěn)定性、性能、播放能力支持均難以達(dá)到使用標(biāo)準(zhǔn)。這篇文章將介紹此背景下，我們?nèi)绾瓮ㄟ^同層渲染技術(shù)實(shí)現(xiàn)在Web中使用阿里淘系自研的Native播放器，做到期間0故障，整體無降級，端crash率穩(wěn)定。

? 資損防控-代碼掃描技術(shù)揭秘

現(xiàn)如今，日常業(yè)務(wù)的資損防控工作在安全生產(chǎn)環(huán)節(jié)中已經(jīng)變得越來越重要。尤其是每逢大促活動（譬如本次618大促），一旦出現(xiàn)資損故障更容易引發(fā)重大損失。如果只是通過 code review 之類的方式，效率低且其質(zhì)量參差不齊，無法得到保障。這篇文章將介紹我們?nèi)绾瓮ㄟ^引入代碼掃描，在每次代碼提交時都能自動檢測出代碼中的資損風(fēng)險并給出告警，從而在研發(fā)階段就能提前發(fā)現(xiàn)問題并及時修復(fù)。

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

AI技術(shù)的飛速發(fā)展，使得機(jī)器代替人編碼產(chǎn)生了可能性。P2C，即通過智能算法由結(jié)構(gòu)化產(chǎn)品需求文檔直接生成可用前端代碼的技術(shù)方案。實(shí)現(xiàn)P2C，將給代碼研發(fā)帶來巨大的效率突破。這篇文章將主要圍繞自動化生成代碼的目標(biāo)，分享我們在這一過程中的所思所想，以及我們在618會場中的實(shí)踐。

? 旗艦店小程序升級，承上啟下的一步

為了建設(shè)更加開放的生態(tài)能力、更加豐富的商家運(yùn)營能力，我們在過去一段時間操刀了旗艦店小程序升級。旗艦店作作為流量大、架構(gòu)復(fù)雜、穩(wěn)定性要求高的典型場景，技術(shù)挑戰(zhàn)極大，整個過程遇到的問題非常多。在本次618大促，店鋪是如何落地小程序技術(shù)方案？又是如何建設(shè)小程序的性能體驗？最后又是如何保障店鋪的大促穩(wěn)定性？這篇文章會重點(diǎn)介紹店鋪的小程序架構(gòu)、性能優(yōu)化方案、穩(wěn)定保障措施等，圍繞店鋪在小程序上的實(shí)踐，分享在整個過程中遇到的問題和經(jīng)驗。

? 頻道業(yè)務(wù)黑科技-行業(yè)魔方

過去的一年，天貓行業(yè)的業(yè)務(wù)發(fā)展促使快速建場、高效用場的需求愈發(fā)強(qiáng)烈，而行業(yè)前端的開發(fā)方式仍是勞動密集型，對行業(yè)頻道這類長尾業(yè)務(wù)弊大于利。得益于淘系前端的積累，去年底開始，天貓行業(yè)與UED、產(chǎn)品團(tuán)隊合作完成了TaoUI組件規(guī)范，并建設(shè)了織網(wǎng)組件中心來支撐行業(yè)沉淀下來的物料，那么，如果按照一定的規(guī)范，使用直接的數(shù)據(jù)模型直接驅(qū)動組件，是不是大部分普適的模塊就不需要開發(fā)了呢？于是，行業(yè)魔方應(yīng)運(yùn)而生。在這次天貓服飾行業(yè)618會場的商品內(nèi)容中支持了混排 Feeds流，這篇文章將分享通過更通用、輕量的方案為營銷會場帶來了更豐富的體驗，讓用戶不僅買得爽，還能看得爽。

結(jié)語

作為阿里淘系618前端技術(shù)分享系列的開篇，本文主要是拋磚引玉，從整體上介紹淘系前端技術(shù)體系以及在618大促中的技術(shù)亮點(diǎn)，請期待后續(xù)詳細(xì)的各項專題詳細(xì)分享文章。

淘系前端團(tuán)隊

618雖然已經(jīng)結(jié)束，但更大規(guī)模的雙11全球狂歡節(jié)馬上就要啟動。高復(fù)雜度、大規(guī)模的營銷活動業(yè)務(wù)場景持續(xù)推動著淘系前端技術(shù)體系朝著極致方向迭代演進(jìn)，期待更多的同學(xué)加入阿里淘系前端團(tuán)隊，一起來創(chuàng)造618、雙11的新歷史，此時此刻，非你莫屬！

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

關(guān)注「淘系技術(shù)」微信公眾號，一個有溫度有內(nèi)容的技術(shù)社區(qū)~

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。