近幾年隨着 jQuery、Ext 以及 CSS3 的發展，以 Bootstrap 為代表的前端開發框架如雨后春筍般擠入視野，可謂應接不暇。
在這篇分享中，我將總結2017年當下最值得你關注的前端開發框架，數據主要來自於GitHub上。流行的框架不代表最好，選擇框架最重要的標准還是最適合自己項目的，就是最好的。
本文將介紹：
1、框架的概念和必要性
2、前端流行開發框架具體列舉
3、總結和建議
框架的概念和必要性
框架是應用程序的骨架。它要求以特定的方式來進行軟件設計，在某些節點上實現自己的邏輯。框架通常提供了事件、存儲和數據綁定等功能。
框架通常提供了比類庫更高層次的抽象，幫助快速構建項目的前80％。
框架的缺點：
- 如果你的應用程序超出了框架的范圍，最后20％可能會很難
- 框架更新很困難
- 核心框架代碼和概念很少更新
為什么要選擇框架？
構建和開發前端最重要的基礎工作就是選擇一個高效並且符合需求的web前端框架，一個合理並且高效開發的框架並不僅僅降低你的時間成本，同時也會給你持續開發的信心和樂趣。
前端流行開發框架具體列舉
1. Bootstrap
Bootstrap 毫無爭議是最領先的前端框架。鑒於其超級強大的人氣，而且每天都還在不斷增長。
幾乎每個開發人員都知道來自Twitter的開發框架-bootstrap。 它可能是最老牌的前端UI框架之一，最早版本發布於2011年。
現在已發布bootstrap4.0最新版本。
優勢：
- 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
- 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
- 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
- 響應式設計：Bootstrap 的響應式 CSS 能夠自適應於台式機、平板電腦和手機。更多有關響應式設計的內容詳見 Bootstrap 響應式設計。
- 它為開發人員創建接口提供了一個簡潔統一的解決方案。
- 它包含了功能強大的內置組件，易於定制。
- 它還提供了基於 Web 的定制。
- 它是開源的。
- 比其他框架提供了更多的資源（包括文章、教程、第三方插件和擴展，主題構建等等）。
2. React——來自於Facebook
React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
React框架本身和我們常用的JavaScript MVC框架，如：AngularJS，Backbone，Ember等，沒有直接的可比性。
在React的官方博客中明確闡述了React不是一個MVC框架，而是一個用於構建組件化UI的庫，是一個前端界面開發工具。
所以頂多算是MVC中的V（view）。React並沒有重復造輪子，而是有很多顛覆性的創新。
優勢：
-
1.聲明式設計 −React采用聲明范式，可以輕松描述應用。
-
2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的交互。
-
3.靈活 −React可以與已知的庫或框架很好地配合。
-
4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。
-
5.組件 − 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。
-
6.單向響應的數據流 − React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。
3. VUE
Vue.js (讀音 /vjuː/，類似於 view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。
Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。
另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
優勢：
- 1.簡潔
- 2. 輕量
- 3.快速
- 4. 數據驅動
- 5.模塊友好
- 6. 組件化
4. konckout
Knockout是一款很優秀的JavaScript庫，它可以幫助你僅使用一個清晰整潔的底層數據模型（data model）即可創建一個富文本且具有良好的顯示和編輯功能的用戶界面。
任何時候你的局部UI內容需要自動更新（比如：依賴於用戶行為的改變或者外部的數據源發生變化），KO都可以很簡單的幫你實現，並且非常易於維護。
優勢：
-
1.優雅的依賴跟蹤-任何時候當數據源模型發生變化時，它都能夠自動的更新你UI的指定內容。
-
2.聲明式綁定-它通過簡單淺顯的方式將你的UI與數據源模型進行綁定，你可以使用任意嵌套的結構模版來組建一個復雜的動態界面。
-
3.良好的可擴展性-通過簡單的幾行代碼就可以實現一個自定義行為作為新的聲明進行綁定。
-
4.純JavaScript庫-兼容任何服務器和客戶端技術。
-
5.可以很好的應用到已有的應用程序中-而不需要程序主要架構發生變化。
-
6.簡潔-采用Gzip壓縮之后只要13K。
-
7.兼容任何主流瀏覽器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)
-
8.一套全面完整的規范（采用行為驅動開發）-這意味着在新的瀏覽器或平台中也能夠很容易驗證通過。
5. Backbone
backbone.js是一個web端javascript的mvc框架，算得上是重量級的框架。
它能讓你像寫java代碼一些寫js代碼，定義類，類的屬性以及方法。
更重要的是它能夠優雅的把原本無邏輯的javascript代碼進行組織，並且提供數據和邏輯相互分離的方法，減少代碼開發過程中的數據和邏輯混亂。
優勢：
- 1.體積小, 制定性很強
- 2.提供underscore工具函數, 按照每個程序員不同的Style來處理數據, 或者你自己封裝
- 3.提供自定義模版引擎, 也就是說, 你想怎么渲染, 就怎么渲染
- 4.提供完整的RESTful 風格API.想怎么寫就怎么寫
- 5.模型 , 集合, 視圖分離. 邏輯清晰. 只要是個稍微懂規范的程序員, 都可以寫出不錯的邏輯結構
6. Angular 4.X
Angular 2.0於2016年9月發布。這是一個完整的重寫，它引入了使用TypeScript創建的基於模塊化組件的模型。Angular 4.0於2017年3月發布。
優點：
- 開發現代Web應用程序的解決方案
- 是標准MEAN棧的一部分，盡管只有少量的教程可用
- 對於熟悉靜態類型語言（如C＃和Java）的開發人員，TypeScript提供了一些優勢。
缺點：
- 學習曲線陡峭
- 大的代碼庫
- 不能從Angular 1.x升級
- 與1.x相比，Angular 2.x較難理解
總結和建議
目前最為流程的框架是bootstrap，同時其它的框架也在向着流行的趨勢發展。
如果需要一個安全的、通用的Web應用程序，可以考慮使用Vue.js或react。
整體框架已經不再受歡迎了，如果你需要對一個較大型項目進行嚴格的結構管理，AngularJS是一個不錯的選擇。目前大多數人堅持使用Angular 1.0版本，但是長遠來講，如果你願意學習TypeScript，Angular 4.x版本是個更好的選擇。