割裂的前端工程師--- 2017年的預(yù)測(cè)

有一天麻敌,我們組內(nèi)的一個(gè)小伙伴突然問我,你知道有一個(gè)叫重構(gòu)工程師的崗位扩劝?這是干什么的庸论?重構(gòu)工程師

這個(gè)問題引發(fā)了我對(duì)前端領(lǐng)域發(fā)展的思考,所以我來(lái)梳理下前端領(lǐng)域的發(fā)展過(guò)程棒呛,順便小小的預(yù)測(cè)下2017年的趨勢(shì)聂示。

神說(shuō),要有光簇秒,就有了光

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

神稱空氣為天

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

神稱旱地為地,稱水的聚處為海

之后的幾年間借杰,前端基本都是圍繞著各種類庫(kù)如Mootools过吻,Underscored,Prototype蔗衡,Dojo纤虽,Jquery ,YUI開發(fā)頁(yè)面绞惦。各大類庫(kù)也是相互吸收優(yōu)點(diǎn)逼纸,不斷完善自身,但是本質(zhì)沒有太多變化济蝉。

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

智能手機(jī)開始普及踱稍,移動(dòng)端大浪潮流勢(shì)不可擋曲饱,web前端們開始為了移動(dòng)端開發(fā)各種類庫(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è)的性能極大提高,大家開始紛紛開發(fā)出復(fù)雜的Web頁(yè)面來(lái)掏觉,這種需求開始催生了前端們對(duì)開發(fā)的工程化思考区端,首當(dāng)其沖的就是模塊化加載的問題,AMD澳腹、CMD织盼、UMD 登上舞臺(tái),起衍生的產(chǎn)物Seajs酱塔,requirejs開始劃分地盤沥邻。

這個(gè)時(shí)代還是服務(wù)端渲染為王的時(shí)代,包括很多模塊或者組件上的拼接都是在服務(wù)端完成的羊娃,但同時(shí)也開啟jquery + requirejs + template開發(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í)的開發(fā),出現(xiàn)了許多用于簡(jiǎn)化客戶端開發(fā)的框架挺智,諸如Backbone祷愉,Ember,AngularJS赦颇,Vue二鳄,Alavon,Knockout媒怯,React等等各種各樣的MV*框架订讼。

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

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

神說(shuō),水要多多滋生有生命的物

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

15年砂客,F(xiàn)acebook 在 React.js Conf 2015 大會(huì)上推出了基于 JavaScript 的開源框架 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ā)布宝磨。前端在主流開發(fā)上基本形成了三國(guó)時(shí)代(React弧关,Vue,Ng)唤锉。與此同時(shí)世囊,移動(dòng)端也形成了以混合開發(fā)為主的方式,Native嵌入Webview頁(yè)面窿祥。

神就照著自己形象造人 -- 細(xì)分或者割裂

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

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

  1. 重型SPA頁(yè)面
  2. Hybrid方式的Web頁(yè)面
  3. 活動(dòng)頁(yè)面
  4. 游戲等其他

重型SPA頁(yè)面 -- Teambition

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

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

從最近Rx.js的star數(shù),我們也能看出來(lái)歌粥,大家也越來(lái)越關(guān)心數(shù)據(jù)管理的問題塌忽,本地的數(shù)據(jù)管理只是一個(gè)方面,還會(huì)涉及到多個(gè)用戶數(shù)據(jù)同步的問題失驶,也就是服務(wù)端和客戶端數(shù)據(jù)同步問題土居,如和及時(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的修改吁系。所以想要減少類似的錯(cuò)誤,就必須要能保證及時(shí)正確的同步數(shù)據(jù)白魂。

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

如此多的業(yè)務(wù)和組件,必然對(duì)內(nèi)存上會(huì)造成壓力逞姿,如何管理好內(nèi)存也是一門學(xué)問辞嗡。

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

Hybrid方式的Web頁(yè)面 -- 現(xiàn)在大多數(shù)App的主流

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

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

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

  2. ajax請(qǐng)求問題变丧,如果使用一個(gè)URL的形式來(lái)嵌入,可以獨(dú)自發(fā)送ajax請(qǐng)求沒有任何問題绢掰,但是如果使用Html文本痒蓬,直接Webview渲染的方式,就類似PC上滴劲,文件夾打開html文件一樣谊却,ajax請(qǐng)求發(fā)送不出去,需要Native幫忙做bridge來(lái)調(diào)用哑芹。

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

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

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

活動(dòng)頁(yè)面 -- 比如來(lái)自宇宙的邀請(qǐng)函

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

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

游戲等其他 -- H5小游戲,數(shù)據(jù)可視化

當(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)域的佼佼者刽宪。

轉(zhuǎn)領(lǐng)域

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

未來(lái)

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

個(gè)人認(rèn)為這種細(xì)分其實(shí)對(duì)我們前端更加有利的耕姊,第一桶唐,這表現(xiàn)出前端整個(gè)領(lǐng)域發(fā)展比較迅速,各方面都有參與到茉兰,沒有和時(shí)代脫節(jié)尤泽。第二,有各種細(xì)分的領(lǐng)域规脸,大家可以做到一專多精坯约,不用害怕失業(yè)的煩惱。因?yàn)槊恳粋€(gè)方向都可以做的很深莫鸭,動(dòng)力很足闹丐。第三,利于交流被因,各種不同分支的人卿拴,可以拿出自己特長(zhǎng)的技術(shù)來(lái)相互交流,取長(zhǎng)補(bǔ)短梨与,構(gòu)建更加系統(tǒng)的知識(shí)網(wǎng)絡(luò)堕花。

(以上只是個(gè)人見解,如有雷同粥鞋,只能說(shuō)英雄所見略同)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末缘挽,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子呻粹,更是在濱河造成了極大的恐慌到踏,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尚猿,死亡現(xiàn)場(chǎng)離奇詭異窝稿,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)凿掂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門伴榔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)纹蝴,“玉大人,你說(shuō)我怎么就攤上這事踪少√涟玻” “怎么了祖屏?”我有些...
    開封第一講書人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵跨晴,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我锤岸,道長(zhǎng)集漾,這世上最難降的妖魔是什么切黔? 我笑而不...
    開封第一講書人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮具篇,結(jié)果婚禮上纬霞,老公的妹妹穿的比我還像新娘。我一直安慰自己驱显,他們只是感情好诗芜,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著埃疫,像睡著了一般伏恐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上栓霜,一...
    開封第一講書人閱讀 51,292評(píng)論 1 301
  • 那天翠桦,我揣著相機(jī)與錄音,去河邊找鬼叙淌。 笑死,一個(gè)胖子當(dāng)著我的面吹牛愁铺,可吹牛的內(nèi)容都是我干的鹰霍。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼茵乱,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼茂洒!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起瓶竭,我...
    開封第一講書人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤督勺,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后斤贰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體智哀,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年荧恍,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了瓷叫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屯吊。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖摹菠,靈堂內(nèi)的尸體忽然破棺而出盒卸,到底是詐尸還是另有隱情,我是刑警寧澤次氨,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布蔽介,位于F島的核電站,受9級(jí)特大地震影響煮寡,放射性物質(zhì)發(fā)生泄漏虹蓄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一洲押、第九天 我趴在偏房一處隱蔽的房頂上張望武花。 院中可真熱鬧,春花似錦杈帐、人聲如沸体箕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)累铅。三九已至,卻和暖如春站叼,著一層夾襖步出監(jiān)牢的瞬間娃兽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工尽楔, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留投储,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓阔馋,卻偏偏與公主長(zhǎng)得像玛荞,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子呕寝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,104評(píng)論 25 707
  • 有一天勋眯,我們組內(nèi)的一個(gè)小伙伴突然問我,你知道有一個(gè)叫重構(gòu)工程師的崗位下梢?這是干什么的客蹋?(知乎上有關(guān)于重構(gòu)工程師討論h...
    老夫的天閱讀 481評(píng)論 2 3
  • 本文首發(fā)于 GitChat,現(xiàn)免費(fèi)放出~感謝大家的支持孽江。 我們都知道讶坯,大學(xué)幾乎是沒有 Web 前端課的。以我所在的...
    hylerrix閱讀 4,879評(píng)論 8 60
  • 這些日子蘇桉想家的很岗屏,三天兩頭的和老爸老媽通視頻闽巩。老爸笑嘿嘿的對(duì)她說(shuō)钧舌,竟然能等到你主動(dòng)給我們打電話了啊。老爸的一句...
    王離默閱讀 923評(píng)論 7 3
  • 生個(gè)孩子跟我們家姓涎跨,不然家就沒了 “娣娣洼冻,你大姐姐生了,生了個(gè)男孩隅很!母子平安撞牢。”母親大年三十晚上打來(lái)報(bào)喜電話叔营,“記...
    張若水閱讀 2,036評(píng)論 1 3