CONTATTACI

Guide per aspiranti programmatori

Lezione 30 / 30

Livewire

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);
  }

// ...

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.