有哪些目前流行的前端框架？

01-04

最近接觸了requirejs、backbone等移動開發框架，模塊規範化的開發提高了效率，個人開發經驗稍淺，請問一下國內前端移動端開發大家都在使用什麼框架呢，那麼PC端的對於中小型的項目大家會傾向於選擇jq+bootstraps嗎，還是用reactjs、angularjs……？

借鑒前端工程——基礎篇文章里的內容，覺著科普的蠻好的，對我這樣的初級蠻受用。剛好所用的圖片里都差不多覆蓋了一些常用的東西，直接拿來貼了。

1.庫/框架選型：

圖中的也有一些沒用過，中小型pc端項目的話在做技術選型時會多去嘗試未用過的，這樣可以快速去實踐新東西。

pc端會使用jquery做一些效果處理，移動端一般用zepto，更輕便一些，更多的一些js的處理會用underscore，常用的圖標會使用Font Awesome。

react最近蠻火的，像 @onionBob 所說只是view這一層，所以facebook也提出了 flux來作為一套完整的解決方案。

vue.js 也有在用，能從@勾三股四的微博看出來他們都在推這些，我們團隊也已經在用。

個人現在的態度便是在自己的項目中嘗試很多新東西，嗯，初生牛犢不怕虎。

2.前端工程構建工具的話：gulp 和grunt ,個人比較喜歡 gulp，簡單粗暴。

3.JS/CSS模塊化開發

模塊化Amd和Cmd其實用哪個都無所謂，自己熟練哪個就好，大家也都還在繼續使用，但是～前端的發展真的蠻快的，玉伯也在自己微博上貼出了否定的態度：

有評論給出的解釋是：

@春江一條小魚：庫和框架是對標準的一種擴展與補充。ECMAScript 6 + 出來後，很多功能在標準下能實現了，於是…

其他的有用過webpack，比較推薦，嗯，理由也是簡單粗暴，好使。

其實，很多東西也還是一知半解，慢慢來吧～

另外，剛好正在學react，頁面還打開著，安利一些地址。

官網地址：A JavaScript library for building user interfaces

阮一峰：React 入門實例教程

視頻教程：[React.js中文教程]1.初識ReactJS(講的太爛，直接跳過吧.)_土豆

另外 @陳五百給推薦的 react native資源也一併推薦：ele828/react-native-guide · GitHub

感覺主要還是看是什麼項目吧。

如果是純移動端的話，zepto加frozenui加seajs挺好的。感覺bootstrap的響應式不適合純移動端開發，因為太重了，對移動端載入速度影響很大，純移動端還是小快靈比較好。

如果是做H5那種活動頁，推薦用motion.js，挺好用的，效果贊贊的。

PC端的話，jq+bootstrap是個挺好的組合，或者用backbone也是挺普遍的，但是如果是開發企業管理系統那種的web頁面可以考慮extjs，現在改名叫sencha了，組件多。相反，個人感覺react就不是很適合用來開發企業管理系統。

react現在很火，發展也很快，可以先學習學習，不過react只是View這一層，是個庫，並不是一個完整的框架。而Angular可以說是個大而全的框架，但是載入速度相對比較慢，還有就是Angular 2.0和1.0有很大不同，幾乎是個推翻重做的感覺，所以現在如果用1.x的話，感覺會比較尷尬。

另外，模塊化的話，用seajs的也挺多。

還有就是可以多關注一下打包工具，grunt，gulp和百度開發的FIS。

我認為取決於你的前端是什麼架構。

如果是伺服器渲染，不用想太多老老實實寫好jQuery插件。

如國是Single Page App，客戶端routing的，推薦React + Flux。

大家有沒有使用過layui.js的嗎？感覺效果如何呢？我們目前的項目中使用的是layui。請大家多多討論。

　　前端領域最近幾年發展的特別迅速，可以說是百家爭鳴。在底層的前端框架領域中，最早是jquery稱霸互聯網，近兩年MVVM類型的框架慢慢成為主流，Vue、React和Angular三大框架並駕齊驅。可以說，目前這四種是開發者用的最多使用最廣的底層框架，也由此衍生了大量基於這些框架的免費UI庫。

這些年不斷有新的框架冒出來，又不斷有舊的框架被淘汰。2017年馬上到尾聲了，在這裡總結一下基於Vue、React、Angular和Jquery這四大框架衍生的，經受過時間檢驗深受廣大開發者歡迎的UI框架。

一、基於Vue的UI框架：ElementUI

ElementUI是由餓了么UED設計、餓了么前端團隊開發的，基於Vue2.0的桌面端組件庫。Vue可以說是2017年最火的引擎類前端框架，ElementUI以其美觀的設計和高質量的組件很快俘獲了一大批Vuer的芳心。

　　不足之處在於組件的種類和功能不夠多（例如數據表格組件），很多時候需要自己也要開發一些組件，否則難以完成複雜的企業級應用開發。

　　官網地址：http://element.eleme.io

　　二、基於React的UI框架：AntDesign

AntDesign螞蟻金服出品的基於React的一款前端UIlibrary，React在14年和15年非常火爆，雖然入門的門檻偏高但仍然不斷有大量的開發者使用。

　　螞蟻金服對AntDesign的定位不僅僅是一套UI組件庫，而是一套前端設計語言，提供了大量的設計規範和示例。基本上想到的頁面交互都可以用AntDesign來實現，大大降低了頁面開發成本。

不足之處在於性能方面有待提高，比如tab，此外很多用戶抱怨字小，圖標也過小等。

官網地址：https://ant.design/

　三、基於Angular的UI框架：NG-ZORRO

NG-ZORRO是AntDesign的Angular實現，NG-ZORRO不僅繼承了AntDesign的獨到思想和極致體驗，同時也結合了Angular框架的優點和特性。目前第一版發布將支持Angular4.0.0及以上版本，組件的數量現已覆蓋AntDesignReact版本的80%以上，組件的風格已與AntDesign最新版本保持同步，組件的介面也盡量保持了與AntDesign的React版本一致

　　官網地址：https://ng.ant.design

　　四、基於Jquery的UI框架：QUICK UI

QUICK UI是引領視覺公司出品的一套基於Jquery的UI組件庫。在前幾年，Jquery可以說是引擎類框架中絕對的霸主，雖然最近幾年它的受到MVVM類型框架的影響地位有所下降，但因為入門簡單和友好的API設計，目前依然是使用最廣泛的前端框架。

如果用車比較的話，前幾種框架可以看做汽車零件，而QUICK UI則非常接近於一輛完整的汽車。它定位是一套用於開發企業級應用的產品，所以對品質的要求非常高，包含了上百種組件，上千種示例演示功能特性，例如一個數據表格組件就擁有近100項功能點，包括跨行跨列的複雜表格、樹形表、父子表、即時編輯表格等等。

跟其他框架不同在於，QUICK UI不僅僅是一套組件庫，它還有一套很便利的皮膚機制，搭配皮膚包可以實現效果的千變萬化，讓你的項目不再是千篇一律的單調風格，滿足企業級開發需要。

不足之處在於因為它是面向企業的商業產品，個人開發者可能承擔不了費用。不過官方也推出了針對個人開發者的免費版本。

官網地址：http://www.uileader.com

作為一個軟體開發者，最大的挑戰就是在不斷湧現的新技術中進行取捨，持續學習是從事這一行業的必備技能。在這個領域裡，技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏，呈現出一派欣欣向榮之景。

在項目中必不可少的便是前端，它是系統的門面、是用戶對系統最直接的體驗，顏值高低也是決定系統好壞的關鍵，那麼作為一名軟體開發攻城獅，怎麼能放棄這片藍海呢？沒準了解了解前端的世界，就能多一項技能、升職加薪、贏取白(gao)富(fu)美(shuai)、走向人生巔峰呢？

那麼，在一個項目中，我們要回答的第一個問題就是「這麼多的框架，該使用哪一個？」這篇文章將嘗試從項目實施相關方面入手，對目前大熱框架的特點進行分析，幫助你選擇最合適的一款。

由於篇幅有限、框架眾多，在分析之前，我們從版本更新頻度和社區活躍度來進行初步的篩選。已經出現了比較久的Backbone和Knockout, 目前流行度正在持續衰退，說明市場已經做出了選擇，市面上出現了更有競爭力的替代品; 還有aurelia這類的新湧現者，需要等待時間的檢驗。

但是在一個商業項目中，一個有活躍社區支撐，並能得到長期支持的框架無疑能給我們更大的信心。因此，Angular, Ember，Vue或者React都是理想的選擇。

那麼在項目實施中，我們一般會關注哪些方面呢？

有過前端開發經驗的同僚們可能會想到：要有可復用的組件，要控制質量做測試和靜態檢查，要有組件隔離的樣式方便實現Responsive，要打包部署方便，最好學起來不要太複雜，方便能力建設、節省招聘成本等等。

接下來，我們將從組件復用、測試和學習曲線這三個主要的方面對Angular4,Ember.js，Vue.js和React這四個當前最流行的框架來做更深入的分析，提供更具體的參考。

1. 可復用的組件

組件復用是每個項目都會重點關注的一個維度。合適的、職責單一的組件會大大提升新特性的開發效率和工程的可維護性，也能方便地進行測試。那麼他們的表現都如何呢：

概括起來，就是Vue、Component的組件相對靈活、輕量，添加依賴就可以無縫集成到遺留系統中。對於從0到1的系統，也可以使用新的實踐來構建工程，例如ES6、Webpack等技術。Angular4官方推薦使用TypeScript，這需要單獨構建和打包，不方便與遺留系統集成。Ember.js自定義了一整套生態，基於CoC理念的設計，採用了前端工程中比較前沿的實踐和標準，很難與遺留系統集成，更適合在新項目中使用。至於數據綁定，各有優勢。雙向綁定在表單交互多的場景中更便捷，單向綁定在管理跟蹤記錄組件狀態時更高效。組件狀態更新，各有不同的實現:

Vue2.js通過定義setter來監聽狀態變化，特殊場景需要特殊的API支持, 基於virtual DOM的視圖更新。
React在組件的狀態或屬性的變化後，也是基於virtual DOM的視圖更新。
Angular4在引起狀態變化的時刻，框架自動觸發臟檢查，也可以手動執行臟檢查，直接操作HTML DOM更新視圖。
Ember.js提供數據模型，所有數據的操作通過API執行，使用Glimmer引擎進行HTML渲染和更新。

其中，主要的區別是Angular4是通過事件監聽，對比數據更新，直接操作DOM來更新視圖，而其它都通過Virtual DOM的思路來更新視圖。

2. 組件測試

測試是提高軟體質量的有效手段，易於編寫測試的框架，能降低編寫測試的成本，充足的測試也能提高我們交付軟體的信心。它們在組件測試方面的比較如下：

可見，Vue, React測試靈活，可以根據項目具體情況來定製，但是沒有統一的測試實踐規範，對開發人員的能力有較大依賴。Angular4和Ember概念多，有官方推薦的實踐，要完全掌握難度大，優勢是實現起來更規範。

3. 學習曲線

在技術選型過程中，保證項目按時交付，控制風險，團隊能力建設提升，都是需要考慮的因素。作為一個軟體服務公司，如何快速的提升人員能力，選用學習曲線合適的框架，控制項目成本也是一門技術活。下面，對使用這些框架的難度進行了一些簡要分析：

總結

通過上面三個維度的分析，我們發現Vue.js和React的重點更側重於創建可復用、易於測試、能靈活集成的組件。當然，通過其它擴展組件，以及一些腳手架插件的支持，也可以方便的搭建一個採用最新實踐的前端應用的構建框架。它們最大的優點是按需定製，學習曲線平滑，構建出來的應用小而精。

相對來說，Angular4和Ember是大而全的框架，它們更側重於大型前端工程的構建，為開發人員屏蔽項目構建底層的細節，提出了自己的一套解決方案。使用它們的難點是要度過前期曲線陡峭的學習期，優點是由於使用了標準化的開發方式，後期能極大的提高開發生產力，提升開發效率。

最後，說了這麼多，大家在具體選型時還是要首先分析自己的需求和現狀，然後再做選擇。不求最酷炫，只求最合適！

Bootstrap+angularJS

看看前端框架的趨勢和熱度吧框架 - awesomes

前端框架多如牛毛，好亂

用數據說話

http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

大家覺得mui怎麼樣

angular+bootstrap+jQuery，後台java，妥妥的。不必那麼多、厚、秀，夠用，能用，好用即可。

學好vue就可以了

jQuery

FB系列：React/Flux/Redux

TW系列：Bootstrap/Flight

Google系列：Angular

其他的好像都說到了。。

工具：

webpack/gulp/grunt/bower/bable/...

我現在正在學bootstrap,公司在做後台模板，我這整天改改改，速度不是很快

一直在做後台，最初的前台就是jsp，後來用過extjs，再後來直接用jquery

現在在學bootstrap，前端框架太多了，但是不是都適用。

然而 jQuery、Bootstrap、React、Angular 剛好都不是一個層面的，都是可以同時使用的。（React 和 Angular 配合稍微麻煩一點，但是也是可以的。）

並不存在幾選一的問題。

Front-end Choice Paralysis

iview,vue,jq

給陳小二同學做個補充，陳小二同學整理的很清晰，我就不班門弄斧了

現在比較流行的組合html5+css（bootstrap）＋jquery，資料比較豐富，新入門的可以考慮先熟悉這幾個框架，在深入學另外的一些。

言歸正傳，說了這麼多框架，話題重心學習這些框架的知識在這裡

牧虎網 - 一站式IT技術高價值資源分享平台

誰帶帶我，新人。