要論 2017年最主流的三個(gè) Web前端框架，應(yīng)莫過(guò)于 Angular、Vue和 React了。然而在實(shí)際應(yīng)用中，這三個(gè)框架卻不盡相同，對(duì)于規(guī)模不大的前端項(xiàng)目來(lái)說(shuō)，Vue因其極易上手會(huì)被列出***之位，Angular在快速開(kāi)發(fā)大型 Web項(xiàng)目上很受推崇，但仍存諸多缺陷，React正為 JavaScript應(yīng)用開(kāi)發(fā)者提供新的開(kāi)發(fā)方式。因此，面對(duì)各有千秋的開(kāi)發(fā)框架，作為一名開(kāi)發(fā)者該如何選擇?哪種框架更具有前景?

接下來(lái)，本文作者通過(guò)近日***發(fā)布的 JavaScript調(diào)查報(bào)告，分享其 15年的 Web開(kāi)發(fā)經(jīng)驗(yàn)，深度剖析前端框架的流行趨勢(shì)及未來(lái)發(fā)展，希望給諸多前端開(kāi)發(fā)者指明一些方向。

以下為譯文：

其實(shí)在一年前，我的團(tuán)隊(duì)在重新項(xiàng)目時(shí)，采用了 Vue.js而非 React，且當(dāng)時(shí)的我還做了一番預(yù)測(cè)：

按照目前的發(fā)展速度，我預(yù)測(cè) Vue將在 16-24個(gè)月內(nèi)成為主要的 JS框架，至少對(duì)于后端開(kāi)發(fā)人員和小團(tuán)隊(duì)的前端人員來(lái)說(shuō)是這樣。當(dāng)然，在 2017年，如果 React依然按照目前的速度不斷提升自己的話，那么它將仍然會(huì)在 2017年占據(jù)前端框架的主導(dǎo)地位。

——2016年 12月 10日

如今，從最近的一份來(lái)自 stateofjs.com網(wǎng)站、且超過(guò) 23,000名開(kāi)發(fā)者參與的關(guān)于 JavaScript的調(diào)查報(bào)告來(lái)看，事實(shí)的確如此。

Stateofjs 2017前端框架調(diào)查結(jié)果

與日常一樣，使用 JavaScript編程語(yǔ)言的核心區(qū)別是由前端框架引起的。從調(diào)查報(bào)告來(lái)看，相比 Angular和 Vue， React是 2017年的主要 JavaScript框架，尤其是 React Native以***的速度提升自己。同時(shí)因?yàn)? Angular的流行度下滑，Vue也受到越來(lái)越多的歡迎。

相較于 Stateofjs發(fā)布的 2016年前端框架調(diào)查結(jié)果：

基于以上，通過(guò)將 2017與 2016年的統(tǒng)計(jì)結(jié)果進(jìn)行對(duì)比可以發(fā)現(xiàn)，在過(guò)去一年里 Vue.js是大家最想學(xué)習(xí)的框架，因此我個(gè)人預(yù)測(cè)明年將是 Vue.js成功的一年，當(dāng)然 React增長(zhǎng)很穩(wěn)定，而 Angular將無(wú)法跟上這兩個(gè)對(duì)手的腳步。2016年時(shí)，Vue.js被稱為“另一個(gè) JS框架”，當(dāng)時(shí)它是一匹十足的黑馬，而 React占據(jù)主導(dǎo)地位，Angular則是開(kāi)發(fā)者的第二選擇。

但是，Vue.js只會(huì)在 Web前端中占據(jù)主導(dǎo)地位，而不會(huì)統(tǒng)治所有的前端領(lǐng)域。React則可以在所有的前端領(lǐng)域中盛行。這是為什么呢?下面，我們將揭開(kāi)謎底。

React統(tǒng)治前端領(lǐng)域的關(guān)鍵因素

答案就在 Stateofjs.com發(fā)布的 2017年移動(dòng)和桌面應(yīng)用前端框架的調(diào)查結(jié)果之中：

Synergy是 React能夠統(tǒng)治所有前端領(lǐng)域的關(guān)鍵。

React Native

Vue.js未能提供替代 React Native的可行性方案(Weex和 Quasar太年輕，存在碎片化并且很脆弱)，伴隨著 React Native和 React.js的爆發(fā)式增長(zhǎng)，如果你掌握了 Web前端的 React和 Redux ，你將獲得極大優(yōu)勢(shì)：只要你想，便可在幾周內(nèi)熟練地將 React Native應(yīng)用到移動(dòng)端。在這一點(diǎn)上，React充分展示了它相比 Cordova和其他 Hybrid技術(shù)的優(yōu)勢(shì)。

如今最火熱的前端需求在于移動(dòng)端，而不再是 Web 。React Native非常成功，同時(shí)它也會(huì)帶動(dòng) React.js的發(fā)展。

我們團(tuán)隊(duì)計(jì)劃在 2018年***季度發(fā)布自己 iOS和 Android App的一個(gè)大版本，將公司的網(wǎng)站從零開(kāi)始改寫(xiě)(研發(fā)代號(hào) Q3，采用 Vue.js和 Yii2)，而新的 App基于 React Native開(kāi)發(fā)。

其實(shí)，我們?cè)谝粌赡昵熬涂紤]使用 React Native來(lái)改寫(xiě)我們的 App ，但當(dāng)時(shí)我們團(tuán)隊(duì)的 Swift開(kāi)發(fā)者表示拒絕，如今看來(lái)這個(gè)決定是正確的，因?yàn)橛袝r(shí)候我們需要等待技術(shù)成熟，這非常重要。如今我們結(jié)束了用 Swift開(kāi)發(fā) iOS應(yīng)用 ，用 Java開(kāi)發(fā) Android程序的局面，避免了不同操作系統(tǒng) App使用不同開(kāi)發(fā)語(yǔ)言的痛苦。

現(xiàn)在我們的 Swift開(kāi)發(fā)人員正在使用 React Native編寫(xiě) JS代碼，并承認(rèn) React確實(shí)好用，他認(rèn)為現(xiàn)在是轉(zhuǎn)到新的技術(shù)棧的好時(shí)機(jī)，因?yàn)樵诤芏嗲闆r下 React Native的優(yōu)點(diǎn)都大于缺點(diǎn)。

我們使用 Vue.js編寫(xiě) Web的前端人員幾周就掌握了 React Native ，但是我認(rèn)為這個(gè)轉(zhuǎn)變是值得的，如果我們 Web也使用 React.js，那么我們的技術(shù)棧將會(huì)變得更簡(jiǎn)單。我并不后悔使用 Vue.js開(kāi)發(fā) Web，具體原因在我以前的一篇文章中解釋過(guò)(http://pixeljets.com/blog/why-we-chose-vuejs-over-react/)，實(shí)際上我對(duì) Vue.js在 Web領(lǐng)域的預(yù)測(cè)已經(jīng)成為現(xiàn)實(shí)，但我仍然期望在 2018年里中小型團(tuán)隊(duì)繼續(xù)選擇用 React來(lái)進(jìn)行 Web和移動(dòng)端的開(kāi)發(fā)，因?yàn)? synergy的存在我相信這樣的選擇是明智的。

使用 Java和 Swift / Objective C分別開(kāi)發(fā)不同平臺(tái)的 App雖然沒(méi)錯(cuò)，但是從商業(yè)的角度來(lái)看，它的代價(jià)是很高的，此外，與 React Native Codepush相比，想要通過(guò) App Store的審核也不是那么容易的。

GraphQL

GraphQL是 Facebook的另一個(gè)重量級(jí)產(chǎn)品，它讓 React生態(tài)系統(tǒng)如虎添翼。

雖然它當(dāng)前還不成熟，比較復(fù)雜并且有缺點(diǎn)，但是看起來(lái) GraphQL在未來(lái)將有很大可能替代 REST。

GraphQL標(biāo)志著前端領(lǐng)域大多數(shù)的創(chuàng)新都發(fā)生在 React圈，然后這些創(chuàng)新再在其他框架中被采用和改進(jìn)。

Angular的未來(lái)預(yù)測(cè)

Stackoverflow展示了一個(gè)有關(guān)前端開(kāi)發(fā)人員問(wèn)題的有趣圖表：

Angular在這張圖中看起來(lái)很好，但我不并認(rèn)為這預(yù)示著 Angular作為一個(gè)框架能夠取得長(zhǎng)期成功。在我看來(lái)，對(duì)于那些維護(hù)傳統(tǒng)的 Angular 1代碼的開(kāi)發(fā)者來(lái)說(shuō)，從 Angular 1遷移到 Angular2 +是一個(gè)明智的選擇，但是當(dāng)他試圖遷移并且看到 Angular的新老版本之間的巨大區(qū)別時(shí)，這會(huì)產(chǎn)生挫敗感，并且這個(gè)事實(shí)也解釋了 Stackoverflow上有大量問(wèn)題的原因。

Vue.js的缺陷

Vue.js目前即便還無(wú)法支持移動(dòng)應(yīng)用，但在 2017年的其中一段時(shí)間，它通過(guò)獲得開(kāi)發(fā)者的支持而贏得了與 React的競(jìng)爭(zhēng)。

WordPress正在考慮用 React來(lái)構(gòu)建其前端布局，并且很可能將 Vue.js加入 WordPress生態(tài)系統(tǒng)，就像 Laravel一樣。不過(guò) Facebook很快就調(diào)整了 React許可證，并將這個(gè)想法扼殺了。

寫(xiě)在***

通過(guò)三大框架的對(duì)比，我們更傾向于 React，在此也推薦其他的團(tuán)隊(duì)根據(jù)自身的情況選擇 Vue.js或 React?；诖?，開(kāi)發(fā)者也在 Hacker News (https://news.ycombinator.com/item?id=15999688)上發(fā)表了自己的看法：

@antoriv：

在這次的調(diào)查報(bào)告中，我最感興趣的是百分比，即(以前使用過(guò)、將再次使用)/(以前使用過(guò)、再次使用+之前使用過(guò)、不再使用)。

2016年：

• React – 91%的滿意度
• Vue – 91%的滿意度
• Angular 2 – 65%的滿意度
• No framework – 65%的滿意度
• Ember – 50%的滿意度
• Angular – 40%的滿意度
• Backbone – 31%的滿意度

2017年：

• React – 93%的滿意度
• Vue – 91%的滿意度
• Angular 2 – 66%的滿意度
• No framework – 65%的滿意度
• Aurelia – 56% 的滿意度
• Polymer – 53% 的滿意度
• Ember – 41% 的滿意度
• Angular – 33% 的滿意度
• Backbone – 23% 的滿意度

其中，特別有趣的是，許多框架的滿意度比“沒(méi)有框架”的高。當(dāng)然這主要?dú)w因于很多沒(méi)有使用框架的開(kāi)發(fā)者。我就曾遇到過(guò)一些認(rèn)為前端框架是無(wú)稽之談的開(kāi)發(fā)者(通常是后端開(kāi)發(fā)人員)，他們更喜歡只寫(xiě)一堆 jQuery。另外，如果您在 WordPress網(wǎng)站上工作，那么框架往往是沒(méi)有必要的。

個(gè)人而言，我已經(jīng)習(xí)慣在這些框架(Backbone，Angular 1，Ember和 React)中編寫(xiě)代碼，我更喜歡React。

@philliphaydon：

對(duì)于 Angular 2，我想我永遠(yuǎn)不會(huì)再使用。因?yàn)樗鼛?lái)的問(wèn)題遠(yuǎn)遠(yuǎn)多于解決的問(wèn)題。它需要豐富的知識(shí)經(jīng)驗(yàn)來(lái)構(gòu)建大型應(yīng)用程序，否則總是會(huì)遇到性能問(wèn)題。