livewire best practices
2.1.1
このリポジトリは、Livewire コンポーネントのセキュリティ、パフォーマンス、メンテナンスに関する企業の懸念を満たすために Laravel Livewire フレームワークを使用する方法に関する一般的な推奨事項を厳選したリストです。
私の名前は Michael Rubél です。Livewire フレームワークがまだ新しく、かろうじて安定していた 2019 年に使い始めました。当時、私は JavaScript を使用せずに動的 UI をいかに速く出荷できるかに感銘を受けました。しかし、他のソフトウェア ソリューションと同様に、これにも落とし穴があり、それに対処する必要がありました。このリポジトリの主な目的は、Livewire を使用するときに考慮する必要がある最も重要なエクスペリエンスを収集することです。
始めましょう...
Livewire では、各コンポーネントにルート要素 (div) が必要です。コードは常に<div>Your Code Here</div>内に記述する必要があります。この構造を省略すると、コンポーネントの更新時に多くの問題が発生します。
例
Don't pass large objects to Livewire components!可能であれば、コンポーネントのパブリック プロパティにオブジェクトを渡さないようにしてください。文字列、整数、配列などのプリミティブ型を使用します。これは、Livewire がサーバーへのリクエストごとにコンポーネントのペイロードをシリアル化/逆シリアル化して、フロントエンドとバックエンドの間で状態を共有するためです。オブジェクトを操作する必要がある場合は、メソッドまたは計算プロパティ内でオブジェクトを作成し、処理の結果を返すことができます。
大きなオブジェクトについては何を考慮すればよいでしょうか?
注: フルページ コンポーネントを使用する場合は、フルページ コンポーネント自体でオブジェクトをフェッチし、それらをプリミティブ タイプとして階下のネストされたコンポーネントに渡すことをお勧めします。
別の Livewire コンポーネント (1) を含む Livewire コンポーネント (0) がある場合、それをより深く (2+) ネストしないでください。ネストが多すぎると、DOM の差分の問題に対処するときに頭痛の種になる可能性があります。
また、ネストを使用する場合は、Blade コンポーネントの使用を優先します。Blade コンポーネントは、親の Livewire コンポーネントと通信できますが、Livewire によって追加されるオーバーヘッドはありません。
例
Livewire v3 では、 Form Objectsと呼ばれる新しい抽象化レイヤーが導入されました。長期的にはコンポーネントの保守が容易になるため、常にこれらを使用してください。
ドキュメント
Livewire コンポーネントにはデフォルトでクライアント側から簡単にアクセスできるため、機密データを Livewire コンポーネントに渡す可能性がある状況を避けてください。 Livewire バージョン 3 以降では、 #[Locked]属性を使用してフロントエンドからプロパティを非表示にすることができます。
ページを常にポーリングしてデータを更新する代わりに、イベント リスナーを使用して、別のコンポーネントから特定のタスクが開始された後にのみコンポーネントの更新を実行できます。
例
計算されたプロパティを使用すると、不必要なデータベース クエリを回避できます。計算されたプロパティはコンポーネントのライフサイクル内でキャッシュされ、コンポーネント クラスまたはブレード ビューで複数回実行されることはありません。 Livewire v3 以降では、計算されたプロパティの結果を汎用のアプリケーション レベルのキャッシュ (Redis など) にキャッシュすることもできます。を参照してください。
例
ID または UUID のみをmountメソッドに渡し、モデル属性をコンポーネント プロパティにマップします。注意: モデル全体を割り当てるのではなく、その属性のみを割り当ててください。モデル属性を手動でマッピングすることを避けるために、 fillメソッドを使用できます。
例
live Wire:model モディファイアの使用は避けてください。これにより、サーバーへの不要なリクエストが大幅に減少します。 Livewire バージョン 3 では、すべてのモデルがデフォルトで延期されます (旧: defer修飾子)。これは優れています。
例
Livewire には、コンポーネントの作成、移動、名前変更などを行うための Artisan コマンドが組み込まれています。たとえば、エラーが発生しやすいファイルの名前を手動で変更する代わりに、次のコマンドを使用できます。
php artisan livewire:move Old/Path/To/Component New/Path/To/Component読み込み状態を使用して UX を向上させることができます。プロセスの実行時間が予想よりも長い場合、バックグラウンドで何かが起こっていることがユーザーに示されます。ちらつきを避けるには、 delayモディファイアを使用できます。
例
データの準備ができるまでページのレンダリングをブロックする代わりに、遅延読み込み手法を使用してプレースホルダーを作成し、UI の応答性を高めることができます。
例
$wire.entangle ディレクティブを使用してデータをバックエンドと同期します。こうすることで、モデルはフロントエンドで即座に更新され、ネットワークリクエストがサーバーに到達した後もデータはサーバー側に保持されます。低速デバイスでのユーザー エクスペリエンスが大幅に向上します。このアプローチは、他のフロントエンド コミュニティでは「オプティミスティック レスポンス」または「オプティミスティック UI」と呼ばれています。
例
Livewire は内部的にフォーム リクエストをサポートしていませんが、コンポーネント内の検証ルールの配列をハードコーディングする代わりに、フォーム リクエストから直接取得できます。こうすることで、API エンドポイントなどの異なるアプリケーション層で同じ検証ルールを再利用できます。
例
単純なテストでも、コンポーネント内の何かを変更するときに非常に役立ちます。 Livewire には、簡単かつ強力なテスト API があります。
毎日 Livewire を使って作業していますか?
リストにベスト プラクティスが表示されない場合は、それを提案してください。
それが良い習慣であるかどうかわからない場合は、議論を始めることができます。
