做前端肯定離不開UI。
基于React的UI
React本身就是做VIEW的，被包裝成的React的組件，說白了就是一個(gè)封裝程度高的DOM對象。
自然而然的就會想到：如果有些庫，基于React，對一些網(wǎng)站中會常用DOM進(jìn)行一些封裝。開發(fā)者只要引入庫中的某些React組件，拿來用直接就是一些連樣式帶行為都有的頁面元素，豈不是對開發(fā)就方便了。
有些人就開發(fā)了一些這樣的庫。
最自然的想法就是：直接拿bootstrap封裝一下嘛，什么文本框，表格什么的。引進(jìn)來的時(shí)候傳入必要的參數(shù)作為數(shù)據(jù)，頁面直接就能呈現(xiàn)，連樣式帶數(shù)據(jù)都有了。你可以在上面的連接中找到這樣的庫。
我首先感興趣的還是Material UI。（但是后面我打臉了。因此，你可以直接跳轉(zhuǎn)到ANTD的章節(jié)。）
Material UI
它并不是谷歌出品，但它號稱實(shí)現(xiàn)了Google的Material Design。
所謂Material Design，有人這樣解釋：它是由Google推出的全新的設(shè)計(jì)語言，谷歌表示，這種設(shè)計(jì)語言旨在為手機(jī)、平板電腦、臺式機(jī)和“其他平臺”提供更一致、更廣泛的“外觀和感覺”。
你可以理解它是軟件人機(jī)界面設(shè)計(jì)的一套標(biāo)準(zhǔn)，在這套標(biāo)準(zhǔn)中，它定義的風(fēng)格和我們常見的iOS風(fēng)格各有千秋。
據(jù)墻外人士說，Google自家很多產(chǎn)品的界面就是aterial Design的。如G+。
Material UI 就是對這個(gè)標(biāo)準(zhǔn)的一個(gè)實(shí)現(xiàn)。簡單的說：它提供了一些React組件，如導(dǎo)航條、按鈕、列表等等等等，你在你的React項(xiàng)目中使用它們，它們就是符合MD的。
如果一個(gè)站點(diǎn)或者手機(jī)APP，整體都符合MD，那么它的風(fēng)格會很舒適，而且交互感非常棒。
Admin on REST
有了MU，我突然覺得就可以做前端SPA了。
結(jié)合我們到目前為止了解的所有技術(shù)：上一篇講的Redux、Router，它們的引入解決了工程文件架構(gòu)和耦合的問題，使前端工程整體清晰了。然后有了MU，我們只要把頁面布局好，在正確的地方引入對應(yīng)的組件，而且風(fēng)格自然就是MD的了。
但是，直到我發(fā)現(xiàn)了 Admin on REST。
法國一個(gè)公司出品（該公司也出品了github上萬star的項(xiàng)目ng-admin）。admin-on-rest號稱自己是一個(gè)前端的所謂的框架：用于構(gòu)建一個(gè)在瀏覽器端的WEB應(yīng)用（管理系統(tǒng)類），并且對后端的REST服務(wù)有良好的支持。而且號稱和融合上面我們那些技術(shù)。因?yàn)樗褪腔贛U的。
它封裝度非常高，入門教程20行代碼就可以搭建前端系統(tǒng)的雛形。入門教程你甚至不用懂React，你只需要把第一篇文章介紹的create-react-app跑起來就可以了。
這樣必然會帶來一個(gè)很大的缺點(diǎn)：封裝度越高，可定制度越低。我們之所以對全家桶又愛又恨，愛它因?yàn)樗子?，恨它因?yàn)樗混`活。因此，我們接下來需要看看admin on rest靈活性究竟怎樣。
- 相比于傳統(tǒng)全家桶，這個(gè)倒是專注于前端，它不必考慮后端的各種兼容問題，因此理論上可以給前端提供更高的可定制性和靈活性。并且它號稱兼容于我們之前提到的那些技術(shù)框架。
- 翻看了它的源碼，代碼量并不多。結(jié)合文檔，代碼思路也很清晰。
- 他的數(shù)據(jù)交互部分是符合RESTful風(fēng)格的?！疚覀兂ＵfRESTful，它到底是什么？在這里必須統(tǒng)一澄清一下。REST沒有新技術(shù)，也不是什么協(xié)議，它也沒有統(tǒng)一標(biāo)準(zhǔn)。到底什么叫風(fēng)格？舉個(gè)例子：你寫代碼段落縮進(jìn)是喜歡寫兩個(gè)空格還是四個(gè)空格？這就是你的個(gè)人風(fēng)格。那REST既然是一套風(fēng)格，那如果我們把這個(gè)風(fēng)格統(tǒng)一一下，都縮進(jìn)2個(gè)空格，那就成了我們自己定的標(biāo)準(zhǔn)了。說到這里，讓我們來認(rèn)識一下RESTful，請看阮一峰的 RESTful概念 、RESTful API標(biāo)準(zhǔn)】
- 因此它看起來就是對MU做了一些封裝，也不是很重。
- 國際化的功能有。也有cn的國際化庫。但是只是一個(gè)國人貢獻(xiàn)的而已，被官方采納了。一共沒有漢化幾個(gè)字，那個(gè)庫就60行代碼。不過我們倒是可以自己做國際化。
- 它目前不支持多級目錄?，F(xiàn)在的話，我們可以基于它現(xiàn)在這個(gè)版本改源碼實(shí)現(xiàn)。以后的話，不知道它后續(xù)的版本會不會提供官方支持。我看到github上作者已經(jīng)提交了類似自定義menu的相關(guān)代碼（2017-2-28），但是截止到今天（2017-3-2）還沒合并到master上。BTW，它上一個(gè)Pre Release版本（v0.8.3）Tag是上個(gè)月（2017-2-23）打的。
- 多級目錄也可以用其他方式實(shí)現(xiàn)，例如MU本身的Bottom Navigation、Divider + List、各類Menus 可以結(jié)合Popover、甚至Tabs也可以。
- 它目前不支持權(quán)限管理，這個(gè)框架本身并未做這方面的考慮。因?yàn)槲覀兊睦舷到y(tǒng)的權(quán)限管理是可以控制到增刪查改的。若在它的基礎(chǔ)上增加權(quán)限管理，需要解決的問題有兩個(gè)：1.不同的登錄用戶呈現(xiàn)的功能菜單項(xiàng)要有不同。這需要根據(jù)用戶的不同實(shí)現(xiàn)菜單項(xiàng)內(nèi)容的區(qū)別渲染。2.進(jìn)入某個(gè)具體功能后，組件呈現(xiàn)要有不同，因?yàn)楸热缬行┤擞行略鰟h除權(quán)限而有些人沒有。這需要根據(jù)用戶的權(quán)限對組件進(jìn)行區(qū)別渲染。
- 上面這兩點(diǎn)從技術(shù)上來說可以實(shí)現(xiàn)，技術(shù)難度待考。并且沒有最佳實(shí)踐可供參考：例如是應(yīng)該每次渲染時(shí)都請求呢，還是說應(yīng)該將用戶權(quán)限信息在登錄時(shí)請求一次并保存呢。
因此，基于它算是可以比較方便地進(jìn)行開發(fā)。
另一個(gè)前端框架（腳手架）
Admin-on-react算是一個(gè)腳手架。
其他的？很遺憾，到目前為止還沒有。
React的一直在找，VUE的另一個(gè)同事在找，到目前還沒找到。（Angular的沒人找，因?yàn)檫@個(gè)框架我們不打算用）最多的還是UI組件庫，但是腳手架只找到了上面那一個(gè)。
React是有些人搞些小玩鬧，比如這個(gè) react-SPA。
VUE那邊的UI也做得很不錯(cuò)如 VUE-ADMIN 和 VueJs AdminLTE等等。
說說JHipster
jHipster也說有React的版本，但是根本沒法用。我看了一下，它根本就還沒實(shí)現(xiàn)。
下面我們再來看一個(gè)UI庫 -- ANTD
后來，在緣分的驅(qū)使下，我找到了它。
它，老牌而成熟。它，自己定義了一套 ant Design 設(shè)計(jì)規(guī)范/理念，并且官方用React實(shí)現(xiàn)了。（同時(shí)也提供vue的等版本）
對不起，它只是一個(gè)UI庫，這樣的UI庫我在上面見多了。它并不是腳手架。
但是基于它的腳手架，有嗎？我找著找著。。。然后。。。我的天啊！我仿佛找到了開啟天堂大門的鑰匙！??！
首先，這個(gè)鑰匙直接帶領(lǐng)我們進(jìn)入了 dva-cli。先不管cli（command line interface），我先要搞DVA！
完善的中文資料糊了我一臉：我哩個(gè)擦！它竟然是阿里（支付寶）出品?。ü植坏媚敲达L(fēng)騷，取名叫DVA【擴(kuò)展閱讀：我才是真的DVA】）
所以，難道，那，你以為antd就不是阿里出品嗎？？哼，愚蠢的人類?。?！膚淺！！
今天我感受到了作為前端工程師的幸福。
好了，BB到這里。其他好奇之處請自行知乎。如果想達(dá)到精神方面和藝術(shù)家溝通和共鳴，請自行各種Github。我們要討論的是技術(shù)問題，而我要去研究它，分析它是否真的能給我們帶來幸福。
DVA
人人都需要入門：
先看Demo of antd-admin，直觀感受一下效果。
DVA甚至貼心地為我們準(zhǔn)備了入門前的概念講解和最小知識集講解，先要對概念和語法進(jìn)行一定的學(xué)習(xí)理解。
然后，開始官方教程。
UI選型結(jié)束
現(xiàn)在到這里我覺得選型對比已經(jīng)沒有必要了。
