割裂的前端工程師--- 2017年前端生態窺探

有一天,我們組內的一個小伙伴突然問我,你知道有一個叫重構工程師的崗位?這是干什么的?重構工程師

這個問題引發了我對前端領域發展的思考,所以我來梳理下前端領域的發展過程,順便小小的預測下2017年的趨勢。不想看回憶的,可以直接跳到后面看展望。

神說,要有光,就有了光

香港彩票透码 www.kptln.icu 自1991年蒂姆·伯納斯-李公開提及HTML描述,到1999年W3C發布HTML4期間,寫網頁是為了更好的交流彼此的想法,為了能夠維護自己的網頁,各路大神也是八仙過海各顯神通,甚至發明了PHP(這個世界最好的語言)。這個時期并沒有一個所謂的前端開發崗位的,大家都是軟件工程師。當然這個時代也是神人輩出的時代,太多現在互聯網或者說整個IT行業的概念和雛形在這個時期形成。Google網站正式啟用,個人PC開始慢慢普及。

神稱空氣為天

O'Reilly Media、Battelle和MediaLive在2004年10月引導了第一個Web 2.0大會,web2.0時代開啟,Blog,Wiki,RSS各種個人網站開始登陸大家的視野,同時,豆瓣,天涯這些符合2.0時代的產物開始在國內大行其道。我們有了第一波注重Web前端的軟件開發師,同一時刻,米國誕生了FaceBook具有跨時代的產物,05年,校內網出現,前端們開始活躍起來了,06年8月,Jquery的第一個版本發布。

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

之后的幾年間,前端基本都是圍繞著各種類庫如MooTools,Underscore,Prototype,Dojo,jQuery ,YUI開發頁面。各大類庫也是相互吸收優點,不斷完善自身,但是本質沒有太多變化。

與此同時,在我們看不到的背后,瀏覽器第二次大戰打響,V8引擎開始大放異彩,Web標準也在推動ECMAScript5.0進化著。Node發布了,意味著我們前端的領域擴大了,伸手到服務端了。

智能手機開始普及,移動端大浪潮流勢不可擋,web前端們開始為了移動端開發各種類庫了Sencha Touch,Zepto.js,JQ Mobile,HTML5概念火熱了起來,各種網頁小游戲層出不窮,和Flash的爭斗也到了水火不容的地步,Twitter 也推出了 Bootstrap這個引領風騷的CSS工具包。

隨著系統硬件的提升,V8引擎性能的提升,整個網頁的性能極大提高,大家開始紛紛開發出復雜的Web頁面來,這種需求開始催生了前端們對開發的工程化思考,首當其沖的就是??榛釉氐奈侍?,AMD、CMD、UMD 登上舞臺,起衍生的產物Seajs,requirejs開始劃分地盤。

這個時代還是服務端渲染為王的時代,包括很多??榛蛘咦榧系鈉唇傭際竊詵穸送瓿傻?,但同時也開啟jquery + requirejs + template開發復雜頁面的模式。(這個時間段,出現了重構工程師和JS工程師的劃分。)

管理晝夜,分別明暗

12年之后,隨著W3C規范和標準進一步推動,大家對Web頁面復雜度進一步的加劇,人們不在滿足于Jquery面條時的開發,出現了許多用于簡化客戶端開發的框架,諸如Backbone,Ember,AngularJS,Vue,Avalon,Knockout,React等等各種各樣的MV*框架。

這是一個群雄割據的時代,如此多的框架涌出,每個開發者根據自己的喜好,業務的需求選擇著不同框架來完成目標。

Node.js開始崛起,Express,Koa框架開始使用到各種生產項目中,PM2的服務管理,為企業解決了監控和穩定問題,同時,阿里開始探索Node.js中間層的開發道路,連續發聲,提供前后端分離解決方案。

神說,水要多多滋生有生命的物

微信這個社交龐然大物已然崛起,微信公眾號的玩法,讓前端崗位開始火熱了起來,也開始帶來了Web和Native的爭端。

15年,Facebook 在 React.js Conf 2015 大會上推出了基于 JavaScript 的開源框架 React Native,一舉將React推上了一個新的高度,learn once ,write everywhere。這一年是屬于React的年份。

同時,構建工具也在不停的迭代,Grunt的輝煌已去,Gulp并未在王座上久呆,Webpack的風暴就席卷而來。

16年,Webpack已經成為了前端打包構建的主流,Vue強勢崛起,Ng2完成發布。前端在主流開發上基本形成了三國時代(React,Vue,Ng)。與此同時,移動端也形成了以混合開發為主的方式,Native嵌入Webview頁面。

因為網絡和硬件性能不斷提升,前端從原來的cs模式到現在更像 bs,但也依然有 cs 的分發優勢。

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

上面回憶了一下前端大概的發展歷程,下面來說說自己對17年前端發展的一些預測。

隨著業務的不同,每個團隊在前端技術點開始有所分化:

  1. 重型SPA頁面

  2. Hybrid方式的Web頁面

  3. 活動頁面

  4. 游戲等其他

重型SPA頁面 -- Teambition

重型的SPA頁面,業務功能極其復雜,使用Vue,React,Angular這種MVVM的框架后,在開發過程中,組件必然越來越多,父子組件之間的通信,子組件之間的通信頻率都會大大增加。如何管理這些組件之間的數據流動就會成為這類WebApp的最大難點。

從頁面的加載來說,SPA可以依靠首次加載的Loading動畫,來掩蓋一些頁面加載性能的問題(TB我這里加載一般在5S左右),很多懶加載和延遲加載之類的也是不需要做。因為相關的數據后面都需要用到,也就不存在是否會使用的問題。

從最近Rx.js的star數,我們也能看出來,大家也越來越關心數據管理的問題,本地的數據管理只是一個方面,還會涉及到多個用戶數據同步的問題,也就是服務端和客戶端數據同步問題,如和及時正確的同步數據。

及時正確同步數據這個概念指的是: 多人操作一個任務時,兩個人都在修改一個任務時,容易造成數據覆蓋。A剛修改完,B過幾秒也修改了,因為同步不及時,B不知道A修改了,結果B新修改的數據覆蓋了A的修改。所以想要減少類似的錯誤,就必須要能保證及時正確的同步數據。

既然數據和請求如此多,那么就肯定要利用好本地的緩存和各種存儲了,LocalStorage,SessionStorage的都會使用上。

如此多的業務和組件,必然對內存上會造成壓力,如何管理好內存也是一門學問,比較典型的是組件的銷毀,該如何合理的創建和銷毀組件,已經組件內部data數據的組織都會很考驗代碼人員。

相關的可以看@徐飛的文章

Hybrid方式的Web頁面 -- 現在大多數App的主流

Hybrid方式的開發目前還是移動端的主流,這種web頁面的特點是業務并不復雜,大多是展示信息為主,再加上一些操作按鈕,需要解決的問題,在于很多時候要和Native來通信,而且Android的webview有各種各樣的國產廠商問題也是很難以解決,這方面微信做的不錯,直接搞了一個自己的瀏覽器來統一底層的支持。

對于jsbridge的實現,各個公司有不同的實現方案,主要還是要看Native的開發怎么來定義bridge的方案,以我自己開發的經驗來看,有這么幾個點需要解決:

用戶驗證問題,怎么來確認Native的用戶身份,是用原來Web網站常用的session還是使用Native比較常用的token,但是不管用哪種,都需要Native幫忙來注入標識。

ajax請求問題,如果使用一個URL的形式來嵌入,可以獨自發送ajax請求沒有任何問題,但是如果使用Html文本,直接Webview渲染的方式,就類似PC上,文件夾打開html文件一樣,ajax請求發送不出去,需要Native幫忙做bridge來調用。

溝通成本問題,因為和原來PC端相比,多了參與方,所以排查問題就更加麻煩了,這個還是主要看整體App的架構怎么設計了。

性能問題,怎么說呢,不是每個App的開發人員都很厲害,那么如果Native的代碼有問題,Webview出錯的概率就會變高,比如Css3的動畫,容易引起崩潰,內存占有率過高等等。

所以,對于這個方向的web前端的開發人員來說,如果會Native開發的經驗更加如魚得水。

活動頁面 -- 比如來自宇宙的邀請函

這類活動頁面,主要就是設計和動畫上效果炫酷,吸人眼球,震撼人心,基本出來一個精彩的活動頁面,都能在朋友圈掀起一波浪潮。技術上以WebGL為主,一般使用Three.js,渲染canvas來展示各種動畫和視覺效果。

這個方向的前端會更加關注,瀏覽器的兼容,性能,設計出來的效果,動畫的流暢度,體驗等等。主要兼容的微信的瀏覽器,因為要在朋友圈來營銷,總體來說,會偏設計以及動畫些。

游戲等其他 -- H5小游戲,數據可視化

當時風靡國內的各種H5小游戲,特別多,基本是用CreateJs來制作的多,接觸不多,不多評論。

HTML游戲引擎

隨著大數據時代的來臨,前端領域各種數據可視化的庫也是層出不窮,D3,Highcharts,國內的Echarts都是這個領域的佼佼者。

轉領域

其實還有一個領域,就是通過Nodejs,學習服務端的各種知識,切換到服務端領域去。

未來

上面的我所提到的細分(或者說是割裂--比較有噱頭),自我感覺,已經在慢慢展現出一些趨勢了,不知道大家有木有感覺到,比如徐飛就會更加擅長TB這種重型業務流派,而手淘的人就會比較關注Hybrid的流派,甚至自己來搞Weex這種JS-Native開發的框架。當然大部分開發人員還是可能都會做,沒有那么明顯的傾向,但隨著公司的業務的轉變和公司重點資源的傾斜,很多開發人員還是會慢慢有所區分。

個人認為這種細分其實對我們前端更加有利的,

  1. 前端業務重量化、場景多樣化,表現出前端整個領域發展比較迅速,各方面都有參與到,一直跟隨著時代發展而發展。

  2. 有各種細分的領域,大家可以做到一專多精,不同細分領域的知識點,都需要認真的學習和研究,比如前端對數據的組織趨于集中化和范式化(Redux等)要求前端同學要懂基本的數據庫原理。能夠吃透每一個領域的知識點,都是一個巨大的挑戰。

  3. 利于交流,各種不同分支的人,可以拿出自己特長的技術來相互交流,取長補短,構建更加系統的知識網絡。

其實要說的很多,感覺說不完,比如@寇云 提議加上Backbone,Ember,AngularJS,Vue,Alavon,Knockout,React 框架不是一個時間段出現,先驅者的思想被后生框架集成發展,以及框架生態這部分內容。但感覺并不算我這篇文章的重點,就沒有加上?;褂心殼癗ative和Web前端之間的競爭與合作。

這個問題引發了我對前端領域發展的思考,所以我來梳理下前端領域的發展過程,順便小小的預測下2017年的趨勢。不想看回憶的,可以直接跳到后面看展望。


作者:于秋
來源:知乎


上一篇: 10個常見的HTML5 面試問題及答案

下一篇: 怎么學JavaScript?

分享到: 更多
极速赛车购买技巧 广东时时11选五注册 欢乐生肖开奖官网 鱼丸游戏下载安卓 mg线上娱乐app 拉菲时时彩平台 欢乐生肖开奖结果走势图 快彩北京pk10app pk10技巧稳赚买法 腾讯分分稳赚投注 pk10走势图软件下载 福彩3D怎么买能稳赚不赔 幸运飞艇必中计划软件手机 pk10最牛稳赚8码计划 时时彩定位胆稳赚技巧和经验 幸运飞艇计划软件下载手机版