後端程序員寫前端用什麼框架好

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

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

1級——純html+css

放5年前，基本就是用Dreamweaver剛排出來的頁面或者網頁查看源代碼扒下來的皮膚。不涉及到js，就是純頁面皮膚。

---

2級—— bootstrap系列

bootstrap的出現是一個里程碑事件。引入了很多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應用。

最後告訴你們，這些都是幾年前我爲了治療本身的選擇恐懼症而進行的一些分析。

如今，答主我已經再也不糾結各類前端框架了。

---

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

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

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

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

固然啦，事無絕對，若是你像我同樣興趣普遍，喜歡折騰，先後端雙修，那你天然清楚該選什麼前端框架，也就不會到知乎上來問這個問題了。

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

Materialize前端只須要簡單的設計就搞定。後端寫起來駕輕就熟，真是方便。
Admin LTE：基於Bootstrap的一套後臺系統

https://www.zhihu.com/questio...