Cosa c'è di nuovo in Livewire v3 Laravel Framework?
Le nuove funzionalità di Livewire rendono più interessante lo sviluppo web con PHP e JavaScript.
Laravel Livewire è un ottimo strumento per ottenere un comportamento dinamico su una pagina web, senza scrivere direttamente il codice JavaScript. Semplifica la creazione di interfacce dinamiche, senza lasciare il comfort di Laravel. Recentemente, il core di Livewire è stato completamente riscritto.
Il nuovo Livewire v3 ha una migliore differenza, le funzionalità possono essere create più velocemente e c'è meno duplicazione tra Livewire e Alpine perché si basa maggiormente su Alpine e utilizza Morph, History e altri plug-in. Molte delle nuove funzionalità sono state rese possibili anche ristrutturando il codice base e ponendo maggiore enfasi su Alpine.
1. Inserisci automaticamente script, stili e Alpine Livewire
Dopo che il compositore ha installato Livewire v2, devi aggiungere manualmente @livewireStyles, @livewireScripts e Alpine al tuo layout. Con Livewire v3, devi solo installare Livewire e tutto ciò di cui hai bisogno verrà automaticamente inserito, incluso Alpine!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//unpkg.com/alpinejs" defer></script>
@livewireStyles @livewireScripts
</head>
<body>
...
</body>
</html>2. Funzioni JavaScript nelle classi PHP
Livewire v3 supporterà la scrittura di funzioni JavaScript direttamente nei componenti Livewire backend. Aggiungi una funzione al tuo componente, aggiungi un commento /\*_ @js _/ sopra la funzione, quindi restituisci del codice JavaScript utilizzando la sintassi HEREDOC di PHP e chiamalo dal tuo frontend. Il codice JavaScript verrà eseguito senza inviare alcuna richiesta al tuo backend.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @prop */
public $todos;
/** @js */
public function clear()
{
return <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<input wire:model="todo" />
<button wire:click="clear">Clear</button>
</div>3. Proprietà bloccate
Livewire v3 supporterà le proprietà bloccate, ovvero proprietà che non possono essere aggiornate dal frontend. Aggiungi un commento /\*\* @locked/sopra una proprietà sul tuo componente e Livewire genererà un'eccezione se qualcuno tenta di aggiornare quella proprietà dal frontend.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
?>4. Filo: il modello è differito per impostazione predefinita
Man mano che Livewire e il suo utilizzo si sono evoluti, ci siamo resi conto che il comportamento "differito" ha più senso per il 95% dei moduli, quindi nella versione v3 la funzionalità "differita" sarà l'impostazione predefinita. Ciò farà risparmiare sulle richieste non necessarie inviate al tuo server e migliorerà le prestazioni. Quando hai bisogno della funzionalità "live" su un input, puoi utilizzare wire:model.live per abilitare tale funzionalità.
Questa è una delle pochissime modifiche importanti dalla v2 alla v3.
5. Le richieste vengono raggruppate
In Livewire v2, se disponi di più componenti che utilizzano wire:poll o l'invio e l'ascolto di eventi, ciascuno di questi componenti invierà richieste separate al server su ciascun sondaggio o evento. In Livewire v3 è disponibile un raggruppamento intelligente di richieste in modo che wire:polls, eventi, ascoltatori e chiamate di metodi possano essere raggruppati in un'unica richiesta quando possibile, risparmiando ancora più richieste e migliorando le prestazioni.
6. Proprietà reattive
In Livewire v3, quando passi un dato a un componente figlio, aggiungi un commento /\*_ @prop _/ sopra la proprietà nel componente figlio, quindi aggiornalo nel componente genitore, verrà aggiornato nel componente figlio.
<?php
namespace App\Http\Livewire;
class TodosCount extends \Livewire\Component{
/** @prop */
public $todos;
public function render(){
return <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}7. Accedi ai dati e ai metodi del componente principale utilizzando $parent
In Livewire v3, ci sarà un nuovo modo per accedere ai dati e ai metodi di un componente principale. C'è una nuova proprietà $parent a cui è possibile accedere per chiamare metodi sul genitore.
<?php
namespace App\Http\Livewire;
class TodoInput extends \Livewire\Component{
/** @modelable */
public $value = '';
public function render(){
return <<<'HTML'
<div>
<input wire:model="value" wire:keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Teletrasporto
Livewire v3 includerà anche una nuova direttiva @teleport Blade che ti consentirà di "teletrasportare" un pezzo di markup e renderlo un'altra parte del DOM. Questo a volte può aiutare a evitare problemi di z-index con modali e slideout.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<!-- ... -->
</x-modal>
@endteleport
</div>9. Componenti pigri
In Livewire v3, basta aggiungere un attributo lazy durante il rendering di un componente e inizialmente non verrà eseguito il rendering. Quando entra nel viewport, Livewire avvierà una richiesta per renderizzarlo. Potrai anche aggiungere contenuto segnaposto implementando il metodo segnaposto sul tuo componente.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<livewire:example-component lazy />
</x-modal>
@endteleport
</div>
<?php
namespace App\Http\Livewire;
Class ExampleComponent extends \Livewire\Component{
public static function placeholder(){
return <<<'HTML'
<x-spinner />
>>>
}
public function render() /** [tl! collapse:7] */{
return <<<'HTML'
<div>
Todos: {{count($todos) }}
</div>
HTML;
}
}
?>Semplicità e potenza in Livewire V3
La combinazione di semplicità e potenza è ciò che rende Laravel Livewire così eccezionale e il motivo per cui viene utilizzato da così tanti sviluppatori. È soprattutto una buona alternativa alla combinazione Laravel + Inertia + Vue. In particolare Laravel è anche fornito in bundle con altri framework potenti e con cui lavorare.