2023年のゼロランタイムCSS in JS⚡️ を考える

by yud0uhu

Slide 1

Slide 1 text

2023年のゼロランタイムCSS in JS ️ を考えるフロントエンドカンファレンス沖縄2023 0yu@yud0uhu

Slide 2

Slide 2 text

0yu(おゆ) E 合同会社DMM.com 23新 E Webフロントエンドエンジニ E 猫と甘いものと映画が好き自己紹介 @yud0uhu @yud0uhu

Slide 3

Slide 3 text

CSSフレームワーク何を使っていますか？

Slide 4

Slide 4 text

最近のCSSフレームワーク事情最近のCSSフレームワーク事情 Next.jsのサポートするスタイリングアプローP v Global CS7 v CSS ModuleH v Tailwind CS7 v SasH v CSS-in-JS Learn Next.js のサンプルコードはCSS Modules or Tailwind CSS が使われている

Slide 5

Slide 5 text

最近のCSSフレームワーク事情認知度

Slide 6

Slide 6 text

最近のCSSフレームワーク事情利用率

Slide 7

Slide 7 text

最近のCSSフレームワーク事情興味度

Slide 8

Slide 8 text

最近のCSSフレームワーク事情満足度

Slide 9

Slide 9 text

技術調査の背景

Slide 10

Slide 10 text

技術調査の背景技術調査の背景社内のとあるプロジェクトでEmotionを使っていU EmotionをはじめとしたランタイムCSS-in-JSでは、スタイル描画によるパフォーマンス上のオーバーヘッドが肥大化する懸念があっU そもそもApp RouterはEmotionに対応していなV このような課題を解消するため、新たなCSS環境への移行を検討

Slide 11

Slide 11 text

評価観点

Slide 12

Slide 12 text

評価観点評価観点 2 パフォーマン& 2 学習コス! 2 Next.js(SSR)環境で問題なく使えること

Slide 13

Slide 13 text

CSS-in-JSにおける選択肢

Slide 14

Slide 14 text

CSS-in-JSにおける選択肢ランタイム or ゼロランタイム or ハイブリッド

Slide 15

Slide 15 text

技術選定調査のために行ったこと

Slide 16

Slide 16 text

01 選定ライブラリの検討 02 リファレンスコードの作成 03 パフォーマンス測定の実施 04 チーム内フィードバック技術選定調査のために行なったこと

Slide 17

Slide 17 text

01 選定ライブラリの決定

Slide 18

Slide 18 text

選定ライブラリの決定選定ライブラリの決定 " CSS Module " Kuma U " Panda CS# " Linalia

Slide 19

Slide 19 text

02 リファレンスコードの作成

Slide 20

Slide 20 text

リファレンスコードの作成リファレンスコードの作成 A 各種ライブラリを用いてボタンコンポーネントを実装し、リファレンスコードを作成

Slide 21

Slide 21 text

リファレンスコードの作成観点の洗い出し

Slide 22

Slide 22 text

03 パフォーマンス測定の実施

Slide 23

Slide 23 text

パフォーマンス測定の実施パフォーマンス測定の実施比較のため、各種ライブラリ導入下でベンチマーク測定を実Y 5000枚のダミーイメージをレンダリングするコンポーネントを作成し、レンダリングにどの程度の時間を要したかを計測・評C 検証に使用したリポジトf 7 https://github.com/yud0uhu/css-optimization-benchmarks

Slide 24

Slide 24 text

パフォーマンス測定の実施パフォーマンス測定の実施

Slide 25

Slide 25 text

04 チーム内フィードバック

Slide 26

Slide 26 text

チーム内フィードバックチーム内フィードバック r チーム内デイリーでパフォーマンスの計測結果とリファレンスコードを提示し、メンバーからフィードバックをもら1 r Panda CSS派とKuma UI派で割れe r 結果、Kuma UIの導入を検討することに

Slide 27

Slide 27 text

Kuma UIについて

Slide 28

Slide 28 text

Kuma UIについて Kuma UIについて i ヘッドレスなUIコンポーネント集とゼロランタイムで動くCSS in JS を兼ねたライブラ i ビルド時に決定できるスタイルを静的に抽出し、動的に変更される可能性のあるスタイルに対しては実行時にDirty Checking を行なうことで、ハイブリッドなアプローチを実 i ヘッドレスUIコンポーネントを兼ねるため、独自のデザイントークンの組み合わせも可能

Slide 29

Slide 29 text

Kuma UIについて Kuma UIについて z 既存コードにEmotionに依存した動的スタイル処理が多 z css APIやstyled APIを使うとEmotionライクに書くことができるが、現状ハイブリッド環境で動作するのはUIコンポーネント + Utility propsを使う記法の( z そのため、基本的に置き換えはUtility propsで行~ z Utility propsは一部のCSSプロパティが非対0 z :-webkit-scrollbar な# z このようなプロパティは公式のサポートを待ちつつ、CSS Modulesで補って開発を行う方針

Slide 30

Slide 30 text

最後に最後に 7 Kuma UIや他のCSSライブラリの導入事例などあれば、ぜひ懇親会でお話ししましょう！