2023年8月19日，掘金掘力計(jì)劃系列活動(dòng)第22場(chǎng)——《聊聊前端工程化實(shí)踐和未來(lái)》在杭州舉行，在本場(chǎng)前端工程化專題的分享活動(dòng)中，來(lái)自禾觀科技的技術(shù)專家尤毅做了題為《如何漸進(jìn)式的推送前端工程化》的分享。

工程化的定義

自 2018 年以來(lái)，前端工程化的概念一直在不斷被提及。而相關(guān)的討論主要集中在"前端"領(lǐng)域的模塊化、組件化、自動(dòng)化和規(guī)范化等方面。

但隨著前端技術(shù)的快速發(fā)展，工程化的范疇已經(jīng)開(kāi)始向整個(gè)產(chǎn)品生命周期延伸，不僅僅局限于前端UI交互的交付?？梢灾鸩綕B透至需求分析、測(cè)試以及上線后的監(jiān)控等環(huán)節(jié)。這一演進(jìn)的目的是為了全面優(yōu)化整個(gè)產(chǎn)品的開(kāi)發(fā)和運(yùn)營(yíng)過(guò)程，提高效率、降低成本，并確保產(chǎn)品的質(zhì)量和穩(wěn)定性。

在過(guò)去幾年中，前端工程化已經(jīng)實(shí)現(xiàn)了模塊化和組件化的目標(biāo)，通過(guò)使用工具和框架，開(kāi)發(fā)者能夠更好地管理和復(fù)用代碼，提高開(kāi)發(fā)效率和團(tuán)隊(duì)協(xié)作能力。自動(dòng)化也成為前端工程化的重要組成部分，通過(guò)構(gòu)建工具、自動(dòng)化測(cè)試和持續(xù)集成/持續(xù)交付（CI/CD）流程，開(kāi)發(fā)團(tuán)隊(duì)能夠?qū)崿F(xiàn)自動(dòng)化的代碼構(gòu)建、測(cè)試和部署，減少人為錯(cuò)誤和手動(dòng)操作帶來(lái)的風(fēng)險(xiǎn)。

隨著前端技術(shù)的不斷發(fā)展和業(yè)務(wù)需求的增加，前端工程化的范疇可以向更廣泛的領(lǐng)域擴(kuò)展。在需求分析階段，工程化的原則可以幫助團(tuán)隊(duì)更好地理解和管理需求，通過(guò)需求拆分和優(yōu)先級(jí)規(guī)劃，確保開(kāi)發(fā)工作的有序進(jìn)行。測(cè)試階段也可以借助工程化的思想和工具，實(shí)現(xiàn)自動(dòng)化測(cè)試、性能監(jiān)測(cè)和錯(cuò)誤追蹤，提高產(chǎn)品的質(zhì)量和穩(wěn)定性。

此外，工程化還可以延伸至產(chǎn)品上線后的監(jiān)控和運(yùn)維階段。通過(guò)應(yīng)用性能監(jiān)控、日志分析和異常追蹤等工具，開(kāi)發(fā)團(tuán)隊(duì)能夠?qū)崟r(shí)監(jiān)測(cè)產(chǎn)品的運(yùn)行狀態(tài)，及時(shí)發(fā)現(xiàn)和解決問(wèn)題，同時(shí)提供更好的用戶體驗(yàn)和服務(wù)質(zhì)量。

前端工程化的全生命周期演進(jìn)是對(duì)當(dāng)前快速發(fā)展的前端技術(shù)和業(yè)務(wù)需求的回應(yīng)。通過(guò)將工程化理念滲透到產(chǎn)品開(kāi)發(fā)和運(yùn)營(yíng)的各個(gè)環(huán)節(jié)，企業(yè)能夠更好地應(yīng)對(duì)市場(chǎng)挑戰(zhàn)，提高競(jìng)爭(zhēng)力，并為用戶提供更優(yōu)質(zhì)的產(chǎn)品體驗(yàn)。

切入工程化的利器

微前端技術(shù)的興起主要源于前端開(kāi)發(fā)領(lǐng)域的框架多樣性和版本碎片化的現(xiàn)狀。除了主流的 React、Vue 和 Angular 等框架外，還存在許多老舊的項(xiàng)目和其他框架。

同時(shí)在業(yè)務(wù)高速迭代的情況下，前端技術(shù)的快速演進(jìn)和多樣化導(dǎo)致了許多項(xiàng)目使用不同的框架和版本。然而，這種多樣性和碎片化使得項(xiàng)目的維護(hù)和升級(jí)變得復(fù)雜和困難。在這種情況下，業(yè)務(wù)開(kāi)發(fā)人員在接手升級(jí)或持續(xù)迭代項(xiàng)目時(shí)面臨著巨大的困難。

對(duì)于需要快速保證整體技術(shù)的統(tǒng)一并實(shí)現(xiàn)需求的持續(xù)迭代的情況，微前端是一個(gè)非常好的切入點(diǎn)。它提供了一個(gè)漸進(jìn)式的更新路徑，允許團(tuán)隊(duì)按照優(yōu)先級(jí)逐步進(jìn)行技術(shù)的更新，并推進(jìn)工程化中的技術(shù)規(guī)范化。通過(guò)合理的規(guī)劃和執(zhí)行，微前端可以幫助團(tuán)隊(duì)更好地應(yīng)對(duì)技術(shù)變革和需求變化，提高開(kāi)發(fā)效率和產(chǎn)品質(zhì)量。

除了微前端之外，低代碼平臺(tái)是一種可以快速提高開(kāi)發(fā)效率的根據(jù)。在漸進(jìn)式推動(dòng)低代碼化之前，可以從組件封裝和物料積累入手，結(jié)合"Schema to view"方案，逐步過(guò)渡到完整的低代碼方案。

首先，組件封裝是一個(gè)重要的步驟。通過(guò)將常用的功能和UI元素封裝為可復(fù)用的組件，可以提高開(kāi)發(fā)效率和代碼的可維護(hù)性。使開(kāi)發(fā)人員在開(kāi)發(fā)過(guò)程中更加專注于業(yè)務(wù)邏輯，而無(wú)需重復(fù)編寫(xiě)和調(diào)整相似的代碼。

其次，物料積累也是推動(dòng)低代碼化的重要一環(huán)。物料是指預(yù)先定義好的業(yè)務(wù)組件、模板和樣式等資源，可以在開(kāi)發(fā)過(guò)程中被快速引用和使用。通過(guò)構(gòu)建和積累豐富的物料庫(kù)，開(kāi)發(fā)人員可以更快速地創(chuàng)建和定制業(yè)務(wù)界面。

在組件封裝和物料積累的基礎(chǔ)上，"Schema to view"方案可以進(jìn)一步推動(dòng)低代碼化。通過(guò)定義數(shù)據(jù)模型和視圖模板之間的映射關(guān)系，使開(kāi)發(fā)人員能夠通過(guò)配置數(shù)據(jù)模型來(lái)快速生成對(duì)應(yīng)的視圖界面。這種方式可以減少手動(dòng)編寫(xiě)大量模板代碼的工作量，提高開(kāi)發(fā)效率。

但無(wú)論是低代碼還是微前端的方案，都需要前端對(duì)于業(yè)務(wù)需求都非常的熟悉，才能更好的發(fā)揮這兩者的最大作用，如果對(duì)于業(yè)務(wù)不夠熟悉，微前端可能將給團(tuán)隊(duì)開(kāi)發(fā)帶來(lái)較為沉重的技術(shù)負(fù)擔(dān)，而低代碼則會(huì)帶來(lái)額外使用上的心智成本以及反向降低業(yè)務(wù)交付效率。

ALL IN DOCKER

在整個(gè)需求交付的過(guò)程中，CICD 部分是最為容易作為收口的環(huán)節(jié)。使用"All in Docker"的方案可以將不同的技術(shù)類型和產(chǎn)物發(fā)布流程統(tǒng)一管理，從而更容易整合和自動(dòng)化。

利用 Docker 容器化技術(shù)，將應(yīng)用程序及其依賴項(xiàng)打包成可移植的容器。這樣，不論是前端還是后端，可以使用相同的Docker 容器部署和管理流程。通過(guò)使用統(tǒng)一的腳本和工具鏈，可以簡(jiǎn)化發(fā)布流程，并提高整體交付效率。

整個(gè) CICD 的規(guī)范與開(kāi)發(fā)并不僅限于前端同學(xué)，也可以吸納后端以及運(yùn)維等其他崗位同學(xué)一起共建適合整個(gè)公司的通用體系。通過(guò)將前端和后端的應(yīng)用程序都容器化，可以實(shí)現(xiàn)跨團(tuán)隊(duì)、跨技術(shù)棧的協(xié)同開(kāi)發(fā)和交付、減少部署和運(yùn)維的復(fù)雜性，提高整個(gè)公司的技術(shù)協(xié)作和交付效率。

同時(shí)，使用Docker還可以提供更好的環(huán)境隔離和可移植性。每個(gè)應(yīng)用程序都運(yùn)行在獨(dú)立的Docker容器中，彼此之間相互隔離，避免了不同應(yīng)用之間的沖突和干擾、保證了應(yīng)用程序在不同環(huán)境中的一致性和可移植性。

結(jié)語(yǔ)

在當(dāng)前的前端領(lǐng)域，深入業(yè)務(wù)對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)是非常重要的。通過(guò)深入理解業(yè)務(wù)需求、業(yè)務(wù)流程和用戶行為，前端同學(xué)可以更好地設(shè)計(jì)和實(shí)現(xiàn)與業(yè)務(wù)緊密結(jié)合的前端解決方案。包括更好地理解用戶需求，優(yōu)化用戶體驗(yàn)，以及與后端和其他團(tuán)隊(duì)進(jìn)行有效的協(xié)作。

同時(shí)，深入整個(gè)軟件的研發(fā)鏈路也是前端開(kāi)發(fā)人員需要去嘗試的方向。這涉及到與其他開(kāi)發(fā)團(tuán)隊(duì)（如后端開(kāi)發(fā)、測(cè)試、運(yùn)維等）緊密合作，參與系統(tǒng)架構(gòu)設(shè)計(jì)、性能優(yōu)化、安全性等方面的工作。通過(guò)擴(kuò)展技術(shù)視野和參與更廣泛的交流使得前端工程化的鏈路可以延伸到整個(gè)軟件研發(fā)鏈路中。

從業(yè)務(wù)中發(fā)展自身的價(jià)值，并積極參與整個(gè)軟件的研發(fā)鏈路，通過(guò)深入理解業(yè)務(wù)需求、與其他開(kāi)發(fā)團(tuán)隊(duì)緊密合作以及持續(xù)學(xué)習(xí)和掌握前沿技術(shù)來(lái)實(shí)現(xiàn)。這樣的發(fā)展路徑將使前端開(kāi)發(fā)人員在職業(yè)發(fā)展中更具競(jìng)爭(zhēng)力，并為團(tuán)隊(duì)和項(xiàng)目的成功做出更大的貢獻(xiàn)。也是提高未來(lái)前端自身競(jìng)爭(zhēng)力的手段之一。

關(guān)于掘力計(jì)劃

掘力計(jì)劃由稀土掘金技術(shù)社區(qū)發(fā)起，致力于打造一個(gè)高品質(zhì)的技術(shù)分享和交流的系列品牌。聚集國(guó)內(nèi)外頂尖的技術(shù)專家、開(kāi)發(fā)者和實(shí)踐者，通過(guò)線下沙龍、閉門會(huì)、公開(kāi)課等多種形式分享最前沿的技術(shù)動(dòng)態(tài)。