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

接下來(lái)，本文作者經(jīng)過(guò)近來(lái)***發(fā)布的 JavaScript 調(diào)查報(bào)告，深度分析前端結(jié)構(gòu)的盛行趨勢(shì)及未來(lái)發(fā)展，希望給許多前端開(kāi)發(fā)者指明一些方向。

[[215968]]

Stateofjs 2017 前端結(jié)構(gòu)調(diào)查成果

與日常一樣，運(yùn)用 JavaScript 編程言語(yǔ)的核心區(qū)別是由前端結(jié)構(gòu)引起的。從調(diào)查報(bào)告來(lái)看，比較 Angular 和 Vue， React 是 2017 年的主要 JavaScript 結(jié)構(gòu)，尤其是 React Native 以史無(wú)前例的速度提高自己。同時(shí)由于 Angular 的盛行度下滑，Vue 也遭到越來(lái)越多的歡迎。

相較于 Stateofjs 發(fā)布的 2016 年前端結(jié)構(gòu)調(diào)查成果：

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

可是，Vue.js 只會(huì)在 Web 前端中占有主導(dǎo)地位，而不會(huì)控制一切的前端范疇。React 則能夠在一切的前端范疇中盛行。這是為什么呢？下面，我們將揭開(kāi)謎底。

React 控制前端范疇的要害因素

答案就在 Stateofjs.com 發(fā)布的 2017 年移動(dòng)和桌面運(yùn)用前端結(jié)構(gòu)的調(diào)查成果之中：

Synergy 是 React 能夠控制一切前端范疇的要害。

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ùn)用到移動(dòng)端。在這一點(diǎn)上，React 充沛展現(xiàn)了它比較 Cordova 和其他 Hybrid 技能的優(yōu)勢(shì)。

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

運(yùn)用 Java 和 Swift / Objective C 別離開(kāi)發(fā)不同渠道的 App 雖然沒(méi)錯(cuò)，可是從商業(yè)的角度來(lái)看，它的代價(jià)是很高的，此外，與 React Native Codepush 比較，想要經(jīng)過(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)志著前端范疇大多數(shù)的創(chuàng)新都發(fā)生在 React 圈，然后這些創(chuàng)新再在其他結(jié)構(gòu)中被采用和改進(jìn)。

Angular 的未來(lái)猜測(cè)

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

Angular 在這張圖中看起來(lái)很好，但我不并以為這預(yù)示著 Angular 作為一個(gè)結(jié)構(gòu)能夠取得長(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í)也解說(shuō)了 Stackoverflow 上有大量問(wèn)題的原因。

Vue.js 的缺點(diǎn)

Vue.js 現(xiàn)在即便還無(wú)法支持移動(dòng)運(yùn)用，但在 2017 年的其間一段時(shí)間，它經(jīng)過(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ě)在最終

經(jīng)過(guò)三大結(jié)構(gòu)的對(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)告中，我最感興趣的是百分比，即（曾經(jīng)運(yùn)用過(guò)、將再次運(yùn)用）/（曾經(jīng)運(yùn)用過(guò)、再次運(yùn)用+之前運(yùn)用過(guò)、不再運(yùn)用）。

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% 的滿意度

其間，特別有趣的是，許多結(jié)構(gòu)的滿意度比“沒(méi)有結(jié)構(gòu)”的高。當(dāng)然這主要?dú)w因于許多沒(méi)有運(yùn)用結(jié)構(gòu)的開(kāi)發(fā)者。曾遇到過(guò)一些以為前端結(jié)構(gòu)是無(wú)稽之談的開(kāi)發(fā)者（通常是后端開(kāi)發(fā)人員），他們更喜歡只寫(xiě)一堆 jQuery。別的，如果您在 Wordpress 網(wǎng)站上工作，那么結(jié)構(gòu)往往是沒(méi)有必要的。