好像幾乎每隔一週就有一個新的 JavaScript 庫在網路社群引起風暴！網路社群越來越充滿活力，多樣化且在多個方面快速發展。調查每一個主流的 JavaScript 框架和庫是不可能完成的壯舉。因此，我將分享一些前端開發中最著名和最有影響力的框架和庫。讓我們看看最佳的 JavaScript web 前端框架，庫和工具以及何時使用它們。
另外：
- 如果我沒有包括你最喜歡的 JavaScript 框架，請不要生氣。
- 永遠記住持續更新你的框架和庫。最新版本的框架和庫通常具有最好的跨瀏覽器和跨裝置的支援。你可以使用工具， 比如scanner 來幫助判斷一箇舊版本是否相容這一大批裝置。
好了，讓我們進入列表！
AngularJS
Angular 是流行的企業級框架，許多開發人員都在使用它來構建和維護複雜的 web 應用程式。Angular 的人氣非常高，包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企業都在使用它。Angular 是一個由谷歌支援的開源框架。Angular 自稱是 HTML 的一個擴充套件，用來構建複雜的 web 應用程式。另外如果你熟悉 TypeScript， Angular 2就是用它構建的。
這個作者的更多文章
Angular 是一個 MVC 型別的框架。它提供了模型和檢視之間的雙向資料繫結。該資料繫結允許每當資料改變時，兩邊自動更新。 它使你能夠構建可複用的檢視元件。它提供了一個服務框架，使得後端-前端服務通訊更容易。最後，它只是普通的 JavaScript。
何時使用 AngularJS？當你正在構建一個複雜的 web 前端應用程式，同時需要一個模組化的框架來處理一切時。
GitHub: https://github.com/angular/angular.js
當前版本： 1.4.7/1.2.29
網址： angularjs.org
React
React 是今年最受歡迎的 JavaScript 專案！每個人都似乎在談論 ReactJS。去年我參加的每一個會議，至少有好幾個議題是關於 React 和同家族的其他庫（Flux, Redux）的。React 是開源軟體，主要由 Facebook 開發，其他大型科技公司也有貢獻。React 自稱是一個用於構建使用者介面的 JavaScript 庫。
React 主要是 MVC 中的 V。它的重點完全在 MVC 的 V 部分，忽視應用程式架構的其餘部分。它提供了一個元件層，使得建立 UI 元素，組合元素變得更容易。它使用虛擬 DOM，因此優化了渲染，且允許從 node.js 渲染 React。此外，它實現了單向響應的資料流，因此比其他框架更容易理解和使用。
作為 MVC 中的 V，很多專案將 React 結合 Angular 或 Ember 這樣的框架使用。
何時使用 React？當你想要一個強大的檢視層，但不需要在應用程式的其餘部分使用一個複雜的框架，或者你在 Angular、Backbone 或 Ember 應用上需要一個檢視層時。當你正試圖建立一個同構 web 框架時。
GitHub: https://github.com/facebook/react
當前版本: v0.14.0
網址: Facebook.github.io/react/
Backbone
Backbone 是一個著名的簡易框架，適合單個 JavaScript 檔案。Backbone 已經存在有一段時間了，是以 CoffeeScript 和 Underscore 聞名的 Jeremy Ashkenas 所開發的。對於一些為小型 web 應用尋找一個結構簡單的框架，而不想引入如 Angular 或 Ember 這些大型框架的團隊，Backbone 特別受歡迎。
Backbone 提供一個完整的 MVC 框架以及路由。模型允許鍵-值繫結和資料變化的事件處理。模型（和集合）可以連線到RESTful API。檢視具有宣告式事件處理，路由在處理 URL 和狀態管理上做的很出色。它包含你建立一個單頁面應用程式所需要的一切，且沒有提供太多東西，沒有不必要的複雜度。
何時使用 Backbone？Backbone 是我建立簡單 web 應用程式的首選框架。
GitHub: https://github.com/jashkenas/backbone/
當前版本: 1.2.3
網站: backbonejs.org
Ember
Ember 是一個固執的 web 應用程式框架，關注程式設計師的工作效率。Ember 比較流行，它的核心團隊包括像曾是 Ruby on Rails 和 jQuery 核心團隊成員的 Yehuda Katz 的聰明人。Ember 自稱是“一個用於建立大規模 web 應用程式的框架”，且不浪費你的時間。它很固執，為你提供了很多選擇。
Ember 也是一個 MVC 框架。它包括一個模板和檢視引擎，當資料變化時自動更新，就像 Angular，Backbone 和 React 一樣。它包含 web元件 的思想，讓你使用自己標籤擴充套件 HTML（就像 Angular 一樣）。它也有一個知道如何與你的 RESTful API 一起工作的路由和模型引擎。
何時使用 Ember？當你只需要一個可以執行的框架時。當你因為預算緊張或工期很短而不需要靈活性時，請使用 Ember。
GitHub: https://github.com/emberjs/ember.js
當前版本: 2.1.0
網站: emberjs.com
jQuery
jQuery 是一個無需介紹的庫。它憑一己之力讓跨瀏覽器網站使用成為現實，同時把 web 帶到今天的位置。Web 標準已經被大多數瀏覽器製造商採納並真正地尊重，jQuery 是其中的原因之一。jQuery 基金會的使命是“通過開源軟體的開發和支援，以及開發社群的合作，改善開放的 web，讓每一個人都可以訪問它。”
jQuery 是世界上最常用的 JavaScript 庫，所有應用程式都應該使用它，除非你不在意程式設計師的工作效率。它使得 DOM 遍歷、事件處理、動畫、AJAX 在所有瀏覽器上變得更簡單、更容易。
何時使用 jQuery？一直使用，除非你想使用一個像 Zepto 的輕量級版本。
GitHub: https://github.com/jquery/jquery
當前版本: v1.11.3 or v2.1.4
網站: jquery.com
Underscore &lodash
有時候 JavaScript 內建的功能導致程式設計師的效率並不高。總是缺少一個工具函式或一個可以簡化程式碼的函式。Underscore（和 lodash）是一個 JavaScript 庫，它提供了一整套工具函式，不需要對內建 JavaScript 物件打補丁。兩個庫均提供超過 100 個功能助手和其他專用功能，包括 map，filter，invoke，reduce，template, throttle, bind, extend, pick, clone 等更多的函式。
何時使用 Underscore？當你需要一個單獨的 JavaScript 檔案，來立即提升程式設計師的工作效率時。
Underscore GitHub: https://github.com/jashkenas/underscore
Underscore 當前版本: 1.8.3
Underscore 網站: underscorejs.org
何時使用 lodash？當你需要模組化和效能稍強版本的 Underscore，同時更容易地支援 AMD 和社群外掛時。
LodashGitHub: https://github.com/lodash/lodash
Lodash 當前版本: v3.10.1
Lodash 網站: lodash.com
D3.js
資料視覺化和圖表是一種常見的 web 應用程式需求。D3.js 是任何資料操作和視覺化的事實標準。它是 GitHub上最受歡迎的專案之一，被數以百計的組織使用。大量的圖形，圖表和視覺化庫在 D3 上構建。
D3 允許你操作任何來源的資料文件，轉換成 DOM 或/和 SVG 或/和 CSS。D3 關注現代 web 標準，確保你不受任何專有格式的約束，比如 Flash 和 Silverlight。
何時使用 D3.js？在你需要任何形式的視覺化的時候。
GitHub: https://github.com/mbostock/d3
當前版本: 3.5.6
網站: d3js.org
Babylon.js
想要構建完全符合現代 web 標準且跨瀏覽器的視訊遊戲嗎？看看 Babylon.js，它是基於 WebGL 和 JavaScript 的 3d 遊戲引擎。你可以建立令人難以置信的包含物理、音訊和粒子系統等等的高質量遊戲。
何時使用 Babylon.js？無論何時，只要你想做一個視訊遊戲或任何型別的複雜三維場景，都能用上。
GitHub: https://github.com/BabylonJS/Babylon.js
當前版本: 2.2
網站: babylonjs.com
Three.js
想要構建一個 3D 視覺化場景，但不需要一個完整的遊戲引擎？three.js 提供了一個輕量級的 3d 庫，允許渲染 3d 為 HTML5 畫布、SVG 和 WebGL。它是相當簡單的庫，在 three.js 的展示裡有數百個優美的例子。
何時使用Three.js？當你需要一個能輸出為 Canvas 的簡單的 3D 視覺化場景時。
GitHub: https://github.com/mrdoob/three.js/
當前版本: r73
網站: threejs.org
Mocha& Chai
JavaScript 在很長一段時間內是非常煩人的。測試任何程式碼通常都被認為是惱人的，但它卻是每個開發人員都應該做的事情。每個開發人員似乎總是蔑視和忽略它，而不測試他們的程式碼。這個惱人的東西有一個解決辦法，那就是 Mocha 和 Chai。兩個庫的名字都來自美味的熱飲料，它們都能幫你測試程式碼，但方式不同。
Mocha 是一個 JavaScript 測試框架，使得你在 node 模組和瀏覽器 app 中測試非同步程式碼變得更容易。Mocha 測試可以串聯執行，可以為正確的測試用例新增異常跟蹤的能力。
Chai 是一個行為驅動開發/測試驅動開發的斷言庫，可以搭配 Mocha 使用。它可以把你需要測試的東西用可讀的風格簡單地表達出來。
何時使用 Mocha & Chai？總是！請測試你的程式碼，讓世界變得更美好。
Mocha 當前版本: 2.3.3
Mocha 網址: mochajs.org
Chai GitHub: https://github.com/chaijs/chai
Chai 當前版本: v3.4.1
Chai 網址: chaijs.com
Karma
既然已經把 Mocha 和 Chai 包含在這個列表中了，如果不包含用來執行這些測試或設定持續整合測試的測試執行器，那將是不完整的。Karma 是一款旨在幫助你在不同的瀏覽器上自動執行測試的工具。它可以幫助你在所有瀏覽器上執行 Mocha 和 Chai 測試。
不是每個瀏覽器都執行在所有平臺，但幸運的是可以使用一些免費工具來測試其他瀏覽器，看看 Browser Screenshots。如果你正在 OS X 上執行程式碼，想測試 Edge 或 IE，可以 免費 使用這個工具。
何時使用 Karma？當你的應用程式有一個完善的測試套件，並希望確保測試在所有瀏覽器上通過時。
GitHub: https://github.com/karma-runner/karma
當前版本: v0.13
網址: karma-runner.github.io
PhantomJS
執行完整的瀏覽器來測試你的程式碼比較耗記憶體和 CPU。PhantomJS 允許你執行一個輕量的 WebKit —— Safari 和Chrome（現在是 Blink）後臺的渲染引擎。它允許你通過 JavaScript API 執行測試，捕捉截圖，監控網路和自動瀏覽頁面。
何時使用 PhantomJS ?當你需要進行更多的測試，操作頁面和監視網路請求時。
GitHub: https://github.com/ariya/phantomjs
當前版本: v2.0
網址: phantomjs.org
Grunt & Gulp
為生產環境構建網站，通常涉及到提高效能的任務，比如 JavaScript 和 CSS 的壓縮， CoffeeScript/TypeScript 的編譯，單元測試，語法檢查。也許你已經有一個為網站釋出到生產環境的工具鏈，如果沒有，你可以使用任務執行器，比如 Grunt 或Gulp。兩者都有大量關於網站的任何轉換的外掛，為釋出到生產環境做好準備。
何時使用 Grunt？當你喜歡寫配置檔案同時不介意你的任務執行器生成中間檔案時。
Grunt GitHub: https://github.com/gruntjs/grunt
Grunt 當前版本: v0.4.5
Grunt 網址: gruntjs.com
何時使用 Gulp？當你喜歡在配置上寫程式碼和利用 node.js 的流功能來加快任務執行時。
Gulp GitHub: https://github.com/gulpjs/gulp
Gulp 當前版本: v3.9.0
Gulp 網址: gulpjs.com
Babel
JavaScript 語言正在迅速發展。ECMAScript2015 於去年夏天釋出，它的許多新特性在最新的瀏覽器上實現了。如果你想看看 ECMAScript 2015 的相容性，你可以看看來自 @kangax 的這個 表。你會注意到，最新版本的 Edge，Firefox 和 Chrome 已經幾乎完全相容了。
我們並不是生活在一個完美的世界。作為開發人員，我們需要繼續支援舊的瀏覽器，它們沒有最新最好的 JavaScript 特性。我們要推進 web 和改善我們的程式碼庫。Babel 是一個 JavaScript 編譯器，用於把最新的 JavaScript 標準編譯成可在 IE9 等老瀏覽器上執行的相容ES5的 JavaScript。它有一些外掛，使得 React 開發更容易，甚至可以使用一些不屬於該規範的特性（例如ES7）。
何時使用 Babel？當你想使用新的 JavaScript 語言特性，同時還要支援老版本瀏覽器時。
GitHub: https://github.com/babel/babel
當前版本: 6.1.2
網址: babeljs.io
更多 Web 開發實踐
本文來自微軟技術佈道師 Web 開發系列，裡面有實用的 JavaScript 學習，開源專案和互操作性的最佳實踐（包括與 微軟Edge 瀏覽器和新的 EdgeHTML渲染引擎）。
我們鼓勵你跨瀏覽器和裝置進行測試，包括微軟的Edge——Windows 10的預設瀏覽器——在 dev.modern.IE 上有免費工具:
- 掃描你的網站中過時的庫，佈局問題和可訪問性
- 下載 Mac, Linux 和 Windows 下的免費虛擬機器
- 跨瀏覽器檢查 Web 平臺狀態，包括微軟 Edge 的路線圖
- 在你的裝置上遠端測試微軟 Edge
來自我們工程師和佈道者的更深入學習：
- GitHub 上的編碼實驗室： 跨瀏覽器測試和最佳實踐
- 2015 微軟 Edge Web 峰會 (來自我們的工程師團隊和JS社群)
- 很棒，我可以在 Mac 和 Linux 上測試 Edge 和 IE 了！ (來自Rey Bango)
- 推進 JavaScript 同時不破壞 Web (來自Christian Heilmann)
- Edge 渲染引擎讓 Web 工作 (來自Jacob Rossi)
- 基於 WebGL 的 3D 渲染 (來自David Catuhe)
- 託管 web app 和 web 平臺的革新 (來自Kevin Hill和Kiril Seksenov)
我們的社群開源專案：
- vorlon.JS (跨裝置遠端 JavaScript 測試)
- manifoldJS (部署跨平臺託管 web app)
- babylonJS (讓 3D 圖形制作更簡單)
更多免費工具和後端web開發內容：