Slide 1

Slide 1 text

HVSVHVSVEFLJSVLP!TBJUBNBKT Alternative to Storybook を探す旅

Slide 2

Slide 2 text

【自己紹介】 guruguru-dekiruko ‣ 株式会社さかなファーム リードエンジニア ‣ 現状はフルサイクルエンジニアというやつ ‣ 東上線沿いに引っ越した ‣ 大宮駅より池袋駅の方が近くなってしまった😢

Slide 3

Slide 3 text

アドベントカレンダー被りました アクセシビリティ アドベントカレンダー 2022 の 7 日目を担当しました。 axe-core の Rules がテストされるまでをざっくり書く - きるこの日記帳 https://www.dkrk-blog.net/a11y/axe-rules

Slide 4

Slide 4 text

‣ Storybook の成熟したコミュニティとエコシステムは強い ‣ でも Storybook の運用はつらい ‣ v7 でどれだけ改善されるかにもよるが ‣ 代替手段を探すのは、「今のままで本当にいいのか」を問うきっかけとして悪くなかった tl;dr ※ 当 LT の内容は Storybook を否定するものではありません

Slide 5

Slide 5 text

Frontend workshop environment※ を構築する。 React 用だったが、現在では様々なライブラリ、フレームワークに対応。 ホスティング/テスティングの SaaS として Chromatic もある Storybook について ※ アプリケーションから独立したフロントエンドの環境、いわゆるデザインカタログ

Slide 6

Slide 6 text

旅のきっかけ プロジェクトの環境構築をしていて 「また Storybook を入れて本当にいいのか?」 とふと思った

Slide 7

Slide 7 text

Storybook でいつも思ってしまうこと① ‣ 肥大化 ‣ メンテナンスがつらい ‣ 主に依存関係のトラブル、Diamond Dependency Problem ‣ アップグレードもつらい ‣ メンテナー側も大変そう、日々対応に追われている感じがある ‣ "次のアップデートで直ります"

Slide 8

Slide 8 text

Storybook でいつも思ってしまうこと② ‣ Storybook, Chromatic にロックインされ続けるのでは ‣ Storybook が入っていて、テストまで回ってないと石を投げられる ‣ 「Chromatic を使ってテスト回してます」言うだけで採用戦略になり得る ‣ 6.5.0 から Telemetry がオプトインされて巨大な何かになってきた

Slide 9

Slide 9 text

Storybook やりたかったこと ‣ 唯一無二の UI カタログ ‣ Single Source of Truth の生成機構が壊れやすいのはつらい ‣ Figma とのコラボレーション ‣ Gist いじれば何でもいい(Storybook Connect プラグインが微妙) ‣ Play function とか Chromatic とか ‣ ヒソカ もう十分だ

Slide 10

Slide 10 text

「複雑さとトレードオフおじさんになりたくない」 「シンプルにカタログがあればいい。ただそれだけ」

Slide 11

Slide 11 text

Alternative to Storybook を探す旅へ ※ 表現は誇張しています。自宅から離れて滞在していた事実はありません

Slide 12

Slide 12 text

その前に Storybook v7 ‣Vite(esbuild) first でビルドの高速化 ‣ 全然関係ないが計測してコールドスタートとかの問題にも言及している良記事まである ‣ https://storybook.js.org/blog/storybook-performance-from-webpack-to-vite/ ‣余分な dependencies とファイルサイズの削減 ‣ 組み込み UI の事前 Bundle これに勝てないといけないのか

Slide 13

Slide 13 text

求めてみること ‣リッチすぎなくていい ‣ 機能も controles, a11y, docs があればいい ‣複雑さはない方がいい ‣ UI で React と Vue.js が一緒に動いてなくて emotion とか使ってなければいい ‣サイズでかい、ビルド遅い問題へのソリューションは重視しない ‣ Storybook も徐々にサポートしつつあるから

Slide 14

Slide 14 text

@ladle/react ‣ Vite (現状は cjs 版もある) ‣ CSF と互換性がある ‣ Control, a11y, Decorator などのアドオン ‣ ビルド時に各 Story の meta を生成してくれる ‣ テスト時にも使える ‣ core と renderer を分離し、React 以外もサポート予定 LTUBSSFE

Slide 15

Slide 15 text

Pitsby ‣ Storybook がつらくて開発された ‣ Webpack5 でビルドされる ‣ Playground がある ‣ React18 未サポート TUBSSFE

Slide 16

Slide 16 text

React Cosmos ‣ 使う側の Webpack を使う ‣ foo.fixture.js にコンポーネントを入れる ‣ fixture をメタデータとして出力する API がある ‣ docs や testing としてのライブラリでない ‣ port:5000 を使う。注意 ‣ React18 未サポート(v6 でサポート予定) LTUBSSFE

Slide 17

Slide 17 text

Histoire ‣ Vite & esbuild ‣ リッチな UI で多機能、アドオンもある ‣ ただし Plugin API の制約が多く拡張性はまだ ‣ Tailwind を検出してデザインガイドを生成 ‣ Tailwind ありきなのはちょっと気になる ‣ 解決に起因するトラブルが起きた… LTUBSSFE

Slide 18

Slide 18 text

感想 ‣ パラダイムシフトから作られているものは多め。IE 廃止と ESM と Vite ‣ Ladle と Histoire が良かった ‣ この 2 つは Contribute してみたいなと思った ‣ Ladle は v7 までの様子見で使ってみても良さそう ‣ 現状は Storybook が成熟していて強い、と思った ‣ ただ「Storybook で本当にいいのか?」を問ういい機会になった

Slide 19

Slide 19 text

旅は終わり、Storybook の代わりを見つけることができた。 それは、旅をすることで見つけることができる、新しい物語たちであった。 - ChatGPT まとめ

Slide 20

Slide 20 text

No content