作者:茅曉鋒

導(dǎo)讀:打造出Ant Design、AntV等知名開源項目的螞蟻體驗技術(shù)團隊,實際工作是什么樣子呢?讓我們走近螞蟻前端工程團隊一探究竟。

我是螞蟻前端工程團隊的一位工程師。很多人都以為我們是一群專職“造輪子”的同學(xué)。那么工程團隊真實的日常工作是些什么呢?以我的觀察體驗,大概可以用有趣、有挑戰(zhàn)、有價值三個詞來總結(jié)。這里用幾個實際項目給大家做介紹。

有趣:讓“帶薪編譯”變得更快

隨著前端業(yè)務(wù)復(fù)雜度膨脹,團隊項目的云端構(gòu)建速度不可避免地出現(xiàn)了惡化,部分大項目甚至沖破了20min,“帶薪編譯”成了常態(tài)。而工程團隊要做的就是,找到自己和同學(xué)們在構(gòu)建過程中的問題并加以解決,效率問題當(dāng)然也是其中之一。

為了解決構(gòu)建速度的命題,我們做了這些嘗試:

1. 換基礎(chǔ)平臺,構(gòu)建上云!

經(jīng)過幾輪考察,我們選定了阿里云函數(shù)計算(FC)作為新的構(gòu)建環(huán)境。

通過選用高配集群 + webpack多進程策略調(diào)優(yōu) + 灰度觀察,部分業(yè)務(wù)的構(gòu)建耗時直接降到了60%左右。實踐證明,函數(shù)計算不僅加加速了編譯過程,它免運維的特性也使我們能更專注在前端構(gòu)建本身的建設(shè)上。

2. 歷史任務(wù)回放,在發(fā)布前做好評估

構(gòu)建腳本升級一直是高危變更。為了確保不產(chǎn)生意外的breaking change,我們搭建了“流量回放”能力,通過重跑歷史項目源碼 + 新腳本,比對前后效果,盡可能把bug暴露在發(fā)布前。

借助構(gòu)建服務(wù)在云端快速擴容的特性,我們在每次發(fā)布前都會進行數(shù)千次回放、尋找潛在變更點,由此幫助框架組做好發(fā)布決策。

3. 蘋果m1來了

蘋果新發(fā)布了m1芯片mac mini,發(fā)布后我們在第一時間就發(fā)起了采購。實測證明,m1的性能大幅領(lǐng)先現(xiàn)有各大平臺,這對日常研發(fā)、構(gòu)建服務(wù)都是巨大利好。

但集群運維、虛擬化依然充滿不確定性,如何把它送到云端運行,我們?nèi)栽趯で蠼夥?..

圖:m1 mac mini測試機已就位!

把云計算、webpack、高性能PC等產(chǎn)品做成組合拳,趁著新技術(shù)新平臺的紅利,讓編譯速度起飛吧

有挑戰(zhàn):試試把安卓云真機推送到桌面?

Android App的調(diào)試環(huán)境一直面臨流程復(fù)雜、機型長尾等問題。由于測試覆蓋不足,這甚至引發(fā)了幾起線上bug。

為了緩解這個問題,我們考慮向內(nèi)網(wǎng)云真機平臺尋求協(xié)助,使研發(fā)同學(xué)在桌面上連接云真機、把遠端真機調(diào)試映射成本地Chrome調(diào)試。

項目開動后,我們才發(fā)現(xiàn)坑比夢想大...現(xiàn)有云平臺的速度、延遲、瀏覽器內(nèi)UI操控體驗遠達不到本地桌面級的效果。于是團隊小哥又被迫成為了調(diào)優(yōu)工程師,在機型選配、adb協(xié)議、底層網(wǎng)絡(luò)、桌面視頻渲染各個節(jié)點尋求優(yōu)化。

截止上周,我們第一次跑通了遠程真機,鄰座小哥熱淚盈眶....

圖:終于跑通了遠程真機

App是前端業(yè)務(wù)的重要環(huán)境,日常在真實環(huán)境調(diào)試代碼能大幅降低踩坑的概率

有價值:小程序IDE,爭議和探索

小程序開發(fā)者工具(IDE)是我們團隊投入度較高的項目,也常常是挑戰(zhàn)和爭議的匯聚地。但不管怎么樣,對業(yè)務(wù)有價值的事情,我們就要去做。

這其中最大的爭議來自于產(chǎn)品形態(tài):vscode已占領(lǐng)前端IDE的半壁江山、命令行構(gòu)建是前端業(yè)界常態(tài),我們重兵投入IDE領(lǐng)域的意義是什么?專業(yè)開發(fā)者對IDE有各自的偏好,我們真能取悅所有用戶嗎?

圖:小程序IDE產(chǎn)品

在團隊產(chǎn)品經(jīng)理(是的, 前端兼職產(chǎn)品經(jīng)理!)組織的幾番大爭論之后,我們決定為IDE新增Lite模式,主打“輕量”體驗,專注在調(diào)試器、預(yù)覽、小程序SDK的核心功能體驗上,其余環(huán)境工具還給開發(fā)者自由選擇。

圖:IDE Lite模式與vscode結(jié)合開發(fā)

歷經(jīng)數(shù)月閉關(guān)、首批用戶嘗鮮,支持Lite模式的小程序IDE已經(jīng)發(fā)布了第一個Beta版本,用戶反饋和Bugfix工作也在繼續(xù)進行。未來還我們將配套發(fā)布vscode編碼插件。

項目中我們需要同時承擔(dān)功能研發(fā)和產(chǎn)品規(guī)劃的雙線職責(zé),為產(chǎn)品價值負責(zé),這可能是“造輪子”中最有挑戰(zhàn)的一個話題

未來還有啥?

云計算、IoT、客戶端動態(tài)技術(shù)、low code平臺.... 隨著技術(shù)生態(tài)前進,前端的武器庫和業(yè)務(wù)領(lǐng)域都在不斷擴展。

在前端效能、工程能力的方向上,如果你也有興趣一起探索,歡迎加入我們一起探索!

螞蟻體驗技術(shù)團隊招聘長期開放,上海、杭州、北京、成都,歡迎來聊!

（免責(zé)聲明：本網(wǎng)站內(nèi)容主要來自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿，凡在本網(wǎng)站出現(xiàn)的信息，均僅供參考。本網(wǎng)站將盡力確保所提供信息的準確性及可靠性，但不保證有關(guān)資料的準確性及可靠性，讀者在使用前請進一步核實，并對任何自主決定的行為負責(zé)。本網(wǎng)站對有關(guān)資料所引致的錯誤、不確或遺漏，概不負任何法律責(zé)任。
任何單位或個人認為本網(wǎng)站中的網(wǎng)頁或鏈接內(nèi)容可能涉嫌侵犯其知識產(chǎn)權(quán)或存在不實內(nèi)容時，應(yīng)及時向本網(wǎng)站提出書面權(quán)利通知或不實情況說明，并提供身份證明、權(quán)屬證明及詳細侵權(quán)或不實情況證明。本網(wǎng)站在收到上述法律文件后，將會依法盡快聯(lián)系相關(guān)文章源頭核實，溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。 ）