Laravel Livewire è un ottimo strumento per ottenere un comportamento dinamico su una pagina Web, senza scrivere direttamente codice JavaScript. Rende semplice la creazione di interfacce dinamiche, senza lasciare il comfort di Laravel. Di recente, il core di Livewire è stato completamente riscritto.
Il nuovo Livewire v3 ha una migliore differenziazione, le funzionalità possono essere costruite più velocemente e c'è meno duplicazione tra Livewire e Alpine perché si basa maggiormente su Alpine e usa il suo Morph, History e altro plugin. Molte delle nuove funzionalità sono state rese possibili anche ristrutturando la base di codice e ponendo una maggiore enfasi su Alpine.
1. Inietta 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 viene automaticamente iniettato, incluso Alpine!
<!DOCTYPE html
>
<html lang="it">
<Testa>
<script src="//unpkg.com/alpinejs" differire></script>
@livewireStyles@livewireScript
</head>
<corpo>
...
</body>
</html>2. Funzioni JavaScript nelle classi PHP
Livewire v3 supporterà la scrittura di funzioni JavaScript direttamente nei componenti Livewire di 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
spazio dei nomiApp\http\Filo sotto tensione;
classeTuttoestende \Filo sotto tensione\Componente
{
/** @puntello */
pubblico $tutto;
/** @js */
pubblicofunzionechiaro()
{
ritorno <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<filo di ingresso: modello="fare" />
<filo pulsante: click="chiaro">Chiaro</button>
</div>3. Proprietà bloccate
Livewire v3 supporterà le proprietà bloccate - 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
spazio dei nomiApp\http\Filo sotto tensione;
classeTuttoestende \Filo sotto tensione\Componente
{
/** @locked */
pubblico $tutto = [];
}
?>4. Wire: 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 v3 la funzionalità "differita" sarà l'impostazione predefinita. Ciò consentirà di risparmiare sulle richieste non necessarie che vanno al tuo server e migliorare le prestazioni. Quando hai bisogno della funzionalità "live" su un input, puoi usare wire: model.live per abilitare quella funzionalità.
Questa è una delle pochissime modifiche sostanziali dalla v2 alla v3.
5. Le richieste vengono raggruppate
In Livewire v2, se hai più componenti che usano wire: poll o invio e ascolto di eventi, ciascuno di questi componenti invierà richieste separate al server per ogni sondaggio o evento. In Livewire v3, c'è un raggruppamento intelligente di richieste in modo che trasmetta: sondaggi, eventi, ascoltatori e le chiamate al metodo possono essere raggruppate in un'unica richiesta quando possibile, salvando ancora più richieste e migliorando prestazione.
6. Proprietà reattive
In Livewire v3, quando tu passare un pezzo di dati a un componente figlio , aggiungi un commento/\*_ @prop _/ sopra la proprietà nel figlio, quindi aggiornalo nel componente genitore, verrà aggiornato nel componente figlio.
<?php
spazio dei nomiApp\http\Filo sotto tensione;
classeTodosCountestende \Filo sotto tensione\Componente{
/** @puntello */
pubblico $tutto;
pubblicofunzionerendere(){
ritorno <<<'HTML'
<div>
Tutte le cose: {{ count($todos) }}
</div>
HTML;
}
}7. Accedi ai dati e ai metodi del componente padre utilizzando $parent
In Livewire v3, ci sarà un nuovo modo per accedere ai dati e ai metodi di un componente padre. C'è una nuova proprietà $parent a cui è possibile accedere per chiamare i metodi sul genitore.
<?php
spazio dei nomiApp\http\Filo sotto tensione;
classeTodoInputestende \Filo sotto tensione\Componente{
/** @modelable */
pubblico $valore = '';
pubblicofunzionerendere(){
ritorno <<<'HTML'
<div>
<filo di ingresso: modello="valore" filo: 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>
<filo pulsante: click="showModal">Mostra modale</button>
@teletrasporto('#piè di pagina')
<Filo x-modale: modello="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Componenti pigri
In Livewire v3, aggiungi semplicemente un attributo pigro durante il rendering di un componente e inizialmente non verrà eseguito il rendering. Quando entra nel viewport, Livewire emetterà una richiesta per renderla. Sarai anche in grado di aggiungere contenuto segnaposto implementando il metodo segnaposto sul tuo componente.
<div>
<filo pulsante: click="showModal">Mostra modale</button>
@teletrasporto('#piè di pagina')
<Filo x-modale: modello="showModal">
<livewire: componente di esempio pigro />
</x-modal>
@endteleport
</div>
<?php
spazio dei nomiApp\http\Filo sotto tensione;
ClasseEsempioComponentestende \Filo sotto tensione\Componente{
pubblicostaticofunzionesegnaposto(){
ritorno <<<'HTML'
<x-spinner />
>>>
}
pubblico funzione rendere()/** [ti! crolla: 7] */{
ritorno <<<'HTML'
<div>
Tutte le cose: {{count($todos) }}
</div>
HTML;
}
}
?>Semplicità e potenza in Livewire V3
La combinazione di semplicità e potenza è ciò che rende Laravel in diretta così fantastico e perché è usato da così tanti sviluppatori. È soprattutto una buona alternativa alla combinazione Laravel + Inertia + Vue. In particolare Laravel è anche in bundle con altri framework che sono potenti e con cui lavorare.