如今的前端已經不再像以前一樣就是簡單的寫寫頁面和調調樣式而已，現在的前端越來越複雜，知識點越來越豐富。
要做WEB前端，就需要知道前端到底是什麼，需要學習那些知識；前端至少要懂的三個部分：HTML，CSS，JavaScript（簡稱JS），那首先先明確這三個概念：
HTML負責結構，網頁想要表達的內容由html書寫。
CSS負責樣式，網頁的美與醜由它來控制
JS負責交互，用戶和網頁產生的互動由它來控制。
web前端發展至今，演變出了無數的庫和框架；說到庫第一時間想到的是不是jquery？在小編剛接觸庫的時候也是從jQuery開始的；今天我們就來說說前端發展到現在都有哪些好用的庫框架。
2016年開始應該是互聯網飛速發展的幾年，同時也是Web前端開發非常火爆的一年，Web 前端技術發展速度讓人感覺幾乎不是繼承式的迭代，而是一次次的變革和創造。這一年中有很多熱門的前端開發框架，下面源碼時代web小編爲大家總結2016年至今最受歡迎的幾款前端框架。
在這互聯網飛速發展的信息時代，技術的更新迭代也在加快。目前看來，火了十幾年的Java技術現在仍然是棵常青樹。回想兩年前初來咋到，也是想好好當一名java程序員，五年計劃都行想好了，最後還是陰差陽錯搞了前端。前端目前來看還是非常火的，隨着IT技術的百花齊放，新的前端框架不斷推出，但大多都還在狂吼的階段。其實一直以來對技術的理解是技術服務於業務和產品，產品又在不同程度的推進着技術的演進。Web、無線、物聯網、VR、PC從不同方向推進着技術的融合與微創新。程序員在不同業務場景下的角色互換。而隨着Node.js的出現語言的角色也在發生着轉變，js扮演了越來越重要的角色。也就有了茶餘飯後也把瞭解到的知識整理一下。
前端UI框架組件庫：
說到前端框架我第一印象中想起React、Vue和Angular，不知道你是否與我一樣想到這些，現在常用的有：Bootstrap、jQuery UI、BootMetro、AUI常用的還有很多、就不一一跟大家舉例出來了，因爲很多朋友認爲在不同項目開發中用到的前端框架不一樣，其實也有一款可以適用於多種項目開發的前端框架，只是沒發現。
用前端框架開發項目的原因？
這個應該是最好解決的問題，首先就是減少造輪子的想法，能夠快速的開發一款web應用對於公司來說都是非常願意開到的，在時間和成本之間就能夠節約很多的時間，這是其中一點，另外一點就是使用前端框架的組件功能，只要組件功能強大，什麼樣的項目都能夠開發（前提是：要熟悉前端框架的功能！），時間成本問題就能夠輕鬆解決。
沒有設計師也能做出精美頁面效果的前端框架
雖然市場中有很多的前端框架，但部分UI框架是屬於組件庫，然而QUICK UI跟當下流行的三大底層框架React、Vue和Angular不同，QUICK UI提供了一整套前端解決方案，包括前後端分離的開發框架、100多種功能強大的UI控件、幾十套精美的皮膚模板和近16萬字的開發文檔，滿足你所以開發項目都不是問題。
前端框架庫：
1.Node.Js
地址：http://www.runoob.com/nodejs/nodejs-tutorial.html (中文網)
描述：Node.js是一個Javascript運行環境(runtime)。實際上它是對Google V8引擎進行了封裝。V8引 擎執行Javascript的速度非常快，性能非常好。Node.js對一些特殊用例進行了優化，提供了替代的API，使得V8在非瀏覽器環境下運行得更好。
Node.js是一個基於Chrome JavaScript運行時建立的平臺， 用於方便地搭建響應速度快、易於擴展的網絡應用。Node.js 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分佈式設備上運行數據密集型的實時應用。
簡單的說 node.js 就是運行在服務端的 JavaScript。
Node.js 是一個基於Chrome javascript 運行時建立的一個平臺。
Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。
用途：
1. RESTful API（目前比較流行的接口開發風格）
這是NodeJS最理想的應用場景，可以處理數萬條連接，本身沒有太多的邏輯，只需要請求API，組織數據進行返回即可。它本質上只是從某個數據庫中查找一些值並將它們組成一個響應。由於響應是少量文本，入站請求也是少量的文本，因此流量不高，一臺機器甚至也可以處理最繁忙的公司的API需求。
2. 統一Web應用的UI層
目前MVC的架構，在某種意義上來說，Web開發有兩個UI層，一個是在瀏覽器裏面我們最終看到的，另一個在server端，負責生成和拼接頁面。
不討論這種架構是好是壞，但是有另外一種實踐，面向服務的架構，更好的做前後端的依賴分離。如果所有的關鍵業務邏輯都封裝成REST調用，就意味着在上層只需要考慮如何用這些REST接口構建具體的應用。那些後端程序員們根本不操心具體數據是如何從一個頁面傳遞到另一個頁面的，他們也不用管用戶數據更新是通過Ajax異步獲取的還是通過刷新頁面。
3. 大量Ajax請求的應用
例如個性化應用，每個用戶看到的頁面都不一樣，緩存失效，需要在頁面加載的時候發起Ajax請求，NodeJS能響應大量的併發請求。 總而言之，NodeJS適合運用在高併發、I/O密集、少量業務邏輯的場景。
2.angular.Js（比較厲害，github排名也比較高）
地址：http://www.runoob.com/angularjs/angularjs-tutorial.html (中文網)
描述：AngularJS[1] 誕生於2009年，由Misko Hevery 等人創建，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。
用途：通過描述我們應該就能很好的明白AngularJS的真實用途了，MVVM，模塊化，自動化雙向數據綁定等等。除了簡單的dom操作外，更能體現Js編程的強大。當然應用應該視場合而定。
它的出現比較早，也是曾經比較流行的前端js框架，但是今年來隨着reactJS與VueJS的出現，它的熱度在慢慢降低。
3.JQuery Mobile
地址：http://www.w3school.com.cn/jquerymobile/ (中文網)
描述：Query Mobile是jQuery 在手機上和平板設備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發佈一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile開發團隊說：能開發這個項目，我們非常興奮。移動Web太需要一個跨瀏覽器的框架，讓開發人員開發出真正的移動Web網站。
用途：jQuery Mobile 是創建移動 web 應用程序的框架。
jQuery Mobile 適用於所有流行的智能手機和平板電腦。
jquery Mobile 使用 HTML5 和 CSS3 通過儘可能少的腳本對頁面進行佈局。
4.requirejs
地址：http://www.requirejs.cn/
描述：RequireJS的目標是鼓勵代碼的模塊化，它使用了不同於傳統<script>標籤的腳本加載步驟。可以用它來加速、優化代碼，但其主要目的還是爲了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址。
RequireJS以一個相對於baseUrl的地址來加載所有的代碼。 頁面頂層<script>標籤含有一個特殊的屬性data-main，require.js使用它來啓動腳本加載過程，而baseUrl一般設置到與該屬性相一致的目錄。
用途：模塊化動態加載。
5.Vue.js(目前市場上的主流)
地址：http://cn.vuejs.org/
描述：Vue.js 是用於構建交互式的 Web 界面的庫。它提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。從技術上講， Vue.js 集中在 MVVM 模式上的視圖模型層，並通過雙向數據綁定連接視圖和模型。實際的 DOM 操作和輸出格式被抽象出來成指令和過濾器。相比其它的 MVVM 框架，Vue.js 更容易上手。
目前市場上比較流行的前後端分離的開發模式，大多前端都是vueJS做的，具體的優點請大家看官方文檔。
6.backbone.js
地址：http://www.css88.com/doc/backbone/
描述：Backbone 爲複雜Javascript應用程序提供模型(models)、集合(collections)、視圖(views)的結構。其中模型用於綁定鍵值數據和自定義事件；集合附有可枚舉函數的豐富API； 視圖可以聲明事件處理函數，並通過RESTful JSON接口連接到應用程序。
7.React.js（gihub排名僅次於vue.js）
地址：http://reactjs.cn/react/docs/why-react.html
描述：React 是一個 Facebook 和 Instagram 用來創建用戶界面的 JavaScript 庫。很多人認爲 React 是 MVC 中的 V（視圖）。我們創造 React 是爲了解決一個問題：構建隨着時間數據不斷變化的大規模應用程序。爲了達到這個目標，React 採用下面兩個主要的思想。
8.Amaze UI
Amaze UI是輕量級的前端應用框架，是國內比較流行的框架，比較適用於移動端響應式開發框架，可以按照項目要求生成專屬的UI框架庫進行使用，組件非常豐富，可以構建出漂亮的web頁面。
官網地址：http://amazeui.org/
三、可視化組件
1.Echarts
地址：http://echarts.baidu.com/
描述：ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。
2.tableau(收費)
地址：http://www.yuandingit.com/special/tableau/index.html
描述：Tableau 是桌面系統中最簡單的商業智能工具軟件，Tableau 沒有強迫用戶編寫自定義代碼，新的控制檯也可完全自定義配置。在控制檯上，不僅能夠監測信息，而且還提供完整的分析能力。Tableau控制檯靈活，具有高度的動態性。
四、前端構建工具
1.gulp
地址：http://www.gulpjs.com.cn/
描述：易於使用
通過代碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理。
構建快速
利用 Node.js 流的威力，你可以快速構建項目並減少頻繁的 IO 操作。
插件高質
Gulp 嚴格的插件指南確保插件如你期望的那樣簡潔高質得工作。
易於學習
通過最少的 API，掌握 Gulp 毫不費力，構建工作盡在掌握：如同一系列流管道。
2、ES or webPackage
1.Bootstrap中文網
先分享下，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端羣733581373，好友都會在裏面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習
Bootstrap，讓你的頁面更簡潔、直觀、強悍、移動設備優先的前端開發框架,讓web開發更迅速、更簡單。它還提供了更優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。有着豐富的網格佈局系統以及豐富的可重用組件，還有強大的支持十幾的JavaScript、jQuery插件以及組件定製等。
Bootstrap中文網地址：http://www.bootcss.com/
2. Layui
layer是一款口碑極佳的web彈層組件，是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。layui 首個版本發佈於2016年秋，她區別於那些基於 MVVM 底層的 UI 框架，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。
Layui官網地址：https://www.layui.com/
3.ElementUI
Element-Ul是餓了麼前端團隊推出的一款基於Vue.js 2.0 的桌面端UI框架，手機端有對應框架是Mint UI 。適合於Vue的UI框架；
官網地址：http://element-cn.eleme.io/#/zh-CN
4.Mint UI
Mint UI 是 由餓了麼前端團隊推出的 一個基於 Vue.js 的移動端組件庫，Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發需要。通過它，可以快速構建出風格統一的頁面，提升開發效率。
官網地址：http://mint-ui.github.io/
5.angular
AngularJS誕生於2009年,由Misko Hevery 等人創建,後爲Google所收購。是一款優秀的前端JS框架,已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是MVW（Model-View-Whatever）、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。
官網地址：http://www.angularjs.net.cn/
6.React
React 可以非常輕鬆地創建用戶交互界面。爲你應用的每一個狀態設計簡潔的視圖,在數據改變時 React 也可以高效地更新渲染界面。React 起源於 Facebook 的內部項目，因爲該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設Instagram 的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。
官網地址：http://react-china.org/
7.vue.js
近幾年最火的前端框架當屬Vue.js了，Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。很多使用過vue的程序員這樣評價它，“vue.js兼具angular.js和react.js的優點，並剔除了它們的缺點”。授予了這麼高的評價的vue.js，也是開源世界華人的驕傲，因爲它的作者是位中國人--尤雨溪
幾款常用的高質量web前端框架
Web前端框架就是爲了節約開發成本和時間，一般開發一個項目都會用到前端框架（除非自己有前端開發團隊），根據我經驗找的幾款web前端框架做出了分析。都是個人意見，仁者見仁智者見智。
QUICK UI
QUICK UI是一套完整的企業級web前端開發解決方案，由基礎框架、UI組件庫、皮膚包、示例工程和文檔等組成。使用QUICKUI開發者可以極大地減少工作量，提高開發效率，快速構建功能強大、美觀、兼容的web應用系統。
QUICK UI優勢：
①功能最爲強大
QUICKUI經歷了7年的迭代更新，不斷從客戶的各種業務中對組件的需求進行歸納和抽離，從而打造新的組件和功能。現在最新的4.0版本框架包含了一百多種組件，一千多個應用場景示例。可以說在前端框架領域中，QUICKUI擁有功能最強大組件庫。
②運行最爲穩定
很多其他的第三方UI控件在簡單場合使用OK，到了複雜的場景中就會出現很多問題，這種現象很常見，因爲在組件設計時無法預料到所有的應用場合。而QUICKUI在7年間經歷了數千個項目實際檢驗，在各種複雜場景都應用過，並根據客戶的反饋不斷完善和調整。目前的第四代可以說是最穩定、最完美的版本。
③豐富精美的界面皮膚
跟其他web前端框架僅僅是一套組件庫不同，QUICKUI是一整套前端解決方案，擁有豐富的外觀界面解決方案。採用現今流行的扁平化設計理念，推出了包括登錄、響應式web、工作桌面、地圖類、門戶風格、大屏展示風格等等幾百套製作精美、用戶體驗優秀的界面。這些界面是以QUICKUI皮膚包的形式發佈，使用和更換都非常方便。
④事無鉅細的開發文檔
QUICKUI擁有16萬字+的開發文檔，框架和組件的每一個功能點都有詳細的講解和代碼示例，用於開發過程中隨時查閱。除了框架機制講解和組件使用教程，文檔還涉及web前端開發的很多知識。仔細閱讀並結合框架使用的話，你很快就能成爲web開發的高手。
⑤上手開發非常容易
QUICKUI採用組件化思想來構建組件，一個組件就是一兩句html的標籤，使用起來非常簡單。將開發人員從繁瑣的JS編碼中解脫出來，很大程度減少前臺編碼的出錯率；保留了HTML的佈局方式，從而快速進行頁面佈局。對開發者前臺技術要求也非常低，只需要瞭解html語法和一些簡單的JS即可，從而把更多精力放在業務功能的實現上，極大地提高開發效率。
⑥瀏覽器兼容性非常好
QUICKUI4.0使用了很多HTML5，CSS3技術用於提高表現力和用戶體驗，這些新的特性在現代瀏覽器中會有很好的效果。但是，國內依然有大量的用戶在使用IE7、IE8等舊時代的瀏覽器，爲照顧這部分用戶，框架採用了漸進式思想，確保低版本瀏覽器也能正常使用。所以，QUICKUI兼容IE7以上所有主流瀏覽器。
flex
Apache基金會今天發佈了Flex4.8版本，這是Adobe將Flex捐獻給Apache基金會後發佈的第一個版本。
需要注意的是，Flex目前還在孵化階段，還不是Apache的正式項目，Flex4.8也不是一個正式的Apache版本。
Apache稱，該版本標誌着Flex新時代的開始，Flex的未來將由社區來驅動，而不是由一個公司驅動。開發者可以通過貢獻代碼，來幫助改進Flex，如修復bug、增加功能等。
從Macromedia賣給Adobe，然後又捐給apache，不知道搞什麼名堂。不過還好沒有經過大幅重構，否則就真的是悲哀了！
extjs
ExtJS是一種主要用於創建前端用戶界面，是一個基本與後臺技術無關的前端ajax框架。
功能豐富，無人能出其右。
無論是界面之美，還是功能之強，ext的表格控件都高居榜首。
華麗的界面，靈活的功能，還有開發工具都是配套的，但有個最大的問題，用就得花錢！
easyui
easyui幫助你構建你的web應用更加容易。
它是一個基於jquery的插件，開發出來的一套輕量級的ui框架，非常小巧而且功能豐富。
但是她有一個最大的問題就是代碼只能找到以前的開源的版本，到了1.2以後的版本源代碼都是經過混淆的，如果遇到問題修改起來會非常麻煩！不過一個比較大的優勢是開源免費，並且界面做的還說的過去！
jQueryUI
jQueryUI是一套jQuery的頁面UI插件，包含很多種常用的頁面空間，例如Tabs（如本站首頁右上角部分）、拉簾效果（本站首頁左上角）、對話框、拖放效果、日期選擇、顏色選擇、數據排序、窗體大小調整等等非常多的內容。 功能非常全面，界面也挺漂亮的，可以整體使用，也可以分開使用其中的幾個模塊，免費開源！
MiniUI
又一個基於jquery的框架，開發的界面功能都很豐富。
jQueryMiniUI–快速開發WebUI。
它能縮短開發時間，減少代碼量，使開發者更專注於業務和服務端，輕鬆實現界面開發，帶來絕佳的用戶體驗。
使用MiniUI，開發者可以快速創建Ajax無刷新、B/S快速錄入數據、CRUD、Master-Detail、菜單工具欄、彈出面板、佈局導航、數據驗證、分頁表格、樹、樹形表格等典型WEB應用系統界面。
界面做的挺不錯，功能也挺豐富，但是有兩個比較大的問題，一個是收費，一個是沒有源碼，說白了，不開源！基於這個開發如果想對功能做擴展就需要找他們的團隊進行升級！
DWZ
DWZ富客戶端框架(jQueryRIAframework),是中國人自己開發的基於jQuery實現的AjaxRIA開源框架.
設計目標是簡單實用,快速開發,降低ajax開發成本。
歡迎大家提出建議，我們將在下一版本中進一步調整和完善功能．共同推進國內整體ajax開發水平。
畢竟是國產的，支持一下，而且源碼完全公開，可以選擇一下！不過性能怎麼樣不敢確定！
YUI
Yahoo!UILibrary (YUI)是一個開放源代碼的JavaScript函數庫，爲了能建立一個高互動的網頁，它採用了AJAX,DHTML和DOM等程式碼技術。它也包含了許多CSS資源。使用授權爲 BSD許可證，基本上沒怎麼研究過！YUICompressor倒是挺出名的，這套UI庫不知道應用的情況怎麼樣！
Sencha
Sencha是由ExtJS、jQTouch以及Raphael三個項目合併而成的一個新項目。
大公司的框架，並且是幾樣庫的強強聯合，值得推薦！
OperaMasks-UI
OperaMasks-UI是OperaMasks團隊2011下半年打造的一款輕量級前端JS組件庫，旨在提供一款學習曲線低、定製性靈活、樣式統一，且多瀏覽器支持、覆蓋企業業務場景的前端JavaScriptUI組件庫。目前，該團隊已將這一產品以LGPL開源協議開放給社區。
文檔豐富，功能齊全，而且很容易使用和開發！而且是國產的喲！
以上排序是整理時的排序，一起整理分析一下，下次用的時候就不用到處找了，我想同樣的問題應該也存在在很多程序員身上，任何一款UI框架，只要能夠容易入手就行。