2016 年後 Web開發趨勢是什麼

　近二年的進展

　　前端發展日新月異, 甚至有一句戲言: "每六星期重寫一個前端框架", 行業是像火箭一樣, 但我們前端工程師該何去何從呢?

　　我們來談談這個問題.

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

• 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 前端框架.