反応物語のためのレードルの導入

Ladleはあなたの反応成分を開発し、テストするためのツールです.サポートComponent Story Format - コンセプトは広く人気がありますStorybook . 実際には、レードルは童話の交換のドロップとして開発されている-それはすでにあなたの既存のストーリーで動作する必要があります.

絵本❤️

Onでは、我々は物語の大ファンです.私たちは私たちのウェブmonorepoで物語の100以上のインスタンスがあります.私たちのチームは、開発、ショーケース、ドキュメントやテストの反応コンポーネントを使用します.我々は、自動的にすべての変更を使用して各絵本を展開し、自動視覚スナップショットテストを実行するCIベースのシステムを開発しました.これは毎日千回起こる.それは私たちのWebワークフローのための重要なツールです.パフォーマンスは非常に重要です.
残念なことに、ストーリーブックが我々が望むようにうまくやっていない地域があります.

生産ビルド時間-しばしばそれは私たちのCIの最も遅い部分です

devモードの起動時間-常に関連Prod

バンドル出力-ホスティングストレージ+スロー初期のインタラクティブな時間

メンテナンス-我々は、開発者のためのシームレスなセットアップを提供するために、その依存関係と構成をパッケージ化しましたしかし、アドオンversioningとmonorepoセットアップは、メンテナンスを難しくします

テスト-我々の自動化された視覚テストのために、ストーリーブックの静的リストをエクスポートしないので、別のプロセスでストーリーをクロールして解析する必要があります

次世代フロントエンドツーリング⚡

シフトが起こっている.ESモジュールはネイティブのすべてのブラウザとノードによってサポートされます.我々は、それらを提供するために、もはや私たちのコンポーネントをバンドルする必要はありません.これは、storybookと他のwebpackベースの環境のための主要な減速です.
レードルはVite . これは、ブラウザに直接モジュールを提供し、高速を使用してesbuild バンドルが依存関係に必要な場合.それは我々が探していたパフォーマンスの飛躍を提供します.

パフォーマンス番号⏱️

我々はBase Web ベンチマークLadleと最新のストーリーブックV 6に.4.19 .ベースのWebは、複雑なコンポーネントライブラリであり、約350話をしています.ストーリーブックは、デフォルトのブートストラップ設定を使用します.テストは、MBP 2018、I 7 2.7 GHzで行われます.時間は秒単位で測定され、より少ないです.

両方のレードルと童話キャッシュを利用します.初期のdev起動は6 s対58 sを要する.一旦キャッシュが構築されると、Ladleはほぼ即座に開始されます.ストーリーブックは、常に開始するには約25秒かかります.生産は、レードルでより速くおよそ4 xです.
もう一つの改善があります-熱い再荷重は、レードルで100 ms未満をとって、州を保存します.物語は2.5 sを取り、状態を保存しません.
また、ブラウザが最初にダウンロードしなければならないバンドルサイズとリソース量についても心配します.

Ladleビルドフォルダ4.6 MB対ストーリーブックの16.1 MB

Ladleは、デフォルトのストーリーを開き、388 MBをダウンロードします

これはどうやってできるの?Ladleコードは、それがどのように多くの物語が問題ではないので、デフォルトで各ストーリーを分割します.それは常に最初の束を合理的に保つ.

だけでなく📝

レードルは単一のパッケージとコマンドです.インストールとセットアップが簡単です-必要な設定はありません.その他の機能:

サポートのコントロール、リンク、暗いテーマ、RTLとプレビューモード

ビルトインのアドオンは常にURLを介して状態を維持-テストに便利です

キーボードフレンドリー

応答、no iframe

デフォルトで有効になっているコード分割と反応速いリフレッシュ

輸出 meta.json ストーリーと追加のメタデータのリストファイル

Programmatic API だから簡単に再パッケージすることができます

結論🔮

Webツールの新しいセットが来ていると巨大なパフォーマンスの勝利をもたらします.レードルは、開発、共有し、あなたの反応成分をテストするための大幅に高速な環境を提供するためにそれらを使用しています.準備ができましたかgive it a try ? また、チェックGitHub そして⭐.

mkdir my-ladle
cd my-ladle
yarn init --yes
yarn add @ladle/react react react-dom
mkdir src
echo "export const World = () => <p>Hey</p>;" > src/hello.stories.tsx
yarn ladle serve