Web 發展了幾十個春秋，風起云涌，千變萬化。我很慶幸自己沒有完整地經歷過這些年頭，而是站在前人的肩膀上行走。Web 技術發展的速度讓人感覺那幾乎不是繼承式的迭代，而是一次又一次的變革，一次又一次的創造。這幾年的前端，更為之甚！
我從 12 年底開始接觸前端，12 年之前的前端發展情況只能從上一輩的筆觸中領會。本文會盤點從 09 年開始到 15 年間前端技術的革新，同時也會從多個角度，解讀近幾年前端技術發展的潛在因素，其中穿插了若干對前端演進的拙見，難免會有錯誤和疏漏，望讀者可以補充和斧正。
下面，花一些篇幅簡單回顧下 09 年到 15 年前端的發展歷程。
09 年之前，JavaScript 還處于對自身語言的完善過程中，而到了 09 年，JavaScript 類庫已經頗為成熟，jQuery/Prototype//Dojo 等都已經發布了好幾個 stable 版本，各大類庫也是相互吸收優點，不斷完善并提高自身性能，然而功能上已經沒有太多增加的勢頭。部分框架開始了思想上的轉變，更加注重前端開發的組織和結構，條理性強了很多，如 YUI 等。
從 ECMAScript 規范的爭執，開啟了瀏覽器引擎大戰，各大廠商也趁機瓜分 IE 份額，Chrome 和 Firefox 在這場戰役中取得大勝，V8 也敲響了前端的大門。為了迎合市場的激烈競爭，IE 開始了升級之旅，09 年初發布 IE8，全面兼容 CSS2.1。
而此時，Node.js 和 3G Mobile 這兩只巨獸開始浮出水面，Web 標準也開始向 HTML5、ECMAScript5.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 紛紛推出應用商店，瀏覽器調試工具也豐富了起來，人們開始更多地關注開發體驗和性能問題。
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 相關工具也紛紛出來。
隨著硬件技術的發展，各手機廠商又開始騷動起來，為了占有更多的市場，不斷提高產品的性價比，體驗也得到了不斷的優化。借著先前兩年 HTML5 刮起的東風，移動端上的 web 開發也顫抖了起來。移動端的開發挑戰不亞于 PC 上對多個瀏覽器的支持，這一年，萌生了眾多移動端框架，如 Sencha Touch/Zepto.js/JQ Mobile 等，相對 PC 端框架，它們更加輕便。
而移動端的崛起，帶來了許多終端開發難題：多終端適配，多分辨率適配，遠程調試等等，而隨著這些難題一個個被解決，移動端生長的勢頭變得更加強盛。此時 Twitter 也推出了 Bootstrap， 這個前端開發工具包不僅方便了前端，也方便了后端同學，它的出現讓快速建站更加簡單。
編程思想的切換，迎來了 CoffeeScript 和 TypeScript，這兩個預處理語言的出現又為 JavaScript 引來了不少其他方向轉型過來的開發者。JavaScript 的兄弟 Node.js，也在命令行領域開拓了一片不小的疆域，甚至有動搖 Perl 和 Ruby 地位的趨勢。
在前端工程化上，幾個派系相互爭斗，產出了 AMD、CMD、UMD 等規范，也衍生了 SeaJS、RequireJS 等模塊化工具。前端在這一年很有跳躍感。
規范和標準上有不少產出。Web Components 的出現給前端開發開辟了新思路；WebDriver 規范的出來推動了自動化測試的進程，ECMAScript 6 的規范草案落地，Webapp 工作小組在這一年也是相當活躍。
Chrome 瀏覽器在這一年也有了很大的突破，開始支持 SPDY，使用 Blink 取代 webkit 作為 Chromium 的新渲染引擎，Chrome DevTools 的調試體驗大幅度提升。這一年中，Chrome 連同其他瀏覽器廠商快速推動了各項草案規范的實現。
語言能力上依舊在增強，并且從 JS 開始擴散到 CSS，LESS、SASS 和 Stylus 等 CSS 預處理語言開始走俏，Web 開發變得更加緊湊。
而在無線端，應用不再局限于 Webapp，由于流暢度、性能等方面不能滿足用戶體驗的需求，各大公司開始轉向 Native 方向的研究，進而出現了 Hybrid 和 PhoneGap 的繁榮，它們為 JS 調用了提供更多的設備 API。
Node.js 大放異彩，很多公司在生產環境中使用 Node.js，同時也出現了諸如 Express、Meteor 等小巧的快速搭建 Node.js Server 的應用框架。
各瀏覽器的調試也是種類繁多、功能豐富，PhantomJS 在自動化測試上開始取代 Selenium，出現了眾多的遠程調試方案和工具。
前端工程化開始普及，各公司開始推出自己的前端集成開發解決方案。
HTML5 正式定稿，這意味著，web page 正式演變為 web application。ES6 華麗麗走進前端，走的很穩重，它的 Module/Class 等特性已經完全讓這門語言具備了開發大型應用的能力。
大而厚的基礎庫難以滿足靈活場景，Mobile 要求極致體驗，MV* 庫鋪卷而來，如 vue/angular/knockout 等。
Web Components 跨終端組件快速發展，移動端開發迎來一次升華。Node.js 前后端分離的流行，中間層的出現改變了前后端的合作模式。2014 是顛覆式的一年，前端發展在這一年開始形成了一個短暫的穩定格局。
今年格外引人注目的框架是，類 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++。
最開始，我們看到的 JavaScript 還只是一個簡單的腳本語言，配合著 AJAX，在網頁上翻騰了好幾個年頭。隨著互聯網趨勢越來越明顯，互聯網業務量和業務復雜度不斷增加，很多網頁變得相當復雜，如讓我們震驚了好一會兒的 Gmail，交互復雜，體驗優良。為了更好的多人協作，代碼中的 Utils 庫越來越大，在這些庫中，基礎部分更多的是對 JavaScript 語言本身的拓展，比如給 String 加一個 repeat 函數，再加一個 trim 函數，再加一個 endWith 函數等等。
復雜的業務中會經常看到一層又一層的回調處理，回調的嵌套讓代碼的可讀性變的很差，而且很難將多個異步并行處理。為了改變這種編程范式，我們做了很多的思考，使用事件監聽，使用各種手段拉直回調，平坦地調用。
慢慢的，如果你在關注 W3C 小組的動向，會發現，那些被認可的，并且被廣泛重復定義的東西，都被納入了標準。最開始的 jQuery/prototype，前者主要是對瀏覽器做兼容處理，讓開發者不再把精力放到瀏覽器的差異上；后者是對語言本身的拓展，對 JavaScript 各種類型做拓展，并且提供了一套拓展任何對象的功能集。而現在的開發，我們很大程度上不再依托這些類庫。規范和標準已經把這些差異都統一了，String 中自帶了 includes/startsWith/endsWith/repeat/padStart/padEnd 等函數，Array 自帶了 from/forEach/of/keys/values/find/findIndex 函數…
規范的標準是為了讓開發者得到更好的編程體驗，編程不是目標，目標是將編程生產力轉化成實際效益，越少的阻礙對開發者越有利。各瀏覽器廠商當然也認識到了這一點，他們不斷地提升自己產品的體驗，將標準中的新特性都融合進去，比如 ES6 中的 Promise/Generator/Class/Module 等等。在這些內容普及之前，我們不需要加入 jQuery/prototype 這些「不純粹」的東西，而是添加兩個 shim 和 polyfill，如 es5-shim，html5shiv 等等。待到山花爛漫時，再輕松刪掉這些補丁程序。
這兩年工程化很熱，W3C 小組也看到了，這就是市場的需求，為了完成一個大型應用的編程，就必須模塊化、組件化，于是在規范中也出現了 Module & Module Loader；Node.js 的到來，讓很多前端工程師開始接觸數據庫操作，面對巨量的異步，我們忍氣吞聲寫了無數的回調地獄，盡管使用了很多 Promise 相關的操作，程序結構依然松散難以閱讀，于是規范中也開始出現了 async/await 等對 Generator 的上層封裝。文字已經不能滿足當代人的溝通需求，音視頻等富媒體傳輸走進了我們的生活，于是規范中也出來了 WebRTC/WebAudio 等規范。
只要規范出來了，后續市面上就會根據規范來實現一套 shiv，這些 shiv 提供了同樣的 API，提供了同樣的編程體驗。當瀏覽器自我進化完成之后，這些 shiv 也將成為歷史，被開發者遺棄在代碼的注釋之中。這些都是規范和標準的魅力，它的存在，就是讓開發者把精力投入到自己的業務之中，編程和范式的工作交給它。
在 這里 可以看到，W3C 各個小組最近都在干啥。標準不能囊括一切。
掃一掃 加微信咨詢
