Angular2與React，前端的未來志向何方？

作者：徐飛

去年年底，我回答過一個問題：

​​​2014 年末有哪些比較火的 Web 開發技術？ - 徐飛的回答​​​

轉眼間一年過去了，Angular 2釋出了beta版，React如日中天，隻有Polymer還是不溫不火。

這一年時間内，我也經常觀察前端界的各種趨勢，關注各種創新點，并且跟業内同行進行過一些探讨，最終結論是：這三個架構，代表着前端架構目前的三條路線，仍然是并行發展的，隻是在發展過程中互相吸收先進的思想。

哪三條路線呢：

1. 以Angular，Vue，Aurelia，Avalon為代表的MVVM路線
2. React以及相關周邊
3. 以Polymer，NovaJS等為代表的Web Components路線

這三條路線本質上都是前端元件化架構/庫，是以，元件化理念是它們的立身之本，雖然大家的實作方式有所不同，但很多理念都是共通的。具體差别在哪裡呢？

在這裡需要先提及三個名詞：

MVVM，Virtual DOM，Web Components

我提這三個詞的意思，并不是說它們就對應于剛才三條路線，人們往往會有誤解：比如認為MVVM是Angular等架構的專利；除了React，别的架構也就不能有Virtual DOM了。

其實不然。

MVVM架構們之是以被冠以MVVM的名号，因為他們都是非常側重于分層的，三層分得一般非常清楚。比如說我們看Vue，它的一個元件中，包含很明顯的三層。

但是在React的實踐中，如果應用的規模增大，資料的組合複雜度高，很可能到最後也搞成了類似VM和M的分層，在這個回答的評論下：

​​如何正确、客觀地評價 React？ - 鄧欣欣的回答​​

​​@墨磊​​ 提到的：

另，最近一些項目中，在 Flux 或者 類 Flux 的 Store => View 這一步，

因為一些曆史原因，依然不得不走向了這樣的過程 ModelStore => ViewModelStore => View，同樣可以視為 MVVM 吧。

是以，MVVM并非MVVM架構們特有，當基于React或者其他架構的項目變大的時候，仍然有可能作為一種實踐被用起來。

再來看Virtual DOM，目前React是有這個東西的，但MVVM架構的底層一樣可以搞起來。好幾個架構的底層都部分使用了這種理念，比如大家的track by，都可以把資料和DOM之間的關系索引起來，當一個數組的元素交換了，它們可以借助這些索引關系，不銷毀原有DOM樹，而是直接把資料交換了設定過去。

如果MVVM架構不是使用先生成DOM，再提取模闆配置這種方式，而是直接解析模闆生成AST，做這層更加容易，而且可以比較容易替換成其他渲染方式，比如在服務端，或者在移動端的Native代碼中渲染。

再看Web Components，主流的MVVM架構其實都在往這個方向靠攏，而React由于使用工程手段解決了Shadow DOM和Scoped CSS這樣的問題，是以對此并不太在意，而且由于它實作的特殊性，要相容Web Components反而比較難。

D2的時候我曾經跟

​​@賀師俊​​在這些方面有過交流，他認為MVVM架構們很可能最終跟Polymer合流，整個前端架構領域被React和MVVM流派平分，鹿死誰手尚未可知。

我覺得，目前的應用場景是足夠大的，每個流派都是可以活得下去的，無所謂東風壓倒西風還是反過來，雙方都能生存下去。到最後，當形成整體解決方案的時候，很可能兩派方案都是殊途同歸：

• 視圖層實作了Virtual DOM
• 宏觀上元件化，形成元件樹
• 微觀上MVVM，并且都應用類似Flux，Redux之類的資料層方案
• 程式設計模型吸收Immutable和Rx的
• 通信層應用Relay或者Meteor之類的方案

比較大的差別可能是對Web Components标準的應用程度，MVVM系可能都會使用它，并且相應地采用不同的CSS資源管理和建構方案。

去年年底的時候，有一件事情我沒有想到，那就是ES6的普及速度，有鑒于此，我認為，未來一兩年内，ES新版本會成為各路元件化開發方案的預設配置，并且得到廣大開發人員的接受，TypeScript也可能會随之大放異彩。

另外有一點我沒有考慮到的就是HTTP2，這個經過

​​@賀師俊​​指出之後，我覺得很有道理。我總結一下他的觀點：之前我們都會考慮代碼的合并打包等方案，但是當HTTP2普及之後，這方面很可能不是問題，人們會回歸一種隻專注于代碼本身，而不是着重考慮現有這些類型的優化方式，是以這可能會對各類工程管控優化方案有個颠覆。

目前能看到的大緻這些，一年後來看看。

順便回答你的問題，1-2年内，Angular 2應該不太會颠覆得動React，甚至要超越自身的1.x版本都比較困難，更詳細的見這裡：

​​如何評價 Angular 2 釋出 Beta 版本？ - 徐飛的回答​​