?

作者|朱華軍（阿大）
出品|InfoQ&阿里巴巴新零售淘系技術(shù)部

導(dǎo)讀：隨著前端技術(shù)不斷從 Web 延伸至各種“端”，大前端的概念早已成為業(yè)內(nèi)共識(shí)。伴隨著大前端的發(fā)展，與之相對(duì)應(yīng)的前端工程體系也在不斷拓展邊界，僅僅只是構(gòu)建、工具和規(guī)范等常規(guī)方式已經(jīng)不足以表達(dá)當(dāng)下前端工程所涉及的領(lǐng)域。

嘉賓介紹：

朱華軍（阿大），阿里巴巴淘系技術(shù)部高級(jí)前端技術(shù)專(zhuān)家。2009 年加入淘寶網(wǎng)，負(fù)責(zé)過(guò)淘寶交易、商品等基礎(chǔ)業(yè)務(wù)及機(jī)票彩票、一淘等創(chuàng)新業(yè)務(wù)。2013 年開(kāi)始專(zhuān)注于前端工程化領(lǐng)域，推動(dòng)開(kāi)發(fā)工具、流程和規(guī)范的統(tǒng)一，完成淘寶近百人前端團(tuán)隊(duì)研發(fā)模式的整體升級(jí)。目前負(fù)責(zé)阿里集團(tuán)前端工程化中臺(tái)的建設(shè)。

前言：

近日，阿里巴巴高級(jí)前端技術(shù)專(zhuān)家朱華軍（阿大）受 InfoQ 采訪邀約，分享了阿里集團(tuán)前端工程化中臺(tái)的實(shí)踐過(guò)程，以及實(shí)踐背后的經(jīng)驗(yàn)與思考。他在采訪中強(qiáng)調(diào)，前端工程化一定是大趨勢(shì)，但不建議大家盲目地追求工程化，對(duì)于大部分規(guī)模不大的前端團(tuán)隊(duì)而言，工程體系的建設(shè)和規(guī)范并不是當(dāng)務(wù)之急。

接下來(lái)，阿大將在 QCon 全球軟件開(kāi)發(fā)大會(huì)（北京站）2020 擔(dān)任大前端大工程專(zhuān)題出品人，為大家?guī)?lái)各大廠前端團(tuán)隊(duì)在工程領(lǐng)域不斷拓展思路、換道創(chuàng)新中沉淀下來(lái)的經(jīng)驗(yàn)和實(shí)踐，感興趣的讀者可以關(guān)注。以下為采訪問(wèn)答實(shí)錄。

Q：您從 2013 年開(kāi)始專(zhuān)注于前端工程化領(lǐng)域，并完成了淘寶近百人前端團(tuán)隊(duì)研發(fā)模式的整體升級(jí)，能否先總體介紹一下淘寶前端團(tuán)隊(duì)研發(fā)模式的發(fā)展歷程，期間一些重要的節(jié)點(diǎn)。

朱華軍（阿大）：

我是 09 年加入的淘寶，那時(shí)淘寶前端的研發(fā)體系還比較原始，代碼管理是基于 SVN 的，所有前端代碼都在一個(gè)代碼倉(cāng)庫(kù)里。每周有兩個(gè)發(fā)布窗口期，SCM 會(huì)提前拉好開(kāi)發(fā)分支，大家在一個(gè)分支上開(kāi)發(fā)、集成和上線。那個(gè)時(shí)候前端的代碼是所寫(xiě)即所得，不需要編譯構(gòu)建什么的，本地的開(kāi)發(fā)環(huán)境相對(duì)也簡(jiǎn)單，基本以文本編輯器為主。

大概到了 13 年的左右，NodeJS 和 Git 開(kāi)始流行，淘寶前端聯(lián)合 SCM 團(tuán)隊(duì)基于開(kāi)源的 Gitlab 在集團(tuán)內(nèi)搭建了 Git 托管環(huán)境，前端是最早將代碼從 SVN 全部遷移到 Git 進(jìn)行管理的技術(shù)崗位，這個(gè)決策對(duì)后續(xù)阿里巴巴前端工程體系建設(shè)起到了非常重要的影響。由于 Git 在分支管理特性上的優(yōu)勢(shì)，原先前端的集成開(kāi)發(fā)模式慢慢演變成了基于 Git 分支和 Gitlab Web Hook 的半自動(dòng)化模式。

另外 NodeJS 的崛起也快速促進(jìn)了我們內(nèi)部前端本地開(kāi)發(fā)工具生態(tài)的完善，各種本地 Command Line 工具如雨后春筍般涌現(xiàn)。百花齊放的繁榮之后必然的結(jié)果就是規(guī)范和一統(tǒng)，彼時(shí)剛好集團(tuán)在推行中臺(tái)戰(zhàn)略，前端研發(fā)工程體系順勢(shì)走上中臺(tái)化道路。

Q：集團(tuán)內(nèi)部是什么時(shí)候確定要做前端工程化中臺(tái)的？做這個(gè)決定的背景是什么樣的？面臨的最大挑戰(zhàn)是什么？期望中臺(tái)解決什么問(wèn)題？

朱華軍（阿大）：

17 年初的時(shí)候吧，在這之前我們已經(jīng)統(tǒng)一了淘寶前端團(tuán)隊(duì)的工程體系，有了完善的本地開(kāi)發(fā)工具生態(tài)，標(biāo)準(zhǔn)化了本地的開(kāi)發(fā)和調(diào)試。另外還搭建了一套在線發(fā)布流程，孵化了如云構(gòu)建（代碼在線構(gòu)建）、門(mén)神（代碼靜態(tài)掃描）等前端工程基礎(chǔ)設(shè)施。

那一年初團(tuán)隊(duì)在做規(guī)劃的時(shí)候，大家對(duì)前端工程體系接下來(lái)發(fā)展方向有一些爭(zhēng)議：

• 第一個(gè)觀點(diǎn)認(rèn)為我們應(yīng)該將本地的研發(fā)工具統(tǒng)統(tǒng)搬上云，包括在線 IDE、在線 Dev 等，在線化一定是未來(lái)的趨勢(shì)；
• 第二個(gè)觀點(diǎn)認(rèn)為我們應(yīng)該輸出淘寶前端的工程能力到整個(gè)阿里巴巴集團(tuán)，淘寶前端的工程體系建設(shè)已經(jīng)站在了集團(tuán)的制高點(diǎn)，應(yīng)該順勢(shì)推進(jìn)整個(gè)集團(tuán)前端研發(fā)體系的規(guī)范化。

在當(dāng)時(shí)的情況下，集團(tuán)中大部分 BU 的前端體系或多或少都源自淘寶前端，中間有著千絲萬(wàn)縷的關(guān)系，另外還有一個(gè)外部因素就是大家已經(jīng)非常熟悉的阿里提出的中臺(tái)戰(zhàn)略，在集團(tuán)中臺(tái)戰(zhàn)略大的趨勢(shì)下我們最終毅然決然地選擇了建設(shè)阿里巴巴前端工程中臺(tái)。

當(dāng)然這不是說(shuō)第一件事情就不重要，恰巧在經(jīng)歷過(guò)前端工程中臺(tái)的建設(shè)后，我們目前在做的就是 IDE 和在線研發(fā)能力。

阿里是一個(gè)龐大的經(jīng)濟(jì)體，各事業(yè)群和事業(yè)部加起來(lái)有幾十上百個(gè)大大小小的前端團(tuán)隊(duì)，推進(jìn)如此多的團(tuán)隊(duì)來(lái)規(guī)范前端研發(fā)體系的阻力是巨大的。加之每個(gè)前端團(tuán)隊(duì)當(dāng)下的前端工程體系建設(shè)程度不一樣，對(duì)標(biāo)準(zhǔn)化前端工程開(kāi)發(fā)的理解和需求也都不一樣，如何說(shuō)服并協(xié)調(diào)推進(jìn)如此眾多的前端團(tuán)隊(duì)，是我們做這件事情遇到的第一個(gè)難題。

簡(jiǎn)單說(shuō)下我們是如何解決的，類(lèi)似的問(wèn)題我想稍微有規(guī)模一點(diǎn)的跨團(tuán)隊(duì)協(xié)作項(xiàng)目應(yīng)該都會(huì)碰到，我們首先 需要得到自上而下的支持。阿里巴巴集團(tuán)內(nèi)不同的技術(shù)棧都有一個(gè)技術(shù)委員會(huì)，前端也有一個(gè)阿里前端技術(shù)委員會(huì)。技術(shù)委員會(huì)的成員一般都是各事業(yè)群較大規(guī)模前端團(tuán)隊(duì)的 Leader，每年委員會(huì)會(huì)發(fā)起幾個(gè)技術(shù)項(xiàng)目，并協(xié)同集團(tuán)內(nèi)資源合力推進(jìn)。經(jīng)過(guò)努力，前端工程中臺(tái)爭(zhēng)取到了委員會(huì)其中一個(gè)技術(shù)項(xiàng)目。有了自上而下的支持，很多事情推進(jìn)就方便多了。不過(guò)光靠自上而下推動(dòng)也是不行的，畢竟技術(shù)體系的升級(jí)改造對(duì)日常業(yè)務(wù)的正常進(jìn)度肯定是有影響的。

另外 對(duì)于大部分規(guī)模不大的前端團(tuán)隊(duì)而言，工程體系的建設(shè)和規(guī)范并不是當(dāng)務(wù)之急。所以我們首先選擇集團(tuán)內(nèi)規(guī)模最大的 TOP 5 前端團(tuán)隊(duì)進(jìn)行推進(jìn)，這些團(tuán)隊(duì)對(duì)于規(guī)范前端研發(fā)的需求更加強(qiáng)烈，并且本身也有一定的工程底子積累，溝通可以更加順暢，彼此之間也有更多的理解和認(rèn)可。當(dāng)幾個(gè)較大前端團(tuán)隊(duì)統(tǒng)一之后，其它團(tuán)隊(duì)就輕松很多了，甚至大部分小團(tuán)隊(duì)是主動(dòng)要求接入前端工程中臺(tái)的。

大部分的基礎(chǔ)技術(shù)體系建設(shè)逃不開(kāi)三個(gè)關(guān)鍵字：效率、質(zhì)量和成本。前端工程體系的建設(shè)也是緊緊圍繞著這三個(gè)關(guān)鍵字，通過(guò)標(biāo)準(zhǔn)化的研發(fā)能力和統(tǒng)一的流程規(guī)范來(lái)約束研發(fā)過(guò)程中的不確定性，從而提升研發(fā)效率和質(zhì)量。效率和質(zhì)量提升了，成本自然就降了。而前端工程中臺(tái)的目的是期望降低所有前端團(tuán)隊(duì)達(dá)成這一目標(biāo)的門(mén)檻，不管團(tuán)隊(duì)在什么階段、是何種規(guī)模，都能借助前端工程中臺(tái)快速落地適合自身組織形態(tài)和技術(shù)特點(diǎn)的前端工程方案。

Q：阿里前端工程化中臺(tái)能夠提供哪些服務(wù)和技術(shù)能力？在通過(guò)中臺(tái)提高前端研發(fā)效率上，能否列舉一個(gè)具體示例進(jìn)行說(shuō)明？

朱華軍（阿大）：

在我個(gè)人的理解里，標(biāo)準(zhǔn)化和開(kāi)放一定是任何一個(gè)中臺(tái)必須具備的能力。這兩者看上去似乎有點(diǎn)矛盾，卻是我們?cè)诮ㄔO(shè)前端工程中臺(tái)時(shí)切實(shí)的感受和總結(jié)。比如我們統(tǒng)一了靜態(tài)源站和發(fā)布流程，規(guī)范了本地工具命令入口和裝載更新模式，更是推進(jìn)了標(biāo)準(zhǔn)化的在線構(gòu)建體系與代碼檢查體系的建設(shè)。關(guān)于開(kāi)放，前面有講到前端工程中臺(tái)的目的是降低所有前端團(tuán)隊(duì)工程體系建設(shè)的門(mén)檻，所以賦能必然是中臺(tái)的使命之一，開(kāi)放是賦能最直接有效的方式。

完善的工程體系必然會(huì)幫助團(tuán)隊(duì)提升研發(fā)效率，而工程中臺(tái)的使命是幫助每個(gè)團(tuán)隊(duì)更高效的完善工程體系的建設(shè)。對(duì)于中臺(tái)而言，研發(fā)效率的提升其實(shí)并不是最直接的收益，而是全局性的收斂和管控能力。

我舉個(gè)收斂管控方面的例子：18 年集團(tuán)整體推進(jìn)安全生產(chǎn)策略，所有的線上變更必須接入統(tǒng)一的變更管控平臺(tái)，提交變更單后允許進(jìn)行線上變更。這個(gè)時(shí)候工程中臺(tái)的價(jià)值就體現(xiàn)出來(lái)了，因?yàn)槲覀円呀?jīng)經(jīng)過(guò)一年多的努力收斂了所有前端的發(fā)布流程，整個(gè)集團(tuán)所有前端的發(fā)布接入統(tǒng)一變更管控幾乎沒(méi)有成本地實(shí)現(xiàn)了，這在推進(jìn)前端工程中臺(tái)之前是無(wú)法想象的，如果沒(méi)有前期的收斂根本無(wú)從下手。

Q：阿里前端工程化中臺(tái)目前推進(jìn)情況如何？與您的預(yù)期相符嗎？您理想的狀態(tài)應(yīng)該是什么樣的？

朱華軍（阿大）：

目前的整體進(jìn)展還是比較符合預(yù)期的，在流程規(guī)范和標(biāo)準(zhǔn)化方面我們已經(jīng)取得了非常好的效果，并且在推進(jìn)工程中臺(tái)的實(shí)踐過(guò)程中積累了不少優(yōu)秀的能力平臺(tái)，這些都是寶貴的資產(chǎn)。

當(dāng)然等著我們?nèi)プ龅氖虑檫€很多，有兩件事情是我們后續(xù)的重點(diǎn)。第一件事是開(kāi)放的 IDE 生態(tài)建設(shè)，經(jīng)過(guò)大半年的封閉開(kāi)發(fā)我們已經(jīng)完成了代號(hào)為 “開(kāi)天” 的 IDE Framework 的研發(fā)，IDE Framework 是 IDE 的核心，通過(guò) “開(kāi)天” IDE Framework 構(gòu)建的各種 IDE 實(shí)現(xiàn)（Web 或本地）來(lái)打通研發(fā)生態(tài)。待再進(jìn)一步完善后，我們將開(kāi)源整體的 IDE 解決方案，包括開(kāi)放的擴(kuò)展生態(tài)體系、Web IDE 容器側(cè)能力等。未來(lái)阿里前端的工程體系一定是圍繞著 IDE 展開(kāi)的。

第二件事情跟開(kāi)放相關(guān)，目前我們所有的工程能力都是服務(wù)于內(nèi)部員工的，我們期望借助阿里云能夠以平臺(tái)化、體系化和產(chǎn)品化地方式輸出阿里的前端工程實(shí)踐，服務(wù)社區(qū)服務(wù)行業(yè)，為推進(jìn)國(guó)內(nèi)前端的發(fā)展出一份力。

Q：在前端工程化中臺(tái)推進(jìn)過(guò)程中，來(lái)自前端團(tuán)隊(duì)的反饋是什么？有沒(méi)有遇到什么困難，你們是如何解決的？

朱華軍（阿大）：

困難肯定有，前面也有講到，在阿里巴巴如此龐大的體系內(nèi)，多部門(mén)的協(xié)調(diào)和落到遇到阻礙在所難免，關(guān)鍵是找到正確的解決方法。在每個(gè)前端團(tuán)隊(duì)中，對(duì)于工程化帶來(lái)的收益在個(gè)體與團(tuán)隊(duì)整體的體感差異是很大的。

這個(gè)怎么理解呢？我在很多場(chǎng)合表達(dá)過(guò)，越是完善的工程體系對(duì)個(gè)體的約束往往是越強(qiáng)的，帶來(lái)的結(jié)果可能是個(gè)體的效率反而是下降。所以我們?cè)谕七M(jìn)工程中臺(tái)時(shí)，來(lái)自一線的反對(duì)和抱怨聲是蠻常見(jiàn)的。但如果我們換個(gè)視角，從團(tuán)隊(duì)整體的角度去看待效率這個(gè)問(wèn)題，一定是能達(dá)到 1+ 1 大于 2 的效果的，特別是規(guī)模越大的團(tuán)隊(duì)效果越明顯。所以在前端工程中臺(tái)的建設(shè)和推進(jìn)中，我們優(yōu)先考慮的都是如何幫助團(tuán)隊(duì)整體獲得更高的收益。

Q：您認(rèn)為前端工程化中臺(tái)是大勢(shì)所趨嗎？推進(jìn)過(guò)程中可能還會(huì)遇到哪些挑戰(zhàn)？

朱華軍（阿大）：

前端工程不是萬(wàn)金油，它是在特定場(chǎng)景及特定時(shí)期的針對(duì)性解決方案，越是完美、越是高效的工程解決方案越是被所服務(wù)的組織結(jié)構(gòu)和技術(shù)架構(gòu)所約束，所以對(duì)我合適的前端工程解決方案對(duì)你未必合適。

前端工程化一定是大趨勢(shì)，但不建議大家盲目地追求工程化。任何體系或平臺(tái)的建設(shè)都是需要投入成本的，還是要結(jié)合自身組織特點(diǎn)，先清楚地認(rèn)識(shí)自己所處的階段，計(jì)算清楚投入產(chǎn)出比。

• 如果是 10 人以下的小規(guī)模的團(tuán)隊(duì)，適當(dāng)制定研發(fā)規(guī)范即可；
• 10 - 30 人規(guī)模的團(tuán)隊(duì)可以制定一些研發(fā)規(guī)范、落地工具和流程；
• 30 人以上團(tuán)隊(duì)規(guī)模就要開(kāi)始體系化思考前端工程能力的建設(shè)了。

中臺(tái)亦是如此，不要為了中臺(tái)而中臺(tái)，先想明白要解決什么問(wèn)題。

Q：機(jī)器學(xué)習(xí)在大前端領(lǐng)域也正成為一項(xiàng)越來(lái)越重要的技術(shù)能力，阿里前端團(tuán)隊(duì)在智能化方向上還有哪些探索工作？您如何看待前端智能化的現(xiàn)狀和未來(lái)發(fā)展？

朱華軍（阿大）：

阿里前端布局機(jī)器學(xué)習(xí)領(lǐng)域相對(duì)較早，前端智能化體系建設(shè)已經(jīng)連續(xù)兩年作為經(jīng)濟(jì)體前端委員會(huì)的技術(shù)項(xiàng)目之一了。并且也已經(jīng)有了相關(guān)的成型產(chǎn)品：imgcook（https://www.imgcook.com/）。imgcook 基于大數(shù)據(jù)機(jī)器學(xué)習(xí)，可以智能地將設(shè)計(jì)稿轉(zhuǎn)換成前端代碼，在 2019 年雙十一開(kāi)始就已經(jīng)大量應(yīng)用到會(huì)場(chǎng)頁(yè)面的開(kāi)發(fā)。還原精度業(yè)界領(lǐng)先，并且支持自定義擴(kuò)展 DSL，大家有興趣可以訪問(wèn)官網(wǎng)詳細(xì)了解。

基于機(jī)器學(xué)習(xí)的智能化輔助開(kāi)發(fā)是前端領(lǐng)域的下一個(gè)技術(shù)風(fēng)口， 我所知道的國(guó)內(nèi)國(guó)外不少大公司都在做。這個(gè)領(lǐng)域在基礎(chǔ)技術(shù)方面的發(fā)展已經(jīng)比較完備，不過(guò)目前前端在這方面的人才儲(chǔ)備還非常不足，有興趣的前端同學(xué)可以多了解了解。

Q：您將在本次 QCon 北京 2020 上擔(dān)任“大前端大工程”專(zhuān)題的出品人，能否跟我們?cè)敿?xì)談?wù)勊^“大前端大工程”指的是什么？這個(gè)專(zhuān)題將會(huì)跟大家重點(diǎn)分享哪些內(nèi)容？

朱華軍（阿大）：

大前端的概念應(yīng)該不需要過(guò)多介紹了，傳統(tǒng)的 HTML、CSS 和 JS 已經(jīng)完全無(wú)法定義當(dāng)下的前端。大工程其實(shí)是跟大前端相對(duì)應(yīng)的，僅僅只是構(gòu)建、工具和規(guī)范等常規(guī)方式也已經(jīng)不足以表達(dá)當(dāng)下前端工程所涉及的領(lǐng)域。為了提升研發(fā)效率、為了保障大規(guī)模協(xié)同、為了激發(fā)業(yè)務(wù)創(chuàng)新，各大廠的前端團(tuán)隊(duì)在工程領(lǐng)域不斷拓展思路，突破界限；優(yōu)秀的初創(chuàng)企業(yè)也從中另辟蹊徑，換道創(chuàng)新。如此繁榮的前端工程生態(tài)也只有叫大工程才配得上了。

本屆 QCon 該專(zhuān)題將遵循 “大前端大工程” 的定位徹底打開(kāi)前端工程實(shí)踐領(lǐng)域，我們會(huì)邀請(qǐng)國(guó)內(nèi)各大廠的優(yōu)秀前端團(tuán)隊(duì)來(lái)分享如何通過(guò)創(chuàng)新工程等手段來(lái)解決極限業(yè)務(wù)訴求。除了實(shí)踐之外還會(huì)有幾個(gè)前端工程相關(guān)的基礎(chǔ)技術(shù)（Webpack 等）分享，這塊以海外嘉賓為主。

Q：大前端領(lǐng)域涉及的工程能力越來(lái)越多樣化、復(fù)雜化，這是否意味著前端將進(jìn)入一個(gè)新的階段？前端工程師如何做好準(zhǔn)備？

朱華軍（阿大）：

其實(shí)前端一直在不停的進(jìn)入新階段，“學(xué)不動(dòng)了” 這個(gè)笑話很好地闡釋了前端技術(shù)領(lǐng)域的迭代變化之快。我認(rèn)為工程能力的完備程度，可以非常直接地體現(xiàn)一個(gè)技術(shù)的成熟度。完善的工程能力必然催生工作內(nèi)容的細(xì)分，并有效降低細(xì)分領(lǐng)域的入門(mén)門(mén)檻。同時(shí)也會(huì)必然會(huì)淘汰大量低級(jí)勞動(dòng)力，特別是在自動(dòng)化、智能化方向的工程實(shí)踐，未來(lái)一定會(huì)淘汰一大批入門(mén)級(jí)的前端工程師。

如果一定要給建議的話，對(duì)于那些目前已經(jīng)在前端崗位的同學(xué)，我建議要找到自己在前端的細(xì)分領(lǐng)域，然后持續(xù)深入下去。

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的从阿里前端工程化中台实践，看中台建设的舍与得的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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