Nel vastissimo ecosistema di Laravel, che oltre al framework fornisce tantissimi tools e utility per arricchire e potenziare le nostre applicazioni, troviamo anche Livewire, un framework full-stack che semplifica la creazione di interfacce dinamiche e moderne, senza richiedere l’utilizzo di Javascript. Approfondiamo insieme questo potente strumento, esaminandone le funzioni principali.

Laravel Livewire

Andiamo a vedere Laravel Livewire nel dettaglio, partendo dall’installazione fino alle classi.

Installazione Livewire

Per installare Livewire, dobbiamo prima installare Laravel. Per effettuare questa operazione possiamo usare Laravel installer tramite il seguente comando:

laravel new livewire-app

Una volta installato Laravel, entriamo nella cartella del nostro progetto e lanciamo il seguente comando Composer:

composer require livewire/livewire

Una volta terminata l’installazione potremo passare alla creazione dei vari component che formeranno la nostra interfaccia.

Creazione di component

Per creare un component di Livewire dovremo utilizzare di nuovo la riga di comando. Ad esempio, creiamo un nuova form di contatto:

php artisan make:livewire form

Il comando precedente creerà 2 file distinti: form.php and form.blade.php. Il primo file sarà la nostra classe, dove verranno definite le proprietà del component, la vista in cui eseguire il rendering e tutto ciò che verrà eseguito in base all’interazione dell’utente con il component stesso.

Il secondo file, come si intuisce dal nome stesso, è un file Blade che funziona esattamente come un normale file del template engine che Laravel usa da tanti anni, e verrà creato in resources/views/livewire/.

Approfondimento su Blade

Renderizzazione del component inline

Il modo più semplice per mostrare il nostro component in una vista Blade è quello di inserirlo direttamente inline. Possiamo scegliere se utilizzare il tag <livewire: in questo modo:

<div>

    <livewire:form />

</div>

Oppure optare per la direttiva Blade:

@livewire(‘form’)

Creazione della Route

In alternativa alla renderizzazione inline, nel caso in cui il nostro component fosse fullpage, sarà possibile renderizzarlo direttamente in una route di Laravel, come se fosse un controller. Nel file routes/web.php andremo ad aggiungere:

Route::get(‘/form, Form::class);

La vista

Come abbiamo già visto, uno dei due file creato da Livewire sarà un file Blade, quindi molto probabilmente avremo già familiarità con la sua struttura. La nostra vista dovrà avere un solo elemento di root (ad esempio, un semplice div).

Questo file Blade ha accesso diretto a tutte le proprietà definite nella sua classe, senza la necessità che queste vengano inviate esplicitamente alla vista, come succede normalmente in Laravel.

Ecco un esempio di una semplice form:

<div>

    <form wire:submit.prevent=”submit” action=”/submit” method=”POST”>

        <div>

            <input wire:model=”email” type=”text” placeholder=”Indirizzo email” name=”email”/>

        </div>

        <div>

            <input wire:model=”name” type=”text” placeholder=”Name” name=”name”/>

        </div>

        <div>

            <textarea wire:model=”message” row=”5″ name=”message” placeholder=”Inserisci il tuo messaggio”></textarea>

        </div>

        <div>

            <button type=”submit”>Invia</button>

        </div>

    </form>

</div>

 

Come potete vedere, abbiamo utilizzato dei tag particolari, necessari a Livewire per gestire l’interazione tra vista e classe. Nel dettaglio:

  • con wire:submit.prevent=”submit” indichiamo alla form il metodo che effettuerà l’invio del nostro modulo, nel nostro caso submit;
  • con wire:model=”name” stabiliamo l’associazione tra il campo di input e la proprietà name che andremo a dichiarare nella classe.

La classe

Ecco come si presenterà la classe relativa al component che abbiamo appena creato:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Form extends Component

{

    public function render()

    {

        return view(‘livewire.form’);

    }

}

Come possiamo vedere, la struttura di questa classe è estremamente familiare agli utilizzatori di Laravel. Il metodo render() è obbligatorio in ogni classe dei component di Livewire e, com’è facile intuire, serve ad indicare in quale vista effettuare il rendering.

A questa struttura base andremo ora ad aggiungere alcuni elementi necessari per interagire con la vista Blade:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Form extends Component

{

    public $email;

    public $name;

    public $message;

    public function render()

    {

        return view(‘livewire.form’);

    }

    public function submit() {

        // la nostra logica

    }

}

Definendo le tre variabili public potremo usare i campi passati dalla vista nella nostra classe, mentre il metodo submit() viene invocato dalla form alla pressione del pulsante di invio e li dentro andremo a definire la logica che preferiamo, ad esempio l’invio di una mail utilizzando le informazioni che arrivano dalla vista.

Scopri di più su tutti i Corsi Laravel di LaraMind!

Come abbiamo visto, usare Livewire è molto semplice ed intuitivo, specialmente se abbiamo già familiarità con le viste create con Blade e magari invece non siamo molto esperti di Javascript e preferiamo non utilizzare un framework di quel linguaggio.

Inoltre, Livewire è una delle due opzioni relative allo stack da utilizzare nel nuovissimo Laravel Jetstream, l’applicazione di scaffoliding introdotta da Laravel 8, quindi è ampiamente supportato dalla comunità Laravel… perché non provarlo? Fateci sapere la vostra esperienza con Livewire e contattateci a amministrazione@laramind.com per qualsiasi tipo di informazione. 

Se sei alla ricerca di un percorso di formazione personalizzata dedicato a Livewire non esitare a contattarci a  amminstrazione@laramind.com.