maeda-m / frontend-challenges

MIT License
0 stars 0 forks source link

CSS(+ UI )フレームワークを選定する #3

Open maeda-m opened 3 years ago

maeda-m commented 3 years ago

なぜやるのか?

背景

この issue の経緯 > Vuetify3 は開発中なので実装されていないUIコンポーネントがあった。Vue3 をサポートした別のフレームワークに方向転換してもいいかもしれない。 > > ※ そもそもビルド設定が楽な vite を採用したので親和性の高い Vue.js を選んだ。あとは、なし崩し的に最新の Vue3 を試したので、Vue3 が必須というわけではないが試すのであれば最新バージョンが良いと考えている。 > > 次へのアクションはチャレンジの要素に応じて他のビルドツールやフレームワークを見直す。見直した結果現状維持でもいい(比較した結果や判断はどこかに書くこと)。 > > https://github.com/maeda-m/frontend-challenges/pull/2#issuecomment-895709437

これまでのチャレンジは Material Design の CSS + UI フレームワークの Vuetify v3.0.0-alpha 版を Vue3 上で使用している。あまり比較せずに UIコンポーネントが手軽に利用できる Vue3 対応のフレームワークでよく目にしているものを選んでいた。

https://github.com/vuejs/awesome-vue#frameworks

目的

次のチャレンジに着手する前に、比較対象の洗い出しや何を重視するかを明らかにしておきたい。

現状分析

補足

今後のチャレンジ候補は次の2つ

  1. https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G
  2. https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca
maeda-m commented 3 years ago

2021-08-10 現在のVue.js 3 対応(もしくは依存しない)ライブラリ/フレームワークを挙げた(SSR等については考慮しない)。

Name Latest Star Website Repository
Quasar Framework v2.0.3 19.2k https://quasar.dev/ quasarframework/quasar
Ionic Framework v5.6.13 45k https://ionicframework.com/docs/vue/overview ionic-team/ionic-framework
BalmUI v9.35.1 196 https://next-material.balmjs.com/#/ balmjs/balm-ui
Naïve UI v2.16.2 5.2k https://www.naiveui.com/en-US/os-theme TuSimple/naive-ui
Qui v0.2.0 46 https://qvant-lab.github.io/qui-max/ Qvant-lab/qui-max
Vuestic UI v1.2.1 621 https://vuestic.dev/ epicmaxco/vuestic-ui
SuperBVue v0.1.10 9 https://superbvue.netlify.app/ superbvue/SuperBVue
Wave UI v1.37.1 244 https://antoniandre.github.io/wave-ui/ antoniandre/wave-ui
Oruga UI v0.4.3 410 https://oruga.io/ oruga-ui/oruga
PrimeVue v3.6.2 1.5k https://primefaces.org/primevue/ primefaces/primevue
Bootstrap v5.1.0 152k https://getbootstrap.com/ twbs/bootstrap
tailwindcss 1 v2.2.7 45.5k https://tailwindcss.com/ tailwindlabs/tailwindcss
Bulma v0.9.3 44.1k https://bulma.io/ jgthms/bulma
Materialize v1.0.0 38.6k https://materializecss.com/ Dogfalo/materialize

[1]: UIコンポーネントは含まない

上記の候補に対して調査する。共通する判断基準(何を重視するかや好み)を挙げて 🥇🥈🥉 などで順位付けする。

maeda-m commented 3 years ago

4 では tailwindcss 互換の https://windicss.org/ を利用した。

コンポーネントが少なかったので apply や screen を活用して、やりたいようにできた。 🥇