我爲何這麼強調前端工程化

關鍵時候有個 bug 要修復——圖文無關

沒有比工程化推廣更迫切的事情了！

歷史情況

WEB 前端開發這幾年發展很是迅速，很是多的開發框架和構建工具涌現，可能你昨天還在用的工具、插件，到了今天就過期了。在 2 年前，我面試別人的時候，會問一些有沒有接觸NodeJS、 Grunt、gulp、ES六、Babel 這類技能的問題，超過半數的面試者會回答『沒有』，或者說『只是剛剛接觸，並非很深刻』。迫於招人急迫，我並不會直接說 NO，而後繼續問一些 HTML、CSS、JS 前端三板斧的知識。 然而今年，若是應聘者不會這些技能，那真的很抱歉， 我不會接受一個沒有走在前沿的開發者 。任何面試者都不會喜歡一個墨守成規的人。難道沒人告訴你，外面的世界已經變了嗎？

須要解決的問題

web 開發發展了不少年，已經積累了大量的經驗和工具，前輩們的經驗已經通過了不少考驗，有輪子借鑑參考的時候，必定不要拒絕。對於尚未接觸 Gulp/Grunt/Webpack 的人來講，大家還在石器時代，不建議你繼續看下去。

工具和語言雖然差別大，可是解決的都是類似的問題，概括爲：

• 擴展 javascript 、html、css 自己的語言能力

• 解決重複工做

• 模板化、模塊化

• 解決功能複用和變動問題

• 解決開發和產品環境差別問題

• 解決發佈流程問題

何爲工程化

全部能下降成本，而且能提升效率的事情的總稱爲工程化。

在實際的工做和產品研發中，我不以爲還有什麼事情比下降成本，提升效率更迫切的事情。我更不認同工程化只是項目經理，技術 Leader 去研究和推廣的事情。每一個團隊都是不同，技術棧不同，產品不同，工做環境背景不同。大公司有大團隊，多部門合做。小公司有小團隊，各類職能配合更密切，或者你身兼數職，可是並不妨礙工程化的推動，你做爲團隊的一員，很是有義務和必要一塊兒推動工程化，找到符合大家團隊的工做習慣和規範。

由於，工程化的推動只是爲了提升效率和下降成本。這裏說的效率和成本，並不僅是公司層面，還包括我的。良好的工程化，能下降溝通成本，實現更好的協同，節省開發和測試人員的重複勞動，下降發佈的常見問題等等，通過有效實踐，工程化的推廣還能極大地減小加班的時間。

怎麼作

規範化

1. 文檔。需求文檔、設計文檔、系統設計、測試單、項目報告。

2. 工具。開發語言選型，開發工具，協同工具，測試工具，發佈工具。

3. 代碼規範。javascript，css，html，技術文檔。

4. 質量規範。功能方便，是否可拓展，是否知足 RESTFul，是否安全性知足

流程化

• 軟件開發常見流程

• 職責和協同

• 目標明確的版本計劃

• 敏捷開發

自動化

• 流程的自動化。即人員協同的自動化

• 代碼開發自動化，去掉重複勞動

• 自動化單元測試

• UI/API/兼容性 自動化測試

• 自動化部署

• 自動化問題反饋

創新

• 發掘其餘團隊的優秀方法

• 實踐敏捷開發

• 多交流，多觀察業界

WEB 前端開發工程化

工程化應該出如今工做的任何環節，WEB 前端開發過程的工程化發展得尤其迅速。

把 Grunt、gulp、Nodejs 的技能應用到前端開發，實際上就是前端工程化的一部分。移動互聯網的發展，跨平臺服務的一致性體驗，和要求快速迭代的互聯網產品對前端領域提出了更高的要求，前端三板斧已經不能知足了。而後你看到了這幾年百花齊放的場景。

前端語言、框架

• CSS 模塊化方案：LESS/ SASS

• JS 模塊化方案：AMD/CommonJS/UMD/ES6 Modlue

• HTML 模板引擎：baiduTemplate(百度)artTemplate（騰訊）juicer（淘寶）doT tmpl handlebars easyTemplate underscoretemplate mustache kissytemplate

• 前端集成框架 Bootstrap、Gumby、 Skeleton、Foundation

• AngularJS

• ReactJS

• VueJS

• Meteor

• 還有 WEEX
  (排名不分前後)

前端構建工具

• webpack

• Grunt

• gulp

• yeoman

• FIS

• athena

• tmt-workflow

• jdf

因此在實際前端構建流程裏面，你會發現如下的流程。

代碼優化

• LESS、SASS 自動編譯

• Autoprefixer 前綴自動補全

• 自動生成圖片 CSS 屬性，width & height

• CSS Sprite 雪碧圖合成

• JS、CSS、HTML 壓縮

• 按需加載

• 延遲加載

解決方案

• 項目初始化。若是你用了 yeoman 或者 HTML5 Boilerplate，你就懂我說什麼

• 做用域污染。前端自帶問題。

• eslint 驗證，代碼驗證驗證

• Retina @2x & @3x 自動生成適配

• px -> rem 兼容適配方案

• 智能 WebP 解決方案

• 非覆蓋式升級，文件指紋

• CDN 文件緩存，緩存更新

• 自動化測試

調試和部署

• 監聽文件變更，自動刷新瀏覽器 (LiveReload)

• 文件指紋，hash 值生成

• FTP 發佈部署

• ZIP 項目打包

自動化測試

• Mocha

• Jasmine

• travis-ci

• Jenkins

以上我只是列出了一些關鍵要點，或許大家還有更加厲害的方式來提高效率和下降成本，軟件開發鼓勵分享和交流。我也總能從大公司的技術交流會議學到很多技術方案和思想。不論是大團隊，仍是小團隊工程化的推廣都應該是工做環節中的一部分。

沒有比工程化推廣更迫切的事情了！