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

萌芽

記得，在剛接觸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年的變化會發生什麼，咱們都不知道。因此，你何須苦苦哀嘆以後的世界會如何發展，不如享受當下前端技術的發展帶來的喜悅和成果吧！