[[413833]]

根據(jù) JavaScript 框架的優(yōu)點(diǎn)和主要特點(diǎn)對許多 JavaScript 框架進(jìn)行細(xì)分。

大約十年前，JavaScript 社區(qū)開始見證一場 JavaScript 框架的激戰(zhàn)。在本文中，我將介紹其中最著名的一些框架。值得注意的是，這些都是開源的 JavaScript 項(xiàng)目，這意味著你可以在 開源許可證 下自由地使用它們，甚至為它們的源代碼和社區(qū)做出貢獻(xiàn)。

不過，在開始之前，了解一些 JavaScript 開發(fā)者談?wù)摽蚣軙r(shí)常用的術(shù)語，將對后續(xù)的內(nèi)容大有裨益。 

我們已經(jīng)清楚了常用的術(shù)語，下面我們來探索一下開源的 JavaScript 框架有哪些。

為了說明情況，下面是每個(gè)框架的 NPM 包下載量的公開數(shù)據(jù)，感謝 npm trends。

Framework downloads graph

ReactJS

React page

ReactJS 是由 Facebook 研發(fā)的，它雖然在 Angular 之后發(fā)布，但明顯是當(dāng)今 JavaScript 框架的領(lǐng)導(dǎo)者。React 引入了一個(gè)虛擬 DOM 的概念，這是一個(gè)抽象副本，開發(fā)者能在框架內(nèi)僅使用他們想要的 ReactJS 功能，而無需重寫整個(gè)項(xiàng)目。此外，React 項(xiàng)目活躍的開源社區(qū)無疑成為增長背后的主力軍。下面是一些 React 的主要優(yōu)勢：

• 合理的學(xué)習(xí)曲線 —— React 開發(fā)者可以輕松地創(chuàng)建 React 組件，而不需要重寫整個(gè) JavaScript 的代碼。在 ReactJS 的 首頁 查看它的優(yōu)點(diǎn)以及它如何使編程更容易。
• 高度優(yōu)化的性能 —— React 的虛擬 DOM 的實(shí)現(xiàn)和其他功能提升了應(yīng)用程序的渲染性能。請查看 ReactJS 的關(guān)于如何對其性能進(jìn)行基準(zhǔn)測試，并對應(yīng)用性能進(jìn)行衡量的相關(guān) 描述。
• 優(yōu)秀的支持工具 —— Redux、Thunk 和 Reselect 是構(gòu)建良好、可調(diào)式代碼的最佳工具。
• 單向數(shù)據(jù)綁定 —— 模型使用 Reach 流，只從所有者流向子模塊，這使得在代碼中追蹤因果關(guān)系更加簡單。請?jiān)?ReactJS 的 數(shù)據(jù)綁定頁 閱讀更多相關(guān)資料。

誰在使用 ReactJS？Facebook 自從發(fā)明它，就大量使用 React 構(gòu)建公司首頁，據(jù)說 Instagram 完全基于 ReactJS 庫。你可能會(huì)驚訝地發(fā)現(xiàn)，其他知名公司如 紐約時(shí)報(bào)、Netflix 和 可汗學(xué)院 也在他們的技術(shù)棧中使用了 ReactJS。

更令人驚訝的是 ReactJS 開發(fā)者的工作機(jī)會(huì)，正如在下面 Stackoverflow 所做的研究中看到的，嘿，你可以從事開源項(xiàng)目并獲得報(bào)酬。這很酷！

Stackoverflow 的研究顯示了對 ReactJS 開發(fā)者的巨大需求——來源：2017 年開發(fā)者招聘趨勢——Stackoverflow 博客

ReactJS 的 GitHub 目前顯示超過 13,000 次提交和 1,377 位貢獻(xiàn)者。它是一個(gè)在 MIT 許可證下的開源項(xiàng)目。

React GitHub page

Angular

Angular homepage

就開發(fā)者數(shù)量來說，也許 React 是現(xiàn)在最領(lǐng)先的 JavaScript 框架，但是 Angular 緊隨其后。事實(shí)上，開源開發(fā)者和初創(chuàng)公司更樂于選擇 React，而較大的公司往往更喜歡 Angular（下面列出了一些例子）。主要原因是，雖然 Angular 可能更復(fù)雜，但它的統(tǒng)一性和一致性適用于大型項(xiàng)目。例如，在我整個(gè)職業(yè)生涯中一直研究 Angular 和 React，我觀察到大公司通常認(rèn)為 Angular 嚴(yán)格的結(jié)構(gòu)是一種優(yōu)勢。下面是 Angular 的另外一些關(guān)鍵優(yōu)勢：

• 精心設(shè)計(jì)的命令行工具 —— Angular 有一個(gè)優(yōu)秀的命令行工具（CLI），可以輕松起步和使用 Angular 進(jìn)行開發(fā)。ReactJS 提供命令行工具和其他工具，同時(shí) Angular 有廣泛的支持和出色的文檔，你可以參見 這個(gè)頁面。
• 單向數(shù)據(jù)綁定 —— 和 React 類似，單向數(shù)據(jù)綁定模型使框架受更少的不必要的副作用的影響。
• 更好的 TypeScript 支持 —— Angular 與 TypeScript 有很好的一致性，它其實(shí)是 JavaScript 強(qiáng)制類型的拓展。它還可以轉(zhuǎn)譯為 JavaScript，強(qiáng)制類型是減少錯(cuò)誤代碼的絕佳選擇。

像 YouTube、Netflix、IBM 和 Walmart 等知名網(wǎng)站，都已在其應(yīng)用程序中采用了 Angular。我通過自學(xué)使用 Angular 來開始學(xué)習(xí)前端 JavaScript 開發(fā)。我參與了許多涉及 Angular 的個(gè)人和專業(yè)項(xiàng)目，但那是當(dāng)時(shí)被稱為 AngularJS 的 Angular 1.x。當(dāng) Google 決定將版本升級到 2.0 時(shí)，他們對框架進(jìn)行了徹底的改造，然后變成了 Angular。新的 Angular 是對之前的 AngularJS 的徹底改造，這一舉動(dòng)帶來了一部分新開發(fā)者也驅(qū)逐了一部分原有的開發(fā)者。

截止到撰寫本文，Angular 的 GitHub 頁面顯示 17,781 次提交和 1,133 位貢獻(xiàn)者。它也是一個(gè)遵循 MIT 許可證的開源項(xiàng)目，因此你可以自由地在你的項(xiàng)目或貢獻(xiàn)中使用。

Angular GitHub page

VueJS

Vue JS page

VueJS 是一個(gè)非常有趣的框架。它是 JavaScript 框架領(lǐng)域的新來者，但是在過去幾年里它的受歡迎程度顯著增加。VueJS 由 尤雨溪 創(chuàng)建，他是曾參與過 Angular 項(xiàng)目的谷歌工程師。該框架現(xiàn)在變得如此受歡迎，以至于許多前端工程師更喜歡 VueJS 而不是其他 JavaScript 框架。下圖描述了該框架隨著時(shí)間的推移獲得關(guān)注的速度。

Vue JS popularity graph

這里有一些 VueJS 的主要優(yōu)點(diǎn)：

• 更容易地學(xué)習(xí)曲線 —— 與 Angular 或 React 相比，許多前端開發(fā)者都認(rèn)為 VueJS 有更平滑的學(xué)習(xí)曲線。
• 小體積 —— 與 Angular 或 React 相比，VueJS 相對輕巧。在 官方文檔 中，它的大小據(jù)說只有約 30 KB；而 Angular 生成的項(xiàng)目超過 65 KB。
• 簡明的文檔 —— VueJS 有全面清晰的文檔。請自行查看它的 官方文檔。

VueJS 的 GitHub 顯示該項(xiàng)目有 3,099 次提交和 239 位貢獻(xiàn)者。

Vue JS GitHub page

MeteorJS

Meteor page

MeteorJS 是一個(gè)自由開源的 同構(gòu)框架，這意味著它和 NodeJS 一樣，同時(shí)運(yùn)行客戶端和服務(wù)器的 JavaScript。Meteor 能夠和任何其他流行的前端框架一起使用，如 Angular、React、Vue、Svelte 等。

Meteor 被高通、馬自達(dá)和宜家等多家公司以及如 Dispatch 和 Rocket.Chat 等多個(gè)應(yīng)用程序使用。您可以其在官方網(wǎng)站上查看更多案例。

Meteor case study

Meteor 的一些主要功能包括：

• 在線數(shù)據(jù) —— 服務(wù)器發(fā)送數(shù)據(jù)而不是 HTML，并由客戶端渲染。在線數(shù)據(jù)主要是指 Meteor 在頁面加載時(shí)通過一個(gè) WebSocket 連接服務(wù)器，然后通過該鏈接傳輸所需要的數(shù)據(jù)。
• 用 JavaScript 開發(fā)一切 —— 客戶端、應(yīng)用服務(wù)、網(wǎng)頁和移動(dòng)界面都可以用 JavaScript 設(shè)計(jì)。
• 支持大多數(shù)主流框架 —— Angular、React 和 Vue 都可以與 Meteor 結(jié)合。因此，你仍然可以使用最喜歡的框架如 React 或 Angular，這并不防礙 Meteor 為你提供一些優(yōu)秀的功能。

截止到目前，Meteor 的 GitHub 顯示 22，804 次提交和 428 位貢獻(xiàn)者。這對于開源項(xiàng)目來說相當(dāng)多了。

Meteor GitHub page

EmberJS

EmberJS page

EmberJS 是一個(gè)基于 模型-視圖-視圖模型（MVVM） 模式的開源 JavaScript 框架。如果你從來沒有聽說過 EmberJS，你肯定會(huì)驚訝于有多少公司在使用它。Apple Music、Square、Discourse、Groupon、LinkedIn、Twitch、Nordstorm 和 Chipotle 都將 EmberJS 作為公司的技術(shù)棧之一。你可以通過查詢 EmberJS 的官方頁面 來發(fā)掘所有使用 EmberJS 的應(yīng)用和客戶。

Ember 雖然和我們討論過的其他框架有類似的好處，但這里有些獨(dú)特的區(qū)別：

• 約定優(yōu)于配置 —— Ember 將命名約定標(biāo)準(zhǔn)化并自動(dòng)生成結(jié)果代碼。這種方法學(xué)習(xí)曲線有些陡峭，但可以確保程序員遵循最佳實(shí)踐。
• 成熟的模板機(jī)制 —— Ember 依賴于直接文本操作，直接構(gòu)建 HTML 文檔，而并不關(guān)心 DOM。

正如所期待的那樣，作為一個(gè)被許多應(yīng)用程序使用的框架，Ember 的 GitHub 頁面顯示該項(xiàng)目擁有 19,808 次提交和 785 位貢獻(xiàn)者。這是一個(gè)巨大的數(shù)字！

EmberJS GitHub page

KnockoutJS

KnockoutJS page

KnockoutJS 是一個(gè)獨(dú)立開源的 JavaScript 框架，采用 模板-視圖-視圖模型（MVVM） 模式與模板。盡管與 Angular、React 或 Vue 相比，聽說過這個(gè)框架的人可能比較少，這個(gè)項(xiàng)目在開發(fā)者社區(qū)仍然相當(dāng)活躍，并且有以下功能：

• 聲明式綁定 —— Knockout 的聲明式綁定系統(tǒng)提供了一種簡潔而強(qiáng)大的方式來將數(shù)據(jù)鏈接到 UI。綁定簡單的數(shù)據(jù)屬性或使用單向綁定很簡單。請?jiān)?nbsp;KnockoutJS 的官方文檔頁面 閱讀更多相關(guān)信息。
• 自動(dòng) UI 刷新。
• 依賴跟蹤模板。

Knockout 的 GitHub 頁面顯示約有 1,766 次提交和 81 位貢獻(xiàn)者。與其他框架相比，這些數(shù)據(jù)并不重要，但是該項(xiàng)目仍然在積極維護(hù)中。

Knockout GitHub page

BackboneJS

BackboneJS page

BackboneJS 是一個(gè)具有 RESTful JSON 接口，基于模型-視圖-主持人Model-View-Presenter（MVP）設(shè)計(jì)范式的輕量級 JavaScript 框架。

這個(gè)框架據(jù)說已經(jīng)被 Airbnb、Hulu、SoundCloud 和 Trello 使用。你可以在 Backbone 的頁面 找到上面所有這些案例來研究。

BackboneJS 的 GitHub 頁面顯示有 3,386 次提交和 289 位貢獻(xiàn)者。

BackboneJS GitHub page

Svelte

Svelte page

Svelte 是一個(gè)開源的 JavaScript 框架，它生成操作 DOM 的代碼，而不是包含框架引用。在構(gòu)建時(shí)而非運(yùn)行時(shí)將應(yīng)用程序轉(zhuǎn)換為 JavaScript 的過程，在某些情況下可能會(huì)帶來輕微的性能提升。

Svelte 的 GitHub 頁面顯示，截止到本文撰寫為止，該項(xiàng)目有 5,729 次提交和 296 位貢獻(xiàn)者。

Svelte GitHub page

AureliaJS

Aurelia page

最后我們介紹一下 Aurelia。Aurelia 是一個(gè)前端 JavaScript 框架，是一個(gè)現(xiàn)代 JavaScript 模塊的集合。Aurelia 有以下有趣的功能：

• 快速渲染 —— Aurelia 宣稱比當(dāng)今其他任何框架的渲染速度都快。
• 單向數(shù)據(jù)流 —— Aurelia 使用一個(gè)基于觀察的綁定系統(tǒng)，將數(shù)據(jù)從模型推送到視圖。
• 使用原生 JavaScript 架構(gòu) —— 可以用原生 JavaScript 構(gòu)建網(wǎng)站的所有組件。

Aurelia 的 GitHub 頁面顯示，截止到撰寫本文為止該項(xiàng)目有 788 次提交和 96 位貢獻(xiàn)者。

Aurelia GitHub page

這就是我在查看 JavaScript 框架世界時(shí)發(fā)現(xiàn)的新內(nèi)容。我錯(cuò)過了其他有趣的框架嗎？