「前端工程化」該怎么理解？
點(diǎn)上方藍(lán)字關(guān)注公眾號「前端UpUp」
一.什么是前端工程？
一個類似的術(shù)語是軟件工程（Software Engineering）：
Software engineering is the systematic application of engineering approaches to the development of software.
將工程方法系統(tǒng)化地應(yīng)用到軟件開發(fā)中，就叫軟件工程。那么，緊接著又有兩個問題：
工程方法是什么？
系統(tǒng)化怎么理解？
工程是指使用科學(xué)原理設(shè)計和制造機(jī)器、結(jié)構(gòu)等，比如修橋、鋪路、建隧道、造車、蓋房子：
Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.
具體到軟件領(lǐng)域，指的是以系統(tǒng)、嚴(yán)謹(jǐn)、可量化的方法開發(fā)、運(yùn)營、維護(hù)軟件，軟件工程包括對這些方法的應(yīng)用和研究：
Software engineering the application of a systematic, disciplined, quantifiable approach to the development, operation and maintenance of software and the study of these approaches.
所謂系統(tǒng)化，可以理解為軟件生命周期中用到的這些工程方法是互補(bǔ)的，各自解決一部分問題，聯(lián)合起來保障軟件的質(zhì)量、交付速度等
綜上所述，前端工程可以定義為，將工程方法系統(tǒng)化地應(yīng)用到前端開發(fā)中，以系統(tǒng)、嚴(yán)謹(jǐn)、可量化的方法開發(fā)、運(yùn)營、維護(hù)前端應(yīng)用程序
二.前端工程的演進(jìn)歷程
同樣先看軟件工程，其發(fā)展歷程經(jīng)歷了這些關(guān)鍵點(diǎn)：
將計算機(jī)硬件抽象成馮·諾依曼架構(gòu)，進(jìn)而有了軟、硬件之分
隨著軟件復(fù)雜度的上升，模塊化和信息隱藏的理念被提出來
為了理解和管理軟件開發(fā)過程，軟件工程變成了一個專業(yè)領(lǐng)域
為了評估軟件開發(fā)團(tuán)隊的能力，成熟度衡量標(biāo)準(zhǔn)（CMMI-DEV）形成
基于現(xiàn)代軟件工程最佳實(shí)踐，建立起了人們普遍接受的軟件工程知識體系
前端工程也經(jīng)歷了類似的過程：
B/S 架構(gòu)興起，進(jìn)而有了前端、后端之分
隨著前端復(fù)雜度的上升，模塊復(fù)用、實(shí)踐規(guī)范越來越重要
為了管理和簡化前端開發(fā)過程，前端框架、自動化、構(gòu)建系統(tǒng)應(yīng)運(yùn)而生并發(fā)展迅猛
基于行業(yè)最佳實(shí)踐，開箱即用的框架（如dva）、工具體系等逐漸建立起來
前端越來越重，復(fù)雜度越來越高，配套的前端工程體系也在不斷發(fā)展和完善，可簡單分為開發(fā)、構(gòu)建、發(fā)布 3 條主線：
前端框架：插件化（jQuery） -> 模塊化（RequireJS） -> 組件化（React）
構(gòu)建工具：任務(wù)化（grunt/gulp） -> 系統(tǒng)化（webpack）
CI/CD：工具化（Jenkins） -> 自動化（Web Hook）
三大主線撐起了前端工程體系，系統(tǒng)地覆蓋了前端開發(fā)的主流程，其中的工程方法也彼此互補(bǔ)、相互影響，體現(xiàn)在：
構(gòu)建工具讓百花齊放前端框架、類庫能夠無縫合作
前端框架、類庫也在一定程度上影響著構(gòu)建工具（如模塊加載、CSS 預(yù)處理）、甚至 CI/CD（如 SSR）
三.面向過程視角下的前端工程體系
（摘自Book of Modern Front-end Tooling）
典型的前端工作流分為 5 個步驟：
開發(fā)
測試
構(gòu)建
部署
監(jiān)控
從腳手架到監(jiān)控系統(tǒng)，配套的前端工程體系已經(jīng)融入到了前端工作流的每個環(huán)節(jié)，很大程度上決定著前端生產(chǎn)效率
P.S.開發(fā)環(huán)節(jié)之前的分析、設(shè)計階段這里不展開，因?yàn)閭鹘y(tǒng)的軟件工程方法同樣適用，前端項目在這個階段并沒有太大的特殊性
開發(fā)階段
開發(fā)階段的首要任務(wù)是創(chuàng)建樣板項目（一并選擇前端框架、類庫），接著開始修改-驗(yàn)證的主循環(huán)，主要涉及這些工程化設(shè)施：
腳手架：創(chuàng)建前端應(yīng)用的目錄結(jié)構(gòu)，并生成樣板代碼
公共庫：維護(hù)著可復(fù)用的 UI 組件、工具模塊等公共資源
包管理器：引入第三方庫/組件，并跟蹤管理這些依賴項
編輯器：提供語法高亮、智能提示、引用跳轉(zhuǎn)等功能，提升開發(fā)體驗(yàn)
構(gòu)建工具：提供語法校驗(yàn)、編譯、打包、DevServer 等功能，簡化工作流
調(diào)試套件：提供預(yù)覽、DevTools、Mock、性能分析診斷等調(diào)試功能，加速修改-驗(yàn)證的主循環(huán)
測試階段
開發(fā)完成，進(jìn)入測試階段，先要對整體功能進(jìn)行充分自測，再移交專業(yè)的測試人員驗(yàn)證，過程中需要用到工程化設(shè)施有：
單元測試框架：提供針對組件、邏輯的測試支持
靜態(tài)掃描工具：從代碼質(zhì)量、構(gòu)建產(chǎn)物質(zhì)量、最佳實(shí)踐/開發(fā)規(guī)約等多個維度做靜態(tài)檢查
自動化測試工具：針對 UI 效果和業(yè)務(wù)流程，提供測試支持
性能測試工具：監(jiān)測并統(tǒng)計出相對準(zhǔn)確的性能數(shù)據(jù)
構(gòu)建階段
不同于開發(fā)階段，在構(gòu)建階段要做更多的極限優(yōu)化和流程聯(lián)動，涉及：
部署階段
最后將經(jīng)過充分測試的前端應(yīng)用程序部署到生產(chǎn)環(huán)境，需要這些工程化工具：
發(fā)布平臺：將前端資源上傳至 CDN 或 SSR 渲染服務(wù)，或者以離線包的形式集成到移動客戶端
迭代管理平臺：提供 CI/CD 支持
監(jiān)控階段
前端應(yīng)用程序上線之后，還需要持續(xù)關(guān)注線上的實(shí)際效果和異常情況，依賴這些工程設(shè)施：
埋點(diǎn)平臺：統(tǒng)計、分析業(yè)務(wù)數(shù)據(jù)，跟蹤性能指標(biāo)
監(jiān)控平臺：觀察線上的異常信息，包括報錯、白屏、流量異常等
四.過程之間的銜接
除工作流各階段的工程設(shè)施之外，前端工程的另一部分是過程之間的銜接。前者旨在提高生產(chǎn)效率，后者要解決的是體驗(yàn)問題
總的來看，前端工程的演進(jìn)體現(xiàn)在 2 方面：
協(xié)作模式：多表現(xiàn)為新的理念、新的架構(gòu)，如BFF/SFF
開發(fā)模式：體現(xiàn)在新的抽象層、新的工作流上，如Sass、React、webpack、甚至Cloud IDE
無論是職責(zé)分工的變化還是具體工作內(nèi)容的變化，對開發(fā)者而言，都意味著更多的學(xué)習(xí)、理解成本，并最終表現(xiàn)在開發(fā)體驗(yàn)上。而面向過程間銜接的工程設(shè)施正是為了緩解這些變化帶來的升級適配成本，更平滑地走出過渡期
例如：
codemod：銜接新舊前端框架，降低升級適配成本
dva：銜接 React 生態(tài)中的各種優(yōu)秀理念（redux、redux-saga 等），降低學(xué)習(xí)成本
IDE：一方面打包全套工程設(shè)施，降低上手成本，另一方面銜接工作流的各個階段，提升開發(fā)體驗(yàn)
理想的，前端工程不僅要持續(xù)優(yōu)化協(xié)作模式、提升開發(fā)效率，還應(yīng)該保障開箱即用的上手體驗(yàn)、一氣呵成的銜接體驗(yàn)、無縫切換的升級體驗(yàn)
五.總結(jié)
從面向過程的角度來看，前端工程是貫穿前端應(yīng)用生命周期的一系列工程設(shè)施，用來保障前端應(yīng)用的開發(fā)體驗(yàn)、質(zhì)量和交付速度
具體的，前端工程圍繞開發(fā)、構(gòu)建、發(fā)布 3 條主線展開，以工具化、自動化等手段解決各個環(huán)節(jié)所遇到的問題。一方面控制前端開發(fā)的復(fù)雜度，提高前端生產(chǎn)效率，另一方面降低架構(gòu)升級、協(xié)作模式變化等帶來的遷移、適配成本，提升開發(fā)體驗(yàn)
參考資料
大公司里怎樣開發(fā)和部署前端代碼？
如何推動前端團(tuán)隊的基礎(chǔ)設(shè)施建設(shè)
感謝大家
關(guān)注「前端UpUp」，分享精選面試熱點(diǎn)文章。
加我好友，一起討論算法，2021一起UpUp。
