談?wù)勈裁词乔岸斯こ袒?/h1>
[TOC]
什么是前端工程？
將工程方法系統(tǒng)化地應(yīng)用到軟件開發(fā)中，就叫軟件工程。
那么
- 工程方法是什么？
- 系統(tǒng)化怎么理解？
工程是指使用科學(xué)原理設(shè)計和制造機器、結(jié)構(gòu)等，比如修橋、鋪路、建隧道、造車、蓋房子
具體到軟件領(lǐng)域，指的是以系統(tǒng)、嚴謹、可量化的方法開發(fā)、運營、維護軟件，軟件工程包括對這些方法的應(yīng)用和研究
所謂系統(tǒng)化，可以理解為軟件生命周期中用到的這些工程方法是互補的，各自解決一部分問題，聯(lián)合起來保障軟件的質(zhì)量、交付速度等
綜上所述，前端工程可以定義為，將工程方法系統(tǒng)化地應(yīng)用到前端開發(fā)中，以系統(tǒng)、嚴謹、可量化的方法開發(fā)、運營、維護前端應(yīng)用程序
前端工程的演進歷程
先看軟件工程，其發(fā)展歷程經(jīng)歷了這些關(guān)鍵點：
- 將計算機硬件抽象成馮·諾依曼架構(gòu)，進而有了軟、硬件之分
- 隨著軟件復(fù)雜度的上升，模塊化和信息隱藏的理念被提出來
- 為了理解和管理軟件開發(fā)過程，軟件工程變成了一個專業(yè)領(lǐng)域
- 為了評估軟件開發(fā)團隊的能力，成熟度衡量標準（CMMI-DEV）形成
- 基于現(xiàn)代軟件工程最佳實踐，建立起了人們普遍接受的軟件工程知識體系
前端工程也經(jīng)歷了類似的過程
- B/S 架構(gòu)興起，進而有了前端、后端之分
- 隨著前端復(fù)雜度的上升，模塊復(fù)用、實踐規(guī)范越來越重要
- 為了管理和簡化前端開發(fā)過程，前端框架、自動化、構(gòu)建系統(tǒng)應(yīng)運而生并發(fā)展迅猛
- 基于行業(yè)最佳實踐，開箱即用的框架（如 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ā)的主流程，其中的工程方法也彼此互補、相互影響，體現(xiàn)在
- 構(gòu)建工具讓百花齊放前端框架、類庫能夠無縫合作
- 前端框架、類庫也在一定程度上影響著構(gòu)建工具（如模塊加載、CSS 預(yù)處理）、甚至 CI/CD（如 SSR）
面向過程視角下的前端工程體系
典型的前端工作流分為 5 個步驟
- 開發(fā)
- 測試
- 構(gòu)建
- 部署
- 監(jiān)控
從腳手架到監(jiān)控系統(tǒng)，配套的前端工程體系已經(jīng)融入到了前端工作流的每個環(huán)節(jié)，很大程度上決定著前端生產(chǎn)效率
P.S.開發(fā)環(huán)節(jié)之前的分析、設(shè)計階段這里不展開，因為傳統(tǒng)的軟件工程方法同樣適用，前端項目在這個階段并沒有太大的特殊性
開發(fā)階段
開發(fā)階段的首要任務(wù)是創(chuàng)建樣板項目（一并選擇前端框架、類庫），接著開始修改-驗證的主循環(huán)，主要涉及這些工程化設(shè)施：
- 腳手架：創(chuàng)建前端應(yīng)用的目錄結(jié)構(gòu)，并生成樣板代碼
- 公共庫：維護著可復(fù)用的 UI 組件、工具模塊等公共資源
- 包管理器：引入第三方庫/組件，并跟蹤管理這些依賴項
- 編輯器：提供語法高亮、智能提示、引用跳轉(zhuǎn)等功能，提升開發(fā)體驗
- 構(gòu)建工具：提供語法校驗、編譯、打包、DevServer 等功能，簡化工作流
- 調(diào)試套件：提供預(yù)覽、DevTools、Mock、性能分析診斷等調(diào)試功能，加速修改-驗證的主循環(huán)
測試階段
開發(fā)完成，進入測試階段，先要對整體功能進行充分自測，再移交專業(yè)的測試人員驗證，過程中需要用到工程化設(shè)施有：
- 單元測試框架：提供針對組件、邏輯的測試支持
- 靜態(tài)掃描工具：從代碼質(zhì)量、構(gòu)建產(chǎn)物質(zhì)量、最佳實踐/開發(fā)規(guī)約等多個維度做靜態(tài)檢查
- 自動化測試工具：針對 UI 效果和業(yè)務(wù)流程，提供測試支持
- 性能測試工具：監(jiān)測并統(tǒng)計出相對準確的性能數(shù)據(jù)
構(gòu)建階段
不同于開發(fā)階段，在構(gòu)建階段要做更多的極限優(yōu)化和流程聯(lián)動，涉及：
- 打包腳本：在語法校驗、編譯、打包的基礎(chǔ)上，進行合并、壓縮、代碼拆分、圖片處理、SSR 等極限優(yōu)化
- 構(gòu)建服務(wù)：支持多任務(wù)并行打包、通知
部署階段
最后將經(jīng)過充分測試的前端應(yīng)用程序部署到生產(chǎn)環(huán)境，需要這些工程化工具：
- 發(fā)布平臺：將前端資源上傳至 CDN 或 SSR 渲染服務(wù)，或者以離線包的形式集成到移動客戶端
- 迭代管理平臺：提供 CI/CD 支持
監(jiān)控階段
前端應(yīng)用程序上線之后，還需要持續(xù)關(guān)注線上的實際效果和異常情況，依賴這些工程設(shè)施：
- 埋點平臺：統(tǒng)計、分析業(yè)務(wù)數(shù)據(jù)，跟蹤性能指標
- 監(jiān)控平臺：觀察線上的異常信息，包括報錯、白屏、流量異常等
過程之間的銜接
除工作流各階段的工程設(shè)施之外，前端工程的另一部分是過程之間的銜接。前者旨在提高生產(chǎ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ā)體驗上。
而面向過程間銜接的工程設(shè)施正是為了緩解這些變化帶來的升級適配成本，更平滑地走出過渡期
例如：
- codemod：銜接新舊前端框架，降低升級適配成本
- dva：銜接 React 生態(tài)中的各種優(yōu)秀理念（redux、redux-saga 等），降低學(xué)習(xí)成本
- IDE：一方面打包全套工程設(shè)施，降低上手成本，另一方面銜接工作流的各個階段，提升開發(fā)體驗
理想的，前端工程不僅要持續(xù)優(yōu)化協(xié)作模式、提升開發(fā)效率，還應(yīng)該保障開箱即用的上手體驗、一氣呵成的銜接體驗、無縫切換的升級體驗
總結(jié)
從面向過程的角度來看，前端工程是貫穿前端應(yīng)用生命周期的一系列工程設(shè)施，用來保障前端應(yīng)用的開發(fā)體驗、質(zhì)量和交付速度
具體的，前端工程圍繞開發(fā)、構(gòu)建、發(fā)布 3 條主線展開，以工具化、自動化等手段解決各個環(huán)節(jié)所遇到的問題。
一方面控制前端開發(fā)的復(fù)雜度，提高前端生產(chǎn)效率，另一方面降低架構(gòu)升級、協(xié)作模式變化等帶來的遷移、適配成本，提升開發(fā)體驗
原文鏈接：大公司的“前端工程化”到底是什么？
