Je vous propose de découvrir ensemble Livewire, un outil fonctionnant sur Laravel qui vous permettra de créer des composants dynamiques sans utiliser de JavaScript.
A quoi ça ressemble
Dans un premier temps on va créer une classe qui va représenter notre composant et son état. Toutes les propriétés public de ce composant seront exposées et manipulables par le client et une méthode render() permet de générer une nouvelle version HTML du composant.
use Livewire\Component;
class SearchUsers extends Component
{
public $search = '';
public function render()
{
return view('livewire.search-users', [
'users' => User::where('username', $this->search)->get(),
]);
}
}Ensuite dans la vue, il sera possible d'utiliser des attributs spéciaux compris par livewire qui permettront de communiquer avec notre composant.
<div>
<input wire:model.debounce.300ms="search" type="text" placeholder="Rechercher des utilisateur..."/>
<ul>
@foreach($users as $user)
<li>{{ $user->username }}</li>
@endforeach
</ul>
</div>Enfin, on peut maintenant utiliser le composant dans n'importe quelle page :
<body>
<!-- En utilisant une directive -->
@livewire('search-users')
<!-- Ou en utilisant la syntaxe composant -->
<livewire:search-users />
...
</body>Lorsque l'utilisateur entrera une recherche dans le champ la vue se mettra automatiquement à jour pour n'afficher que les utilisateurs correspondants à la recherche.
Comment ça marche ?
Livewire se repose principalement sur le serveur pour gérer les mutations de l'état du composant.
- Livewire rend le composant initial avec la page (comme un simple template blade).
- Lors d'une interaction utilisateur, livewire fait un appel AJAX au serveur avec les données à mettre à jour.
- Le serveur rend la nouvelle version HTML du composant et la renvoie au client.
- Livewire reçoit la nouvelle structure HTML et modifie le DOM en fonction des éléments qui ont changé.
Cette approche possède cependant une limitation importante : chaque interaction se traduit par un aller-retour avec le serveur. Aussi, il faudra faire attention à ce que l'on contrôle avec Livewire et utiliser AlpineJS pour les micro-interactions qui ne nécessite pas l'intervention du serveur.
