「前端工程化」該怎麼理解？

關注「前端向後」微信公衆號，你將收穫一系列「用心原創」的高質量技術文章，主題包括但不限於前端、Node.js以及服務端技術

一.什麼是前端工程？
一個相似的術語是軟件工程（Software Engineering）：

Software engineering is the systematic application of engineering approaches to the development of software.

將工程方法系統化地應用到軟件開發中，就叫軟件工程。那麼，緊接着又有兩個問題：

• 工程方法是什麼？

• 系統化怎麼理解？

工程是指使用科學原理設計和製造機器、結構等，好比修橋、鋪路、建隧道、造車、蓋房子：

Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.

具體到軟件領域，指的是以系統、嚴謹、可量化的方法開發、運營、維護軟件，軟件工程包括對這些方法的應用和研究：

Software engineering the application of a systematic, disciplined, quantifiable approach to the development, operation and maintenance of software and the study of these approaches.

所謂系統化，能夠理解爲軟件生命週期中用到的這些工程方法是互補的，各自解決一部分問題，聯合起來保障軟件的質量、交付速度等

綜上所述，前端工程能夠定義爲，將工程方法系統化地應用到前端開發中，以系統、嚴謹、可量化的方法開發、運營、維護前端應用程序

二.前端工程的演進歷程
一樣先看軟件工程，其發展歷程經歷了這些關鍵點：

• 將計算機硬件抽象成馮·諾依曼架構，進而有了軟、硬件之分

• 隨着軟件複雜度的上升，模塊化和信息隱藏的理念被提出來

• 爲了理解和管理軟件開發過程，軟件工程變成了一個專業領域

• 爲了評估軟件開發團隊的能力，成熟度衡量標準（CMMI-DEV）造成

• 基於現代軟件工程最佳實踐，創建起了人們廣泛接受的軟件工程知識體系

前端工程也經歷了相似的過程：

• B/S 架構興起，進而有了前端、後端之分

• 隨着前端複雜度的上升，模塊複用、實踐規範愈來愈重要

• 爲了管理和簡化前端開發過程，前端框架、自動化、構建系統應運而生並發展迅猛

• 基於行業最佳實踐，開箱即用的框架（如dva）、工具體系等逐漸創建起來

前端愈來愈重，複雜度愈來愈高，配套的前端工程體系也在不斷髮展和完善，可簡單分爲開發、構建、發佈 3 條主線：

• 前端框架：插件化（jQuery） -> 模塊化（RequireJS） -> 組件化（React）

• 構建工具：任務化（grunt/gulp） -> 系統化（webpack）

• CI/CD：工具化（Jenkins） -> 自動化（Web Hook）

三大主線撐起了前端工程體系，系統地覆蓋了前端開發的主流程，其中的工程方法也彼此互補、相互影響，體如今：

• 構建工具讓百花齊放前端框架、類庫可以無縫合做

• 前端框架、類庫也在必定程度上影響着構建工具（如模塊加載、CSS 預處理）、甚至 CI/CD（如 ***）

三.面向過程視角下的前端工程體系

（摘自Book of Modern Front-end Tooling）

典型的前端工做流分爲 5 個步驟：

• 開發

• 測試

• 構建

• 部署

• 監控

從腳手架到監控系統，配套的前端工程體系已經融入到了前端工做流的每一個環節，很大程度上決定着前端生產效率

P.S.開發環節以前的分析、設計階段這裏不展開，由於傳統的軟件工程方法一樣適用，前端項目在這個階段並無太大的特殊性

開發階段
開發階段的首要任務是建立樣板項目（一併選擇前端框架、類庫），接着開始修改-驗證的主循環，主要涉及這些工程化設施：

• 腳手架：建立前端應用的目錄結構，並生成樣板代碼

• 公共庫：維護着可複用的 UI 組件、工具模塊等公共資源

• 包管理器：引入第三方庫/組件，並跟蹤管理這些依賴項

• 編輯器：提供語法高亮、智能提示、引用跳轉等功能，提高開發體驗

• 構建工具：提供語法校驗、編譯、打包、DevServer 等功能，簡化工做流

• 調試套件：提供預覽、DevTools、Mock、性能分析診斷等調試功能，加速修改-驗證的主循環

測試階段
開發完成，進入測試階段，先要對總體功能進行充分自測，再移交專業的測試人員驗證，過程當中須要用到工程化設施有：

• 單元測試框架：提供針對組件、邏輯的測試支持

• 靜態掃描工具：從代碼質量、構建產物質量、最佳實踐/開發規約等多個維度作靜態檢查

• 自動化測試工具：針對 UI 效果和業務流程，提供測試支持

• 性能測試工具：監測並統計出相對準確的性能數據

構建階段
不一樣於開發階段，在構建階段要作更多的極限優化和流程聯動，涉及：

• 打包腳本：在語法校驗、編譯、打包的基礎上，進行合併、壓縮、代碼拆分、圖片處理、***等極限優化

• 構建服務：支持多任務並行打包、通知

部署階段
最後將通過充分測試的前端應用程序部署到生產環境，須要這些工程化工具：

• 發佈平臺：將前端資源上傳至 CDN 或 *** 渲染服務，或者以離線包的形式集成到移動客戶端

• 迭代管理平臺：提供 CI/CD 支持

監控階段
前端應用程序上線以後，還須要持續關注線上的實際效果和異常狀況，依賴這些工程設施：

• 埋點平臺：統計、分析業務數據，跟蹤性能指標

• 監控平臺：觀察線上的異常信息，包括報錯、白屏、流量異常等

四.過程之間的銜接
除工做流各階段的工程設施以外，前端工程的另外一部分是過程之間的銜接。前者旨在提升生產效率，後者要解決的是體驗問題

總的來看，前端工程的演進體如今 2 方面：

• 協做模式：多表現爲新的理念、新的架構，如BFF/SFF

• 開發模式：體如今新的抽象層、新的工做流上，如Sass、React、webpack、甚至Cloud IDE

不管是職責分工的變化仍是具體工做內容的變化，對開發者而言，都意味着更多的學習、理解成本，並最終表如今開發體驗上。而面向過程間銜接的工程設施正是爲了緩解這些變化帶來的升級適配成本，更平滑地走出過渡期

例如：

• codemod：銜接新舊前端框架，下降升級適配成本

• dva：銜接 React 生態中的各類優秀理念（redux、redux-saga 等），下降學習成本

• IDE：一方面打包全套工程設施，下降上手成本，另外一方面銜接工做流的各個階段，提高開發體驗

理想的，前端工程不只要持續優化協做模式、提高開發效率，還應該保障開箱即用的上手體驗、一鼓作氣的銜接體驗、無縫切換的升級體驗

五.總結
從面向過程的角度來看，前端工程是貫穿前端應用生命週期的一系列工程設施，用來保障前端應用的開發體驗、質量和交付速度

具體的，前端工程圍繞開發、構建、發佈 3 條主線展開，以工具化、自動化等手段解決各個環節所遇到的問題。一方面控制前端開發的複雜度，提升前端生產效率，另外一方面下降架構升級、協做模式變化等帶來的遷移、適配成本，提高開發體驗