摘要： 今天我們不聊技術，只"以貌取人"。
前言
之前有很多剛入門的小夥伴問我(上面是我的自拍照），現在前端Vue、React、Angular這三個框架似乎都很好，反而不知道選擇什麼了，我當時開玩笑的說你覺得哪個好看就選擇哪個唄。本人目前用的Angularjs做Fundebug開發時會經常去Google一些獨立的UI元件來實現某些功能，經常會情不自禁的去國內(下面列出)的這些官網去瞄幾眼，那種羨慕之情。。。哎。。。。
花痴的原因
- 我毫不隱諱我就是個"外貌協會"，如果做UI的樣子還不好看那基本GG了。
- 我的寫UI效果的水平著實不怎麼樣，寧願寫複雜的業務邏輯也不願意寫效果。。尷尬。。。
- 用UI框架能使我做專案的速度提高一倍，這可以使我少掉幾根頭髮，多些時間進行修身養性。
- 拿來主義沒有錯，看人家封裝的元件，我的程式碼水平其實提高了。有些高手一說到寫效果就是自己直接CSS，不推薦使用UI框架。
- 一套強大的UI框架可以解決90%以上的元件支援，專案輕量易維護。
選擇UI框架的原則
- Github上star多的，資料不會說假話。
- 後起之秀優先於老牌勁旅，我不但是"外貌協會"還"喜新厭舊"，只侷限在技術。
- 選擇國內的優先於國外的，個人感覺國外偏極客，至少樣子上不符合我的審美。
- 持續維護中的，持續輸出讓我們使用短期內沒有後顧之憂。
推薦UI框架
| UI框架 | Github Star | 環境 | 團隊 | |
|---|---|---|---|---|
 |
Element | 25K | vue | 國內 |
 |
iView | 14K | vue | 國內 |
 |
Material-UI | 34K | react | 國外 |
 |
Ant Design | 26K | react | 國內 |
 |
Angular Material | 13K | angular | 國外 |
 |
NG-ZORRO | 2.6K | angular | 國內 |
聽說長得好看的人不僅BUG少，還用Fundebug監控BUG。
其他UI框架
| UI框架 | Github Star | 環境 | 團隊 |
|---|---|---|---|
| Vue Antd | 1.4K | vue | 國內 |
| Vue-Blu | 1.2K | vue | 國內 |
| N3 | 0.8K | vue | 國內 |
| AliTelecom UI | 0.5K | vue | 國內 |
| Blueprint | 8.9K | react | 國外 |
| React-Toolbox | 7.8K | react | 國外 |
| React Desktop | 7.3K | react | 國外 |
| Semantic-UI-React | 6.5K | react | 國外 |
| Grommet | 3.1K | react | 國外 |
| Fabric | 2.4K | react | 國外 |
| React-md | 1.6K | react | 國外 |
| OnsenUI | 6.2K | Angular | 國外 |
| PrimeNG | 3.9K | Angular | 國外 |
| Semantic UI | 0.9K | Angular | 國外 |
| ng-lightning | 0.6K | Angular | 國外 |
| Kendo UI | 0.2K | Angular | 國外 |
有趣的資料
- 作者自動忽略Boostrap這個曾經的王者,如果大佬你是Boostrap的忠實粉絲請輕點噴,我其實也是個Boostrap使用者。
- 作者推薦的6個UI框架中其中：國內：4個 國外：2個。
- 上面列出的所有UI框架中Github的Star數其中：React：97.6K > Vue 42.9K > Angular 27.4K 。
- 上面列出的所有UI框架中Github的Star數其中屬於國內團隊開發的：Vue：42.9K > React 26K > Angular 2.6K 。
- 上面列出的所有UI框架中Github的Star數其中國內外的份額：國內：71.5K 國外：96.4K 。
- 上面列出來的所有UI框架中Vue全是國內團隊。
- 阿里Ant旗下支援React有Ant Design,支援Angular有NG-ZORRO(列出中唯一個國內支援Angular的）,但是支援Vue的Vue Antd沒有繼續維護了。