掘力計劃第22期 - 《聊聊前端工程化實踐和未來》在杭成功舉辦
2023年8月19日，掘金掘力計劃系列活動第22場——《聊聊前端工程化實踐和未來》在杭州舉行，在本場前端工程化專題的分享活動中，邀請了來自四位位前端領(lǐng)域?qū)＜襾頌殚_發(fā)者作技術(shù)分享。
第一位分享嘉賓是來自字節(jié)跳動的資深前端——張兆鑫，他做了題為《基礎(chǔ)架構(gòu)中臺提效之路》的技術(shù)分享，作為字節(jié)跳動的前端領(lǐng)域?qū)＜遥瑥堈做卧诎四昵岸松闹邢群筘?fù)責(zé)視頻云、字節(jié)私有云等中后臺的產(chǎn)品研發(fā)工作，在字節(jié)內(nèi)部實踐了前端架構(gòu)中臺，為字節(jié)內(nèi)部大量的重復(fù)中后臺建設(shè)提供了一條可行的提效之路。
在前端領(lǐng)域開發(fā)的過程中，往往會進行開發(fā)大量的中后臺，而每一次開發(fā)一個中后臺都需要處理以下問題：
申請所有機房的基礎(chǔ)設(shè)施
處理 BFF
處理 SSO
權(quán)限管理
增刪改查
還有一些特殊場景下的重復(fù)成本，比如在字節(jié)跳動內(nèi)部就經(jīng)常會需要處理關(guān)于多機房相關(guān)的問題，這些中后臺的重復(fù)建設(shè)帶來了以下幾個問題：
大量的中后臺能力，每一塊小業(yè)務(wù)可能都需要一個對應(yīng)的中后臺。
重復(fù)的通用能力，比如權(quán)限、SSO、BFF還有我上面提到的機房問題。
極高的溝通成本，當(dāng)中后臺越來越多，溝通成本隨之上漲。
接口合理性，這會涉及到一些接口規(guī)范以及和后端開發(fā)同學(xué)的對接問題。
在此背景下，就要盡可能的將這些中后臺系統(tǒng)的復(fù)雜度進行收斂，畢竟復(fù)雜度不會憑空消失，在這個基礎(chǔ)上張兆鑫及其團隊開始實踐架構(gòu)中臺之路。
通過搭建基礎(chǔ)架構(gòu)中臺，張兆鑫及其團隊通過引入環(huán)境腳本、框架插件、通用基礎(chǔ)服務(wù)設(shè)計等方式構(gòu)建出一個易于多團隊使用的架構(gòu)中臺，同時在安全性方面也通過引入靜態(tài)資源容災(zāi)、數(shù)據(jù)多級緩存容災(zāi)、機房容災(zāi)來做容災(zāi)備份。
除了以上技術(shù)外，還積極引入新的技術(shù)比如：GPT、LowCode 為架構(gòu)中臺的未來做一個系統(tǒng)化發(fā)展考量。
漸進式推動前端工程化
第二位分享嘉賓是來自禾觀科技的泛端技術(shù)專家——尤毅，他做了題為《如何漸進式推動前端工程化》的技術(shù)分享，作為一位深耕前端領(lǐng)域工程化的技術(shù)專家，尤毅在本次分享中主要講解了前端工程化領(lǐng)域發(fā)展、如何切入前端工程化以及低代碼。
自 2018 年以來，前端工程化的概念一直在不斷被提及。而相關(guān)的討論主要集中在"前端"領(lǐng)域的模塊化、組件化、自動化和規(guī)范化等方面。
但隨著前端技術(shù)的快速發(fā)展，工程化的范疇已經(jīng)開始向整個產(chǎn)品生命周期延伸，不僅僅局限于前端UI交互的交付?？梢灾鸩綕B透至需求分析、測試以及上線后的監(jiān)控等環(huán)節(jié)。這一演進的目的是為了全面優(yōu)化整個產(chǎn)品的開發(fā)和運營過程，提高效率、降低成本，并確保產(chǎn)品的質(zhì)量和穩(wěn)定性。
在當(dāng)前的前端領(lǐng)域，深入業(yè)務(wù)對于前端開發(fā)人員來說是非常重要的。通過深入理解業(yè)務(wù)需求、業(yè)務(wù)流程和用戶行為，前端同學(xué)可以更好地設(shè)計和實現(xiàn)與業(yè)務(wù)緊密結(jié)合的前端解決方案。包括更好地理解用戶需求，優(yōu)化用戶體驗，以及與后端和其他團隊進行有效的協(xié)作。
同時，深入整個軟件的研發(fā)鏈路也是前端開發(fā)人員需要去嘗試的方向。這涉及到與其他開發(fā)團隊（如后端開發(fā)、測試、運維等）緊密合作，參與系統(tǒng)架構(gòu)設(shè)計、性能優(yōu)化、安全性等方面的工作。通過擴展技術(shù)視野和參與更廣泛的交流使得前端工程化的鏈路可以延伸到整個軟件研發(fā)鏈路中。
從業(yè)務(wù)中發(fā)展自身的價值，并積極參與整個軟件的研發(fā)鏈路，通過深入理解業(yè)務(wù)需求、與其他開發(fā)團隊緊密合作以及持續(xù)學(xué)習(xí)和掌握前沿技術(shù)來實現(xiàn)。這樣的發(fā)展路徑將使前端開發(fā)人員在職業(yè)發(fā)展中更具競爭力，并為團隊和項目的成功做出更大的貢獻。也是提高未來前端自身競爭力的手段之一。
基于 WebAssembly 打造一個純?yōu)g覽器上的POSIX 運行環(huán)境
第三位分享嘉賓是來自阿里 TRE 的資深前端——劉睿，他做了題為《基于 WebAssembly 打造一個純?yōu)g覽器上的POSIX 運行環(huán)境》的技術(shù)分享，劉睿是一位擁有8年互聯(lián)網(wǎng)工作經(jīng)驗的專業(yè)人士，他目前就職于阿里巴巴TRE工程基礎(chǔ)服務(wù)團隊，主要從事于中后臺、內(nèi)部工具產(chǎn)品的應(yīng)用層開發(fā)，在領(lǐng)域內(nèi)有著豐富的實踐經(jīng)驗和深厚的技術(shù)功底。
在 2021 年 Google I/O 大會上，StackBlitz 正式推出了與 Next.js 以及 Google Chrome 團隊合作開發(fā)的一項基于 WebAssembly 的新技術(shù)，名為?WebContainers?。
基于 WebContainers （以及開源的 VS Code Web），StackBlitz 構(gòu)建了全新的在線 IDE 產(chǎn)品?CodeFlow。
WebContainers 的優(yōu)勢相比于WebIDE無容器、WebIDE Docker的方案更加的輕量且無額外成本，功能相對完善。因此，伴隨著WebContainers技術(shù)的出現(xiàn)，基于WebContainers的WebIDE體驗普遍獲得了明顯的體驗提升。
而阿里內(nèi)部也存在云端研發(fā)場景的用戶訴求存在，因此從去年開始就在著手打造類 “WebContainers” 相關(guān)的產(chǎn)品，面向云研發(fā)用戶提供高效運行 Node.js 、bash、git、 Core Utils等終端能力。
WebContainers的實現(xiàn)原理類似運行在瀏覽器上的操作系統(tǒng)，使用WASM實現(xiàn)，并將WASM作為其可執(zhí)行文件格式。
在數(shù)據(jù)傳遞方面,劉睿及其團隊經(jīng)評估選擇了SharedArrayBuffer+Atomics的高效方案,避免數(shù)據(jù)拷貝開銷。
內(nèi)存隔離方面，通過控制WASM的內(nèi)存布局為每個進程預(yù)留獨立的Global內(nèi)存空間實現(xiàn)。
WebContainers沒有真正的系統(tǒng)調(diào)用，但通過WASM的Linking優(yōu)化，可以減少膠水層的性能損耗。劉睿另外列舉了使用WASM位操作實現(xiàn)管道通信的例子，展示了其底層計算優(yōu)勢。
本次掘力計劃第22期匯聚多位業(yè)內(nèi)前端領(lǐng)域?qū)＜?，從架?gòu)中臺、前端工程化、前沿技術(shù) WebAssembly 等多個角度進行了技術(shù)分享，使與會開發(fā)者對前端工程化的發(fā)展現(xiàn)狀及應(yīng)用場景有了更為全面的了解。
前端工程化正在快速發(fā)展變化，相信未來其應(yīng)用范圍還將不斷擴大，為更多行業(yè)帶來革命性的影響。掘力計劃也將繼續(xù)關(guān)注前端工程化等前沿技術(shù)，致力于推動技術(shù)交流。
關(guān)于掘力計劃
掘力計劃由稀土掘金技術(shù)社區(qū)發(fā)起，致力于打造一個高品質(zhì)的技術(shù)分享和交流的系列品牌。聚集國內(nèi)外頂尖的技術(shù)專家、開發(fā)者和實踐者，通過線下沙龍、閉門會、公開課等多種形式分享最前沿的技術(shù)動態(tài)。
