Livewire’daki yeni özellikler PHP ve JavaScript ile web geliştirmeyi daha ilginç hale getiriyor.
Laravel Livewire, bir web sayfasında doğrudan JavaScript kodu yazmadan dinamik davranış elde etmek için harika bir araçtır. Laravel’in rahatlığından ayrılmadan dinamik arayüzler oluşturmayı basitleştirir. Son zamanlarda, Livewire çekirdeği tamamen yeniden yazıldı.
Yeni Livewire v3 daha iyi farklılıklara sahip, özellikler daha hızlı oluşturulabiliyor ve Livewire ile Alpine arasında daha az tekrar var çünkü Alpine’e daha çok güveniyor ve Morph, History ve diğer eklentilerini kullanıyor. Yeni özelliklerin birçoğu, kod tabanının yeniden yapılandırılması ve Alpine’e daha fazla vurgu yapılmasıyla da mümkün hale getirildi.
1. Livewire Komut Dosyalarını, Stilleri ve Alpine’i Otomatik Olarak Enjekte Edin
Besteci Livewire v2’yi yükledikten sonra, mizanpajınıza @livewireStyles, @livewireScripts ve Alpine’ı manuel olarak eklemelisiniz. Livewire v3 ile, Livewire’ı kurmanız yeterlidir ve ihtiyacınız olan her şey otomatik olarak enjekte edilir – Alpine dahil!
<!DOCTYPE html>
<html lang=”en”>
<head>
<script src=”//unpkg.com/alpinejs” defer></script>
@livewireStyles @livewireScripts
</head>
<body>
…
</body>
</html>
2. PHP sınıflarında JavaScript İşlevleri
Livewire v3, JavaScript işlevlerini doğrudan arka uç Livewire bileşenlerinize yazmayı destekleyecektir. Bileşeninize bir işlev ekleyin, işlevin üstüne bir /*_ @js _/ yorumu ekleyin, ardından PHP’nin HEREDOC sözdizimini kullanarak bir JavaScript kodu döndürün ve onu ön ucunuzdan çağırın. JavaScript kodu, arka ucunuza herhangi bir istek göndermeden yürütülecektir.
<?php
namespace AppHttpLivewire;
class Todos extends LivewireComponent
{
/** @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. Kilitli Özellikler
Livewire v3, kilitli özellikleri destekleyecektir – ön uçtan güncellenemeyen özellikler. Bileşeninizde bir özelliğin üzerine /** @locked / yorum ekleyin ve birisi bu özelliği ön uçtan güncellemeye çalışırsa Livewire bir istisna atar.
<?php
namespace AppHttpLivewire;
class Todos extends LivewireComponent
{
/** @locked */
public $todos = [];
}
?>
4. Tel: Model Varsayılan Olarak Ertelenir
Livewire ve kullanımı geliştikçe, “ertelenmiş” davranışın formların %95’i için daha anlamlı olduğunu fark ettik, bu nedenle v3’te “ertelenmiş” işlevsellik varsayılan olacaktır. Bu, sunucunuza giden gereksiz isteklerden tasarruf edecek ve performansı artıracaktır. Bir girişte “canlı” işlevselliğe ihtiyaç duyduğunuzda, bu işlevi etkinleştirmek için wire:model.live’ı kullanabilirsiniz.
Bu, v2’den v3’e yapılan çok az sayıdaki son değişiklikten biridir.
5. İstekler Toplu İşlenir
Livewire v2’de, wire:poll veya olayları gönderme ve dinleme kullanan birden çok bileşeniniz varsa , bu bileşenlerin her biri, her bir yoklama veya olayda sunucuya ayrı istekler gönderir. Livewire v3’te, kablolu: yoklamalar, olaylar, dinleyiciler ve yöntem çağrılarının mümkün olduğunda tek bir istekte toplanıp daha fazla istekten tasarruf edilmesi ve performansın iyileştirilmesi için akıllı istek gruplaması vardır.
6. Reaktif Özellikler
Livewire v3’te, bir alt bileşene bir veri parçası ilettiğinizde, alt öğedeki özelliğin üzerine bir /*_ @prop _/ yorumu ekleyin, ardından üst bileşende güncelleyin, alt bileşende güncellenecektir .
<?php
namespace AppHttpLivewire;
class TodosCount extends LivewireComponent{
/** @prop */
public $todos;
public function render(){
return <<<‘HTML’
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}
7. $parent Kullanarak Ana Bileşenin Verilerine ve Yöntemlerine Erişin
Livewire v3’te, bir ana bileşenin verilerine ve yöntemlerine erişmenin yeni bir yolu olacak. Üst öğede arama yöntemleri için erişilebilen yeni bir $parent özelliği var.
<?php
namespace AppHttpLivewire;
class TodoInput extends LivewireComponent{
/** @modelable */
public $value = ”;
public function render(){
return <<<‘HTML’
<div>
<input wire:model=”value” wire:keydown.enter=”$parent.add()”>
</div>
HTML;
}
}
8. Işınlanma
Livewire v3 ayrıca, bir işaretleme parçasını “ışınlamanıza” ve onu DOM’nin başka bir parçası haline getirmenize izin verecek yeni bir @teleport Blade yönergesi içerecektir. Bu, bazen modlar ve slaytlarla ilgili z-endeksi sorunlarının önlenmesine yardımcı olabilir.
<div>
<button wire:click=”showModal”>Show modal</button>
@teleport(‘#footer')
<x-modal wire:model=”showModal”>
<!– … –>
</x-modal>
@endteleport
</div>
9. Tembel Bileşenler
Livewire v3’te, bir bileşeni oluştururken tembel bir öznitelik eklemeniz yeterlidir; bu, başlangıçta oluşturulmayacaktır. Görünüm alanına geldiğinde, Livewire onu işlemek için bir istek gönderir. Ayrıca, bileşeninize yer tutucu yöntemini uygulayarak yer tutucu içerik ekleyebileceksiniz.
<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 AppHttpLivewire;
Class ExampleComponent extends LivewireComponent{
public static function placeholder(){
return <<<‘HTML’
<x-spinner />
>>>
}
public function render() /** [tl! collapse:7] */{
return <<<‘HTML’
<div>
Todos: {{count($todos) }}
</div>
HTML;
}
}
?>
Livewire V3’te Sadelik ve Güç
Sadelik ve gücün birleşimi, Laravel Livewire’ı bu kadar harika yapan ve neden bu kadar çok geliştirici tarafından kullanıldığıdır. Özellikle Laravel + Inertia + Vue kombinasyonuna iyi bir alternatiftir. Özellikle Laravel, güçlü ve birlikte çalışılacak diğer çerçevelerle birlikte paketlenmiştir.