2016年後web開發趨勢是什麼?

2016 年後 Web開發趨勢是什麼

來源：yafeilee.me 發佈時間：2016-05-06 閱讀次數：1378

3

 

　近二年的進展

　　前端發展突飛猛進, 甚至有一句戲言: "每六星期重寫一個前端框架", 行業是像火箭同樣, 但咱們前端工程師該何去何從呢?

　　咱們來談談這個問題.

　　先來看看最流行的幾項技術棧:

• AngularJS

  獨創的雙向數據綁定, 以及內置的模塊注入, 以及組件化的支持, 種種優點, 使得它迅速發展起來. 在 2014-2015 年, 有調查顯示, 在使用了前端框架的項目, 有 50% 以上採用了 AngularJS. 但到底值不值咱們繼續學習, 咱們再接下來看.

  項目地址: https://angularjs.org/

• EmberJS

  受 Rails 全棧框架的啓發, EmberJS 逐步發展成前端領域的另外一個 "Rails", 成爲另外一個獨特的選擇, 理論上, 你選擇了 EmberJS, 就選擇了一個完整穩定的生態, 不用再折騰的輪子. EmberJS 不只全面支持模塊化, MVC, 也實現了相似 AngularJS 的雙向綁定( 固然原理不一樣 ), 甚至還作到了內置的打包和發佈應用功能. 總而言之, 它是一個十分全面的前端框架. 事實上, 若是說 AngularJS 是當前短暫的前端史的一個高峯, 它就是另外一個高峯. 但最近, 人氣有必定的降低, 緣由何在, 咱們再分解.

  項目地址: http://emberjs.com/

• ReactJS

  ReactJS 自發布之始, 就人氣很高, 它是第一個採用虛擬節點( virtual dom )技術的框架, 經過這個技術點, 它首創性地整合了函數性編程的理念, 採用單向數據流來設計 dom 渲染與比對, 使得它輕量和靈活, 事實上, 它自己只專一於如何渲染 UI, 也不與 AngularJS 和 EmberJS 有衝突. 換言之, 你能夠將它整合到其餘框架中.

  隨着 ReactNative 和 Redux 方案的出現, ReactJS 從新回到前端的浪尖, 由於其簡潔優雅的實現和對 Native APP 的衝擊, 又一次成爲新的弄潮兒.

  但之後會怎麼樣, 誰也不知道, 但我也會再給一些解讀.

  項目地址: https://facebook.github.io/react/

　　流行不必定是發展最快, 咱們再來看看近二年發展最快的幾項前端技術棧:

• ReactJS

  上文已經提到, React 因爲自己的簡潔性和對組件化專一的實現, 一直沒有被新的 ES6 標準和前端思潮落下, 它幾乎不受 ES6 的影響, 以及前沿性的支持 native app 開發( 經過 ReactNative ), 因此一直髮展趨勢良好.

  而 AngularJS 則不同, 因爲 ES6 的發佈, 使得它的依賴注入特性成爲雞肋, 以及 AngularJS 初版對組件化支持的蹩腳實現( 能支持是一回事, 好用是另外一回事 ), 而組件化則學習成本太高, 過於複雜, 因此 AngularJS 決定推翻設計從新開發第二版, 而第二版過於激進的採用 Typescript, 徹底不兼容的初版的設計, 以及各類魔法的應用, 使得它離前端越走越遠.

• VueJS

  VueJS 是近二年的新秀, 它起步之初, 只是一個簡化版的相似於 AngularJS 雙向綁定的實現的研究( 固然原理並不一樣 ). 但其理念與 ReactJS 相近, 只是專一於實現數據綁定, 模塊化與組件化, 因此足夠的簡單靈活.

  隨着生態的快速發展, VueJS 正好接了 AngularJS 初版的班, 又改良了 AngularJS 的錯誤設計( 過後來看, 依賴注入與組件化兩部分是比較失敗的設計 ), 總體發展迅速, 逐步成爲後起之秀.

  項目地址: http://vuejs.org/

• MeteorJS

  MeteorJS 本不適合與上述幾個前端框架比較, 由於它實際是一個全棧框架, 更像 Rails 這種角色, 但因爲它是純 Javascript 的方案, 因此仍是放在這裏.

  若是說上述前端框架都是解決前端工程化的產物, 那 MeteorJS 是一個顛覆思惟的 web 開發框架, 它將Javascript 同構技術應用到極端, 再整合 websocket 進行實時數據通知與熱代碼更新, 不一樣於先後端分離的理念, 它在開發者角度徹底沒有先後端的概念, API 既在前端又在後端, 再加它全生態的支持( 移動 app 支持, 應用發佈), 也是一個全新的視角, 因爲它發展速度極快, 因此列在這裏.

  項目地址: https://www.meteor.com/

　　各大框架都在迅速發展中, 它們有幾個共性的發展方向:

• ES6 支持

  每一次 Javascript 的新標準發佈, 都是各大框架更新的好機會, 因此 ES6 是確定獲得各大框架的良好支持, 建議你們必定要學好.

• web 組件化

  毋庸置疑, 組件化是現代前端工程化中極爲重要的特性, 甚至 google 還專門出了 Polymer 這個只作組件化實現的框架. 因此每個夠格的前端框架都很是重度支持它. 同時, 組件化也將做爲 w3c 標準予於定義, 因此前端框架仍將不留餘力地改進與標準的兼容.

• Server-side Render

  服務端渲染技術是 2016 年纔開始火的概念, 它與傳統的後端渲染不一樣, 爲了解決前端框架第一次加載慢的問題, 以及 SEO 問題, 而提出的解決方案. 以前有 prerender, 如今各大框架都在嘗試在內部集成並支持它. 但我我的以爲, 帶來的問題遠比解決的問題更多, 好比要求咱們開發的時候有更多的限制.

• App Render

  如今有一種大前端的概念, 能夠理解爲 web 前端對 App 開發的支持, 包括 Ionic ( 基於 AngularJS ), React Native( 基於 React 理念 ), Meteor 都是針對 App 開發的痛點而生.

　　分析了衆多目前最流行的前端框架, 你們可能愈來愈胡塗了:

　　到底誰纔是最值得咱們去投入的技術呢?

　　接下來, 咱們去掉一堆術語, 來從前端的定義本質來看它的發展.

　近二年本質的演進是什麼

　　前端就是面向用戶這一端的技術, 然而, 隨着時代的發展:

• 用戶體驗要求愈來愈高( 加載速度快, 響應快, 無閃爍 )
• 前端需求愈來愈多
• 前端代碼愈來愈龐大
• 移動端快速發展對 h5 前端的需求

　　而 jQuery, ProtoypeJS 等只解決了 Javascript 工具庫的問題, 但工程化需求無好的解決方案.

　　前端工程化迫在眉捷. 並且有如下要求:

1. 最好是純 Javascript 方案
2. 支持模塊化
3. 業務代碼與框架代碼分離
4. 可測性

　　因而, 產生了幾種不一樣的演進方案.

　　後端渲染技術:

　　ajax -> pjax -> sjr ( 須要服務端提供支持 )

　　後端渲染技術很快就發展到頂了. 但技術理解仍是足夠簡單的. 咱們仍是回到前端框架上.

　　NodeJS, AMD(CMD), ES6 的出現, 使得組織起一個前端框架成爲現實. 因而乎, 百團大戰, 出現了上面衆多框架混戰的畫面.

　　不管是 AngularJS, EmberJS, ReactJS, VueJS 都是圍繞着這幾點進行的不一樣的嘗試.

　　但結果如何, 咱們站在一個更高的高度從新思考 web 開發.

　真正的用戶市場須要什麼

　　對用戶

• 更快的響應速度
• 更好的體驗

　　對開發者

• 更快的開發速度
• 更好的可維護性

　　再次思考, 咱們要不要先後端分離? 哪些前端框架更知足咱們以上的條件?

　　做爲 Rails 工程師, 我也一直在思考一個問題: Rails 是否在前端上走上了絕路?

　　對於不熟悉 Rails 的朋友, 我仍是簡單回顧下 Rails 的前端是什麼:

• jQuery
• UJS
• Assets pipeline
• SJR( 服務端 JS 生成技術 )
• Turoblinks( 一種極小成本實現的單頁效果的技術 )

　　相比 php, java, python 等語言下的傳統 web 框架來講, Rails 的前端技術仍是很是豐富的.

　　關於各個框架我列了一個分數比較, 10 分爲滿分, 每一個列會加在一塊兒算成一個總分.

　　從上表能夠看出:

　　Rails 這類的全棧框架特色有

　　優點:

• 開發效率極高
• 經過 Turoblinks 技術, 體驗也不錯.
• 也能支持混合應用開發

　　缺點:

• 前端代碼可維護差

　　ReactJS 學習成本較低, 經過 webpack 與 npm 的配合, 可以達到不錯的可維護性, 但開發成本偏高, 這也是組件化的缺點之一.

　　而 EmberJS 學習門檻太高, 並且 EmberJS 發展也比較迅速, 不利於學習掌握, 相對而言, 總分也不會過高.

　　MeteorJS 也被我列在這裏, 總分最低, 因此仍然不推薦學習, 除非你的應用屬於實時應用.

　　咱們再從新思考組件化, 組件化優點在於接口清晰, 可維護性高, 但開發成本是比較高的, 前端屬於工程而不是科學, 因此, 我以爲組件化是對的, 但不要過於極端把全部的 dom 都組件化.

　　並且, 組件化也對現有的基礎技術棧進行了破壞.

　　經過以上的分析, 咱們基本上了解了現有技術棧的狀況. 那咱們該繼續學什麼? 這纔是本文的重點.

　　全部的一切, 都是圍繞着組件化, 可維護, 高效開發, 移動支持而生, 而它們的核心都是仍是最基礎的東西:

• Javascript ( ES6, NodeJS )
• HTML
• CSS
• API

　　一句話, 仍是應該先把基礎打好.

　基礎技術棧

　　應當好好掌握的內容:

• Javascript 語言( 直接看 ES6 相關的 )
• NodeJS 生態( npm 與相關的包 )
• webpack ( 瞭解如何打包, 發佈 )
• HTML ( 尤爲是 form 標籤, 以及 HTML5 的內容 )
• CSS ( 學習盒模型, 最新的 flex 佈局, 以及 CSS3 )
• API ( 掌握如何開發 API )

　　你必須是前端工程師, 同時又是後端工程師, 才能真正摸清晰當下時代的發展, 成爲弄潮兒!

　預測將來

　　首先, 我在 2014 年分析 web 開發的文中提到的 gulp, grunt 都已經成爲過去式了. Bower 也已經有點不合事宜了.

　　目前前端構建建議使用 webpack 和 npm 足夠, 不須要更多的工具鏈, 應該越簡單, 越順手!

　　列幾個關心的問題嘗試預測一下

• NodeJS 作後臺開發怎麼樣 ?

  NodeJS 已是前端框架的一部分, 是極爲成功的, 但對於 NodeJS 作後臺開發說實在的, 它可以佔必定的市場, 但將會很是少( 低於 5% ). 因此作 php 或 java 開發的朋友倒不用擔憂, 但若是隻是搬磚寫簡單 API 的話, 就有危險了.

• Rails 還行不行 ?

  Rails 已經到了必定的頂點, 不可能再突破性增加, 但仍然是目前最爲順手的 web 開發框架, 它的前端解決方案目前仍有不錯的體驗與開發效率, 但可維護性比較差, 若是是個人話, 我會帶領團隊採用混合式的開發, 但如今不會是引入 AngularJS 而會是 VueJS.

  但 Rails 已經到達它的極限點了, 而衆多前端框架纔剛剛開始.( 雖然拿 Rails 與前端框架比較不夠合適 )

• AngularJS 仍是 ReactJS ?

  很簡單, 建議直接上手 VueJS.

  AnguarJS 初版是個好的框架, 但 Angular2 並非, 因此還不如直接學習 VueJS.

  ReactJS 是個不錯的框架, 但毫不是終點. VueJS 與 ReactJS 在實現上各有利弊. 二者能夠擇其一學之.

• MeteorJS 值不值得學習 ?

  個人建議是不值得, 由於它一開始就走在錯誤的道路上, 註定後面無路可走.

• 前端會取代 Native APP 開發麼?

  必定會的, 將來 3 年後, 至少有 70% 左右的 APP 會用前端開發方案, 好比使用相似於 Ionic 或 Meteor 這樣的框架.

　從新思考 web 開發

　　真正能長遠的前端技術必定是簡單的, 專一的, 好比 jQuery. 但目前幾個框架都或多或少存在着問題.

　　ReactJS 不是表面那麼簡單, 而 AngularJS 更加複雜.

　　是否有更簡單有效的解決它們的問題, 則可以成爲下一代 web 前端框架.

QQ羣：  WEB開發者官方總羣(415796102) 驗證消息：Admin10000