Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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