livewire best practices
2.1.1
Dieses Repository ist eine kuratierte Liste allgemeiner Empfehlungen zur Verwendung des Laravel Livewire-Frameworks, um Unternehmensanliegen hinsichtlich Sicherheit, Leistung und Wartung von Livewire-Komponenten zu erfüllen.
Mein Name ist Michael Rubél und ich habe 2019 mit der Nutzung des Livewire-Frameworks begonnen, als es neu und kaum stabil war. Damals war ich beeindruckt davon, wie schnell dynamische Benutzeroberflächen ohne den Einsatz von JavaScript ausgeliefert werden können. Aber wie jede Softwarelösung hatte sie ihre Tücken, mit denen ich mich auseinandersetzen musste. Das Hauptziel dieses Repositorys besteht darin, die wichtigsten Erfahrungen zu sammeln, die Sie bei der Arbeit mit Livewire berücksichtigen müssen.
Fangen wir an...
Livewire erfordert ein Stammelement (div) in jeder Komponente. Sie sollten immer Code in <div>Your Code Here</div> schreiben. Das Weglassen dieser Struktur führt zu vielen Problemen bei der Aktualisierung von Komponenten.
Beispiel
Don't pass large objects to Livewire components!Vermeiden Sie nach Möglichkeit die Übergabe von Objekten an die öffentlichen Eigenschaften der Komponente. Verwenden Sie primitive Typen: Zeichenfolgen, Ganzzahlen, Arrays usw. Das liegt daran, dass Livewire die Nutzdaten Ihrer Komponente bei jeder Anfrage an den Server serialisiert/deserialisiert, um den Status zwischen Frontend und Backend zu teilen. Wenn Sie an Objekten arbeiten müssen, können Sie diese innerhalb einer Methode oder berechneten Eigenschaft erstellen und dann das Ergebnis der Verarbeitung zurückgeben.
Was ist bei einem großen Objekt zu beachten?
Hinweis: Wenn Sie Ganzseitenkomponenten verwenden, empfiehlt es sich, Objekte in der Ganzseitenkomponente selbst abzurufen und sie dann unten als primitive Typen an die verschachtelten Komponenten zu übergeben.
Wenn Sie eine Livewire-Komponente (0) hatten, die eine andere Livewire-Komponente (1) enthält, sollten Sie diese nicht tiefer verschachteln (2+). Zu viel Verschachtelung kann beim Umgang mit DOM-Differenzproblemen Kopfschmerzen bereiten.
Bevorzugen Sie außerdem die Verwendung von Blade-Komponenten, wenn Sie die Verschachtelung verwenden. Diese können mit der Livewire-Komponente des übergeordneten Elements kommunizieren, haben aber nicht den Mehraufwand, den Livewire mit sich bringt.
Beispiel
Livewire v3 führte eine neue Abstraktionsebene namens Form Objects ein. Verwenden Sie sie immer, denn dadurch sind Ihre Komponenten auf lange Sicht besser wartbar.
Dokumente
Vermeiden Sie Situationen, die zur Weitergabe sensibler Daten an die Livewire-Komponenten führen können, da auf diese standardmäßig problemlos von der Client-Seite aus zugegriffen werden kann. Ab Livewire Version 3 können Sie die Eigenschaften im Frontend mit dem Attribut #[Locked] ausblenden.
Anstatt die Seite ständig abzufragen, um Ihre Daten zu aktualisieren, können Sie Ereignis-Listener verwenden, um die Komponentenaktualisierung erst durchzuführen, nachdem eine bestimmte Aufgabe von einer anderen Komponente initiiert wurde.
Beispiel
Sie können berechnete Eigenschaften verwenden, um unnötige Datenbankabfragen zu vermeiden. Berechnete Eigenschaften werden innerhalb des Lebenszyklus der Komponente zwischengespeichert und nicht mehrmals in der Komponentenklasse oder der Blade-Ansicht ausgeführt. Ab Livewire v3 kann das Ergebnis berechneter Eigenschaften auch im generischen Cache auf Anwendungsebene (z. B. Redis) zwischengespeichert werden, siehe.
Beispiel
Übergeben Sie nur eine ID oder UUID an die mount -Methode und ordnen Sie dann die Modellattribute den Komponenteneigenschaften zu. Denken Sie daran: Weisen Sie nicht ein ganzes Modell zu, sondern nur seine Attribute. Um die manuelle Zuordnung von Modellattributen zu vermeiden, können Sie die fill verwenden.
Beispiel
Vermeiden Sie die Verwendung des Modifikators „ live wire:model“. Dadurch werden unnötige Anfragen an den Server drastisch reduziert. In Livewire Version 3 werden alle Modelle standardmäßig zurückgestellt (alt: defer -Modifikator), was gut ist.
Beispiele
Livewire verfügt über integrierte Artisan-Befehle zum Erstellen, Verschieben, Umbenennen von Komponenten usw. Anstatt Dateien manuell umzubenennen, was fehleranfällig sein könnte, können Sie beispielsweise den folgenden Befehl verwenden:
php artisan livewire:move Old/Path/To/Component New/Path/To/Component Sie können Ladezustände verwenden, um UX zu verbessern. Es zeigt dem Benutzer an, dass etwas im Hintergrund passiert, wenn Ihr Prozess länger als erwartet läuft. Um Flackern zu vermeiden, können Sie den delay verwenden.
Beispiel
Anstatt das Rendern der Seite zu blockieren, bis Ihre Daten bereit sind, können Sie mithilfe der Lazy-Loading-Technik einen Platzhalter erstellen, um die Reaktionsfähigkeit Ihrer Benutzeroberfläche zu verbessern.
Beispiel
Synchronisieren Sie Ihre Daten mit dem Backend mithilfe der $wire.entangle-Anweisung. Auf diese Weise wird das Modell sofort im Frontend aktualisiert und die Daten bleiben serverseitig bestehen, nachdem die Netzwerkanforderung den Server erreicht. Es verbessert das Benutzererlebnis auf langsamen Geräten erheblich. Dieser Ansatz wird in anderen Frontend-Communities als „Optimistic Response“ oder „Optimistic UI“ bezeichnet.
Beispiel
Livewire unterstützt Formularanfragen intern nicht, aber anstatt das Array von Validierungsregeln in der Komponente fest zu codieren, können Sie es direkt von Form Request abrufen. Auf diese Weise können Sie dieselben Validierungsregeln in verschiedenen Anwendungsschichten wiederverwenden, beispielsweise in API-Endpunkten.
Beispiel
Selbst einfache Tests können sehr hilfreich sein, wenn Sie etwas an der Komponente ändern. Livewire verfügt über eine unkomplizierte und dennoch leistungsstarke Test-API.
Arbeiten Sie täglich mit Livewire?
Schlagen Sie Ihre Best Practices vor, wenn Sie diese nicht in der Liste finden.
Wenn Sie nicht sicher sind, ob es sich um eine gute Vorgehensweise handelt, können Sie eine Diskussion beginnen.
