掘力計劃22期-如何漸進式的推動前端工程化

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

　　工程化的定義

　　自 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)定性。

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

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

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

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

　　切入工程化的利器

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

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

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

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

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

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

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

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

　　ALL IN DOCKER

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

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

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

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

　　結(jié)語

　　在當(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ā)展中更具競爭力，并為團隊和項目的成功做出更大的貢獻。也是提高未來前端自身競爭力的手段之一。

　　關(guān)于掘力計劃

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