laravel Cosa è e come si usa Livewire

[Askancy]

 

Cosa è LiveWire?

Livewire è un framework full-stack per Laravel che si basa sul concetto di "server-side rendering". In pratica, Livewire permette di scrivere codice PHP che viene eseguito sul server e restituisce HTML al browser, senza dover usare JavaScript o librerie come Vue o React.

Questo significa che puoi usare tutta la potenza e le funzionalità di Laravel, come le route, i controller, i model, le view, le validazioni, le autorizzazioni e così via, per creare interfacce dinamiche e interattive.

Livewire si ispira ad altri framework simili, come Phoenix LiveView per Elixir o Hotwire per Ruby on Rails, che seguono lo stesso approccio.

Come funziona Livewire?
Livewire funziona in questo modo:

• Livewire rende il componente iniziale con la pagina (come un include di Blade). In questo modo, il componente è SEO friendly e accessibile anche senza JavaScript.
• Quando si verifica un'interazione (ad esempio, un click o un input), Livewire fa una richiesta AJAX al server con i dati aggiornati.
• Il server riesegue il componente e risponde con il nuovo HTML.
• Livewire poi muta intelligentemente il DOM in base alle cose che sono cambiate.

Per usare Livewire, devi installarlo tramite Composer e pubblicare gli asset necessari. Poi, devi creare una classe PHP che estende Livewire\Component e una view Blade corrispondente nella cartella resources/views/livewire.

La classe PHP contiene la logica del componente, mentre la view Blade contiene il markup HTML. Puoi passare dati tra la classe e la view usando le proprietà pubbliche della classe.

Per includere il componente in una pagina, devi usare la direttiva @livewire('nome-del-componente').

Per aggiungere interattività al componente, devi usare le direttive wire: che Livewire mette a disposizione. Ad esempio:

• wire:model="proprietà" permette di sincronizzare il valore di un input con una proprietà della classe.
• wire:click="metodo" permette di chiamare un metodo della classe quando si clicca su un elemento.
• wire:loading permette di mostrare o nascondere un elemento quando il componente è in caricamento.
• wire:poll="metodo" permette di chiamare periodicamente un metodo della classe per aggiornare il componente.

Puoi trovare tutte le direttive disponibili nella documentazione ufficiale di Livewire.

Quali sono i vantaggi di Livewire?
Livewire offre diversi vantaggi rispetto ad altri framework o soluzioni, ti permette di:

• Scrivere meno codice e più semplice, evitando di dover gestire la complessità di JavaScript o delle librerie frontend.
• Sfruttare tutte le funzionalità e le convenzioni di Laravel, senza dover imparare nuovi strumenti o concetti.
• Creare interfacce dinamiche e reattive con una buona performance e una bassa latenza, grazie al meccanismo di mutazione intelligente del DOM.
• Mantenere una coerenza tra il backend e il frontend, evitando problemi di sincronizzazione o disallineamento dei dati.

Esempio pratico: componente di ricerca in tempo reale
Per mostrarti come usare Livewire in pratica, ti propongo un esempio semplice ma utile: creare un componente di ricerca in tempo reale che mostra una lista di utenti filtrata in base al testo inserito.

Per realizzare questo esempio, devi avere un progetto Laravel con Livewire installato e una tabella users nel database con i campi id, username e email.

Poi, devi creare il componente Livewire con il comando:
 

php artisan make:livewire SearchUsers

Questo comando creerà due file: app/Http/Livewire/SearchUsers.php e resources/views/livewire/search-users.blade.php.

Il file SearchUsers.php contiene la classe del componente, che ha una proprietà pubblica $search che rappresenta il testo da cercare e un metodo render() che restituisce la view del componente.

Il file search-users.blade.php contiene la view del componente, che ha un input con la direttiva wire:model="search" per sincronizzare il valore con la proprietà della classe e un ul con un ciclo foreach per mostrare la lista degli utenti filtrati.

Il codice del componente è il seguente:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;

class SearchUsers extends Component
{
public $search = '';

public function render()
{
return view('livewire.search-users', [
'users' => User::where('username', 'like', '%' . $this->search . '%')->get(),
]);
}
}

 

<div>
<input wire:model="search" type="text" placeholder="Cerca utenti..."/>

<ul>
@foreach ($users as $user)
<li>{{ $user->username }}</li>
@endforeach
</ul>
</div>

Per includere il componente in una pagina, devi usare la direttiva @livewire('search-users') nel file blade della pagina. Ad esempio:
 

<body>
...
@livewire('search-users')
...
</body>

Quando un utente digita nell'input di ricerca, la lista degli utenti si aggiorna in tempo reale. Semplice, no?