摘要:主要兼容的微信的瀏覽器,因?yàn)橐谂笥讶頎I銷,總體來說,會(huì)偏設(shè)計(jì)以及動(dòng)畫些。
有一天,我們組內(nèi)的一個(gè)小伙伴突然問我,你知道有一個(gè)叫重構(gòu)工程師的崗位?這是干什么的?重構(gòu)工程師
這個(gè)問題引發(fā)了我對(duì)前端領(lǐng)域發(fā)展的思考,所以我來梳理下前端領(lǐng)域的發(fā)展過程,順便小小的預(yù)測(cè)下2017年的趨勢(shì)。不想看回憶的,可以直接跳到后面看展望。
神說,要有光,就有了光自1991年蒂姆·伯納斯-李公開提及HTML描述,到1999年W3C發(fā)布HTML4期間,寫網(wǎng)頁是為了更好的交流彼此的想法,為了能夠維護(hù)自己的網(wǎng)頁,各路大神也是八仙過海各顯神通,甚至發(fā)明了PHP(這個(gè)世界最好的語言)。這個(gè)時(shí)期并沒有一個(gè)所謂的前端開發(fā)崗位的,大家都是軟件工程師。當(dāng)然這個(gè)時(shí)代也是神人輩出的時(shí)代,太多現(xiàn)在互聯(lián)網(wǎng)或者說整個(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)物開始在國內(nèi)大行其道。我們有了第一波注重Web前端的軟件開發(fā)師,同一時(shí)刻,米國誕生了FaceBook具有跨時(shí)代的產(chǎn)物,05年,校內(nèi)網(wǎng)出現(xiàn),前端們開始活躍起來了,06年8月,Jquery的第一個(gè)版本發(fā)布。
神稱旱地為地,稱水的聚處為海之后的幾年間,前端基本都是圍繞著各種類庫如MooTools,Underscore,Prototype,Dojo,jQuery ,YUI開發(fā)頁面。各大類庫也是相互吸收優(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ā)各種類庫了Sencha Touch,Zepto.js,JQ Mobile,HTML5概念火熱了起來,各種網(wǎng)頁小游戲?qū)映霾桓F,和Flash的爭(zhēng)斗也到了水火不容的地步,Twitter 也推出了 Bootstrap這個(gè)引領(lǐng)風(fēng)騷的CSS工具包。
隨著系統(tǒng)硬件的提升,V8引擎性能的提升,整個(gè)網(wǎng)頁的性能極大提高,大家開始紛紛開發(fā)出復(fù)雜的Web頁面來,這種需求開始催生了前端們對(duì)開發(fā)的工程化思考,首當(dāng)其沖的就是模塊化加載的問題,AMD、CMD、UMD 登上舞臺(tái),起衍生的產(chǎn)物Seajs,requirejs開始劃分地盤。
這個(gè)時(shí)代還是服務(wù)端渲染為王的時(shí)代,包括很多模塊或者組件上的拼接都是在服務(wù)端完成的,但同時(shí)也開啟jquery + requirejs + template開發(fā)復(fù)雜頁面的模式。(這個(gè)時(shí)間段,出現(xiàn)了重構(gòu)工程師和JS工程師的劃分。)
管理晝夜,分別明暗12年之后,隨著W3C規(guī)范和標(biāo)準(zhǔn)進(jìn)一步推動(dòng),大家對(duì)Web頁面復(fù)雜度進(jìn)一步的加劇,人們不在滿足于Jquery面條時(shí)的開發(fā),出現(xiàn)了許多用于簡(jiǎn)化客戶端開發(fā)的框架,諸如Backbone,Ember,AngularJS,Vue,Avalon,Knockout,React等等各種各樣的MV*框架。
這是一個(gè)群雄割據(jù)的時(shí)代,如此多的框架涌出,每個(gè)開發(fā)者根據(jù)自己的喜好,業(yè)務(wù)的需求選擇著不同框架來完成目標(biāo)。
Node.js開始崛起,Express,Koa框架開始使用到各種生產(chǎn)項(xiàng)目中,PM2的服務(wù)管理,為企業(yè)解決了監(jiān)控和穩(wěn)定問題,同時(shí),阿里開始探索Node.js中間層的開發(fā)道路,連續(xù)發(fā)聲,提供前后端分離解決方案。
神說,水要多多滋生有生命的物微信這個(gè)社交龐然大物已然崛起,微信公眾號(hào)的玩法,讓前端崗位開始火熱了起來,也開始帶來了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)暴就席卷而來。
16年,Webpack已經(jīng)成為了前端打包構(gòu)建的主流,Vue強(qiáng)勢(shì)崛起,Ng2完成發(fā)布。前端在主流開發(fā)上基本形成了三國時(shí)代(React,Vue,Ng)。與此同時(shí),移動(dòng)端也形成了以混合開發(fā)為主的方式,Native嵌入Webview頁面。
因?yàn)榫W(wǎng)絡(luò)和硬件性能不斷提升,前端從原來的cs模式到現(xiàn)在更像 bs,但也依然有 cs 的分發(fā)優(yōu)勢(shì)。
神就照著自己形象造人 -- 細(xì)分或者割裂上面回憶了一下前端大概的發(fā)展歷程,下面來說說自己對(duì)17年前端發(fā)展的一些預(yù)測(cè)。
隨著業(yè)務(wù)的不同,每個(gè)團(tuán)隊(duì)在前端技術(shù)點(diǎn)開始有所分化:
重型SPA頁面
Hybrid方式的Web頁面
活動(dòng)頁面
游戲等其他
重型SPA頁面 -- Teambition重型的SPA頁面,業(yè)務(wù)功能極其復(fù)雜,使用Vue,React,Angular這種MVVM的框架后,在開發(fā)過程中,組件必然越來越多,父子組件之間的通信,子組件之間的通信頻率都會(huì)大大增加。如何管理這些組件之間的數(shù)據(jù)流動(dòng)就會(huì)成為這類WebApp的最大難點(diǎn)。
從頁面的加載來說,SPA可以依靠首次加載的Loading動(dòng)畫,來掩蓋一些頁面加載性能的問題(TB我這里加載一般在5S左右),很多懶加載和延遲加載之類的也是不需要做。因?yàn)橄嚓P(guān)的數(shù)據(jù)后面都需要用到,也就不存在是否會(huì)使用的問題。
從最近Rx.js的star數(shù),我們也能看出來,大家也越來越關(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過幾秒也修改了,因?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é)問,比較典型的是組件的銷毀,該如何合理的創(chuàng)建和銷毀組件,已經(jīng)組件內(nèi)部data數(shù)據(jù)的組織都會(huì)很考驗(yàn)代碼人員。
相關(guān)的可以看@徐飛的文章
Hybrid方式的Web頁面 -- 現(xiàn)在大多數(shù)App的主流Hybrid方式的開發(fā)目前還是移動(dòng)端的主流,這種web頁面的特點(diǎn)是業(yè)務(wù)并不復(fù)雜,大多是展示信息為主,再加上一些操作按鈕,需要解決的問題,在于很多時(shí)候要和Native來通信,而且Android的webview有各種各樣的國產(chǎn)廠商問題也是很難以解決,這方面微信做的不錯(cuò),直接搞了一個(gè)自己的瀏覽器來統(tǒng)一底層的支持。
對(duì)于jsbridge的實(shí)現(xiàn),各個(gè)公司有不同的實(shí)現(xiàn)方案,主要還是要看Native的開發(fā)怎么來定義bridge的方案,以我自己開發(fā)的經(jīng)驗(yàn)來看,有這么幾個(gè)點(diǎn)需要解決:
用戶驗(yàn)證問題,怎么來確認(rèn)Native的用戶身份,是用原來Web網(wǎng)站常用的session還是使用Native比較常用的token,但是不管用哪種,都需要Native幫忙來注入標(biāo)識(shí)。
ajax請(qǐng)求問題,如果使用一個(gè)URL的形式來嵌入,可以獨(dú)自發(fā)送ajax請(qǐng)求沒有任何問題,但是如果使用Html文本,直接Webview渲染的方式,就類似PC上,文件夾打開html文件一樣,ajax請(qǐng)求發(fā)送不出去,需要Native幫忙做bridge來調(diào)用。
溝通成本問題,因?yàn)楹驮瓉鞵C端相比,多了參與方,所以排查問題就更加麻煩了,這個(gè)還是主要看整體App的架構(gòu)怎么設(shè)計(jì)了。
性能問題,怎么說呢,不是每個(gè)App的開發(fā)人員都很厲害,那么如果Native的代碼有問題,Webview出錯(cuò)的概率就會(huì)變高,比如Css3的動(dòng)畫,容易引起崩潰,內(nèi)存占有率過高等等。
所以,對(duì)于這個(gè)方向的web前端的開發(fā)人員來說,如果會(huì)Native開發(fā)的經(jīng)驗(yàn)更加如魚得水。
活動(dòng)頁面 -- 比如來自宇宙的邀請(qǐng)函這類活動(dòng)頁面,主要就是設(shè)計(jì)和動(dòng)畫上效果炫酷,吸人眼球,震撼人心,基本出來一個(gè)精彩的活動(dòng)頁面,都能在朋友圈掀起一波浪潮。技術(shù)上以WebGL為主,一般使用Three.js,渲染canvas來展示各種動(dòng)畫和視覺效果。
這個(gè)方向的前端會(huì)更加關(guān)注,瀏覽器的兼容,性能,設(shè)計(jì)出來的效果,動(dòng)畫的流暢度,體驗(yàn)等等。主要兼容的微信的瀏覽器,因?yàn)橐谂笥讶頎I銷,總體來說,會(huì)偏設(shè)計(jì)以及動(dòng)畫些。
游戲等其他 -- H5小游戲,數(shù)據(jù)可視化當(dāng)時(shí)風(fēng)靡國內(nèi)的各種H5小游戲,特別多,基本是用CreateJs來制作的多,接觸不多,不多評(píng)論。
HTML游戲引擎
隨著大數(shù)據(jù)時(shí)代的來臨,前端領(lǐng)域各種數(shù)據(jù)可視化的庫也是層出不窮,D3,Highcharts,國內(nèi)的Echarts都是這個(gè)領(lǐng)域的佼佼者。
轉(zhuǎn)領(lǐng)域其實(shí)還有一個(gè)領(lǐng)域,就是通過Nodejs,學(xué)習(xí)服務(wù)端的各種知識(shí),切換到服務(wù)端領(lǐng)域去。
未來上面的我所提到的細(xì)分(或者說是割裂--比較有噱頭),自我感覺,已經(jīng)在慢慢展現(xiàn)出一些趨勢(shì)了,不知道大家有木有感覺到,比如徐飛就會(huì)更加擅長(zhǎng)TB這種重型業(yè)務(wù)流派,而手淘的人就會(huì)比較關(guān)注Hybrid的流派,甚至自己來搞Weex這種JS-Native開發(fā)的框架。當(dāng)然大部分開發(fā)人員還是可能都會(huì)做,沒有那么明顯的傾向,但隨著公司的業(yè)務(wù)的轉(zhuǎn)變和公司重點(diǎn)資源的傾斜,很多開發(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ù)庫原理。能夠吃透每一個(gè)領(lǐng)域的知識(shí)點(diǎn),都是一個(gè)巨大的挑戰(zhàn)。
利于交流,各種不同分支的人,可以拿出自己特長(zhǎng)的技術(shù)來相互交流,取長(zhǎng)補(bǔ)短,構(gòu)建更加系統(tǒng)的知識(shí)網(wǎng)絡(luò)。
其實(shí)要說的很多,感覺說不完,比如@寇云 提議加上Backbone,Ember,AngularJS,Vue,Alavon,Knockout,React 框架不是一個(gè)時(shí)間段出現(xiàn),先驅(qū)者的思想被后生框架集成發(fā)展,以及框架生態(tài)這部分內(nèi)容。但感覺并不算我這篇文章的重點(diǎn),就沒有加上。還有目前Native和Web前端之間的競(jìng)爭(zhēng)與合作。
原文和討論地址:知乎原文
(以上只是個(gè)人見解,如有雷同,只能說英雄所見略同)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/115412.html
摘要:主要兼容的微信的瀏覽器,因?yàn)橐谂笥讶頎I銷,總體來說,會(huì)偏設(shè)計(jì)以及動(dòng)畫些。 有一天,我們組內(nèi)的一個(gè)小伙伴突然問我,你知道有一個(gè)叫重構(gòu)工程師的崗位?這是干什么的?重構(gòu)工程師 這個(gè)問題引發(fā)了我對(duì)前端領(lǐng)域發(fā)展的思考,所以我來梳理下前端領(lǐng)域的發(fā)展過程,順便小小的預(yù)測(cè)下2017年的趨勢(shì)。不想看回憶的,可以直接跳到后面看展望。 神說,要有光,就有了光 自1991年蒂姆·伯納斯-李公開提及HTML...
摘要:主要兼容的微信的瀏覽器,因?yàn)橐谂笥讶頎I銷,總體來說,會(huì)偏設(shè)計(jì)以及動(dòng)畫些。 有一天,我們組內(nèi)的一個(gè)小伙伴突然問我,你知道有一個(gè)叫重構(gòu)工程師的崗位?這是干什么的?重構(gòu)工程師 這個(gè)問題引發(fā)了我對(duì)前端領(lǐng)域發(fā)展的思考,所以我來梳理下前端領(lǐng)域的發(fā)展過程,順便小小的預(yù)測(cè)下2017年的趨勢(shì)。不想看回憶的,可以直接跳到后面看展望。 神說,要有光,就有了光 自1991年蒂姆·伯納斯-李公開提及HTML...
摘要:隨著業(yè)務(wù)的爆發(fā),團(tuán)隊(duì)人數(shù)迅速增長(zhǎng)起來,團(tuán)隊(duì)名也從前端開發(fā)部改名成體驗(yàn)技術(shù)部,意在體現(xiàn)前端工程師的核心競(jìng)爭(zhēng)力用技術(shù)解決產(chǎn)品體驗(yàn)問題。前后端分離的研發(fā)模式在社區(qū)流行起來,體驗(yàn)技術(shù)部最先實(shí)踐的是基于的應(yīng)用層方案。2008 年對(duì)中國人是復(fù)雜的一年,冰災(zāi),大地震,奧運(yùn)會(huì)接踵而至。對(duì)玉伯來說也一樣,趕在奧運(yùn)會(huì)排查臨時(shí)人口之前,玉伯從北京中科院軟件所離開,憑著自己幾年來在程序開發(fā)上的經(jīng)歷和對(duì)新興前端行業(yè)的...
摘要:本文以管理者的視角,與大家分享下我自年月入職小菜后,與前端同學(xué)一起是如何規(guī)劃團(tuán)隊(duì)的技術(shù)棧的,這條技術(shù)棧上的技能點(diǎn)又是如何在不同童鞋不同業(yè)務(wù)中生長(zhǎng)出來的。 Scott 近兩年無論是面試還是線下線上的技術(shù)分享,遇到許許多多前端同學(xué),由于團(tuán)隊(duì)原因,個(gè)人原因,職業(yè)成長(zhǎng),技術(shù)方向,甚至家庭等等原因,在理想國與現(xiàn)實(shí)之間,在放棄與堅(jiān)守之間,搖擺不停,心酸硬抗,大家可以找我聊聊南聊聊北,對(duì)工程師的宿命...
閱讀 4183·2022-09-16 13:49
閱讀 1410·2021-11-22 15:12
閱讀 1532·2021-09-09 09:33
閱讀 1049·2019-08-30 13:15
閱讀 1736·2019-08-29 15:30
閱讀 668·2019-08-27 10:52
閱讀 2651·2019-08-26 17:41
閱讀 1906·2019-08-26 12:11