摘要：主要兼容的微信的瀏覽器，因?yàn)橐谂笥讶?lái)營(yíng)銷(xiāo)，總體來(lái)說(shuō)，會(huì)偏設(shè)計(jì)以及動(dòng)畫(huà)些。

有一天，我們組內(nèi)的一個(gè)小伙伴突然問(wèn)我，你知道有一個(gè)叫重構(gòu)工程師的崗位？這是干什么的？重構(gòu)工程師

這個(gè)問(wèn)題引發(fā)了我對(duì)前端領(lǐng)域發(fā)展的思考，所以我來(lái)梳理下前端領(lǐng)域的發(fā)展過(guò)程，順便小小的預(yù)測(cè)下2017年的趨勢(shì)。不想看回憶的，可以直接跳到后面看展望。

自1991年蒂姆·伯納斯-李公開(kāi)提及HTML描述，到1999年W3C發(fā)布HTML4期間，寫(xiě)網(wǎng)頁(yè)是為了更好的交流彼此的想法，為了能夠維護(hù)自己的網(wǎng)頁(yè)，各路大神也是八仙過(guò)海各顯神通，甚至發(fā)明了PHP（這個(gè)世界最好的語(yǔ)言）。這個(gè)時(shí)期并沒(méi)有一個(gè)所謂的前端開(kāi)發(fā)崗位的，大家都是軟件工程師。當(dāng)然這個(gè)時(shí)代也是神人輩出的時(shí)代，太多現(xiàn)在互聯(lián)網(wǎng)或者說(shuō)整個(gè)IT行業(yè)的概念和雛形在這個(gè)時(shí)期形成。Google網(wǎng)站正式啟用，個(gè)人PC開(kāi)始慢慢普及。

O"Reilly Media、Battelle和MediaLive在2004年10月引導(dǎo)了第一個(gè)Web 2.0大會(huì)，web2.0時(shí)代開(kāi)啟，Blog，Wiki，RSS各種個(gè)人網(wǎng)站開(kāi)始登陸大家的視野，同時(shí)，豆瓣，天涯這些符合2.0時(shí)代的產(chǎn)物開(kāi)始在國(guó)內(nèi)大行其道。我們有了第一波注重Web前端的軟件開(kāi)發(fā)師，同一時(shí)刻，米國(guó)誕生了FaceBook具有跨時(shí)代的產(chǎn)物，05年，校內(nèi)網(wǎng)出現(xiàn)，前端們開(kāi)始活躍起來(lái)了，06年8月，Jquery的第一個(gè)版本發(fā)布。

之后的幾年間，前端基本都是圍繞著各種類(lèi)庫(kù)如MooTools，Underscore，Prototype，Dojo，jQuery ，YUI開(kāi)發(fā)頁(yè)面。各大類(lèi)庫(kù)也是相互吸收優(yōu)點(diǎn)，不斷完善自身，但是本質(zhì)沒(méi)有太多變化。

與此同時(shí)，在我們看不到的背后，瀏覽器第二次大戰(zhàn)打響，V8引擎開(kāi)始大放異彩，Web標(biāo)準(zhǔn)也在推動(dòng)ECMAScript5.0進(jìn)化著。Node發(fā)布了，意味著我們前端的領(lǐng)域擴(kuò)大了，伸手到服務(wù)端了。

智能手機(jī)開(kāi)始普及，移動(dòng)端大浪潮流勢(shì)不可擋，web前端們開(kāi)始為了移動(dòng)端開(kāi)發(fā)各種類(lèi)庫(kù)了Sencha Touch，Zepto.js，JQ Mobile，HTML5概念火熱了起來(lái)，各種網(wǎng)頁(yè)小游戲?qū)映霾桓F，和Flash的爭(zhēng)斗也到了水火不容的地步，Twitter 也推出了 Bootstrap這個(gè)引領(lǐng)風(fēng)騷的CSS工具包。

隨著系統(tǒng)硬件的提升，V8引擎性能的提升，整個(gè)網(wǎng)頁(yè)的性能極大提高，大家開(kāi)始紛紛開(kāi)發(fā)出復(fù)雜的Web頁(yè)面來(lái)，這種需求開(kāi)始催生了前端們對(duì)開(kāi)發(fā)的工程化思考，首當(dāng)其沖的就是模塊化加載的問(wèn)題，AMD、CMD、UMD 登上舞臺(tái)，起衍生的產(chǎn)物Seajs，requirejs開(kāi)始劃分地盤(pán)。

這個(gè)時(shí)代還是服務(wù)端渲染為王的時(shí)代，包括很多模塊或者組件上的拼接都是在服務(wù)端完成的，但同時(shí)也開(kāi)啟jquery + requirejs + template開(kāi)發(fā)復(fù)雜頁(yè)面的模式。（這個(gè)時(shí)間段，出現(xiàn)了重構(gòu)工程師和JS工程師的劃分。）

12年之后，隨著W3C規(guī)范和標(biāo)準(zhǔn)進(jìn)一步推動(dòng)，大家對(duì)Web頁(yè)面復(fù)雜度進(jìn)一步的加劇，人們不在滿足于Jquery面條時(shí)的開(kāi)發(fā)，出現(xiàn)了許多用于簡(jiǎn)化客戶端開(kāi)發(fā)的框架，諸如Backbone，Ember，AngularJS，Vue，Avalon，Knockout，React等等各種各樣的MV*框架。

這是一個(gè)群雄割據(jù)的時(shí)代，如此多的框架涌出，每個(gè)開(kāi)發(fā)者根據(jù)自己的喜好，業(yè)務(wù)的需求選擇著不同框架來(lái)完成目標(biāo)。

Node.js開(kāi)始崛起，Express，Koa框架開(kāi)始使用到各種生產(chǎn)項(xiàng)目中，PM2的服務(wù)管理，為企業(yè)解決了監(jiān)控和穩(wěn)定問(wèn)題，同時(shí)，阿里開(kāi)始探索Node.js中間層的開(kāi)發(fā)道路，連續(xù)發(fā)聲，提供前后端分離解決方案。

微信這個(gè)社交龐然大物已然崛起，微信公眾號(hào)的玩法，讓前端崗位開(kāi)始火熱了起來(lái)，也開(kāi)始帶來(lái)了Web和Native的爭(zhēng)端。

15年，F(xiàn)acebook 在 React.js Conf 2015 大會(huì)上推出了基于 JavaScript 的開(kāi)源框架 React Native，一舉將React推上了一個(gè)新的高度，learn once ，write everywhere。這一年是屬于React的年份。

同時(shí)，構(gòu)建工具也在不停的迭代，Grunt的輝煌已去，Gulp并未在王座上久呆，Webpack的風(fēng)暴就席卷而來(lái)。

16年，Webpack已經(jīng)成為了前端打包構(gòu)建的主流，Vue強(qiáng)勢(shì)崛起，Ng2完成發(fā)布。前端在主流開(kāi)發(fā)上基本形成了三國(guó)時(shí)代（React，Vue，Ng）。與此同時(shí)，移動(dòng)端也形成了以混合開(kāi)發(fā)為主的方式，Native嵌入Webview頁(yè)面。

因?yàn)榫W(wǎng)絡(luò)和硬件性能不斷提升，前端從原來(lái)的cs模式到現(xiàn)在更像 bs，但也依然有 cs 的分發(fā)優(yōu)勢(shì)。

上面回憶了一下前端大概的發(fā)展歷程，下面來(lái)說(shuō)說(shuō)自己對(duì)17年前端發(fā)展的一些預(yù)測(cè)。

隨著業(yè)務(wù)的不同，每個(gè)團(tuán)隊(duì)在前端技術(shù)點(diǎn)開(kāi)始有所分化：

重型SPA頁(yè)面

Hybrid方式的Web頁(yè)面

活動(dòng)頁(yè)面

游戲等其他

重型的SPA頁(yè)面，業(yè)務(wù)功能極其復(fù)雜，使用Vue，React，Angular這種MVVM的框架后，在開(kāi)發(fā)過(guò)程中，組件必然越來(lái)越多，父子組件之間的通信，子組件之間的通信頻率都會(huì)大大增加。如何管理這些組件之間的數(shù)據(jù)流動(dòng)就會(huì)成為這類(lèi)WebApp的最大難點(diǎn)。

從頁(yè)面的加載來(lái)說(shuō)，SPA可以依靠首次加載的Loading動(dòng)畫(huà)，來(lái)掩蓋一些頁(yè)面加載性能的問(wèn)題（TB我這里加載一般在5S左右），很多懶加載和延遲加載之類(lèi)的也是不需要做。因?yàn)橄嚓P(guān)的數(shù)據(jù)后面都需要用到，也就不存在是否會(huì)使用的問(wèn)題。

從最近Rx.js的star數(shù)，我們也能看出來(lái)，大家也越來(lái)越關(guān)心數(shù)據(jù)管理的問(wèn)題，本地的數(shù)據(jù)管理只是一個(gè)方面，還會(huì)涉及到多個(gè)用戶數(shù)據(jù)同步的問(wèn)題，也就是服務(wù)端和客戶端數(shù)據(jù)同步問(wèn)題，如和及時(shí)正確的同步數(shù)據(jù)。

及時(shí)正確同步數(shù)據(jù)這個(gè)概念指的是： 多人操作一個(gè)任務(wù)時(shí)，兩個(gè)人都在修改一個(gè)任務(wù)時(shí)，容易造成數(shù)據(jù)覆蓋。A剛修改完，B過(guò)幾秒也修改了，因?yàn)橥讲患皶r(shí)，B不知道A修改了，結(jié)果B新修改的數(shù)據(jù)覆蓋了A的修改。所以想要減少類(lèi)似的錯(cuò)誤，就必須要能保證及時(shí)正確的同步數(shù)據(jù)。

既然數(shù)據(jù)和請(qǐng)求如此多，那么就肯定要利用好本地的緩存和各種存儲(chǔ)了，LocalStorage，SessionStorage的都會(huì)使用上。

如此多的業(yè)務(wù)和組件，必然對(duì)內(nèi)存上會(huì)造成壓力，如何管理好內(nèi)存也是一門(mén)學(xué)問(wèn)，比較典型的是組件的銷(xiāo)毀，該如何合理的創(chuàng)建和銷(xiāo)毀組件，已經(jīng)組件內(nèi)部data數(shù)據(jù)的組織都會(huì)很考驗(yàn)代碼人員。

相關(guān)的可以看@徐飛的文章

Hybrid方式的開(kāi)發(fā)目前還是移動(dòng)端的主流，這種web頁(yè)面的特點(diǎn)是業(yè)務(wù)并不復(fù)雜，大多是展示信息為主，再加上一些操作按鈕，需要解決的問(wèn)題，在于很多時(shí)候要和Native來(lái)通信，而且Android的webview有各種各樣的國(guó)產(chǎn)廠商問(wèn)題也是很難以解決，這方面微信做的不錯(cuò)，直接搞了一個(gè)自己的瀏覽器來(lái)統(tǒng)一底層的支持。

對(duì)于jsbridge的實(shí)現(xiàn)，各個(gè)公司有不同的實(shí)現(xiàn)方案，主要還是要看Native的開(kāi)發(fā)怎么來(lái)定義bridge的方案，以我自己開(kāi)發(fā)的經(jīng)驗(yàn)來(lái)看，有這么幾個(gè)點(diǎn)需要解決：

用戶驗(yàn)證問(wèn)題，怎么來(lái)確認(rèn)Native的用戶身份，是用原來(lái)Web網(wǎng)站常用的session還是使用Native比較常用的token，但是不管用哪種，都需要Native幫忙來(lái)注入標(biāo)識(shí)。

ajax請(qǐng)求問(wèn)題，如果使用一個(gè)URL的形式來(lái)嵌入，可以獨(dú)自發(fā)送ajax請(qǐng)求沒(méi)有任何問(wèn)題，但是如果使用Html文本，直接Webview渲染的方式，就類(lèi)似PC上，文件夾打開(kāi)html文件一樣，ajax請(qǐng)求發(fā)送不出去，需要Native幫忙做bridge來(lái)調(diào)用。

溝通成本問(wèn)題，因?yàn)楹驮瓉?lái)PC端相比，多了參與方，所以排查問(wèn)題就更加麻煩了，這個(gè)還是主要看整體App的架構(gòu)怎么設(shè)計(jì)了。

性能問(wèn)題，怎么說(shuō)呢，不是每個(gè)App的開(kāi)發(fā)人員都很厲害，那么如果Native的代碼有問(wèn)題，Webview出錯(cuò)的概率就會(huì)變高，比如Css3的動(dòng)畫(huà)，容易引起崩潰，內(nèi)存占有率過(guò)高等等。

所以，對(duì)于這個(gè)方向的web前端的開(kāi)發(fā)人員來(lái)說(shuō)，如果會(huì)Native開(kāi)發(fā)的經(jīng)驗(yàn)更加如魚(yú)得水。

這類(lèi)活動(dòng)頁(yè)面，主要就是設(shè)計(jì)和動(dòng)畫(huà)上效果炫酷，吸人眼球，震撼人心，基本出來(lái)一個(gè)精彩的活動(dòng)頁(yè)面，都能在朋友圈掀起一波浪潮。技術(shù)上以WebGL為主，一般使用Three.js,渲染canvas來(lái)展示各種動(dòng)畫(huà)和視覺(jué)效果。

這個(gè)方向的前端會(huì)更加關(guān)注，瀏覽器的兼容，性能，設(shè)計(jì)出來(lái)的效果，動(dòng)畫(huà)的流暢度，體驗(yàn)等等。主要兼容的微信的瀏覽器，因?yàn)橐谂笥讶?lái)營(yíng)銷(xiāo)，總體來(lái)說(shuō)，會(huì)偏設(shè)計(jì)以及動(dòng)畫(huà)些。

當(dāng)時(shí)風(fēng)靡國(guó)內(nèi)的各種H5小游戲，特別多，基本是用CreateJs來(lái)制作的多，接觸不多，不多評(píng)論。

HTML游戲引擎

隨著大數(shù)據(jù)時(shí)代的來(lái)臨，前端領(lǐng)域各種數(shù)據(jù)可視化的庫(kù)也是層出不窮，D3，Highcharts，國(guó)內(nèi)的Echarts都是這個(gè)領(lǐng)域的佼佼者。

其實(shí)還有一個(gè)領(lǐng)域，就是通過(guò)Nodejs，學(xué)習(xí)服務(wù)端的各種知識(shí)，切換到服務(wù)端領(lǐng)域去。

上面的我所提到的細(xì)分（或者說(shuō)是割裂--比較有噱頭），自我感覺(jué)，已經(jīng)在慢慢展現(xiàn)出一些趨勢(shì)了，不知道大家有木有感覺(jué)到，比如徐飛就會(huì)更加擅長(zhǎng)TB這種重型業(yè)務(wù)流派，而手淘的人就會(huì)比較關(guān)注Hybrid的流派，甚至自己來(lái)搞Weex這種JS-Native開(kāi)發(fā)的框架。當(dāng)然大部分開(kāi)發(fā)人員還是可能都會(huì)做，沒(méi)有那么明顯的傾向，但隨著公司的業(yè)務(wù)的轉(zhuǎn)變和公司重點(diǎn)資源的傾斜，很多開(kāi)發(fā)人員還是會(huì)慢慢有所區(qū)分。

個(gè)人認(rèn)為這種細(xì)分其實(shí)對(duì)我們前端更加有利的，

前端業(yè)務(wù)重量化、場(chǎng)景多樣化，表現(xiàn)出前端整個(gè)領(lǐng)域發(fā)展比較迅速，各方面都有參與到，一直跟隨著時(shí)代發(fā)展而發(fā)展。

有各種細(xì)分的領(lǐng)域，大家可以做到一專多精，不同細(xì)分領(lǐng)域的知識(shí)點(diǎn)，都需要認(rèn)真的學(xué)習(xí)和研究，比如前端對(duì)數(shù)據(jù)的組織趨于集中化和范式化（Redux等）要求前端同學(xué)要懂基本的數(shù)據(jù)庫(kù)原理。能夠吃透每一個(gè)領(lǐng)域的知識(shí)點(diǎn)，都是一個(gè)巨大的挑戰(zhàn)。

利于交流，各種不同分支的人，可以拿出自己特長(zhǎng)的技術(shù)來(lái)相互交流，取長(zhǎng)補(bǔ)短，構(gòu)建更加系統(tǒng)的知識(shí)網(wǎng)絡(luò)。

其實(shí)要說(shuō)的很多，感覺(jué)說(shuō)不完，比如@寇云 提議加上Backbone，Ember，AngularJS，Vue，Alavon，Knockout，React 框架不是一個(gè)時(shí)間段出現(xiàn)，先驅(qū)者的思想被后生框架集成發(fā)展，以及框架生態(tài)這部分內(nèi)容。但感覺(jué)并不算我這篇文章的重點(diǎn)，就沒(méi)有加上。還有目前Native和Web前端之間的競(jìng)爭(zhēng)與合作。

原文和討論地址：知乎原文

（以上只是個(gè)人見(jiàn)解，如有雷同，只能說(shuō)英雄所見(jiàn)略同）