UI 框架的選用

前些陣子在社群上討論了一個話題，「哪一個 UI 框架好用？」這件事。

React 生態：mui 與 antd 沒什麼懸念

基本上在 React 的生態系中，毫無疑問的是對應 Material Design 的 mui，和對應 Ant Design 的 antd。有 Google 和螞蟻金服兩大公司保障，完整且成熟的設計系統，我覺得是完全沒有太大的問題。

Vue 生態就微妙了

再來就是 Vue 生態，但這就有點微妙。原來在 Vue2 時期有基於 Material 的 Vuetify，好用並且有好的設計基礎。但到 Vue3 時期出了問題，Vuetify 到非常晚期才完成新版的發布，沒有足夠的時間讓生態圈去使用，導致現在採用Vuetify的產品相當少。那 Ant Design 呢？在 React antd5 時，它做了巨大的改動，大幅提高這個庫的彈性與性能。但 Vue 並沒有隨之成長反倒是卡在 v4，也沒有針對 Vue3 進行客製化改版與調校。

退而求其次的 Element UI

那該選什麼框架呢？這時就可以提到一直在 Vue 的 UI 界舉足輕重的 Element UI，官方也有提供 UI Kit，可以說是退而求其次的二解。但大家都知道 Element UI 是開源社群維護，沒有大公司支持，Vue 升 3 時也發生了一些團隊變革，在框架選用上不得不要考量更多東西。

Quasar 少了 UI Kit，協作會卡住

也有人跟我提議 Quasar 好像也不錯吧？如果以工程師的角度，它確實蠻不錯的，內置的方法和工具都十分完善。然而我卻覺得它不理想，因為它會是讓前端和設計的協作成為窒礙難行的地方。其實關鍵是 Quasar 缺少了 UI Kit，沒有任何完整的 Guideline 與標準，代表設計要憑空捏造出這個 UI 架構。試想，工程師都不喜歡刻設計師想像的元件了，更別說再毫無規範的元件整理出規範，並照著元件樣式在 UI 稿件刻出來，真的非常不實際。

選 UI library 真正該考慮的事

選用一套 UI library 要考慮的不只是好用跟漂亮，也要考量協作和整合等等問題。更深一層是這個元件庫背後維護的團隊是否為長期可信賴的團隊，不會突然有一天要跟你收費或直接不維護。

那你可能想問，那真的要客製化要選什麼元件庫？

Tailwind CSS 囉～～～