關於後端程序員寫前端用什麼框架更好？

11-24

目前在用extjs感覺還不錯，想問問還有類似的比較全面的JS框架嗎，要帶完整控制項庫的，不需要angular這種前端把後端活幹了的東西

幾年前，還是痴迷java的那會兒，我也曾糾結於前端框架的選擇。試圖找出一套一勞永逸的前端框架繼承到項目架構中。搜遍全網得出以下結論：

各大前端框架可以按照「封裝度」的標準來區分。

設計剛出的一套網頁皮膚，封裝度為0。層層封裝到可以直接用後台語言寫頁面，封裝度為10。那麼我是這樣來區分前端框架的。

1級——純html+css
放5年前，基本就是用Dreamweaver剛排出來的頁面或者網頁查看源代碼扒下來的皮膚。不涉及到js，就是純頁面皮膚。
--------------------------------
2級—— bootstrap系列
bootstrap的出現是一個里程碑事件。發源於twitter，引入了不少html5/css3的特性。由於它對響應式的支持以及良好的體驗，給人一種耳目一新的感覺。其源碼，不管是css還是js都值得學習一下，看後經常會有「原來還可以這樣做」這種恍然大悟的感覺。不過歸根結底是一套ui皮膚+少量js組成的框架，屬於封裝度偏低的框架。經典頁面大概是這樣：

--------------------------------
3~4級—— metronic/adminLTE系列
基於bootstrap或者其他1級框架，然後集成了各種jQuery插件、富文本編輯器等js庫，組成的一個大雜燴工具包和案例庫。皮膚基本是基於bootstrap自定義的一套主題。案例比較詳盡，開發的時候找到需要的組件把前端代碼複製粘貼，再稍微調試一下就能達到良好的視覺效果。根據集成的第三方庫的多少，基本可以劃分到3~4級封裝度這樣的範圍。這個級別的框架的代碼更多的是屬於粘合劑，將各種不同的第三方庫的前端代碼粘合起來。經典頁面大概是這樣：

--------------------------------
5級—— jQuery-ui
這裡要單獨把jQuery-ui拿出來講，並不是因為它的封裝度有多高，而是我認為它是一個分界點。jQuery以下級別的框架，代碼以css為主，自身的js代碼少，框架量級更輕，更靈活，更適合互聯網web產品。jQuery以上級別的框架，屬於前端的重度封裝，通過框架暴露的介面進行開發，開發人員甚至不需要太多前端知識，只需要詳細查看框架的開發文檔即可。jQuery以上級別的框架更適合傳統管理軟體的開發。
--------------------------------
6~7級—— easy-ui/DWZ
easy-ui基於jQuery-ui，不過具有更豐富的組件庫。貌似商業版收費很高。聽說某大型國企花了大價錢購買下來使用。DWZ是國產框架中我認為綜合表現還不錯的，完全免費，有問題可以在他們的QQ群里提。其餘的之前還用過金蝶的operamasks-ui，不過現在好像已經不更新了。這一類級別的框架還有一個另外的稱呼——「富客戶端框架」，意思就是重度js框架。使用起來開發效率很高，當年也是一度百花齊放，框架輩出。經典頁面大概是這樣：

--------------------------------
8級—— extjs系列
extjs屬於前端框架領域中的龐然大物，封裝程度很高，具有自成體系的元素選擇引擎和瀏覽器兼容方案，js寫法上也有自己的方式。組件很多很全。只看extjs的官方文檔和示例幾乎不必學習任何其他的前端知識就可以做出「很漂亮」的前端頁面。當然頁面很容易「撞衫」。使用時間長了，會對其產生嚴重依賴，離開extjs，幾乎不會寫前端頁面了。經典頁面大概是這樣：

--------------------------------
9級——vaadin/GWT
最後一級，也是封裝度最高的一級，也就是所謂的使用後台語言寫前端。如果說之前的八級至少前端和後端還是相對分離的，後台程序在java中寫，前台程序在html或者js中寫；那麼這一級別的框架簡直會顛覆你的認知！只需在後台使用java寫好了類和對象，並設置好相關的屬性，網頁的元素是自動通過後台對象生成的。這當然有好處，媽媽再也不用擔心我不會寫js和css了。然而就學一下html/css/js真的那麼難嗎？個人認為，儘管GWT有google的這麼強悍的背書，但是這種9級封裝的本質上把前後台耦合得更緊密。一個人做一個項目還可以考慮，但是一個團隊前後台分離、模塊化開發的時候，使用這種框架是一種災難！所以我是極度不建議使用9級封裝框架的。
--------------------------------

綜上，針對不同的編程方式，給出以下參考：

1 DOP（Deadline Oriented Program，面向截止日期編程）的程序猿們有兩種選擇：a、努力學習html/css/js，使用2~3級框架；b、看不上前端代碼的，6~8級是不錯的選擇。對於業務優先、老闆整天嚷嚷時間有多緊、客戶有多急切的項目，你可以直接選b了，我覺得老闆是不會給你時間學習html/css/js的。

2 EOP（Experience Oriented Program，面向用戶體驗編程）的程序猿們，大多數做的是追求極致用戶體驗的互聯網產品吧。那果斷選1級封裝度的框架，可適當借鑒2~4級的框架。

3 MOP（Money Oriented Program，面向人民幣編程）對於一直做後台，趁過年放假想賺個外快的程序猿們，我知道你們也不想在前端領域有多大發展，搞好後台就足夠一輩子衣食無憂了，所以還是選擇6~8級吧。

此外，需要考慮搜索引擎優化的項目，慎用富客戶端或者重ajax應用。

什麼？你還需要考慮ie6的兼容性？出門左轉有一面牆，你可以撞上去了，不送！

最後告訴大家，這些都是幾年前我為了治療自己的選擇恐懼症而進行的一些分析。

現在，答主我已經不再糾結各種前端框架了。因為心中有劍，枝葉、落花皆可為劍。

----------------------------------------
有朋友提到backbonejs/angularjs/reactjs/vuejs這些新興框架，感覺很有必要補充完善一下這個答案。

大約五六年前，前端還是一個邊緣崗位，前端的工作中：css方面的由設計師用dreamveaver等工具順帶就做了；js方面的由後台程序員寫寫實現了效果就行了。

究其原因，主要還是由於當時在html5尚未大面積支持的情況下，瀏覽器網頁端的表現力有限。為增強表現力甚至還需要依靠flash的支持。近幾年隨著移動端的興起以及html5/css3等技術的推廣，web端表現力日漸豐富，也越來越複雜。

計算機這門學科就是這樣，當一件事物複雜到一定程度就一定有人抽象出各種框架來提高可維護性與可擴展性。

傳輸複雜了，有了osi 7層和5層框架；伺服器集群複雜了，有了雲計算各種框架；乃至銷售問題複雜了，也有人總結出《銷售技巧xx招》…這種抽象也是人類的一種基本思維方式。

前端崗位正是在網頁前端複雜性逐漸增加的推動下產生的。說實話，很多老程序員以前是是看不上前端行業的，認為無非是一些奇巧淫技而已。而現在，以javascript為基礎的前端技術已經成功逆襲，nodejs的發展更是讓js有了揚眉吐氣的一天。

現在回過頭來看backbonejs/angularjs/reactjs/vuejs系列框架，它們其實並不是給後台程序員準備的框架。不要輕信它們官網上的提到的「簡單易用快速上手」之類的宣傳語，那不是跟後台程序員和js初學者說的。如果你對js原型鏈、作用域、非同步回調的概念還很模糊，用了這些框架只會讓自己陷入泥潭難以自拔！

雖然你也可以將這些框架簡單粗暴得劃分到7級封裝度左右，但是我並不認為這些「深度前端」框架適合後台開發者。

當然啦，事無絕對，如果你像我一樣興趣廣泛，喜歡折騰，前後端雙修，那你自然清楚該選什麼前端框架，也就不會到知乎上來問這個問題了。

這就是現在的我，有了一定的前端功力，開源社區的森林裡那麼多豐富的資源，枝葉、落花都是利刃，也無需在框架上糾結了。

推薦兩個我自己使用顏值很高的前端框架：

Admin LTE：

基於Bootstrap的一套後台系統，有很多現成模板可使用，又好看又好用，必須推薦！我的開源項目wucao/JCatch用它做前端的。

官網：Free Bootstrap Admin Template

預覽：AdminLTE 2 | Dashboard

GitHub：almasaeed2010/AdminLTE · GitHub （目前star 7000+）

Materialize：

Material設計風格的前端框架，使用起來類似Bootstrap，非常漂亮，寫代碼的時候看著頁面也非常舒服。我的開源項目GitHub - wucao/JDeploy: JDeploy自動化部署平台就是用的它來做前端的。

官網：Documentation

GitHub：Dogfalo/materialize · GitHub （目前star 14000+）

前端後端都寫過，可以馬馬虎虎算個全棧，從維護伺服器到前端切圖，app開發什麼都干過。

技術是從後端入門的，所在的崗位也是xxx，java工程師。剛開始不會寫前端，要獨立實現個頁面或者功能總感覺不是很順暢，就會去找各種前端的模板啊框架來改改，總之看不上不醜，也還算滿意。再之後的一個階段，就會發現框架模板各種問題，大部分用框架和模板的網站都長一個樣，審美疲勞。並且要修改個樣式布局也是費盡。開始研究前端技術，各種css，html，js，最終算是大半個前端工程師，公司前端人手不夠就頂上去，發現寫web頁面也不是那麼複雜。再之後的一個階段，自己有些產品上的想法想自己做個網站，app之類的，自己寫覺得不夠快，然後就用一些模板和框架來實現大致的布局，自己修改適合自己的產品的樣式，更快的實現出產品去驗證。

所以我覺得這個過程是很有趣的：使用模板框架（小白）--------- 自己寫所有的布局樣式（入門掌握技術）---------- 使用模板框架。

先來看看最近使用模板框架自己做的幾個小產品：
1 materializecss Documentation - Materialize
Materialize
基於Google Material Design的現代化響應式前端框架。

當時看到這個Materialize那就是個酷啊，寫Android的時候也有好多Materialize的效果可用使用。看到這個庫的時候，各種效果真是省事，剛好那個時候微信裡面的H5比較火，就直接用這個框架搞了個網站。

前端只需要簡單的設計就搞定。後端寫起來得心應手，真是方便。

2 Amaze ~ 妹子 UI 中國首個開源 HTML5 跨屏前端框架
妹子UI，項目的名字色色的。框架和Bootstrap很像，當時選擇這個框架，是看了介紹說是和中國國情很符合。想想前幾年調試IE6的時候，我的心那是一萬個草泥馬。那就試試用。另外這妹子組裝了大量的js組件也還不錯，省得我再去寫。

拿來用用，剛好想做個在線教育的小產品，嗯嗯，用這個妹子幫著布局，樣式自己寫。PC和移動端都搞定。

————————————————————————————————————
回歸到第一個階段，後端大神前端小白，看著這一個一個界面，真是希望可以定義個對象，調用一下 finish 方法就搞定。最無奈的是前端小白連個後台界面都搞不定，真是衰。
我的辦法就是大神github，比如你要搞個admin後台管理，真是不會寫前端也不想寫，產品設計也沒啥要求。打開github，搜索"admin",關鍵詞可以自己各種想。

選擇 Most starts，必須一個一個是精品。比如我們打開第一個
AdminLTE - Free Premium Admin control Panel Theme That Is Based On Bootstrap 3.x。這是Bootstrap的模板。看看介紹

如果不入你的眼，接著挑，github讓你挑不完。這是方法，比告訴你幾十個模板強太多 。

第二個階段。審美疲勞啦，模板都一個樣，並且要修改個樣式，發現改完各種問題。該是後端大神學寫前端的時候啦，不介意的話後端大神也可以成為前端大神。
之前在知乎前端的一個問題里回答過本科生如何系統地學習前端開發？ - 秦墨魚的回答 - 知乎。感興趣的可以去看看，看著內容很多，對應剛入門的小白前端來說，大可不必一口氣學成胖子。我是從《css 權威指南》入門，然後看javascript的書一步一步過來的。

第三個階段。你該會的都會，你剩下的是選擇。都可以，沒有好和壞，沒有對和錯。天下武功唯快不破，合適你的最合適，合適你的最合適，合適你的最合適。剛開始說了幾個用框架開發的小產品，也可以不選擇框架。
比如這個最體系最負責的前端在線教學網站 - 攻城課堂，沒使用框架直接自己寫寫樣式也是不錯。

沒啥捷徑，沒有銀彈。選擇合適的。

react + redux + antd，後端程序員實戰表示這一套非常爽。

http://ant.design
支付寶出品的解決方案，上手容易，值得推薦

作為一個後端程序員，不想學HTML/JS/CSS的話，別寫前端了，寫了也沒法維護。

bootstrap+angularJS

其實Bootstrap對於CSS的幫助不是特別大，因為該懂的東西還是要去懂去學。
但是AngularJS就完全不一樣了。

推薦 QMUI 團隊 · GitHub 的開源 UI 框架 GitHub - QMUI/qmui_web: A front-end framework designed to improve the efficiency of UI development.，為幫助開發者實現特定的一整套 UI 而設計的框架。

對bootstrap做個封裝，用js渲染那些複雜的html結構，就不那麼麻煩了

Angular 2+TypeScript用用就知道了，簡直是給後端轉前端量身定製的。聽聽這些核心概念:服務，依賴注入，模板，指令（類似jsp tag），介面，類，類型檢查，裝飾器/註解……

找個好UI設計好後，直接手寫就好

用angularjs

我喜歡用 extjs，像寫java一樣。缺點是不可能用來寫面相互聯網的應用，因為壓根兒搜不到，風格也不對，不過做一些內部用的工具啊，查詢系統什麼的還是很方便的。

用react拼頁面，支付寶已經全棧搞起了

Typescript + 任何現在流行的 UI 庫比如React, Vue

不知樓主對js掌握多少，可以使用react，非常多的使用組件，非常推薦阿里開源的ant.design，使用起來非常的便捷

首先，程序員分為前台和後台，僅僅是從分工上的考慮而不是從技術上的考慮。真正的程序員必須精通多種開發技術，無論前台還是後台。從這個角度上來說，選擇什麼樣的框架，關鍵還是看你所在的組織的情況。

從普遍意義上來說，組織分工越細，人員越多，效率就越高。當然軟體開發還需要考慮很多其他因素，所以軟體開發領域裡面有一種衡量標準那就是軟體成熟度模型。

對於成熟高的組織，支持細分工的合作型框架明顯更合適，比如angular js。

對於其他的細節情況，可能需要多種框架的協同。

技術的選擇和組織，不是容易的事情。

https://vaadin.com/home

webpack + babelify + react + redux 和後端一樣寫寫就行了，require 什麼的和後端一樣用。爽死你

NodeJS + jQuery + 原生的CSS和JS