前端工程化之路

時至今日，前端也在飛速發展，各類框架以及因框架產生的生態圈也拔地而起，滿天都是概念，如數據綁定、虛擬DOM、前端構建系統、前端工程化、大前端等等。不少前端同窗被困在前端框架裏，學的是心力交瘁，但有些同窗早已學會了透過現象看本質的本事，不論是什麼樣的框架都能運用自如。
下面就帶你們先看看前端的發展歷史。

前端發展史

• 1990年，Tim Berners Lee 發明了世界上第一個網頁瀏覽器。

瀏覽器是被髮明出來了，但問題來了，當時的網頁都是靜態的，如表單驗證就須要後端完成，在那個年代帶寬不好，發一次請求帶代價是極其昂貴的，所以爲了解決這一問題，急須要開發一種在瀏覽器執行的腳本語言，所以發生了下面的事情。

• 1995年，Brendan Eich 只用了不到半個月時間完成了初版網頁腳本語言的設計。
• 1996年，樣式表標準CSS初版發佈。

至此 html 、 javascript 、 css 催生了前端的雛形。

• 2005年，Ajax方法正式誕生。
• 2006年，jQuery函數庫誕生，爲操做網頁DOM結構提供了很是強大一用的接口，成爲了使用最普遍的函數庫，並讓JavaScript語音的應用難度大大下降，推進了這門語言的流行。
• 2008年，V8編譯器誕生。
• 2009年，Node.js項目誕生，標誌着JavaScript能夠用於服務器端變成。
• 同年，Angularjs項目誕生。
• 2013年，Facebook發佈了UI框架React，使得UI層能夠組件化開發。
• 2014年2月，尤雨溪發佈了我的項目Vue,這是一個經過間接API提供高效的數據綁定和靈活的組建系統。
• 2015年3月，Facebook發佈了React Native,將React框架移植到了手機端，能夠用來開發手機App,它會將JavaScript轉爲ios平臺的Objective-C代碼，或者Android平臺的Java代碼，從而爲JavaScript語言開發高性能的原生App打開了一條道路。

至此新事物仍在不斷涌現。

先後端協做發展史

簡單明快的石器時代

這是個混沌的時代，項目開發沒有先後端之分，頁面是有JSP,PHP在服務端生成，前端只是個切圖仔。當時對前端開發並不友好，前端開發須要安裝後端開發環境，拉取後端項目，即使是改個樣式也須要運行後端環境來驗證改的是否正確，難以進行本地化，影響其研發效率。

之後端MVC爲主的青銅時代

爲了讓先後端分工更加合理，提升代碼維護性，協做開發也在不斷演化。所以有了後端的架構升級。好比Structs、Spring MVC等。

代碼可維護性獲得了明顯好轉，爲了讓View層更簡單幹脆，還能夠選擇Velocity、Freemaker等模板，使得模板裏寫不了Java代碼，讓先後端分工更加清晰。那麼問題又來了，前端仍是須要依賴後端開發環境。這種架構下，前端寫demo，後端套模板。

先後端職責依舊糾纏不清，在套模板的同時也會出一些粗心引發的問題，前端的路依舊很艱辛，繼續往下看。

Ajax帶來了白銀時代

迴歸第一章講的， 2005年，Ajax方法正式誕生。先後端之間的協做有了質的變化。

其關鍵的協做點就是Ajax提供數據接口，就此複雜度從JSP裏已到了瀏覽器的JavaScript，瀏覽器端變得很複雜，相似於Spring MVC，這個時代的瀏覽器端也出現了分層架構：

但仍不足之處：

1. 代碼不能複用。好比後端依舊須要對數據作各類校驗，校驗邏輯沒法複用瀏覽器端的代碼。若是能夠複用，那麼後端的數據校驗能夠相對簡單化。
2. 全異步，對 SEO 不利。每每還須要服務端作同步渲染的降級方案。
3. 性能並不是最佳，特別是移動互聯網環境下。
4. SPA 不能知足全部需求，依舊存在大量多頁面應用。URL Design 須要後端配合，前端沒法徹底掌控。

Node帶來了黃金時代

隨着 Node.js 的興起，JavaScript 開始有能力運行在服務端。這意味着能夠有一種新的研發模式：

雖然經過Node.js也能夠像Java同樣提供後端支持，經過Node.js，服務端代碼也是JavaScript代碼。這意味着部分代碼能夠複用，須要SEO的場景能夠在服務端同步渲染，因爲異步請求太多致使的性能問題也能夠經過服務端來緩解。前一種模式的不足，經過這種模式幾乎都能完美解決掉。

與JSP模式相比，該模式看起來是一種迴歸，也的確是一種向原始開發模式的迴歸，不過是一種螺旋上升式的迴歸。

除了對服務端開發的貢獻之外還豐富了前端的工具生態。在沒有Grunt、Gulp、webpack等便捷且強大的工具的時候，靜態資源的壓縮合並，都是須要像Apache Ant這用工具完成的，但Node的出現，帶來了Grunt、Gulp、webpack，結合JavaScript的靈活性與Node.js提供的API，前端工程師能夠編寫各類工具知足項目的開發需求。 本書所介紹的前端工程化解決方案中的各個功能模塊所有是由JavaScript語言實現的。

前端工程化鑽石時代

通過了以上幾個時代，誕生了當下最流行的幾個框架：React、Vue、Angular，前端工程化也在這裏發揮的淋漓盡致，前幾個時代積累了大量的經驗和工具，這個時代則將在前輩們的基礎之上解決這個歷史時代遺留的痛點，好比：

• 擴展javascript 、html、css自己的語言能力
• 解決重複工做的問題
• 模板化、模塊化
• 解決功能複用和變動問題
• 解決開發和產品差別的問題
• 解決發佈流程的問題

何爲工程化

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

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

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

後面會有一系列文章講講具體怎樣實現工程化。

參考連接：https://github.com/lifesinger/blog/issues/184
參考連接：https://segmentfault.com/a/1190000007414499