livewire best practices
2.1.1
Ce référentiel est une liste organisée de recommandations générales sur la façon d'utiliser le framework Laravel Livewire pour répondre aux préoccupations des entreprises concernant la sécurité, les performances et la maintenance des composants Livewire.
Je m'appelle Michael Rubél et j'ai commencé à utiliser le framework Livewire en 2019 alors qu'il était nouveau et à peine stable. À l’époque, j’ai été impressionné par la rapidité avec laquelle les interfaces utilisateur dynamiques peuvent être livrées sans même utiliser JavaScript. Mais comme toute solution logicielle, elle avait ses pièges, et j'ai dû y faire face. L'objectif principal de ce référentiel est de collecter les expériences les plus importantes dont vous devez tenir compte lorsque vous travaillez avec Livewire.
Commençons...
Livewire nécessite un élément racine (div) dans chaque composant. Vous devez toujours écrire du code dans <div>Your Code Here</div> . Omettre cette structure entraînera de nombreux problèmes de mise à jour des composants.
Exemple
Don't pass large objects to Livewire components!Évitez si possible de transmettre des objets aux propriétés publiques du composant. Utilisez des types primitifs : chaînes, entiers, tableaux, etc. En effet, Livewire sérialise/désérialise la charge utile de votre composant à chaque demande au serveur de partager l'état entre le frontend et le backend. Si vous devez travailler sur des objets, vous pouvez les créer dans une méthode ou une propriété calculée, puis renvoyer le résultat du traitement.
Que considérer comme un gros objet ?
Remarque : si vous utilisez des composants pleine page, il est recommandé de récupérer les objets dans le composant pleine page lui-même, puis de les transmettre en bas aux composants imbriqués en tant que types primitifs.
Si vous aviez un composant Livewire (0) qui inclut un autre composant Livewire (1), vous ne devriez pas l'imbriquer plus profondément (2+). Trop d'imbrication peut être un casse-tête lorsqu'il s'agit de problèmes de différences DOM.
Préférez également l'utilisation de composants Blade lorsque vous utilisez l'imbrication, ils pourront communiquer avec le composant Livewire du parent mais n'auront pas la surcharge ajoutée par Livewire.
Exemple
Livewire v3 a introduit une nouvelle couche d'abstraction appelée Form Objects . Utilisez-les toujours car cela rend vos composants plus maintenables à long terme.
Documents
Évitez les situations pouvant conduire à la transmission de données sensibles aux composants Livewire, car elles sont facilement accessibles depuis le côté client par défaut. Vous pouvez masquer les propriétés du frontend en utilisant l'attribut #[Locked] à partir de Livewire version 3.
Au lieu d'interroger constamment la page pour actualiser vos données, vous pouvez utiliser des écouteurs d'événements pour effectuer la mise à jour du composant uniquement après qu'une tâche spécifique a été lancée à partir d'un autre composant.
Exemple
Vous pouvez utiliser des propriétés calculées pour éviter les requêtes de base de données inutiles. Les propriétés calculées sont mises en cache pendant le cycle de vie du composant et ne s'exécutent pas plusieurs fois dans la classe de composant ou dans la vue Blade. À partir de Livewire v3, le résultat des propriétés calculées peut également être mis en cache dans le cache générique au niveau de l'application (par exemple Redis), voir .
Exemple
Transmettez uniquement un ID ou un UUID à la méthode mount , puis mappez les attributs du modèle aux propriétés du composant. N'oubliez pas : n'attribuez pas un modèle entier, mais uniquement ses attributs. Pour éviter de mapper manuellement les attributs du modèle, vous pouvez utiliser la méthode fill .
Exemple
Évitez d'utiliser le modificateur live wire:model. Cela réduit considérablement les requêtes inutiles adressées au serveur. Dans Livewire version 3, tous les modèles sont différés par défaut (ancien : modificateur defer ), ce qui est une bonne chose.
Exemples
Livewire intègre des commandes Artisan pour créer, déplacer, renommer des composants, etc. Par exemple, au lieu de renommer manuellement les fichiers, ce qui pourrait être sujet aux erreurs, vous pouvez utiliser la commande suivante :
php artisan livewire:move Old/Path/To/Component New/Path/To/Component Vous pouvez utiliser les états de chargement pour améliorer l'UX. Cela indiquera à l'utilisateur que quelque chose se passe en arrière-plan si votre processus s'exécute plus longtemps que prévu. Pour éviter le scintillement, vous pouvez utiliser le modificateur delay .
Exemple
Au lieu de bloquer le rendu de la page jusqu'à ce que vos données soient prêtes, vous pouvez créer un espace réservé à l'aide de la technique de chargement différé pour rendre votre interface utilisateur plus réactive.
Exemple
Synchronisez vos données avec le backend à l'aide de la directive $wire.entangle. De cette façon, le modèle sera mis à jour instantanément sur le frontend et les données persisteront côté serveur une fois que la requête réseau aura atteint le serveur. Cela améliore considérablement l’expérience utilisateur sur les appareils lents. Cette approche est appelée « Réponse optimiste » ou « Optimistic UI » dans d'autres communautés frontend.
Exemple
Livewire ne prend pas en charge les requêtes de formulaire en interne, mais au lieu de coder en dur le tableau de règles de validation dans le composant, vous pouvez l'obtenir directement à partir de la requête de formulaire. De cette façon, vous pouvez réutiliser les mêmes règles de validation dans différentes couches d'application, par exemple dans les points de terminaison de l'API.
Exemple
Même des tests simples peuvent grandement aider lorsque vous modifiez quelque chose dans le composant. Livewire dispose d'une API de test simple mais puissante.
Travaillez-vous quotidiennement avec Livewire ?
Suggérez vos meilleures pratiques si vous ne les voyez pas dans la liste.
Si vous n'êtes pas sûr que ce soit une bonne pratique, vous pouvez démarrer une discussion.
