Laravel Livewire ile JavaScript yazmadan etkileşim

Livewire’ı ilk gördüğümde tepkim olumsuzdu. “JavaScript yazmadan dinamik arayüz mi?” cümlesi bana bir reklam sloganı gibi geldi; arka planda bir sihir daha, bir soyutlama katmanı daha. Birkaç hafta sonra gerçek bir projede denediğimde fikrim değişti — ama koşulsuz değil.

Livewire (livewire.laravel.com), Blade şablonlarına canlılık kazandıran bir PHP kütüphanesidir. Her etkileşimde tarayıcı sunucuya AJAX isteği atar, bileşen yeniden render edilir ve DOM farkları uygulanır. Kullanıcı JavaScript görmez; siz de çoğunlukla yazmak zorunda kalmazsınız.

Nasıl çalışır?

Livewire component’i iki parçadan oluşur: bir PHP sınıfı ve bir Blade görünümü. Sınıf, bileşenin durumunu ve eylemlerini barındırır.

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Post;

class PostSearch extends Component
{
    public string $query = '';

    public function render()
    {
        $posts = Post::where('title', 'like', "%{$this->query}%")
                     ->latest()
                     ->take(10)
                     ->get();

        return view('livewire.post-search', compact('posts'));
    }
}

Blade görünümünde wire:model direktifi, $query özelliğini input ile bağlar:

<div>
    <input type="text" wire:model="query" placeholder="Başlık ara…">

    <ul>
        @foreach ($posts as $post)
            <li>{{ $post->title }}</li>
        @endforeach
    </ul>
</div>

Kullanıcı yazdıkça sunucuya istek gider, liste güncellenir. Sıfır JavaScript.

Hangi durumlarda doğru seçim?

Livewire’ın değer ürettiği durumları somutlaştırayım:

Takım Laravel biliyor, frontend uzmanlığı yok. Ayrı bir Vue/React uygulaması yazmak, o alandaki bilgiyi gerektiriyor. Livewire bu boşluğu kapatıyor.

Admin panel türü arayüzler. Filtreleme, sayfalama, form adımları — bunların hepsi Livewire ile daha az kodla kurulabiliyor. Gerçek zamanlı hız beklentisi düşük, sunucu round-trip kabul edilebilir.

Mevcut Blade tabanlı uygulama. Sıfırdan SPA mimarisine geçmek büyük bir değişim. Livewire, mevcut yapıya kademeli etkileşim ekliyor.

wire:model.lazy: gözden kaçan bir ayrıntı

wire:model varsayılan olarak her tuş vuruşunda sunucuya istek gönderir. Bir arama kutusunda bu beklenebilir bir davranış, ama bir form alanında gereksiz sunucu yükü demek. wire:model.lazy direktifi, focus kaybolana kadar isteği bekletir:

<input type="text" wire:model.lazy="email" placeholder="E-posta">

Bu farkı ilk projede öğrendim: sayfa yavaşladığında Chrome DevTools’u açtım ve her karakter için ayrı bir istek gittiğini gördüm. lazy ekleyince sorun ortadan kalktı. Küçük bir ayrıntı ama üretim ortamında anlamlı bir fark yaratıyor.

Sınırlar nerede?

Her araçta olduğu gibi Livewire’ın da trade-off’ları var.

Her kullanıcı etkileşimi bir HTTP isteği tetikliyor. Yüksek frekanslı etkileşimlerde (anlık arama, sürükle-bırak, karmaşık animasyon) bu gecikme fark edilir hale geliyor. Sunucu yükü de doğrudan artıyor.

Karmaşık client-side durum yönetimi için tasarlanmamış. Birden fazla bileşen arasında veri akışı, Livewire event’leriyle yönetiliyor; bu model bir noktadan sonra karmaşıklaşıyor.

Ayrıca JavaScript’ten tamamen kaçmak mümkün değil. Livewire bileşenleri içinde Alpine.js ile ufak istemci işlemleri yapmak çoğu zaman kaçınılmaz oluyor.

SPA ile karşılaştırma

Bir SPA ile Livewire arasındaki fark yalnızca teknik değil, operasyonel. SPA’da API tasarlıyorsunuz, frontend bağımsız deploy ediliyor, iki ayrı kod tabanı yaşıyor. Livewire’da her şey tek bir Laravel uygulamasında; deployment daha basit, bağlam değiştirme daha az.

Bu ikisi birbirinin alternatifi değil, farklı ihtiyaçların cevabı. Kullanıcı beklentisi milisaniye hassasiyetindeyse, etkileşim çok yoğunsa, SPA daha doğru. Kurumsal panel, içerik yönetimi, form ağırlıklı arayüzlerse Livewire gereksiz karmaşıklıktan kurtarıyor.

---

Livewire’ı projeye sokma kararını “JavaScript yazmamak” üzerine değil, “bu ihtiyaç için hangi model daha sürdürülebilir?” sorusu üzerine veriyorum. Bazı projelerde cevap Livewire, bazılarında Vue. İkisini aynı projede de kullanmak mümkün — ve zaman zaman kaçınılmaz.