Web 發(fā)展了幾十個(gè)春秋呼胚，風(fēng)起云涌宋渔，千變?nèi)f化。我很慶幸自己沒有完整地經(jīng)歷過這些年頭鞭铆，而是站在前人的肩膀上行走拨脉。Web 技術(shù)發(fā)展的速度讓人感覺那幾乎不是繼承式的迭代哆姻，而是一次又一次的變革，一次又一次的創(chuàng)造玫膀。這幾年的前端矛缨，更為之甚！

我從 12 年底開始接觸前端帖旨，12 年之前的前端發(fā)展情況只能從上一輩的筆觸中領(lǐng)會(huì)箕昭。本文會(huì)盤點(diǎn)從 09 年開始到 15 年間前端技術(shù)的革新，同時(shí)也會(huì)從多個(gè)角度解阅，解讀近幾年前端技術(shù)發(fā)展的潛在因素落竹，其中穿插了若干對前端演進(jìn)的拙見，難免會(huì)有錯(cuò)誤和疏漏货抄，望讀者可以補(bǔ)充和斧正述召。

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

下面积暖，花一些篇幅簡單回顧下 09 年到 15 年前端的發(fā)展歷程（感謝@法海 師兄對文章部分內(nèi)容的校稿藤为，很多技術(shù)出現(xiàn)的時(shí)間有所偏差，但不影響閱讀）夺刑。

09 年缅疟，基礎(chǔ)類庫完善，尋求突破

09 年之前遍愿，JavaScript 還處于對自身語言的完善過程中存淫，而到了 09 年，JavaScript 類庫已經(jīng)頗為成熟沼填，jQuery/Prototype//Dojo 等都已經(jīng)發(fā)布了好幾個(gè) stable 版本纫雁，各大類庫也是相互吸收優(yōu)點(diǎn)，不斷完善并提高自身性能倾哺，然而功能上已經(jīng)沒有太多增加的勢頭。部分框架開始了思想上的轉(zhuǎn)變刽脖，更加注重前端開發(fā)的組織和結(jié)構(gòu)羞海，條理性強(qiáng)了很多，如 YUI 等曲管。

從 ECMAScript 規(guī)范的爭執(zhí)却邓，開啟了瀏覽器引擎大戰(zhàn)，各大廠商也趁機(jī)瓜分 IE 份額院水，Chrome 和 Firefox 在這場戰(zhàn)役中取得大勝腊徙，V8 也敲響了前端的大門。為了迎合市場的激烈競爭檬某，IE 開始了升級之旅撬腾，09 年初發(fā)布 IE8，全面兼容 CSS2.1恢恼。

而此時(shí)民傻，Node.js 和 3G Mobile 這兩只巨獸開始浮出水面，Web 標(biāo)準(zhǔn)也開始向 HTML5场斑、ECMAScript5.0 靠攏漓踢。

10 年，看齊標(biāo)準(zhǔn)漏隐，關(guān)注 Web 性能

毫無疑問喧半，這一年，各大巨頭都看清了 HTML5 是 web 發(fā)展的未來青责，在保留原來前端技術(shù)的狀態(tài)下挺据，都簇?fù)碇?HTML5 的裙擺取具。富客戶端應(yīng)用也在這一年蓬勃生長，ExtJS/Dojo 搖身變?yōu)槠髽I(yè)級框架吴菠，各類組件化概念和產(chǎn)品如約而至者填。

延續(xù)著 09 年的變化，10 年的前端顯得頗為沉寂做葵，然而在標(biāo)準(zhǔn)的運(yùn)用和推動(dòng)上占哟，各大廠商也是十分賣力。IE 9 出來了預(yù)覽第三版酿矢，iPhone 的 Safari 已經(jīng)能夠支持眾多 HTML5 內(nèi)容：Canvas/Video/Audio/Geolocation/Storage/Application Cache/Web SQL Database 等榨乎。

W3C 宣布成立 Web 性能工作組，Google 和 Mozilla 紛紛推出應(yīng)用商店瘫筐，瀏覽器調(diào)試工具也豐富了起來蜜暑，人們開始更多地關(guān)注開發(fā)體驗(yàn)和性能問題。

11 年策肝，HTML5 扛大旗肛捍，F(xiàn)lash 堪憂

2011 年 HTML5 的技術(shù)發(fā)展和推廣都向前邁進(jìn)了一大步，語義明確的標(biāo)簽體系之众、簡潔明了的富媒體支持拙毫、本地?cái)?shù)據(jù)的儲(chǔ)存技術(shù)、canvas 等等各類技術(shù)被廣泛應(yīng)用棺禾。這一年缀蹄，很多 web 開發(fā)者也面臨一項(xiàng)技術(shù)的抉擇，HTML5 or Flash膘婶？從 Flash Player 11.1 開始缺前，Adobe 不再繼續(xù)開發(fā)面向移動(dòng)設(shè)備瀏覽器的 Flash 插件，積極投身于 HTML5悬襟，這意味著 Flash 技術(shù)的凋零衅码。

這一年，HTML5 游戲火爆到了一個(gè)高潮脊岳，移動(dòng)端開發(fā)工具和調(diào)試工具也日益成熟肆良。jQuery 已經(jīng)成為大小公司日常開發(fā)的標(biāo)配，成千上萬的 JQ 插件讓網(wǎng)頁開發(fā)變得尤為輕松逸绎，而隨之而來的也是頁面的臃腫和性能調(diào)優(yōu)的深入探索惹恃。

Node.js 已經(jīng)悄然崛起，在 github 上的訪問量已經(jīng)超過了 Rails棺牧，國內(nèi)的云應(yīng)用開始嘗試使用 Node.js巫糙，Node.js 相關(guān)工具也紛紛出來。

12 年颊乘，響應(yīng)式開發(fā)参淹，工程化推進(jìn)

隨著硬件技術(shù)的發(fā)展醉锄，各手機(jī)廠商又開始騷動(dòng)起來，為了占有更多的市場浙值，不斷提高產(chǎn)品的性價(jià)比恳不，體驗(yàn)也得到了不斷的優(yōu)化。借著先前兩年 HTML5 刮起的東風(fēng)开呐，移動(dòng)端上的 web 開發(fā)也顫抖了起來烟勋。移動(dòng)端的開發(fā)挑戰(zhàn)不亞于 PC 上對多個(gè)瀏覽器的支持，這一年筐付，萌生了眾多移動(dòng)端框架卵惦，如 Sencha Touch/Zepto.js/JQ Mobile 等，相對 PC 端框架瓦戚，它們更加輕便沮尿。

而移動(dòng)端的崛起，帶來了許多終端開發(fā)難題：多終端適配较解，多分辨率適配畜疾，遠(yuǎn)程調(diào)試等等，而隨著這些難題一個(gè)個(gè)被解決印衔，移動(dòng)端生長的勢頭變得更加強(qiáng)盛庸疾。此時(shí) Twitter 也推出了 Bootstrap， 這個(gè)前端開發(fā)工具包不僅方便了前端当编，也方便了后端同學(xué)，它的出現(xiàn)讓快速建站更加簡單徒溪。

編程思想的切換忿偷，迎來了 CoffeeScript 和 TypeScript，這兩個(gè)預(yù)處理語言的出現(xiàn)又為 JavaScript 引來了不少其他方向轉(zhuǎn)型過來的開發(fā)者臊泌。JavaScript 的兄弟 Node.js鲤桥，也在命令行領(lǐng)域開拓了一片不小的疆域，甚至有動(dòng)搖 Perl 和 Ruby 地位的趨勢渠概。

在前端工程化上茶凳，幾個(gè)派系相互爭斗，產(chǎn)出了 AMD播揪、CMD贮喧、UMD 等規(guī)范，也衍生了 SeaJS猪狈、RequireJS 等模塊化工具箱沦。前端在這一年很有跳躍感。

13 年雇庙，爆發(fā)式增長谓形，百花齊放

規(guī)范和標(biāo)準(zhǔn)上有不少產(chǎn)出灶伊。Web Components 的出現(xiàn)給前端開發(fā)開辟了新思路；WebDriver 規(guī)范的出來推動(dòng)了自動(dòng)化測試的進(jìn)程寒跳，ECMAScript 6 的規(guī)范草案落地聘萨，Webapp 工作小組在這一年也是相當(dāng)活躍。

Chrome 瀏覽器在這一年也有了很大的突破童太，開始支持 SPDY米辐，使用 Blink 取代 webkit 作為 Chromium 的新渲染引擎，Chrome DevTools 的調(diào)試體驗(yàn)大幅度提升康愤。這一年中儡循，Chrome 連同其他瀏覽器廠商快速推動(dòng)了各項(xiàng)草案規(guī)范的實(shí)現(xiàn)。

語言能力上依舊在增強(qiáng)征冷，并且從 JS 開始擴(kuò)散到 CSS择膝，LESS、SASS 和 Stylus 等 CSS 預(yù)處理語言開始走俏检激，Web 開發(fā)變得更加緊湊肴捉。

而在無線端，應(yīng)用不再局限于 Webapp叔收，由于流暢度齿穗、性能等方面不能滿足用戶體驗(yàn)的需求，各大公司開始轉(zhuǎn)向 Native 方向的研究饺律，進(jìn)而出現(xiàn)了 Hybrid 和 PhoneGap 的繁榮窃页，它們?yōu)?JS 調(diào)用了提供更多的設(shè)備 API。

Node.js 大放異彩复濒，很多公司在生產(chǎn)環(huán)境中使用 Node.js脖卖，同時(shí)也出現(xiàn)了諸如 Express、Meteor 等小巧的快速搭建 Node.js Server 的應(yīng)用框架巧颈。

各瀏覽器的調(diào)試也是種類繁多畦木、功能豐富，PhantomJS 在自動(dòng)化測試上開始取代 Selenium砸泛，出現(xiàn)了眾多的遠(yuǎn)程調(diào)試方案和工具十籍。

前端工程化開始普及，各公司開始推出自己的前端集成開發(fā)解決方案唇礁。

14 年勾栗，移動(dòng)端的崛起，HTML5 和 ES6 落地

HTML5 正式定稿盏筐，這意味著械姻，web page 正式演變?yōu)?web application。ES6 華麗麗走進(jìn)前端，走的很穩(wěn)重楷拳，它的 Module/Class 等特性已經(jīng)完全讓這門語言具備了開發(fā)大型應(yīng)用的能力绣夺。

大而厚的基礎(chǔ)庫難以滿足靈活場景，Mobile 要求極致體驗(yàn)欢揖，MV* 庫鋪卷而來陶耍，如 vue/angular/knockout 等。

Web Components 跨終端組件快速發(fā)展她混，移動(dòng)端開發(fā)迎來一次升華烈钞。Node.js 前后端分離的流行，中間層的出現(xiàn)改變了前后端的合作模式坤按。2014 是顛覆式的一年毯欣，前端發(fā)展在這一年開始形成了一個(gè)短暫的穩(wěn)定格局。

15 年臭脓，觀念的轉(zhuǎn)變酗钞，步入前端工業(yè)化生產(chǎn)

今年格外引人注目的框架是，類 React来累。Facebook 在 React.js Conf 2015 大會(huì)上推出了基于 JavaScript 的開源框架 React Native砚作，它結(jié)合了 Web 應(yīng)用和 Native 應(yīng)用的優(yōu)勢，可以使用 JavaScript 來開發(fā) iOS 和 Android 原生應(yīng)用嘹锁。在 JavaScript 中用 React 抽象操作系統(tǒng)原生的 UI 組件葫录，代替 DOM 元素來渲染等。敲一次代碼领猾，能夠運(yùn)行在多個(gè)平臺(tái)上米同，其優(yōu)勢可見一斑。除了 React 摔竿，還有手機(jī)淘寶推出的 Weex 框架面粮，它吸收了 vue.js 的編程精華，編程風(fēng)格更加簡約拯坟。

在眾多構(gòu)建工具中，如今瀟灑存活的并不多韭山。體驗(yàn)完 grunt 和 browserify 后郁季，gulp 順勢而至，爾后又出現(xiàn)了 webpack钱磅、jspm 等梦裂。而包管理工具，經(jīng)歷了 components盖淡、bower年柠、spm 后，npm 開始主導(dǎo)整個(gè)市場褪迟。

Node.js 的應(yīng)用已經(jīng)鋪天蓋地冗恨，各大公司前端都把 Node.js 作為分離前后端的主要手段答憔，并且在測試、監(jiān)控等方面沉淀了大量內(nèi)容掀抹。不過虐拓，這個(gè)市場是很苛刻的，Node.js 的性能難以達(dá)到 C/C++ 的水平傲武，那么接下來要做的就是要提升性能蓉驹，至少得接近 C/C++。

// @法海 師兄批注：對時(shí)間點(diǎn)的總結(jié)是揪利，其實(shí)很多技術(shù)方案很早就出現(xiàn)了态兴，只不過沒有大規(guī)模應(yīng)用，因此疟位，對于上文中時(shí)間點(diǎn)的謬誤瞻润，你可以將語句從「xxx 出現(xiàn)了」改成「xxx 得到廣泛應(yīng)用」。其實(shí)我發(fā)現(xiàn)献汗，問題在于敢订，一個(gè)技術(shù)領(lǐng)域的新起和發(fā)展并不是一年內(nèi)能完成的，一個(gè)技術(shù)方案的出現(xiàn)和廣泛應(yīng)用也不是一年內(nèi)能落地的罢吃，所以執(zhí)著于以「年」為時(shí)間點(diǎn)來編史楚午，會(huì)畫地為牢。

Web 規(guī)范和標(biāo)準(zhǔn)

最開始尿招，我們看到的 JavaScript 還只是一個(gè)簡單的腳本語言矾柜，配合著 AJAX，在網(wǎng)頁上翻騰了好幾個(gè)年頭就谜。隨著互聯(lián)網(wǎng)趨勢越來越明顯怪蔑，互聯(lián)網(wǎng)業(yè)務(wù)量和業(yè)務(wù)復(fù)雜度不斷增加，很多網(wǎng)頁變得相當(dāng)復(fù)雜丧荐，如讓我們震驚了好一會(huì)兒的 Gmail缆瓣，交互復(fù)雜，體驗(yàn)優(yōu)良虹统。為了更好的多人協(xié)作弓坞，代碼中的 Utils 庫越來越大，在這些庫中车荔，基礎(chǔ)部分更多的是對 JavaScript 語言本身的拓展渡冻，比如給 String 加一個(gè) repeat 函數(shù)，再加一個(gè) trim 函數(shù)忧便，再加一個(gè) endWith 函數(shù)等等族吻。

復(fù)雜的業(yè)務(wù)中會(huì)經(jīng)常看到一層又一層的回調(diào)處理，回調(diào)的嵌套讓代碼的可讀性變的很差超歌，而且很難將多個(gè)異步并行處理砍艾。為了改變這種編程范式，我們做了很多的思考握础，使用事件監(jiān)聽辐董，使用各種手段拉直回調(diào)，平坦地調(diào)用禀综。

慢慢的简烘，如果你在關(guān)注 W3C 小組的動(dòng)向，會(huì)發(fā)現(xiàn)定枷，那些被認(rèn)可的孤澎，并且被廣泛重復(fù)定義的東西，都被納入了標(biāo)準(zhǔn)欠窒。最開始的 jQuery/prototype覆旭，前者主要是對瀏覽器做兼容處理，讓開發(fā)者不再把精力放到瀏覽器的差異上岖妄；后者是對語言本身的拓展型将，對 JavaScript 各種類型做拓展，并且提供了一套拓展任何對象的功能集荐虐。而現(xiàn)在的開發(fā)七兜，我們很大程度上不再依托這些類庫。規(guī)范和標(biāo)準(zhǔn)已經(jīng)把這些差異都統(tǒng)一了福扬，String 中自帶了 includes/startsWith/endsWith/repeat/padStart/padEnd 等函數(shù)腕铸，Array 自帶了 from/forEach/of/keys/values/find/findIndex 函數(shù)…

規(guī)范的標(biāo)準(zhǔn)是為了讓開發(fā)者得到更好的編程體驗(yàn)，編程不是目標(biāo)铛碑，目標(biāo)是將編程生產(chǎn)力轉(zhuǎn)化成實(shí)際效益狠裹，越少的阻礙對開發(fā)者越有利。各瀏覽器廠商當(dāng)然也認(rèn)識到了這一點(diǎn)汽烦，他們不斷地提升自己產(chǎn)品的體驗(yàn)涛菠，將標(biāo)準(zhǔn)中的新特性都融合進(jìn)去，比如 ES6 中的 Promise/Generator/Class/Module 等等撇吞。在這些內(nèi)容普及之前俗冻，我們不需要加入 jQuery/prototype 這些「不純粹」的東西，而是添加兩個(gè) shim 和 polyfill梢夯，如 es5-shim言疗，html5shiv 等等晴圾。待到山花爛漫時(shí)颂砸，再輕松刪掉這些補(bǔ)丁程序。

這兩年工程化很熱，W3C 小組也看到了人乓，這就是市場的需求勤篮，為了完成一個(gè)大型應(yīng)用的編程，就必須模塊化色罚、組件化碰缔，于是在規(guī)范中也出現(xiàn)了 Module & Module Loader；Node.js 的到來戳护，讓很多前端工程師開始接觸數(shù)據(jù)庫操作金抡，面對巨量的異步，我們?nèi)虤馔搪晫懥藷o數(shù)的回調(diào)地獄腌且，盡管使用了很多 Promise 相關(guān)的操作梗肝，程序結(jié)構(gòu)依然松散難以閱讀，于是規(guī)范中也開始出現(xiàn)了 async/await 等對 Generator 的上層封裝铺董。文字已經(jīng)不能滿足當(dāng)代人的溝通需求巫击，音視頻等富媒體傳輸走進(jìn)了我們的生活，于是規(guī)范中也出來了 WebRTC/WebAudio 等規(guī)范精续。

只要規(guī)范出來了坝锰，后續(xù)市面上就會(huì)根據(jù)規(guī)范來實(shí)現(xiàn)一套 shiv，這些 shiv 提供了同樣的 API重付，提供了同樣的編程體驗(yàn)顷级。當(dāng)瀏覽器自我進(jìn)化完成之后，這些 shiv 也將成為歷史堪夭，被開發(fā)者遺棄在代碼的注釋之中愕把。這些都是規(guī)范和標(biāo)準(zhǔn)的魅力，它的存在森爽，就是讓開發(fā)者把精力投入到自己的業(yè)務(wù)之中恨豁，編程和范式的工作交給它。

在?這里?可以看到爬迟，W3C 各個(gè)小組最近都在干啥橘蜜。標(biāo)準(zhǔn)不能囊括一切。

生態(tài)的自我完善和自我拓展

技術(shù)的更迭過于頻繁付呕，我們能夠清晰地看到计福，很多人還在用更迭前一波甚至是前好幾波的產(chǎn)品。

當(dāng)年的 IE6徽职，在戰(zhàn)場上鏖戰(zhàn)了 10 多個(gè)年頭象颖，依然屹立不到，而現(xiàn)在它在市面上依然有百分之一左右的占有率姆钉，這種小強(qiáng)精神不得不讓人肅然起敬说订〕撸“只要用戶在，我們就得追隨”陶冷，這可能是很多公司的服務(wù)理念钙姊，因?yàn)橛脩艟褪菨撛诘睦麧櫋Ｕ且驗(yàn)檫@種服務(wù)理念埂伦，成就了 IE6 一個(gè)又一個(gè)的 5 年煞额！然而低版本的 IE 已經(jīng)不僅僅是被前端從業(yè)人員抵制和排斥了，網(wǎng)絡(luò)安全沾谜、網(wǎng)絡(luò)運(yùn)維膊毁、QA 等等，各個(gè)技術(shù)崗位的人員都開始對他不屑基跑，它的存在對工作效率媚媒、對安全、對很多方面產(chǎn)生了極為不良的影響涩僻，甚至影響到一些核心內(nèi)容的推廣缭召，所以 2016 將是低版本 IE 消亡的一年，我也呼吁業(yè)界所有的朋友舉起義旗反抗起來逆日！

慶幸的是嵌巷，也有人開始吃螃蟹了。從支付寶到天貓到淘寶室抽，阿里巴巴在很多業(yè)務(wù)上已經(jīng)主（bèi）動(dòng)（bī）地放棄了對 IE6 和 IE7 的支持搪哪，甚至在統(tǒng)一接入層直接做了 302 跳轉(zhuǎn)，提示用戶更新瀏覽器或者引導(dǎo)流量到無線端坪圾。這是一個(gè)好的開始晓折，我們期望這也是業(yè)界達(dá)成共識的開始！

HTTP 協(xié)議兽泄，從 1.0 快速過度到了 1.1漓概，整個(gè)互聯(lián)網(wǎng)的上層建筑變的十分穩(wěn)固。當(dāng)然病梢，我也了解到依然有很多產(chǎn)品還是保持了 1.0 的狀態(tài)胃珍，據(jù)說電信公司的很多產(chǎn)品就是使用 HTTP/1.0 進(jìn)行通訊，這無疑讓人驚愕蜓陌。為了追求更高的效率觅彰，減少網(wǎng)絡(luò)傳輸中的無效流量，W3C 工作組對 HTTP 協(xié)議也做了重新的定義钮热，SPDY 就是 13 年比較火熱的一個(gè)話題填抬，F(xiàn)irefox 和 Chrome 都陸續(xù)開始支持 SPDY，后來在 SPDY 的基礎(chǔ)上做了升級隧期，正式定義為 HTTP/2.0飒责，它的一個(gè)很大特點(diǎn)就是多路復(fù)用蛀骇，這個(gè)小小的特點(diǎn)改變了我們前端編程的很多優(yōu)化模式，比如

域名不是越多越好读拆，為了能夠充分利用瀏覽器的連接數(shù)，我們給 JS 和 CSS 開一個(gè)域名鸵闪，給 img 開好幾個(gè)域名檐晕，網(wǎng)頁打開的時(shí)候，恰到好處的利用瀏覽器的連接數(shù)上限限制蚌讼。HTTP/2.0 的多路復(fù)用辟灰，就是可以在一個(gè) HTTP 請求中進(jìn)行多個(gè)資源的傳輸，如果域名散列篡石，反而不能利用這個(gè)特性

資源合并沒有任何優(yōu)勢芥喇，以前的資源合并是為了減少請求數(shù)以節(jié)約建立 TCP 鏈接的網(wǎng)絡(luò)開銷和頭部傳輸?shù)牧髁块_銷，而在 HTTP/2.0 中凰萨，一個(gè) HTTP 請求上完全可以把所有的資源全部推送過來继控，如果合并了資源，反而不能良好運(yùn)用瀏覽器對資源的緩存胖眷。

當(dāng)然武通，除了多路復(fù)用，還有很多其他的優(yōu)化珊搀，比如傳輸?shù)臄?shù)據(jù)為二進(jìn)制流冶忱，HEAD 頭會(huì)被壓縮處理，服務(wù)器可以向客戶端推送內(nèi)容等境析。在這個(gè)技術(shù)水平指數(shù)式增長的年代囚枪，我相信以后的革新不會(huì)比消滅 IE6 痛苦。

模塊加載上劳淆，經(jīng)過了各派系的爭論之后链沼，流傳下來幾個(gè)不錯(cuò)的產(chǎn)品 SeaJS、RequireJS 等沛鸵，那么那個(gè)模塊加載器將成為工具平臺(tái)中短暫的終點(diǎn)呢忆植？似乎這些都不是。當(dāng)我們按照規(guī)范中的方式進(jìn)行模塊定義谒臼，按照規(guī)范中的方式加載定義的模塊時(shí)朝刊，加載這個(gè)流程就顯得不那么重要了，因?yàn)檫@些事情最后都會(huì)變成 shiv/polyfill 的事情蜈缤，最終會(huì)變成瀏覽器的固有屬性拾氓。

當(dāng)一個(gè)東西在社區(qū)中被暴力追捧的時(shí)候，會(huì)有很多衍生的產(chǎn)品出來底哥，當(dāng)這些衍生物根深蒂固時(shí)咙鞍，可能又會(huì)出現(xiàn)一個(gè)更加原生更加符合開發(fā)習(xí)慣的東西出來房官。就像 jQuery，我們?yōu)樗帉懙牟寮挥?jì)其數(shù)续滋，而在工程化的需求沖擊下翰守，它卻顯得那么的弱不禁風(fēng)，因?yàn)樗P(guān)注的點(diǎn)和當(dāng)前的發(fā)展態(tài)勢不太吻合疲酌，僅此而已蜡峰。

Mobile 的發(fā)展驅(qū)動(dòng)著戰(zhàn)場的轉(zhuǎn)移

記得當(dāng)年拿著 Nokia5230 學(xué)完了 HTML 和 JavaScript 的入門，那屏幕尺寸也就是三個(gè)手指的寬度朗恳，緊緊攥在手里看著頁面混排效果極差的網(wǎng)頁文檔湿颅。

現(xiàn)如今，iPhone 都出到 6s 了粥诫，一個(gè)版本一個(gè)尺寸油航，而且尺寸越來越大，還有各種寬高不一的 Android 機(jī)器怀浆，種類繁多谊囚。以前的觸屏是電阻式，只支持單點(diǎn)觸碰执赡；而現(xiàn)在電容式的觸屏精度更高秒啦，還支持多指觸控，這如絲般順滑的體驗(yàn)在三四年前是完全體會(huì)不到的搀玖。曾經(jīng)手機(jī)開一個(gè)程序久了就會(huì)卡余境，動(dòng)不動(dòng)還會(huì)自動(dòng)重啟；而現(xiàn)在的手機(jī)開一堆程序灌诅，完全無感知芳来，這就是硬件發(fā)展前后的差異。

手機(jī)已經(jīng)成為了人們生活中不可或缺的一部分猜拾，甚至成為了一些人身體的一部分即舌，淘寶今年雙十一的數(shù)據(jù)顯示，國內(nèi)移動(dòng)端的消費(fèi)比例已經(jīng)遠(yuǎn)遠(yuǎn)超過了 PC 端挎袜，占比 68%顽聂。面對龐大的用戶，我們的技術(shù)是否做好了充足的準(zhǔn)備盯仪，這里還得打一個(gè)問號紊搪。

PC 上那一套經(jīng)驗(yàn)不是直接搬到移動(dòng)端就可以使用了，在移動(dòng)端還需要解決更多的問題：

多分辨率問題全景，這里涉及到了響應(yīng)式設(shè)計(jì)和前端響應(yīng)式技術(shù)

不同網(wǎng)絡(luò)環(huán)境的網(wǎng)頁加載優(yōu)化問題耀石，2g/3g/4g/wifi

手指交互帶來的一系列體驗(yàn)問題

為了提升用戶體驗(yàn)，將 Web Native 化 —— 類 React 技術(shù)帶來的一系列問題

遠(yuǎn)程調(diào)試問題

移動(dòng)安全問題等等

上面提到的問題很多已經(jīng)有了優(yōu)秀的解決方案爸黄，當(dāng)然也有很多未提及的滞伟。WebApp 的性能揭鳞、流暢度和穩(wěn)定性遠(yuǎn)遠(yuǎn)不如原生應(yīng)用，同時(shí)它也無法良好地運(yùn)用設(shè)備提供的原生功能梆奈，這些都是大家轉(zhuǎn)投 Native 的原因野崇。

端的融合

不同分辨率的手機(jī)，不同物理尺寸的終端亩钟，為了保持良好的視覺體驗(yàn)和用戶體驗(yàn)乓梨，我們不得不為每一個(gè)尺寸寫一份 Media Query 代碼，那么對應(yīng)的径荔，設(shè)計(jì)師也需要設(shè)計(jì)多套版式供前端使用，這給設(shè)計(jì)師脆霎、前端和測試帶來了無盡的麻煩总处。為此，我們通過前端技術(shù)重塑屏幕睛蛛，重新定義像素尺寸鹦马，使用流式布局，通過百分比來響應(yīng)不同的終端尺寸忆肾。這是端的融合荸频。

后續(xù)的 Mobile 的技術(shù)發(fā)展方向上，應(yīng)該是相當(dāng)明確的客冈。很多公司都是三套人馬維護(hù)三端的程序旭从，iOS、Android 和 Web场仲，而這三端做的事情都是一樣的和悦，一樣的界面，一樣的后端接口渠缕，一樣的交互方式鸽素。為了能夠快速響應(yīng)業(yè)務(wù)的變更，我們不得不將三端合并為一端對待亦鳞，用一套程序編程成三端代碼馍忽，然后發(fā)布到三個(gè)平臺(tái)上。這也是端的融合燕差。React 系列技術(shù)發(fā)展到此遭笋，絕對不是終點(diǎn)，它只是一個(gè)探路燈徒探，給我們照明了方向坐梯。

技術(shù)需要為業(yè)務(wù)做保障，而好的技術(shù)是能夠及時(shí)響應(yīng)業(yè)務(wù)的變化刹帕，我們不可能投入大量的人力在 Web 的修補(bǔ)工作上吵血，通過開發(fā)統(tǒng)一工具谎替，屏蔽端和端之間的差異，統(tǒng)一開發(fā)模式和開發(fā)體驗(yàn)蹋辅，這才是 Mobile 的未來钱贯。

當(dāng)然，回到我們之前說的規(guī)范和標(biāo)準(zhǔn)侦另，我們目前所做的「屏蔽差異」工作秩命，今后，也會(huì)有統(tǒng)一的標(biāo)準(zhǔn)來規(guī)范褒傅，目前手機(jī)廠商沒有這個(gè)共識弃锐，是因?yàn)檫€處于當(dāng)年 Chrome、Firefox 搶占 IE6 市場份額的階段殿托。端的最終融合在于一個(gè)統(tǒng)一的標(biāo)準(zhǔn)霹菊，以及強(qiáng)有力的執(zhí)行。

棧的融合

我剛接觸前端的時(shí)候支竹，還沒有聽說「全椥ⅲ」，Web 技術(shù)棧往小里說礼搁，包含了從前端設(shè)計(jì)饶碘、交互、前端實(shí)現(xiàn)馒吴、網(wǎng)絡(luò)數(shù)據(jù)傳輸扎运、后端實(shí)現(xiàn)、后端運(yùn)維和數(shù)據(jù)庫等幾個(gè)方面饮戳，能短時(shí)間內(nèi)從無到有實(shí)現(xiàn)這么一套系統(tǒng)绪囱，并且能夠抗得住一定流量沖擊的人，我們可以稱之為全棧工程師莹捡。能夠有架構(gòu)有條理地實(shí)現(xiàn)這套系統(tǒng)鬼吵，并且抗得住大流量、有集成測試篮赢、有監(jiān)控的齿椅，這種我們可以稱之為資深全棧工程師。現(xiàn)在不乏這種人才启泣，也不乏自吹為這種人涣脚。

棧的融合得益于 Node.js 的出現(xiàn)，作為前后端分離的橋梁寥茫，它拉近了前端工程師與后端的距離遣蚀，有的人在這座橋梁上賣力行走，漸漸的也從前端走進(jìn) 了后端，甚至走進(jìn)了后端的運(yùn)維芭梯。至此险耀，前端也擁有了部署和發(fā)布整個(gè)應(yīng)用的能力，這是一個(gè)質(zhì)的突破玖喘。

使用 Node.js甩牺，簡單幾行程序便能實(shí)現(xiàn)一個(gè) web 服務(wù)器、便能搭建一個(gè)多人聊天的網(wǎng)頁累奈，它的便捷性可見一斑贬派。NPM 社區(qū)的發(fā)展，沉淀了成千上萬的組件包澎媒，一行命令即可獲取搞乏，這種組件拼湊式的開發(fā)，任何功能的實(shí)現(xiàn)都不會(huì)顯得太復(fù)雜戒努，而這里的「不復(fù)雜」也蘊(yùn)含了無數(shù)的坑坑洼洼请敦，在這一層的融合上也會(huì)遇上不少阻礙：

冗余的龐大的包內(nèi)容，為了使用一個(gè)小功能柏卤，我們從網(wǎng)絡(luò)上拉取下來一個(gè)巨大的包冬三，而且這里的「巨大」對很多人來說都是無感知的匀油，很少會(huì)有人進(jìn)入 node_modules 去查看依賴的第三方包是如何實(shí)現(xiàn)的缘缚，實(shí)際情況可能會(huì)相當(dāng)震撼，第三方包還引用了一堆第三方包敌蚜，這些包都會(huì)在 Node.js 執(zhí)行的時(shí)候被收納進(jìn)去桥滨，放在內(nèi)存中。

猛烈的迭代弛车，今年的 Node.js 被人嫌棄迭代太慢了（當(dāng)然齐媒，這是表面原因），走出了一個(gè)分支 io.js纷跛，發(fā)展了一會(huì)兒喻括，進(jìn)度趕超了 Node.js，后來覺得一家人不干兩家活贫奠，又合并回去了唬血。雖說上層 API 幾乎沒有變化每篷，但是底層卻被翻了一個(gè)天吮旅。

偶爾的巨大漏洞蓖乘，每隔一端時(shí)間就會(huì)暴露 Node.js 存在漏洞酒朵，這些漏洞的補(bǔ)救措施就是立即升級版本號仓技，比較讓人擔(dān)心受怕剥悟。

后端意識不強(qiáng)烈时呀，前端占領(lǐng)了中間層的開發(fā)订雾，有的時(shí)候還干這后端的活兒，然而卻沒有后端沉淀多年固有的意識冕杠，測試和監(jiān)控做的相當(dāng)潦草微姊。

JavaScript 從客戶端的腳本語言縱身躍進(jìn)進(jìn)入了后端行列，而今也開始深入到移動(dòng)端 Native 領(lǐng)域拌汇，確實(shí)是無孔不入柒桑，這可能就是語言的特性，也可能是技術(shù)本身就在尋求融合點(diǎn)噪舀，把有差異的地方全部躺平魁淳，然后用統(tǒng)一的方式去關(guān)注業(yè)務(wù)，關(guān)注用戶与倡。端和棧也在融合界逛。

后端服務(wù)化，云數(shù)據(jù)纺座，云安全

用戶體驗(yàn)變得越來越重要息拜，響應(yīng)式技術(shù)的發(fā)展也是后續(xù)網(wǎng)頁應(yīng)用的一大特點(diǎn)，端和端之間的差異只是在表現(xiàn)上净响，數(shù)據(jù)這一層差異不是特別大少欺，很多應(yīng)用 PC 和 Mobile 共用一套接口，或者 Mobile 的接口在 PC 接口的基礎(chǔ)上做了一層包裝馋贤，對接口字段做了些許刪減赞别。后端為了響應(yīng)各個(gè)端之間的數(shù)據(jù)需求，也需要關(guān)注數(shù)據(jù)的可利用性配乓，接口包裝的拓展性等仿滔，這是后端服務(wù)化的一個(gè)表現(xiàn)。移動(dòng)端的開發(fā)上犹芹，前后端間隙十分明顯崎页，越來越多移動(dòng)端應(yīng)用的發(fā)布已經(jīng)脫離了后端，前端完全通過異步方式獲取數(shù)據(jù)腰埂。

業(yè)務(wù)變化很快很快快飒焦，今天這個(gè)產(chǎn)品被并購，明天那個(gè)業(yè)務(wù)被砍掉屿笼，每個(gè)人負(fù)責(zé)的業(yè)務(wù)線可能冷不丁地就變了牺荠。很多大公司的決策是由上往下的，上面微動(dòng)刁卜，下面可能就是大動(dòng)志电，可能某個(gè)部門就不存在了，也可能被劃分成幾個(gè)產(chǎn)品部門蛔趴。

所以「大后臺(tái)挑辆，小前臺(tái)」的趨勢必然形成。前端，毫無疑問鱼蝉，在這個(gè)前臺(tái)之中洒嗤。前臺(tái)的特點(diǎn)是靈活的，多變的魁亦，可快速重組的渔隶。對后臺(tái)而言，為了響應(yīng)前臺(tái)的變化洁奈，需要提供更細(xì)良浒Γ化的 API，將數(shù)據(jù)打散利术，打得更加零碎呈野，零碎的數(shù)據(jù)易于重組，這是在考驗(yàn)后端的架構(gòu)能力印叁。如今被冒，很多前端也都是半棧工程師，盤踞在前后端中間層上轮蜕，然而如何迎接這種后端服務(wù)化的模式昨悼，似乎這個(gè)準(zhǔn)備還是不夠充足的。

GraphQL 的出現(xiàn)場景跟 React 類似跃洛，React 是前端應(yīng)對不同場景的一種強(qiáng)有力手段率触，而 GraphQL 則是后端應(yīng)對不同需求場景的一次嘗試，Web APIs 將會(huì)成為 Web App 和 Mobile App 的一個(gè)中心點(diǎn)税课，前端基于后端的 RESTful 服務(wù)構(gòu)建應(yīng)用闲延，這里面存在太多未知的問題需要探索痊剖，這是一個(gè)大數(shù)據(jù)下探索的新起點(diǎn)韩玩，也給前端開發(fā)者創(chuàng)造了無數(shù)的可能。

這幾年各類網(wǎng)盤陆馁，各個(gè)云服務(wù)商都在搶占市場找颓，有提供圖片儲(chǔ)存的，有提供 CDN 靜態(tài)資源緩存的叮贩，有提供大文件儲(chǔ)存的击狮，也有賣數(shù)據(jù)庫服務(wù)的。種類繁多益老，而歸根到底都是彪蓬，你付錢給我，我提供儲(chǔ)存和安全捺萌，還提供方便的 SDK 讓你獲取自己的數(shù)據(jù)档冬。云服務(wù)賣的是一套服務(wù)，它是把所有人的數(shù)據(jù)風(fēng)險(xiǎn)集于一身，用強(qiáng)硬的技術(shù)做安全防御酷誓。云披坏，賦予了我們無窮的想象空間。

三輛馬車盐数，我們還差一輛

開發(fā)功能對很多人來說是輕松活兒棒拂，基本的前端語言加些復(fù)雜的特效，實(shí)現(xiàn)成本不會(huì)很高玫氢；即便是搭建一個(gè)網(wǎng)站帚屉，使用 Node.js 社區(qū)中的框架也能夠輕松實(shí)現(xiàn)。然后極少人會(huì)去關(guān)注每個(gè)功能點(diǎn)的測試漾峡，一個(gè)項(xiàng)目下來基本看不到測試用例涮阔，更不用說會(huì)去做監(jiān)控相關(guān)的事情。結(jié)果就是灰殴，踏過了無數(shù)的坑洼之后終于上線了敬特，而后續(xù)加功能的時(shí)候發(fā)現(xiàn)，加了東西就跑不通牺陶，新內(nèi)容影響了之前的邏輯伟阔，只好去修復(fù)之前的邏輯，修好之后發(fā)現(xiàn)更早之前的邏輯又不通了掰伸，整個(gè)修復(fù)過程就像玩多米諾骨牌皱炉。

程序開發(fā)三板斧：功能、測試和監(jiān)控狮鸭。在 github 上可以看到很多程序都加入了持續(xù)集成合搅，這是一個(gè)好兆頭，意味著我們寫的程序也越來越健壯歧蕉，至少貢獻(xiàn)給世人使用的程序是健壯的灾部。很多程序的代碼覆蓋率也達(dá)到了 90%+，這些數(shù)據(jù)都是重視測試的證據(jù)惯退。

然而赌髓，三輛馬車，我們最后一輛依然沒有開動(dòng)起來催跪。很多公司都會(huì)有自己的 log 平臺(tái)锁蠕，每個(gè)用戶訪問頁面中的任何一個(gè)鏈接都會(huì)將用戶信息和訪問信息以 log 日志形式收集到 log 平臺(tái)上，然后通過監(jiān)控平臺(tái)或者離線分析的方式懊蒸，獲取業(yè)務(wù)數(shù)據(jù)或者技術(shù)數(shù)據(jù)荣倾，進(jìn)行分析和二次開發(fā)。這些東西在大公司見的很多骑丸，而這方面的東西在前端舌仍，尤其是使用 Node.js 做程序開發(fā)的前端身上鳖孤，看到的并不多。

最后

2016 年抡笼，我覺得技術(shù)上的新創(chuàng)造會(huì)稍微緩和些苏揣，這兩年很多人已經(jīng)被新技術(shù)沖擊得有些找不著方向了，同一類東西推姻，前者還沒學(xué)完平匈，后者就開始火爆了，緊接著又是一陣技術(shù)的凋零和新技術(shù)的出現(xiàn)藏古，這樣搞久了也會(huì)有一絲的疲倦增炭。而更多的會(huì)關(guān)注，如何更好地服務(wù)多端拧晕，如何更大幅度地提升開發(fā)體驗(yàn)和用戶體驗(yàn)隙姿，很多技術(shù)都會(huì)往性能、往極致這個(gè)方向上鉆研厂捞。

寫長文真不輕松输玷。寫到這里，感覺說的不通透靡馁，還有很多想說的欲鹏，但是個(gè)人理解力有限，也難以表達(dá)全面臭墨。技術(shù)的變化很快赔嚎，今天說過的東西，到了明天就可能過時(shí)了胧弛。我們猜不透未來尤误，只能把現(xiàn)有的東西好好消化吸收下，留下一個(gè)話柄结缚，給讀者吧损晤。