【總結】2017年當下最值得你關注的前端開發框架，不知道你就OUT了！

 

近幾年隨着 jQuery、Ext 以及 CSS3 的發展，以 Bootstrap 爲表明的前端開發框架如雨後春筍般擠入視野，可謂目不暇接。

在這篇分享中，我將總結2017年當下最值得你關注的前端開發框架，數據主要來自於GitHub上。流行的框架不表明最好，選擇框架最重要的標準仍是最適合本身項目的，就是最好的。

本文將介紹：

一、框架的概念和必要性

二、前端流行開發框架具體列舉

三、總結和建議

 

---

 

框架的概念和必要性

框架是應用程序的骨架。它要求以特定的方式來進行軟件設計，在某些節點上實現本身的邏輯。框架一般提供了事件、存儲和數據綁定等功能。

框架一般提供了比類庫更高層次的抽象，幫助快速構建項目的前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版本是個更好的選擇。