幾乎每隔一個星期，就有一個新的 JavaScript 庫席捲網絡社區！Web 社區日益活躍、多樣，並在多個領域快速成長。想要研究每一個重要的 JavaScript 框架和庫，是個不可能完成的任務。接下來，我會分享一些前端開發的最著名和最有影響力的框架和庫。下面，就讓我們一起來看看，頂級的 JavaScript
web 前端框架、庫和工具及其使用。
請注意：
- 如果沒有包括你最喜歡的 JavaScript 的框架和庫，請多包涵。
- 請實時更新你的框架和庫，最新版本往往有更好的跨瀏覽器和跨設備支持。可以使用檢測設備一樣的工具，來幫助確定一箇舊版本，是否可以和配置最好的設備兼容。
接下來，讓我們看看下面的列表！
AngularJS
AngularJS 是一種流行的企業框架，許多開發人員使用其構建和維護複雜的 Web 應用程序。AngularJS 是十分受歡迎的，許多公司都使用它，像達美樂披薩、瑞安航空、iTunes Connect，PayPal 支付，谷歌等。AngularJS 是由谷歌支持的開源框架。AngularJS 把自己描述爲一個
HTML 的擴展，可用來構建複雜的 Web 應用程序。此外，如果你熟悉 TypeScript，將會很清楚 AngularJS 是如何編寫的。
AngularJS 是一個 MVC 類型的框架，它提供了雙向的數據模型和視圖之間的綁定。這種數據綁定，允許在雙方只要有一個數據變化時，自動進行更新。它使你可以構建可重用的 View 組件。同時，它也提供了一個服務框架，以便前後端服務的輕鬆通信。最後，它只是普通的 JavaScript。
什麼時候使用 AngularJS？當你正在建立一個複雜的 web 前端應用程序，並且需要一個模塊化的框架來處理一切時。
React 是今年最受喜愛的 JavaScript 的工程！每個人似乎都在談論 ReactJS。每一個會議上，去年出席的會議，至少有兩個人是在討論 React。React 是開源的，主要是由 facebook 藉助其它公司的主要技術開發出來的。React 描述自己是一個 JavaScript 庫，用於構建用戶界面。
React 在 MVC 中，主要是 View。它完全專注於 MVC 那部分，無視應用程序的其它部分。它提供了一個成分層，可以更容易使用UI元素，並將它們組合在一起。它抽象了 DOM，使其擅長於優化渲染，並允許使用 node.js 來表述 React ; 它實現了一個單向靈活的數據流，使得它更容易理解和使用其它框架。
作爲在 MVC 中的 V，許多工程結合 React 和 AngularJS 或 Ember 一起使用。
什麼時候使用 React？當你想要一個強大的 View 層，但應用的其它部分卻不需要詳盡的框架時，或者當你的應用中想要一個結合 了Angular、Backbone 或 Ember 的視圖層時，又或者是創建一個同構的 Web 框架時。
Backbone 是一個很著名的簡單的框架，融入了一個單一的 JavaScript 文件。Backbone 流行了一段時間。由 Jeremy Ashkenas 從CoffeeScript 和 Underscore 框架中開發出來的。對於追尋小型架構的團隊來說，Backbone 是特別受歡迎的。因爲他們小型的
Web 應用是不需要使用像 AngularJS 和 Ember 這樣的大型框架的。
Backbone 提供了一個完整的 MVC 框架和路由。該模型允許鍵-值綁定和處理數據變化的事件。Models（和 Collections）可以連接到 RESTful API 中。Views 可以聲明事件處理，而路由器則可以非常出色地處理 URL 和狀態管理。在建立一個不提供太多功能和非必要複雜功能的單頁面應用時，能提供你所需的所有功能。
什麼時候使用 Backbone？Backbone 是適用於簡單 Web 應用的 GOTO 框架。
Ember 是一個獨立的 Web 應用程序框架，專注於編碼效率。Ember 是比較受歡迎的，核心團隊包括牛人 Yehuda Katz，他是 Ruby on Rails 和 jQuery 的核心團隊之一。Ember 描述自己爲一個不浪費你的時間，能用於創建偉大 Web 應用程序的框架。 這是非常有主見，這也使你有了很多選擇。
Ember 也是一個 MVC 框架。它包括一個模板和視圖引擎，保證了數據變化時的自動更新，就像 AngularJS，Backbone 和 React 一樣。它包括的概念 web 組件，讓你用自己的標籤來擴展 HTML（就像 AngularJS）。它也有一個路由和模型引擎，能夠和 RESTful API
協同工作。
什麼時候使用 Ember？如果你只是想要一個能夠工作的框架時、或者你的預算緊張、又或者最後期限將近時，不追求太多的靈活性，可以使用 Ember。
JQuery
jQuery 是一個不需要過多介紹的框架。它憑一己之力使得跨瀏覽器站點成爲現實並促使 Web 發展到今天。Web 標準被大多數主要瀏覽器廠商所採納真正的尊重，jQuery 是其原因之一。jQuery 的基金會的使命是“通過開發和支持開源軟件，提高開放的網絡，使之爲所有人開放，並與開發社區合作。”
jQuery 是世界上最常用的 JavaScript 庫，沒有應用程序不去使用它，除非不在乎編碼效率。它使得在所有瀏覽器中，DOM traversal、事件處理、動畫、AJAX 是如此的簡單和容易。
什麼時候使用 jQuery？除你想使用像 Zepto 這樣的輕量級版本之外，都可以使用 jQuery。
Wijmo Enterprise 是爲企業應用程序開發而推出的一系列包含
HTML5 和 JavaScript 的開發控件集。包含有先進的 JavaScript 控件、經典的 jQuery 小部件、金融圖標、以及 FlexSheet 和 OLAP，能夠滿足移動端、PC 端和支持 IE6 等應用程序的需求。同時，Wijmo 還支持其它流行的框架，如 Angular、Angular2、KnockOut、Vue、React 等。
什麼時候使用 Wijmo？當你想爲應用程序構建具有良好用戶體驗的用戶界面時。
對於程序開發者來說，一些 JavaScript 的內置，效率是不夠高的。總有缺少實用的功能或將代碼化簡的函數。Underscore（和 lodash）是一個 JavaScript 庫，提供了實用功能，同時不需要 JavaScript 對象內置的猴子補丁。這兩個庫提供超過 100 個幫助函數和其它特別好用的功能;，包括像地圖，過濾器，調用，縮減，模板，調節，綁定，擴展，挑選，克隆和更多的功能。
什麼時候使用 Underscore？當你需要一個單一 JavaScript 文件來提高編碼效率時。
什麼時候使用 lodash？當你需要一個模塊和輕量高效的，容易被 AMD 和社區插件支持 Underscore 版本時。
數據可視化和圖表是 Web 應用程序的常見需求。當涉及到任何數據操作和可視化，D3.js 是事實上的標準。它是在 GitHub 上最受歡迎的項目之一，並在被數百個組織使用。大量的圖形，圖表和可視庫建立在 D3 上。
D3 允許操作任何數據源的文件，並且可以轉換爲 DOM、SVG 或 CSS。D3 專注於現代網絡標準，並確保像 Flash 或 Silverlight 等專有格式的免費。
什麼時候使用 D3.JS？當你需要任何形式的可視化時。
Babylon.js
想要創建一個完全運行在現代 Web 標準和跨瀏覽器上的視頻遊戲？可以考慮 Babylon.js，Babylon.js 是一個建立在 WebGL 和 JavaScript 上的 3D 遊戲引擎。你可以創建一個難以置信的高質量的遊戲引擎，包括物理，音頻和粒子系統。
什麼時候使用 Babylon.js？當你正在構建一個包含任何複雜 3D 場景的視頻遊戲時。
想要創建一個 3D 可視化，卻又不需要完整的遊戲引擎？Three.js 提供了一個輕量的 3D 庫來將 3D 渲染成一個 HTML5 canvas、SVG 和 WebGL。這確實是一個明確的庫，在 Three.js 的用例展示中，有幾百個效果很好的例子。
什麼時候使用 three.js？每當你需要一個簡單的三維可視化，可以輸出到畫布上時。
Mocha & Chai
在很長一段時間裏，JavaScript 的測試令人難以置信的煩惱。從頭開始，測試任何代碼通常被視爲令人討厭的，但它是每一個開發者應該做的。同時，測試他們的代碼，每個開發者似乎總是很不屑，而選擇忽略它。有一個辦法來改善這個問題，就是使用 Mocha & Chai 的形式。雖然這兩個庫從美味的熱飲中得名的，但是它們都可以以不同的方式測試你的代碼。
Mocha 是一個 JavaScript 測試框架，可以很輕鬆地在 node 模型和瀏覽器應用程序中測試異步代碼。Mocha 測試可以串聯運行，並且對於正確的測試用例具有高質量的跟蹤異常。
Chai 是一個行爲驅動的開發/測試驅動開發斷言庫，可以與 Mocha 配套使用。它使得可以很容易的以一種可讀的方式去表達你的測試內容。
什麼時候使用 Mocha 和Chai？ 永遠都可以！請測試你的代碼，使世界變得更美好。
這個列表上包含了 Mocha 和 Chai，如果不包含運行這些測試和設定持續集成測試的運行者，那麼這將是不完整的。Karma 是一個旨在幫助針對不同的瀏覽器自動運行測試的工具。這將幫助你在所有的瀏覽器上運行 Mocha 和 Chai。
並不是每一個瀏覽器都可以在每個平臺上運行，幸運的是，有一些免費的工具，你可以用來測試其他瀏覽器， 例如瀏覽器截圖。如果你在 OS X 上運行，並希望測試 Edge 或 Internet Explorer，您可以使用這種免費工具。
什麼時候使用 Karma？當你的應用程序有一個完整的測試套件，並想要確保在所有的瀏覽器上測試通過時。
運行全功能瀏覽器，以測試你的代碼內存和 CPU 密集型。PhantomJS 允許你在 Safari 和 Chrome 上運行 headless WebKit 的渲染引擎。這樣你就可以運行你的測試，捕捉屏幕截圖，監視網絡，使用 JavaScript API 自動瀏覽頁面。
什麼時候使用 PhantomJS? 當你需要做更多的測試，操作頁面並監視網絡請求時。
Grunt & Gulp
產品網站建設通常會涉及到一些提高性能的任務，例如縮小 JavaScript 和 CSS，CoffeeScript/TypeScript 的編譯，單元測試，性能 lintin。也許你已經爲產品網站準備好了工具鏈，但是如果還沒有，那麼你可以使用 Grunt 和 Gulp 這樣的工具。這兩個工具都有很多插件，來幫助你完善產品網站。
什麼時候使用 Grunt？如果你喜歡寫配置文件，並且不介意任務運行期間產生中間文件時。
什麼時候使用 Gulp？如果對比於寫配置文件，你更喜歡寫代碼，並且想要使用 node.js 的流媒體功能來更快的執行任務時。
JavaScript 作爲一門語言，發展地很快。2015年夏天的 ECMAScript 發佈了它的許多在最新的瀏覽器中實現的新功能。如果你想看看2015年的 ECMAScript 兼容，你可以看看來自原 @kangax 的列表。你會發現最新版本的 Edge，Firefox 和 Chrome，具有近乎完全的兼容性。
我們不是生活在一個完美的世界。作爲開發人員，我們需要繼續支持那些沒有最新 JavaScript 特性的舊版瀏覽器。我們要推進網絡並提高我們的代碼庫。Babel 是一個 JavaScript 編譯器，可以將最新的 JavaScript 標準編譯成 ES5 兼容的 JavaScript，這樣就允許在像 IE9
這樣較老的瀏覽器上運行。它有一些插件，使得很容易的使用 React 去開發，甚至使用一些規格之外的特性去開發。
什麼時候使用 Babel？當你要使用新的 JavaScript 語言特性，同時繼續支持舊版瀏覽器時。
更多的Web開發實踐
本文來自於 JavaScript 學習文章中微軟技術佈道者和工程師的系列文章之一，同時最好的文章裏也包含微軟的 Edge 瀏覽器和新的 EdgeHTML 渲染引擎。
我們鼓勵大家測試跨瀏覽器和設備，例如微軟的 Edge（Windows10 默認的瀏覽器）
- Scan your site for out-of-date libraries, layout issues, and accessibility
- Download free virtual machines for Mac, Linux, and Windows
- Check Web Platform status across browsers including the Microsoft Edge roadmap
- Remotely test for Microsoft
Edge on your own device
從工程師和佈道者那裏更深度的學習
- Coding Lab on GitHub: Cross-browser testing and best practices
- Microsoft Edge Web Summit 2015 (from our engineering team and JS community)
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- Advancing JavaScript without Breaking the Web (from Christian Heilmann)
- The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
- Unleash 3D rendering with WebGL (from David Catuhe)
- Hosted
web apps and web platform innovations (from Kevin Hill and Kiril Seksenov)
開源社區項目：
- vorlon.JS (cross-device remote JavaScript testing)
- manifoldJS (deploy cross-platform hosted web apps)
- babylonJS (3D graphics made easy)
更多免費工具和後端Web開發
文章來源：by Rami Sayar
原文鏈接：http://www.codeproject.com/Articles/1066408/Top-JavaScript-Frameworks-Libraries-Tools-and-Wh