Laravel Livewire 3

Livewire 3, Laravel ekosisteminde reaktif kullanıcı arayüzleri oluşturmanın en verimli yollarından biridir. React veya Vue'nun karmaşıklığına girmeden, PHP'de kalarak gerçek zamanlı güncellemeler, form doğrulama ve dosya yükleme gibi özellikler implemente edebilirsiniz. Livewire 3 ile gelen değişiklikler ve pratik kullanım senaryolarını ele alıyorum.

Livewire 3'ün Önemli Yenilikleri

• Alpine.js entegrasyonu (Volt): Tek dosyada Livewire + Alpine bileşeni yazabilirsiniz
• Lazy loading: Bileşenler sayfa yüklenmesini bloke etmeden arka planda yüklenir
• Reactive properties: Computed properties artık otomatik reaktif
• Improved wire:navigate: SPA deneyimi için tam sayfa yenileme olmadan navigasyon
• Form objects: Form mantığını bileşenden ayırmak için Form sınıfı

Temel Bileşen Örneği: Canlı Arama

// app/Livewire/CustomerSearch.php
class CustomerSearch extends Component
{
    public string $search = '';
    public int $perPage = 15;

    #[Computed]
    public function customers(): LengthAwarePaginator
    {
        return Customer::query()
            ->where(fn($q) => $q
                ->where('name', 'like', "%{$this->search}%")
                ->orWhere('email', 'like', "%{$this->search}%")
            )
            ->latest()
            ->paginate($this->perPage);
    }

    public function updatedSearch(): void
    {
        $this->resetPage();
    }
}

{{-- resources/views/livewire/customer-search.blade.php --}}
<div>
    <input wire:model.live.debounce.300ms="search"
           placeholder="Müşteri ara..."
           class="form-input">

    <table>
        @foreach($this->customers as $customer)
        <tr>
            <td>{{ $customer->name }}</td>
            <td>{{ $customer->email }}</td>
        </tr>
        @endforeach
    </table>

    {{ $this->customers->links() }}
</div>

Form Objects ile Gelişmiş Doğrulama

// app/Livewire/Forms/OrderForm.php
class OrderForm extends Form
{
    #[Rule('required|string|max:255')]
    public string $productName = '';

    #[Rule('required|integer|min:1')]
    public int $quantity = 1;

    #[Rule('required|numeric|min:0')]
    public float $unitPrice = 0;

    public function save(): Order
    {
        $this->validate();
        return Order::create($this->all());
    }
}

// Bileşen içinde kullanım
class CreateOrder extends Component
{
    public OrderForm $form;

    public function save(): void
    {
        $order = $this->form->save();
        $this->dispatch('order-created', id: $order->id);
        $this->form->reset();
    }
}

Lazy Loading ile Performans

{{-- Ağır dashboard bileşenlerini lazy yükle --}}
<livewire:revenue-chart lazy />
<livewire:recent-orders lazy placeholder="Yükleniyor..." />

// Bileşende placeholder içeriği
public function placeholder(): string
{
    return '<div class="skeleton-loader">...</div>';
}

Livewire Ne Zaman Kullanılmaz?

• Gerçek zamanlı (WebSocket) çok kullanıcılı özellikler için — Livewire polling kullanır, gerçek WebSocket değil
• Çok karmaşık client-side state yönetimi gereken single-page uygulamalar
• API-first mimaride mobil uygulama ile aynı backend paylaşılıyorsa

Bu durumlar dışında Livewire, Laravel projelerinde iç panel, admin arayüzü ve çoğu B2B SaaS dashboard için idealdir.