用於 Web 前端開發的 9 個 JavaScript 開源框架

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

不過，在開始之前，了解一些 JavaScript 開發者談論框架時常用的術語，將對後續的內容大有裨益。

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

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


ReactJS


ReactJS 是由 Facebook 研發的，它雖然在 Angular 之後發布，但明顯是當今 JavaScript 框架的領導者。React 引入了一個虛擬 DOM 的概念，這是一個抽象副本，開發者能在框架內僅使用他們想要的 ReactJS 功能，而無需重寫整個項目。此外，React 項目活躍的開源社區無疑成為增長背後的主力軍。下面是一些 React 的主要優勢：

• 合理的學習曲線 —— React 開發者可以輕鬆地創建 React 組件，而不需要重寫整個 JavaScript 的代碼。在 ReactJS 的 首頁 查看它的優點以及它如何使編程更容易。
• 高度優化的性能 —— React 的虛擬 DOM 的實現和其他功能提升了應用程序的渲染性能。請查看 ReactJS 的關於如何對其性能進行基準測試，並對應用性能進行衡量的相關 描述。
• 優秀的支持工具 —— Redux、Thunk 和 Reselect 是構建良好、可調式代碼的最佳工具。
• 單向數據綁定 —— 模型使用 Reach 流，只從所有者流向子模塊，這使得在代碼中追蹤因果關係更加簡單。請在 ReactJS 的 數據綁定頁 閱讀更多相關資料。

誰在使用 ReactJS？Facebook 自從發明它，就大量使用 React 構建公司首頁，據說 Instagram 完全基於 ReactJS 庫。你可能會驚訝地發現，其他知名公司如 紐約時報、Netflix 和 可汗學院 也在他們的技術棧中使用了 ReactJS。

更令人驚訝的是 ReactJS 開發者的工作機會，正如在下面 Stackoverflow 所做的研究中看到的，嘿，你可以從事開源項目並獲得報酬。這很酷！


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

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


Angular


就開發者數量來說，也許 React 是現在最領先的 JavaScript 框架，但是 Angular 緊隨其後。事實上，開源開發者和初創公司更樂於選擇 React，而較大的公司往往更喜歡 Angular（下面列出了一些例子）。主要原因是，雖然 Angular 可能更複雜，但它的統一性和一致性適用於大型項目。例如，在我整個職業生涯中一直研究 Angular 和 React，我觀察到大公司通常認為 Angular 嚴格的結構是一種優勢。下面是 Angular 的另外一些關鍵優勢：

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

像 YouTube、Netflix、IBM 和 Walmart 等知名網站，都已在其應用程序中採用了 Angular。我通過自學使用 Angular 來開始學習前端 JavaScript 開發。我參與了許多涉及 Angular 的個人和專業項目，但那是當時被稱為 AngularJS 的 Angular 1.x。當 Google 決定將版本升級到 2.0 時，他們對框架進行了徹底的改造，然後變成了 Angular。新的 Angular 是對之前的 AngularJS 的徹底改造，這一舉動帶來了一部分新開發者也驅逐了一部分原有的開發者。

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


VueJS


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


這裡有一些 VueJS 的主要優點：

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

VueJS 的 GitHub 顯示該項目有 3,099 次提交和 239 位貢獻者。


MeteorJS


MeteorJS 是一個自由開源的 同構框架，這意味著它和 NodeJS 一樣，同時運行客戶端和伺服器的 JavaScript。Meteor 能夠和任何其他流行的前端框架一起使用，如 Angular、React、Vue、Svelte 等。

Meteor 被高通、馬自達和宜家等多家公司以及如 Dispatch 和 Rocket.Chat 等多個應用程序使用。您可以其在官方網站上查看更多案例。


Meteor 的一些主要功能包括：

• 在線數據 —— 伺服器發送數據而不是 HTML，並由客戶端渲染。在線數據主要是指 Meteor 在頁面載入時通過一個 WebSocket 連接伺服器，然後通過該鏈接傳輸所需要的數據。
• 用 JavaScript 開發一切 —— 客戶端、應用服務、網頁和移動界面都可以用 JavaScript 設計。
• 支持大多數主流框架 —— Angular、React 和 Vue 都可以與 Meteor 結合。因此，你仍然可以使用最喜歡的框架如 React 或 Angular，這並不防礙 Meteor 為你提供一些優秀的功能。

截止到目前，Meteor 的 GitHub 顯示 22，804 次提交和 428 位貢獻者。這對於開源項目來說相當多了。


EmberJS


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

Ember 雖然和我們討論過的其他框架有類似的好處，但這裡有些獨特的區別：

• 約定優於配置 —— Ember 將命名約定標準化並自動生成結果代碼。這種方法學習曲線有些陡峭，但可以確保程序員遵循最佳實踐。
• 成熟的模板機制 —— Ember 依賴於直接文本操作，直接構建 HTML 文檔，而並不關心 DOM。

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


KnockoutJS


KnockoutJS 是一個獨立開源的 JavaScript 框架，採用 模板-視圖-視圖模型（MVVM） 模式與模板。儘管與 Angular、React 或 Vue 相比，聽說過這個框架的人可能比較少，這個項目在開發者社區仍然相當活躍，並且有以下功能：

• 聲明式綁定 —— Knockout 的聲明式綁定系統提供了一種簡潔而強大的方式來將數據鏈接到 UI。綁定簡單的數據屬性或使用單向綁定很簡單。請在 KnockoutJS 的官方文檔頁面 閱讀更多相關信息。
• 自動 UI 刷新。
• 依賴跟蹤模板。

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


BackboneJS


BackboneJS 是一個具有 RESTful JSON 介面，基於 模型-視圖-主持人 Model-View-Presenter （MVP）設計範式的輕量級 JavaScript 框架。

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

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


Svelte


Svelte 是一個開源的 JavaScript 框架，它生成操作 DOM 的代碼，而不是包含框架引用。在構建時而非運行時將應用程序轉換為 JavaScript 的過程，在某些情況下可能會帶來輕微的性能提升。

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


AureliaJS


最後我們介紹一下 Aurelia。Aurelia 是一個前端 JavaScript 框架，是一個現代 JavaScript 模塊的集合。Aurelia 有以下有趣的功能：

• 快速渲染 —— Aurelia 宣稱比當今其他任何框架的渲染速度都快。
• 單向數據流 —— Aurelia 使用一個基於觀察的綁定系統，將數據從模型推送到視圖。
• 使用原生 JavaScript 架構 —— 可以用原生 JavaScript 構建網站的所有組件。

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


這就是我在查看 JavaScript 框架世界時發現的新內容。我錯過了其他有趣的框架嗎？歡迎在評論區分享你的想法。

via: https://opensource.com/article/20/5/open-source-javascript-frameworks

作者：Bryant Son 選題：lujun9972 譯者：stevending1st 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive