web前端的發展態勢 淺識

 之前

　　做爲一個java程序員寫的代碼主要仍是後臺的代碼，雖然開始的時候先後端都寫，可是也是用別人造好的輪子來用，學學html,css,js,jquery,再找一個前端ui框架學學，上手以後咱們就能夠寫界面，寫後臺了，固然這只是企業的後臺管理項目，界面要求不是特別高，對於網站項目仍是須要前端童鞋來設計，佈局，寫好html給到咱們，咱們轉成jsp，或者各類模板引擎文件。這種模式對前端童鞋要求不是特別高，會設計，切圖，就差很少了，什麼前端組件化，模塊化，自動化這些概念都沒有，多是小公司沒有接觸到，大公司應該很早就開始實踐了。那個時候經常使用的就是yahoo的yui,和jquery ui還有jquery一系列插件了等等。

　　記得11年到12年的時候移動端的開發特別火，不少人都轉型去作native的開發了，那個時候移動端的開發工資特別高，可是我沒有選擇作移動開發，而是選擇安靜的作個後臺。

　　那個時候不少創業公司選擇作產品的時候首先會在移動端發力，先作一個android版本的或者作一個ios版本的，等到積攢必定的用戶量以後在針對多個平臺制定一個版本，由於不少產品可能沒獲得有機會作多個版本就已經死了，因此一個產品可能有ios，android,winphone,pc等版本，須要多個團隊來開發一個產品。

　　那個時候雖然也有公司用webapp(純html5)和Hybrid來作移動端的開發,可是不少公司仍是擔憂h5在性能和體驗方面不如原生的好，畢竟移動端最重要的仍是用戶體驗，是快，是流暢，那個時候解決方案也沒有像如今這麼多，因此不少公司仍是選擇採用原生的開發。如今

　　隨着h5在移動端的使用愈來愈多，前端超級火爆的狀況下各類框架，各類解決方案層出不窮，一個還沒學會，另外一個就出來了，亂花漸入迷人眼，致使沒有經驗的前端人員都不知道應該學什麼好了。 看到網上有童鞋總結了前端近幾年的變化，出來的輪子有多少，你們本身感覺一下。

　　那些年，一度追捧，一度放棄

　　下面，花一些篇幅簡單回顧下 09 年到 15 年前端的發展歷程。

　　09 年，基礎類庫完善，尋求突破

　　09 年以前，JavaScript 還處於對自身語言的完善過程當中，而到了 09 年，JavaScript 類庫已經頗爲成熟，jQuery/Prototype/Script.aculo.us/Dojo 等都已經發布了好幾個 stable 版本，各大類庫也是相互吸取優勢，不斷完善並提升自身性能，然而功能上已經沒有太多增長的勢頭。部分框架開始了思想上的轉變，更加註重前端開發的組織和結構，條理性強了不少，如 YUI，Dojo 等。

　　從 ECMAScript 規範的爭執，開啓了瀏覽器引擎大戰，各大廠商也趁機瓜分 IE6 份額，Chrome 和 Firefox 在這場戰役中取得小勝，V8 也敲響了前端的大門。爲了迎合市場的激烈競爭，IE 開始了升級之旅，09 年初發布 IE8，全面兼容 CSS2.1。

　　而此時，Node.js 和 3G Mobile 這兩隻巨獸開始浮出水面，Web 標準也開始向 HTML五、ECMAScript5.0 靠攏。

　　10 年，Web2.0 深刻人心，開始性能挑戰

　　毫無疑問，這一年，各大巨頭都看清了 HTML5 是 web 發展的將來，在保留原來前端技術的狀態下，都簇擁着拉扯 HTML5 的裙襬。富客戶端應用也在這一年蓬勃生長，ExtJS/Dojo 搖身變爲企業級框架，各種組件化概念和產品如約而至。

　　延續着 09 年的變化，10 年的前端顯得頗爲沉寂，然而在標準的運用和推進上，各大廠商也是十分賣力。IE 9 出來了預覽第三版，iPhone 的 Safari 已經可以支持衆多 HTML5 內容：Canvas/Video/Audio/Geolocation/Storage/Application Cache/Web SQL Database 等。

　　W3C 宣佈成立 Web 性能工做組，Google 和 Mozilla 紛紛推出應用商店，瀏覽器調試工具也豐富了起來，人們開始更多地關注開發體驗和性能問題。

　　11 年，HTML5 抗大旗，Flash 堪憂

　　2011 年 HTML5 的技術發展和推廣都向前邁進了一大步，語義明確的標籤體系、簡潔明瞭的富媒體支持、本地數據的儲存技術、canvas 等等各種技術被普遍應用。這一年，不少 web 開發者也面臨一項技術的抉擇，HTML5 or Flash？從 Flash Player 11.1 開始，Adobe 再也不繼續開發面向移動設備瀏覽器的 Flash 插件，積極投身於 HTML5，這意味着 Flash 技術的凋零。

　　這一年，HTML5 遊戲火爆到了一個高潮，他的低門檻和高收益讓不少開發者眼紅，正因如此，移動端開發工具和調試工具也日益成熟。jQuery 已經成爲大小公司平常開發的標配，成千上萬的 JQ 插件讓網頁開發變得尤其輕鬆，而隨之而來的也是頁面的臃腫和性能調優的深刻探索。

　　Node.js 已經悄然崛起，在 github 上的訪問量已經超過了 Rails，國內的雲應用開始嘗試使用 Node.js，Node.js 相關工具也紛紛出來。

　　12 年，響應式開發，工程化推動

　　隨着硬件技術的發展，各手機廠商又開始騷動起來，爲了佔有更多的市場，不斷提升產品的性價比，體驗也獲得了不斷的優化。藉着先前兩年 HTML5 颳起的東風，移動端上的 web 開發也顫抖了起來。移動端的開發挑戰不亞於 PC 上對多個瀏覽器的支持，這一年，萌生了衆多移動端框架，如 Sencha Touch/Zepto.js/JQ Mobile 等，相對 PC 端框架，它們更加輕便。

　　而移動端的崛起，帶來了許多終端開發難題：多終端適配，多分辨率適配，遠程調試等等，而隨着這些難題一個個被解決，移動端生長的勢頭變得更增強盛。此時 Twitter 也推出了 Bootstrap， 這個前端開發工具包不只方便了前端，也方便了後端同窗，它的出現讓快速建站更加簡單。

　　編程思想的切換，迎來了 CoffeeScript 和 TypeScript，這兩個預處理語言的出現又爲 JavaScript 引來了很多其餘方向轉型過來的開發者。JavaScript 的兄弟 Node.js，也在命令行領域開拓了一片不小的疆域，甚至有動搖 Perl 和 Ruby 地位的趨勢。

　　在前端工程化上，幾個派系相互爭鬥，產出了 AMD、CMD、KMD 等規範，也衍生了 SeaJS、RequireJS 等模塊化工具。前端在這一年頗有跳躍感。

　　
13 年，爆發式增加，百花齊放

　　規範和標準上有很多產出。Web Components 的出現給前端開發開闢了新思路；WebDriver 規範的出來推進了自動化測試的進程，ECMAScript 6 的規範草案落地，Webapp 工做小組在這一年也是至關活躍。

　　Chrome 瀏覽器在這一年也有了很大的突破，開始支持 SPDY，使用 Blink 取代 webkit 做爲 Chromium 的新渲染引擎，Chrome DevTools 的調試體驗大幅度提高。這一年中，Chrome 連同其餘瀏覽器廠商快速推進了各項草案規範的實現。

　　語言能力上依舊在加強，而且從 JS 開始擴散到 CSS，出現了 LESS、SASS 和 Stylus 等預處理語言，Web 開發變得更加緊湊。

　　而在無線端，應用再也不侷限於 Webapp，因爲流暢度、性能等方面不能知足用戶體驗的需求，各大公司開始轉向 Native 方向的研究，進而出現了 Hybrid 和 PhoneGap 的繁榮，它們爲 JS 調用了提供更多的設備 API。

　　Node.js 大放異彩，不少公司在生產環境中使用 Node.js，同時也出現了諸如 Express、Meteor 等小巧的快速搭建 Node.js Server 的應用框架。

　　各瀏覽器的調試也是種類繁多、功能豐富，PhantomJS 在自動化測試上開始取代 Selenium，出現了衆多的遠程調試方案和工具。

　　前端工程化開始普及，各公司開始推出本身的前端集成開發解決方案。

　　14 年，移動端的崛起，HTML5 和 ES6 落地

　　HTML5 正式定稿，這意味着，web page 正式演變爲 web application。ES6 華麗麗走進前端，走的很穩重，它的 Module/Class 等特性已經徹底讓這們語言具有了開發大型應用的能力。

　　大而厚的基礎庫難以知足靈活場景，Mobile 要求極致體驗，MV* 庫鋪卷而來，如 avalon/angularockout 等。

　　Web Components 跨終端組件快速發展，移動端開發迎來一次昇華。Node.js 先後端分離的流行，中間層的出現改變了先後端的合做模式。

　　2014 是顛覆式的一年，前端發展在這一年開始造成了一個短暫的穩定格局。

　　15 年，觀念的轉變，步入前端工業化生產

　　今年格外引人注目的框架是，類 React。Facebook 在 React.js Conf 2015 大會上推出了基於 JavaScript 的開源框架 React Native，它結合了 Web 應用和 Native 應用的優點，可使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操做系統原生的 UI 組件，代替 DOM 元素來渲染等。敲一次代碼，可以運行在多個平臺上，其優點可見一斑。除了 React ，還有手機淘寶推出的 Weex 框架，它吸取了 vue.js 的編程精華，編程風格更加簡約。

　　在衆多構建工具中，現在瀟灑存活的並很少。體驗完 grunt 和 browserify 後，gulp 順勢而至，爾後又出現了 webpack、jspm 等。而包管理工具，經歷了 components、bower、spm 後，npm 開始主導整個市場。

　　Node.js 的應用已經鋪天蓋地，各大公司前端都把 Node.js 做爲分離先後端的主要手段，而且在測試、監控等方面沉澱了大量內容。不過，這個市場是很苛刻的，Node.js 的性能難以達到 C/C++ 的水平，那麼接下來要作的就是要提高性能，至少得接近 C/C++。


　　雖然出來的東西多，可是各類東西各有各的應用場景，仍是能夠根據須要選擇相應的框架和解決方案，就像你們常常說的不爲技術而技術，爲了業務而技術(相信仍是有不少童鞋感受某個東西高大上，而沒有太多考慮試用場景，當作本身學習和實踐的用到生產環境環境中吧)。

　　因此如今創業公司作產品首選的應該是Hybrid來作移動開發，一套代碼能夠跑在移動端瀏覽器，能夠打包成android的app和ios的app(打包能夠了解cordova(首選)，appcan, APICloud等等)，後期在根據發展開發其餘的好比pc web版本。這樣一來不只節約時間成本，也節約了金錢成本，後期的維護也只須要維護一套代碼，是否是感受比以前的多套代碼好不少。

　　自從14年我一直很關注前端的變化與發展，因此我以爲我如今不能再錯過h5的浪潮了，我以爲只有瞭解先後端纔能有一個更加全面的視野來作產品，來把一個東西作好，作技術選型的時候也更加駕輕就熟了。雖然我以前也會一些前端技術，可是跟如今你們常說的大前端比起來，感受仍是會得太少。

　　我常常在項目強調前端優化的重要性，可能因爲歷史緣由其餘童鞋並不覺得然，那個時候覺先後端都由本身來掌控多好。因此從如今開始有時間就要好好學習一下大前端了。畢竟有基礎，上手應該也快。但願在技術的道路上，越走越遠。