這篇文章主要描述現今流行的一些 Javascript web 前端框架，庫以及它們的適用場景。
新的 Javascript 庫層出不窮，從而Web 社區愈發活躍、多樣、在多方面快速發展。詳細去描述每一種主流的 Javascript 框架和庫近乎不可能，所以在這篇文章中主要介紹一些對前端發展最具影響力的前端框架。接下來讓我們來共同研究一些主流前端框架、庫和工具，並討論它們的適 用場景。
同時：
如果該篇文章沒有包含你喜歡的 Javascript 框架，勿噴
在使用前端框架進行開發時，建議保持版本更新。最新版本的一般都會提供給更好的跨瀏覽器，跨平台效果。 需檢測某個框架的舊版本是否對各種瀏覽器以及設備的兼容，請使用 類似這個掃描器 的工具
准備好了吧，那么接下來逐個討論它們。
AngularJS
Angular 是一款流行的企業級 框架，很多程序員都用它來構建和維護復雜的網頁應用。Angular 擁有巨大的人氣，使用它的公司跟 Domino 的 Pizza 種類一樣多，如 Ryanair, iTunes Connect, PayPal Checkout, Google。Angular 是一個由 Google 支持的開源框架。Angular 稱自己為構建復雜網頁應用而對 HTML 的擴展。如果你也對 TypeScript 很熟悉，那么可以看看 怎樣寫 Angular 2 .
Angular 采用 MVC 架構。它提供了 Model 層和 View 層之間雙重數據綁定。這種數據綁定方式的好處是不管哪邊數據改變，都會自動的更新兩邊的數據。這有助於你構建可服用的 View 組件。它還提供了一個前后端服務易於交互的服務框架。最重要的是，它是簡單的 JavaScript。
什么時候使用 AngularJS? 當你構建一個復雜的網頁前端應用並需要一個單獨的模塊框架去處理一切時。
GitHub: https://github.com/angular/angular.js
Current Version:1.4.7/1.2.29
Website: angularjs.org
二：React 是15年最受歡迎的 JavaScript 項目!幾乎人人都在談論 ReactJS。去年，我參加的每一個會幾乎都會有一兩個話題探討 React 和相同體系下的其它庫( Flux ， Redux ) 。React 是一個開源項目，幾乎是由 Fackbook 和其它主要的技術公司貢獻開發的。React 稱自己為為構建用戶接口而提供的 JavaScript 庫。
React 基本上用來作為 MVC 中的 V。它完全專注於 MVC 中的 V 部分，而忽略了應用中的其它部分架構。它提供了一個組件層，這讓我們易於制作UI元素並將這些UI元素組合在一起。它抽象出了DOM，因此而優化了渲染， 並允許你使用 node.js 渲染 React。另外，它實現了單向數據交互流，這使它比其它的框架更易於理解和使用。
多個項目例如 Angular ，Ember 綁定使用 React 成為 MVC 中的 V。
什么時候使用 React?當你想要有一個強大的 View 層，而應用中的其它部分缺不需要一個復雜的框架時，或當你想要一個 View 層和你的 Angular， Backbone，或者 Ember應用一起使用。當你試着構建一個同構的網頁框架。
GitHub: https://github.com/facebook/react
目前版本:v0.14.0
網址: Facebook.github.io/react/
Backbone
Backbone 是 一個出名的精簡的框架，所有內容都可以放到一個單一的文件里。Backbone 已經流行了一段時間，其作者是 Jeremy Ashkenas，曾經由於開發了 CoffeeScript 和 Underscore 而為大家所知。Backbone 特別適用於需要開發的 web 程序不大的那些團隊，他們希望能使用小巧的框架，而不是像 Angular 或者 Ember 這樣的大型框架。
Backbone 提供了全功能的 MVC 框架和路由。它的 Model 可以實現 key-value 綁定和數據更新的事件處理。Model(及 Collection)可以與 RESTful 的 API 協同工作。View 可以聲明事件處理，Router 在 URL 處理和狀態管理方面做的很好。對於開發一個單頁面應用，所有需要的功能都可以支持，不需要額外引入不需要的復雜性。
何時使用 Backbone?對於小型的 web 程序，Backbone 是我必選的框架。
GitHub: https://github.com/jashkenas/backbone/
當前版本:1.2.3
官方網站: backbonejs.org
Ember 作為一個 web應用框架，非常專注於程序員的效率上。Ember 相對比較流行，核心團隊有不少很聰明的成員，包括 Yehuda Katz，他是 Ruby on Rails 和 jQuery 的核心團隊的成員。Ember 對自己的定位是“一個用來創建震撼的 web 應用的框架”，它也確實不會浪費你的時間。它在這方面非常專注，為你提供很多的選擇。
Ember 同樣也是一個 MVC 的框架。它包含一個模板和視圖引擎，在數據更新時可以自動更新，這方面與Angular, Backbone, 和 React 類似。它還有一個 web 組件 的概念，允許你用自己的標簽擴展HTML，(如Angular)。它還有一個路由及 model 引擎，可以與 RESTful API 一起工作的很好。
何時使用 Ember?適用於你需要一個框架馬上就能使用。對靈活性要求不高的時候可以選擇 Ember，因為你通常是預算緊張或者工期緊張。
GitHub: https://github.com/emberjs/ember.js
當前版本:2.1.0
官方網站: emberjs.com
JQuery 這個庫就不用多做介紹了。它獨立承擔了讓跨瀏覽器網站成為現實的重任，是它使得整個 web 成為今天這個樣子。Web 標准的制定以及瀏覽器廠家對標准的接受方面，jQuery 功不可沒。jQuery 基金會的目標是"通過開源軟件的開發和支持，以及社區的協作，增進開放的網絡，讓每個人都能訪問"
JQuery 是世界上應用最廣的 JavaScript 庫，沒有應用可以離開它，除非你對開發效率不感興趣。它使得 DOM 遍歷、事件處理、動畫和 AJAX 在所有瀏覽器上都變得如此的簡單易用。
何時使用 jQuery?任何時候，除非你打算使用更輕量級的版本，例如 Zepto 。
GitHub: https://github.com/jquery/jquery
當前版本：v1.11.3 或 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?當你想要一個模塊化的，性能更好好一點的，並附帶有對於 AMD 和社區插件支持的 Underscore 版本時。
Lodash GitHub: 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
想要構建一個完全運行於現代瀏覽器上，並且能跨瀏覽器運行的視頻游戲嗎?那就看看 Babylon.js 吧，它是一個 3D 游戲引擎，基於 WebGL 和 JavaScript。你可以使用其物理、音頻和粒子系統創造出超乎預期的高質量游戲來。
什么時候使用 Babylon.js?當你正在構建一個視頻游戲或者一個某種類型的 3D 場景時。
GitHub: https://github.com/BabylonJS/Babylon.js
當前版本: 2.2
網站: babylonjs.com
Three.js
想要構建一個 3D 視覺特效，但是又不需要一個功能完整的游戲?Three.js 提供了一個輕量級的 3D 庫，讓你可以將 3D 效果渲染成一個 HTML5 的 canvas, 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模塊或者瀏覽器應用中的異步代碼的測試變得容易起來。Mocha 測試可以串起來運行，並且對於針對合適的測試案例進行異常跟蹤的質量不錯。
Chai 是一個行為驅動開發和測試驅動開發的斷言庫，可與 Mocha 比肩。它以一種可讀性好的風格來描述你所要測試的東西，用起來簡單。
什么時候使用 Mocha 和 Chai?用他們就對了! 請測試你的代碼，讓這個世界變得更好。
Mocha GitHub: https://github.com/mochajs/mocha
Mocha 當前版本: 2.3.3
Mocha 網站: mochajs.org
Chai GitHub: https://github.com/chaijs/chai
Chai 當前版本: v3.4.1
Chai 網站: chaijs.com
我們已經在這份清單中囊括了 Mocha 和 Chai ，如果不去把可以運行這些測試或者也許可以設定持續集成測試的測試運行器拉進來的話，那么這份清單就不會是完整的。Karma 是一個用來幫助你在不同的瀏覽器中自動運行你的測試的工具。它將會幫助你在時下所有的瀏覽器上運行你的 Mocha 和 Chai 測試。
並不是每個瀏覽器都會運行於每個平台之上，不過幸運的是有許多免費的工具可供你用來測試其它的瀏覽器，可以在 瀏覽器截屏 上看一看。如果你是在 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 作為一門語言發展很快速。ECMAScript 2015 在去年夏天發布，而它的許多新特性正在許多最新的瀏覽器中被實現。如果你想要了解有關瀏覽器對 ECMAScript 2015 兼容信息，可以看看這個來自於 @kangax 的 表格 。你會注意到最新版本的 Edge，Firefox 和 Chrome 已經幾乎是完全的兼容了。
我們並不是生活在一個完美的世界中。作為開發者，我們將會需要繼續支持老版本的瀏覽器，它們不具有最新和最棒的 JavaScript 功能特性。而我們實在是想要發展我們的 web 並提升我們的代碼庫。Babel 就是一個 JavaScript 編譯器，它可以將最新的 JavaScript 標准編譯成兼容 ES5 的JavaScript，讓你可以在 IE9 那么老的瀏覽器上運行它們。它擁有一些插件，讓使用 React 開發更加容易，設置會使用那些並不是規范 (例如 ES7) 的組成部分的功能特性。
什么時候使用 Babel?當你想要使用新的 JavaScript 語言特性並且還要支持老的瀏覽器時。
GitHub: https://github.com/babel/babel
當前版本: 6.1.2
網站: babeljs.io
更多 Web 開發的實踐
這篇文章是 web 開發系列的一部分，來自於 Microsoft 技術的傳道者和工程師，內容都是關於實用的 JavaScript 學習、開源項目，還有互操作性最佳實踐這些方面，包括了 Microsoft Edge 瀏覽器和新的 EdgeHTML 渲染引擎 。
我們鼓勵您在所有的瀏覽器和設備，包括作為 Windows 10 默認瀏覽器的 Microsoft Edge 上進行測試 —— 使用 dev.microsoftedge.com 上的免費工具：
掃描你的站點上的過時的庫，布局問題以及可訪問性
下載免費的 Mac, Linux, 和 Windows 的虛擬機
在所有的瀏覽器，包括在 Microsoft Edge 上檢查 Web 平台的狀態
在你自己的設備上遠程測試 Microsoft Edge
更深入了解我們的工程師和傳道者：
GitHub 上的編碼實驗室：跨瀏覽器測試和最佳實踐
Microsoft Edge Web 大會 2015 (來自於我們的工程團隊和 JS 社區)
哇哦，我能在 Mac 和 Linux 上測試 IE 和 Edge 了! (來自於 Rey Bango)
沒有破話 Web 的先進的 JavaScript (來自於)
能讓 Web 立刻起作用的 Edge 渲染引擎 (來自於 Jacob Rossi)
使用 WebGL 發揮 3D 渲染的潛能 (來自於 David Catuhe)
托 管web 應用和web平台方面的創新 (來自於 Kevin Hill 和 Kiril Seksenov)
我們的社區開放源代碼項目：
vorlon.JS (多設備遠程 JavaScript 測試)
manifoldJS (部署跨平台托管 Web 應用)
babylonJS (讓 3D 圖形這些東西更平易近人)
更多免費的工具和后端web開發的東西：
Linux, MacOS, 和 Window s 上使用的 Visual Studio Code
嘗試在 Azure Cloud 上 使用 node.JS 編寫代碼