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

有一天，咱們組內的一個小夥伴忽然問我，你知道有一個叫重構工程師的崗位？這是幹什麼的？重構工程師

這個問題引起了我對前端領域發展的思考，因此我來梳理下前端領域的發展過程，順便小小的預測下2017年的趨勢。不想看回憶的，能夠直接跳到後面看展望。

神說，要有光，就有了光

自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 框架不是一個時間段出現，先驅者的思想被後生框架集成發展，以及框架生態這部份內容。但感受並不算我這篇文章的重點，就沒有加上。還有目前Native和Web前端之間的競爭與合做。

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

（以上只是我的看法，若有雷同，只能說英雄所見略同）