什么叫工程化，大概就是能有個方法，讓一大堆人辕棚，有組織有紀(jì)律地一起干活，目的是提高效率募疮，保證質(zhì)量。
早些年的前端都是Web后端開發(fā)人員兼著寫的僻弹，用大型框架的少阿浓，最多的就是拿著jQuery做些事，一個頁面來一發(fā)奢方。如果找5個人寫5個頁面搔扁，寫出來的代碼可能就跟作文大賽一樣的飄忽爸舒，好在那年頭的代碼量不多蟋字，湊合著用。
后來前端的系統(tǒng)越來越大扭勉，復(fù)雜性越來越高鹊奖，玩不轉(zhuǎn)了，就有很多新的東西出現(xiàn)涂炎，這兩年是新的套路刷的飛起忠聚，各種工具跟打了激素一樣。
進(jìn)入正題唱捣，說說我眼中的前端工程化两蟀，先列個提綱
- 語言和轉(zhuǎn)譯器
- UI大型化
- MV轉(zhuǎn)換引擎
- 組件化
- 路由
- 狀態(tài)管理
- 前端測試
- 依賴管理和發(fā)布打包
- UED合作和設(shè)計規(guī)范
語言和轉(zhuǎn)譯器
現(xiàn)在主導(dǎo)JavaScript語言發(fā)展的是ECMA（European Computer Manufacturers Association，反正就是個標(biāo)準(zhǔn)化組織）下面的某個Group或者Committee之類的組織震缭，所有語言標(biāo)準(zhǔn)叫做ECMAScript赂毯，語言的版本就叫做ECMAScriptX(數(shù)字)，簡稱ESX拣宰。早期語言發(fā)展緩慢党涕，ES3不知道寫了多少年，后面來了ES5巡社，做了小幅的進(jìn)化膛堤。如果你問為什么沒有ES4，據(jù)說是因為ES4的進(jìn)化過于激進(jìn)晌该，完全得不到響應(yīng)肥荔，就被丟棄了绿渣。最近的版本是2015年完成的ES6，后來被改名為ES2015次企，至少在我看來怯晕，進(jìn)化的步子是相當(dāng)大（激進(jìn)）的。ES6被改名為ES2015的原因應(yīng)該是（我個人揣測）缸棵，ES想要加速推進(jìn)語言的計劃舟茶，所有用年份代替版本號，可以更頻繁地推出小幅進(jìn)化地版本堵第。
那么問題來了吧凉，兼容性怎么處理呢，這個在國內(nèi)問題更為突出踏志。國外（當(dāng)然主要是歐美）由于瀏覽器淘汰得快阀捅，所以還好。國內(nèi)各種老舊瀏覽器的高覆蓋率 ... 所有就產(chǎn)生了轉(zhuǎn)譯器针余。在開發(fā)時用高版本語言編寫代碼饲鄙，然后用轉(zhuǎn)譯器轉(zhuǎn)換成低版本的代碼，在正式環(huán)境上運行以兼容舊瀏覽器圆雁。
那么用高版本語言（比方說ES6）寫代碼有什么好處呢忍级？在我開來，至少像箭頭函數(shù)和類申明這樣的語法糖衣是顯然能提升開發(fā)效率和代碼可讀性（美感）的伪朽。大家也可以看看知乎的爭論轴咱。
然而有人還是不滿意JavaScript，所有有了TypeScript烈涮、CoffeeScript這樣的語言朴肺，同樣的可以通過轉(zhuǎn)譯這樣的方式來是使用。
在我看來坚洽，由于語言進(jìn)化和兼容性之間的沖突在可見未來會一直在戈稿，轉(zhuǎn)譯在前端領(lǐng)域也會長期的存在。
這個領(lǐng)域現(xiàn)在最著名的應(yīng)該是Babel了讶舰。
UI大型化
核心目標(biāo)還是在提升效率和增加可靠性鞍盗。
MV轉(zhuǎn)換引擎
我用了個拗口的詞匯，似乎其他地方都沒有見過绘雁，因為找不到更合適的詞來描述我心中這樣的功能橡疼。通過模板語言和單向/雙向數(shù)據(jù)綁定，前端開發(fā)效率得到大幅的提升庐舟。從以前的DOM操作到現(xiàn)在的模板語言操作欣除，感覺就像是汽車從手動擋換到了自動擋。不知道再過5年挪略，像DOM操作這樣的內(nèi)容還是不是前端的必備技能历帚。
組件化
程序大型的關(guān)鍵就是組件化滔岳，一則能夠把程序的邏輯拆分到組件的顆粒度以降低復(fù)雜度，二則能夠通過復(fù)用的方式提升系統(tǒng)的開發(fā)效率和可維護(hù)性挽牢。從這些角度看谱煤，組件化的目的和面向?qū)ο笃鋵嵤枪餐ǖ摹?/p>
MV轉(zhuǎn)換引擎和組件化是MV*框架的核心功能，這個領(lǐng)域最著名的是AngularJS禽拔、React 和 Vue刘离。
路由
當(dāng)程序越來越大的時候，前端的路由開始出現(xiàn)了睹栖。從感覺上來說硫惕，路由的作用非常像是模板頁，動態(tài)的模板頁野来。如果需要通過URL來定位恼除，那么可以通過把URL的hash部分和路由的狀態(tài)做綁定，但這個其實不是必須的曼氛。實際的代碼經(jīng)驗是豁辉，要完全從URL恢復(fù)程序狀態(tài)，不僅需要框架舀患，也需要業(yè)務(wù)層的代碼寫的完善徽级。
每個MV*框架都會有自己的路由庫，像AngularJS就有自帶的ngRoute和官方的第三方路由ui-router构舟。
狀態(tài)管理
程序復(fù)雜了之后灰追，狀態(tài)變的越來越不可控堵幽。常用AngularJS的同學(xué)應(yīng)該有感覺狗超，AngularJS是自動化程度相當(dāng)高的框架，數(shù)據(jù)的雙向綁定朴下，指令內(nèi)外的自動同步努咐，如果你還用很多的watch，那 ... 隨之而來殴胧，要判斷數(shù)據(jù)改變的原因也越來越困難渗稍，程序變的很難琢磨。
于是前端的狀態(tài)管理工具/模式誕生了团滥，能找到的源頭是flux竿屹。應(yīng)用最廣和知名度最高的應(yīng)該算是Redux。
前端測試
跟界面操作有關(guān)的東西怎么做測試呢灸姊？之前和測試合作交流的時候知道拱燃，測試是有UI測試的套路的，也有相對應(yīng)的工具比方說selenium力惯。
開發(fā)角度的測試又是另一個路數(shù)碗誉。從兩個方面講講前端的測試召嘶，一工具，二類型哮缺。
用比較流行的組合karma + jasmine來說明弄跌，karma把自己叫做Test Runner，其實就是一種自動化工具尝苇，能自動打開瀏覽器铛只，運行測試代碼，顯示結(jié)果糠溜。這樣能夠減少人操作界面的重復(fù)勞動格仲。而jasmine這樣的呢，被稱為測試框架诵冒，提供斷言這樣測試所需要的API凯肋。
從類型上說有單元測試和端到端測試。單元測試的思想和后端比較像汽馋，但是前端是用戶操作的侮东，怎么測呢？現(xiàn)在的MV*框架都有邏輯和視圖分離的套路豹芯，單元測試一般只測邏輯悄雅。
依賴管理和發(fā)布打包
JavaScript長期以來都是沒有正式的模塊化方案的。對铁蹈，ES6剛出了正統(tǒng)的模塊化方案宽闲，但總覺得他不能解決所有的問題，比方說正式環(huán)境需要合并代碼怎么辦握牧？
上古時期容诬，前端就靠腳本加載的順序?qū)崿F(xiàn)以來管理，但是一個頁面有20個相互依賴的腳本你試試沿腰？哎览徒，我還真寫過 ...
后來因為長期沒有正式的規(guī)范，各路兵馬就自己起了爐灶颂龙，CommonJS和AMD是使用最廣泛的习蓬，最重要的區(qū)別是AMD支持異步方式，這對瀏覽器環(huán)境很重要措嵌。
由于Node.js的出現(xiàn)躲叼，CommonJS用的已經(jīng)相當(dāng)相當(dāng)廣泛了，AMD在前端開發(fā)中用的也不少企巢，ES6又來了import的模塊化方案枫慷，于是三種方案并存就是現(xiàn)在的局面了，所以現(xiàn)在的發(fā)布打包工具就要支持3種模塊化方案。
用模塊化的方式編寫代碼流礁，用發(fā)布工具生成正式代碼涕俗，只是其中的一個功能。這些工具要能支撐完整的工作流神帅，把前端開發(fā)從開發(fā)代碼到正式代碼所有的轉(zhuǎn)換都集成到一個工具中再姑，通過各種插件實現(xiàn)功能，比方所前面提到的轉(zhuǎn)譯找御，比方說合并元镀、按需切分代碼、壓縮等等霎桅。
這個領(lǐng)域最著名的是webpack 和 browserify栖疑。
UED合作和設(shè)計規(guī)范
碼農(nóng)不懂設(shè)計，先放著 ...
