我經歷的前端開發模式進化史

萌芽

記得，在剛接觸js那會兒，那時還沒有專職的“前端開發”。當時的前端開發工作是由設計師（當時還叫“美工”）來完成的，在這種模式下，設計師需要完成頁面的設計、切圖、css、html，以及部分js交互的工作。這些完成的工作會成為設計資源的一部分被一並提供給開發人員，由於設計師對css、js了解的很有限，他們完成的頁面代碼會有許多問題還需要開發來調整和修改，當時的頁面還都是后端同步渲染輸出的，基本上大伙兒也只會改改一些js表單驗證，常用的css屬性。所以在這個時期，前端工具、類庫、框架是幾乎沒有的。

崛起

沒持續多久，隨着web2.0時代的到來，web開發的要求不斷提升，ajax慢慢流行起來。為了降低跨瀏覽器開發的復雜度，很多前端類庫（YUI, Dojo, Mootools, Prototype, jQuery）也相繼問世，我記得“十幾”年前（哈哈）還寫過一篇對比這些類庫的文章。但最終還是jQuery以“寫的更少，做的更多”，簡潔、優雅的設計特點勝出，直到現在還占了大半江山。

這時，web開發模式有了新的變化。原來由設計師完成的工作，已經無法滿足需求了。大部分后端開發沒有很多精力，也不太喜歡折騰樣式或者頁面元素操作之類的。一些對ui敏銳的、喜歡這些新事物的后端開發者慢慢把重心移到了“前端”。也有很多公司索性讓這些人只負責“前端”的任務，所以，前端工程師也就新鮮出爐了。但是，整體的前端開發模式變化不大，仍然沒有好的構建工具出現，前端還是處在黑暗期。

迷失

雖然市場上出現了很多類庫解決了跨瀏覽器兼容性的問題，但隨着業務的復雜度，前端代碼和文件越來越大，加載性能是個問題。不過，當你意識到這個問題的時候，相應的工具也就出現了。蛋疼的是，當時大部分只是在線壓縮代碼的工具，所以，開發者需要手動的復制黏貼到壓縮代碼的站點，然后再復制回來，工作效率極差，就這樣的落后模式持續了一大段時間。

不久…… 我發現只要有困難，就會有解決困難的工具出現，這時，由雅虎出品的YUI Compressor問世了。我記得還有其他幾個有名的工具，但都沒有這個名聲響。這個工具可以通過命令行自動壓縮代碼到指定目錄下，非常方便。所以，一時降低了“復制黏貼”可能導致的失誤率，效率也提高了不少。

另外，css中大量零散的圖片背景資源，也是個性能加載問題，起初也是通過純手工的方式在ps中自己排版這些圖片（css sprites），然后算好他們各自的background-position。當然之后也是出現了在線工具解決了這塊難題。

雖然還是沒有擺脫“手工模式”，但明顯在工作效率和頁面加載性能上已經得到了很大的提升。但還是存在很多問題，比如：多個文件的合並處理、有多人開發時代碼文件的依賴關系。記得當時還是純人工約定模塊的命名空間，比如Project.Module = {}，但依然很麻煩，而且命名空間也會有被覆蓋的風險。

飛速發展

不久后，RequireJS問世了。RequireJS的出現，解決了js文件的依賴問題。前端文件的依賴關系轉變為模塊依賴，開發體驗一下子上了一個檔次。同時，jQuery團隊發布了名為Grunt的一款前端構建工具。算得上是真正意義上的第一款前端構建工具，當然之前還有Ant，但Ant實在太難用。

這下前端社區一下子瘋了，不再需要什么在線壓縮工具了，不要再裝YUI Compressor了（還依賴Java），感覺前端開發一下子高大上起來，這個時候前端開發們不再覺得自己的小角色了。

你感覺這種狀態已經滿足了？當然不是，前端這幫家伙從來沒閑着，要求越來越高，感覺grunt性能不好使了，就出來個gulp。感覺前端搞的膩了，出來個NodeJS。感覺NodeJS的包管理器npm非常好用，但瀏覽器端又不支持commonjs協議，所以又搞了個Bower來發布前端資源，但又不久npm宣布可以發布瀏覽器使用的包了。這些東西，感覺就在這個時期一下子全冒了出來，整個前端市場欣欣向榮。

超越

當你覺得前端世界已經趨於穩定時，整個后端的業務邏輯慢慢向前端轉移，只使用jQuery開發已經無法滿足業務需求了，對前端開發者的能力要求也越來越高。所以，前端非常需要一個框架來解決這些問題。BackboneJS，做為前端MVC框架的鼻祖誕生了，當然其他的類似框架也相繼出現，有了前端MVC框架，前端開發者又再一次高大上了，MVC不再是后端獨有的設計模式了，前端開發的價值又上了一個新的台階。

再次進化

同時，前端構建工具的發展也沒閑着。從gulp之后，國內公司的也發明了國有特色構建工具，比如百度的FIS還是不錯的。但隨着SPA（單頁應用）的崛起，這些構建工具的缺點也凸顯出來，比如模塊依賴自動查找、文件按需分割，打包性能等等。所以，webpack出現了，雖然webpack是至今為止配置最復雜的前端構建工具，但他的靈活性和插件化，使得webpack一下子活躍起來，整個前端社區又一次瘋狂了。另外加上es6的出現，通過webpack + babel-loader + babel-preset-pulgin，前端開發體驗那叫一個爽，當然首先你得先學會es6語法哈。

穩步發展

前端MVC框架的出現，讓前端開發的效率提高了不少。但隨着業務的復雜度提高，后端又發展為只輸出接口給前端，前端又作為整個系統的一個View, 前端MVC、MVVM（Angular1.0）的模式，在靈活多變的View的模式下，顯得有些疲憊。所以React的出現也是必然的，組件化，其實就是以前后端（比如ASP.Net組件）玩的一套搬到了前端來實現，隨后的Vue也是類似。

結尾

隨着es6的發展，組件化思想的盛行，前端技術發展到了前所未有的高度，前端開發者也擁有了無可替代的價值。都說之后再發展下去，前端總有一天會被其他技術代替，但是當今技術的發展變化已經快到你無法預知未來了，5 - 10年的變化會發生什么，我們都不知道。所以，你何必苦苦哀嘆之后的世界會如何發展，不如享受當下前端技術的發展帶來的喜悅和成果吧！