Laravel Livewire est un excellent outil pour obtenir un comportement dynamique sur une page Web, sans écrire directement de code JavaScript. Il simplifie la création d'interfaces dynamiques, sans quitter le confort de Laravel. Récemment, le noyau de Livewire a été complètement réécrit.
Le nouveau Livewire v3 a de meilleures différences, les fonctionnalités peuvent être construites plus rapidement et il y a moins de duplication entre Livewire et Alpine car il s'appuie davantage sur Alpine et utilise son Morph, History et d'autres plugins. Plusieurs des nouvelles fonctionnalités ont également été rendues possibles en restructurant la base de code et en mettant davantage l'accent sur Alpine.
1. Injecter automatiquement des scripts, des styles et Alpine Livewire
Après avoir installé Livewire v2, vous devez ajouter manuellement @livewireStyles, @livewireScripts et Alpine à votre mise en page. Avec Livewire v3, il vous suffit d'installer Livewire et tout ce dont vous avez besoin est automatiquement injecté - y compris Alpine !
<!DOCTYPE html>
<html lang="fr">
<diriger>
<script src="//unpkg.com/alpinejs" reporter></script>
@livewireStyles@livewireScripts
</head>
<corps>
...
</body>
</html>2. Fonctions JavaScript dans les classes PHP
Livewire v3 prendra en charge l'écriture de fonctions JavaScript directement dans vos composants Livewire backend. Ajoutez une fonction à votre composant, ajoutez un commentaire /\*_ @js _/ au-dessus de la fonction, puis renvoyez du code JavaScript en utilisant la syntaxe HEREDOC de PHP et appelez-le depuis votre interface. Le code JavaScript sera exécuté sans envoyer de requêtes à votre backend.
<?php
espace de nomsApplication\HTTP\Câble en direct;
classeÀ faires'étend \Câble en direct\Composant
{
/** @soutenir */
public $todos;
/** @js */
publicfonctionclair()
{
retour <<<'JS'
this.todo = '';
JS ;
}
}
?>
<div>
<fil d'entrée: modèle ="faire" />
<fil du bouton: clic="clair">Clair</button>
</div>3. Propriétés verrouillées
Livewire v3 prendra en charge les propriétés verrouillées - propriétés qui ne peuvent pas être mises à jour depuis le frontend. Ajoutez un /\*\* @locked / commentaire au-dessus d'une propriété sur votre composant, et Livewire lancera une exception si quelqu'un tente de mettre à jour cette propriété depuis le frontend.
<?php
espace de nomsApplication\HTTP\Câble en direct;
classeÀ faires'étend \Câble en direct\Composant
{
/** @fermé à clé */
public $todos = [] ;
}
?>4. Wire: le modèle est différé par défaut
Au fur et à mesure que Livewire et son utilisation ont évolué, nous avons réalisé que le comportement "différé" a plus de sens pour 95 % des formulaires, donc dans la v3, la fonctionnalité "différé" sera la valeur par défaut. Cela permettra d'économiser sur les requêtes inutiles adressées à votre serveur et d'améliorer les performances. Lorsque vous avez besoin de la fonctionnalité "live" sur une entrée, vous pouvez utiliser wire: model.live pour activer cette fonctionnalité.
C'est l'un des rares changements de rupture de la v2 à la v3.
5. Les demandes sont regroupées
Dans Livewire v2, si vous avez plusieurs composants utilisant le fil: poll ou répartition et écoute des événements, chacun de ces composants enverra des requêtes distinctes au serveur pour chaque sondage ou événement. Dans Livewire v3, il existe un regroupement intelligent des demandes afin que le fil: sondages, événements, auditeurs et les appels de méthode peuvent être regroupés en une seule requête lorsque cela est possible, ce qui permet d'économiser encore plus de requêtes et d'améliorer performance.
6. Propriétés réactives
Dans Livewire v3, lorsque vous passer une donnée à un composant enfant , ajoutez un commentaire /\*_ @prop _/ au-dessus de la propriété dans l'enfant, puis mettez-le à jour dans le composant parent, il sera mis à jour dans le composant enfant.
<?php
espace de nomsApplication\HTTP\Câble en direct;
classeTodosCounts'étend \Câble en direct\Composant{
/** @soutenir */
public $todos;
publicfonctionrendre(){
retour <<<'HTML'
<div>
Tâches: {{ count($todos) }}
</div>
HTML ;
}
}7. Accéder aux données et aux méthodes du composant parent à l'aide de $parent
Dans Livewire v3, il y aura une nouvelle façon d'accéder aux données et aux méthodes d'un composant parent. Il existe une nouvelle propriété $parent accessible pour appeler des méthodes sur le parent.
<?php
espace de nomsApplication\HTTP\Câble en direct;
classeTodoInputs'étend \Câble en direct\Composant{
/** @modélisé */
public $valeur = '';
publicfonctionrendre(){
retour <<<'HTML'
<div>
<fil d'entrée: modèle ="valeur" câble: keydown.enter="$parent.add()">
</div>
HTML ;
}
}8. Téléportation
Livewire v3 inclura également une nouvelle directive @teleport Blade qui vous permettra de "téléporter" un morceau de balisage et de le restituer dans une autre partie du DOM. Cela peut parfois aider à éviter les problèmes de z-index avec les modaux et les slideouts.
<div>
<fil du bouton: clic="afficherModal">Afficher modal</button>
@téléportation('#bas de page')
<fil x-modal: modèle="afficherModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Composants paresseux
Dans Livewire v3, ajoutez simplement un attribut paresseux lors du rendu d'un composant, et il ne sera pas rendu initialement. Lorsqu'il entre dans la fenêtre d'affichage, Livewire déclenche une demande pour le rendre. Vous pourrez également ajouter du contenu d'espace réservé en implémentant la méthode d'espace réservé sur votre composant.
<div>
<fil du bouton: clic="afficherModal">Afficher modal</button>
@téléportation('#bas de page')
<fil x-modal: modèle="afficherModal">
<livewire: exemple de composant paresseux />
</x-modal>
@endteleport
</div>
<?php
espace de nomsApplication\HTTP\Câble en direct;
ClasseExempleComposants'étend \Câble en direct\Composant{
publicstatiquefonctionespace réservé(){
retour <<<'HTML'
<x-spinner />
>>>
}
public fonction rendre()/** [tl! réduire: 7] */{
retour <<<'HTML'
<div>
Tâches: {{count($todos) }}
</div>
HTML ;
}
}
?>Simplicité et puissance dans Livewire V3
La combinaison de la simplicité et de la puissance est ce qui fait Laravel Livewire tellement génial et pourquoi il est utilisé par tant de développeurs. C'est surtout une bonne alternative à la combinaison Laravel + Inertia + Vue. En particulier, Laravel est également associé à d'autres frameworks puissants et avec lesquels travailler.
