how-to-select-ui-framework.md

自分なりにUIフレームワーク決めのロジックをまとめたのでメモ書き。 UIフレームワークの大別とそのメリデメをまとめた上で、自分なりの決めのロジックを整理した。

UIフレームワーク大別

コンポーネントライブラリ

CSSとJavaScriptによって作られたUIコンポーネントを提供する。

• Vuetify
• Element
• Buefy
• Bootstrap Vue
• Material Components Web
• iView

GOOD 👍

• オールインワンなコンポーネントを利用出来る
  • 「デザインの最小単位」としてのコンポーネント設計をライブラリ仕様で落とせる
  • 「画面アクションの最小単位」としてのコンポーネント設計をライブラリ仕様で落とせる
  • つまり、コンポーネントの設計・開発コストを大きく削れる

BAD 👎

• コンポーネント仕様をアプリケーション単位でいじりにくい
  • 仕様を変えるには、裏で書かれているJavaScriptのロジックを追わないとダメ

Use it when.. ⏰

• コンポーネント仕様をコントロール出来る立場の場合
  • 新規案件、ゼロからスクラッチするパターン

CSSライブラリ

CSSのみを提供し、開発者はそこで定められたクラスを利用してデザインを設定出来る。

• Bulma
• Tailwind
• Tachyons

GOOD 👍

• CSSの提供に止まるため、コンポーネント仕様は自由自在
  • コンポーネントライブラリで起こり得る「えっ、こんなこと出来ないの、、」が無くなる（こちらの実装でカバー出来る）
    • JSFを例に書けば、Rendererを書いてクラス名だけCSSライブラリに準ずる形にするイメージ

BAD 👎

• CSSの提供に止まるため、コンポーネント仕様はデザイン・機能共に決めた上で開発をしないといけない
  • 設計・開発コストの削減にはあんまり寄与しない

Use it when.. ⏰

• 複雑・高難度なコンポーネントを作らないといけない場合
  • CSSフレームワークが、と言うより、コンポーネントライブラリが要件を満たせず候補から落ちる場合
• マイグレーション案件で、既存アプリケーションからコンポーネントの仕様を弄れない場合

Which framework is the best for me? 🤔

• 基本Vuetify
  • デスクトップアプリケーションならばElementも入る
  • ドキュメント量、ドキュメンテーションのクオリティ、機能からして2択なイメージ
  • Vuetifyはエンプラサポートもあると、仮に社用で用いる場合でも安心さがある
• マイグレーション案件ならばドキュメンテーションを買ってTailwindを推す
• 会社で用いる場合はデザイナーの画面イメージとも擦り合わせないとダメなので、、
  • 1）複雑なコンポーネント要件が無いか確認
  • 2）もし無い場合、Vuetifyで提案
  • 3）デザイン要件、デザインイメージ上そぐわない場合はElementもしくはiView
    • でも、iViewは内部向けサイト用なイメージで、BtoC向けに必要な華やかさはあんまり無い
    • Bootstrap系で良いコンポーネントライブラリが無いか、、
  • 4）もし複雑なコンポーネントがある場合は、CSSフレームワークは特にこだわりが無いので候補全てを並べてディスカッション