Livewire è uno dei progetti nell’ecosistema di Laravel espressamente dedicata alla gestione del frontend. La particolarità di Livewire è quella di permettere lo sviluppo di una web application “moderna” senza la necessità di utilizzare framework JavaScript dedicati.
Con Livewire è possibile sviluppare dei componenti Blade che offrono un livello di dinamicità pari a quello offerto da Vue o React, senza la necessità di dover gestire la complessità di un progetto nettamente diviso tra front end e back end e potendo continuare a sviluppare la propria applicazione entro i confini di Laravel e dei template Blade.
Come funziona Livewire
Livewire è un pacchetto Composer che è possibile aggiungere a un progetto Laravel. Va, poi, attivato su ogni pagina HTML (o la pagina, nel caso in cui si voglia realizzare una Single Page Application) tramite opportune direttive Blade e vanno scritti i vari componenti (costituiti da classe PHP e file Blade).
Nel momento in cui il browser chiede di accedere a una pagina in cui è usato Livewire, succede quanto segue:
- la pagina viene renderizzata con gli stati iniziali del componente, come una qualsiasi pagina realizzata tramite Blade
- nel momento in cui sul browser avviene un’interazione gestita con Livewire, viene effettuata una chiamata AJAX a un’ opportuna rotta indicando componente e interazione occorsa, più lo stato del componente
- i dati vengono elaborati alla parte PHP del componente, che effettua il nuovo render in conseguenza dell’interazione e la rimanda al browser
- il DOM della pagina viene mutato in accordo con le modifiche ricevute dal server
Un meccanismo molto simile a quello dei già citati Vue e React, in cui viene realizzato un data binding tra backend e frontend.
Come installare Livewire
L’installazione di Livewire è assolutamente minimale. È sufficiente installare il pacchetto Composer nel progetto Laravel e aggiungere le necessarie direttive Blade a tutte le pagine (o al layout comune da cui derivano tutti i template Blade del progetto).
composer require livewire/livewire
... @livewireStyles </head> <body> ... @livewireScripts </body> </html>
Componenti Livewire
Una volta installato il pacchetto Composer, è disponibile un nuovo sottocomando Artisan make per creare un nuovo componente Livewire. Ogni componente sarà composto da una classe e da una view Blade, in modo analogo a quanto visto per i componenti class based di Blade.
php artisan make:livewire SpyInput COMPONENT CREATED 🤙 CLASS: app/Http/Livewire/SpyInput.php VIEW: resources/views/livewire/spy-input.blade.php
Il nostro componente d’esempio “spierà” quello che viene scritto sul browser in un campo input HTML, senza necessità di scrivere codice JavaScript.
Inseriamo, quindi, una property pubblica alla classe del componente.
// app/Http/Livewire/SpyInput.php
class SpyInput extends Component
{
public string $message;
public function render()
{
return view('livewire.spy-input');
}
}
e modifichiamo nel seguente modo la view del componente:
{{-- resources/views/livewire/spy-input.blade.php --}}
<div>
<label>Type here:
<input type="text" wire:model="message"/>
</label>
<span>You typed: <span>{{ $message }}</span></span>
</div>
e inseriamo il componente in un template di una pagina
@livewireStyles </head> <body> <livewire:spy-input /> @livewireScripts </body> </html>
Sappiamo che le property pubbliche della classe possono essere usate nel template blade, e il comportamento dei componenti class based di Blade, quindi in <span>{{ $message }}</span> verrà inserito il valore della property $message. In un normale componente class based, però, ciò avviene solo al primo e unico rendering del componente.
Nel nostro componente Livewire, però, abbiamo utilizzato wire:model=”message” negli attributi del <input>. Questo attributo fa in modo che il value dell’input sia legato anch’esso al valore della property $message della classe. Nel momento in cui si scrive nell’input il nuovo value viene mandato al server, che aggiorna il valore di $message ed effettua un nuovo render, rimandandolo al frontend che, quindi, aggiorna il testo in <span>{{ $message }}</span></span>.
Aprendo la scheda Network degli strumenti di sviluppo del browser, noteremo che dando il focus all’input a ogni pressione di tasto sulla tastiera viene effettuata una chiamata al server su una rotta /livewire/message/<NOME-COMPONENTE>. La risposta a ognuna di queste chiamate conterrà il nuovo HTML renderizzato per il componente, che lo script di Livewire caricato lato browser inserirà in pagina al posto della vecchia.
Sono disponibili diverse attributi custom wire: e altre semplificazioni, ad esempio per eseguire un metodo pubblico della classe del componente al clic su un button è possibile scrivere qualcosa come <button wire:click=”doSomething”>Show/Hide</button> dove doSomething è un metodo pubblico della classe PHP del componente Livewire.
Integrazione con altre funzionalità Laravel
È possibile integrare Livewire con ogni altra funzionalità offerta da Laravel rendendo l’utilizzo della propria applicazione web più dinamica e in linea con le moderne aspettative. La classe PHP collegata al componente si comporta come ogni altra classe PHP di un progetto Laravel, con l’unica differenza di usare il metodo mount invece del classico costruttore di classe __construct per inizializzare le property public della classe. Questo, ovviamente, nel caso in cui, per qualche motivo, non vogliamo usare l’automatismo di Livewire di assegnare il valore iniziale delle public property usando i parametri aggiuntivi usati nel tag <livewire:
{{-- assegnazione automatica alla property $book della classe ShowBook --}}
<livewire:show-book :book="$book">
class ShowBook extends Component
{
public $title;
public $excerpt;
// mount invece di __constuct
public function mount($book)
{
$this->title = $book->title;
$this->content = $book->content;
}
...
}
È anche possibile indicare eventuali regole di validazione tramite la property protected $rules e chiamare il metodo validate per effettuare la validazione dei dati invitati dal frontend al backend.
class BookForm extends Component
{
public $title;
public $excerpt;
public $isbn;
protected $rules = [
'title' => ['required', 'max:200'],
'isbn' => ['required', 'unique:books', 'size:17'],
'excerpt' => 'max:500'
];
public function saveBook()
{
$arguments = $this->validate();
Book::create($arguments);
}
}
<form wire:submit.prevent="saveBook">
<input type="text" wire:model="title">
@error('title') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="excerpt">
@error('excerpt') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="isbn">
@error('isbn') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save Book</button>
</form>
In generale, ogni componente Livewire si comporta nei modi che uno sviluppatore Laravel si aspetta da una classe PHP che estende una delle classi di Laravel e da un template Blade, permettendo, quindi, la realizzazione di interfacce web dinamiche senza la necessità di separare (e poi ricollegare) gli sviluppi tra Laravel e Vue/React.
Ad esempio, nel caso precedente di validazione della submit di un nuovo elemento da aggiungere a un Model, si potrebbero sfruttare gli hook di Livewire per effettuare la validazione sui singoli campi che si sta modificando anche prima dell’effettivo submit.
// ...
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function saveContact()
{
$arguments = $this->validate();
Book::create($arguments);
}
// ...
