Belajar Livewire - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Setelah di episode 1 kita memahami mengapa Livewire ada, sekarang saatnya membedah bagaimana ia bekerja. Memahami arsitektur ini bukan sekadar pengetahuan teori — ia menentukan keputusan praktis yang akan kalian buat sepanjang series: kenapa state komponen harus dijaga seminimal mungkin, kenapa query di mount() hanya berjalan sekali, dan kenapa payload bisa membengkak jika kita asal memakai banyak properti publik.

Inti arsitektur Livewire sangat berbeda dari SPA. React/Vue merender di client dan berkomunikasi dengan server lewat API. Livewire melakukan kebalikannya: komponen hidup di server, dan browser hanyalah cermin tipis yang menampilkan HTML terakhir.

#Cara Kerja: Render di Server, Morph di Client

Ketika halaman dimuat, Livewire tidak mengirim JavaScript framework ke browser. Ia mengirim HTML hasil render Blade seperti biasa. Bedanya muncul saat user berinteraksi:

Alur lengkapnya:

1. User berinteraksi (klik, ketik, submit) → Livewire mengirim request Ajax berisi state komponen yang ter-serialisasi.
2. Server menyalakan kembali komponen PHP, mengisi state-nya, menjalankan action atau update property.
3. Komponen merender Blade → HTML terbaru.
4. Client menerima snapshot (state baru) dan diff (perbedaan HTML lama vs baru).
5. JavaScript Livewire melakukan DOM morphing: mengubah hanya elemen yang berubah, tanpa reload penuh.

Poin kuncinya: state hidup di server. Ketika satu interaksi selesai, server adalah sumber kebenaran. Ini berbeda total dari SPA yang menyimpan state di browser — dan inilah kenapa auth, validasi, dan query database di Livewire "gratis": semuanya sudah server-side sejak awal.

#Komponen: Unit Interaksi

Semua yang kalian lihat di layar adalah kumpulan komponen. Secara konsep, komponen Livewire adalah gabungan:

• Logika (PHP): properti publik sebagai state, method sebagai action.
• Tampilan (Blade): file view yang merender state.

Ada dua cara menulis komponen yang sama:

#Class Component

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public int $count = 0;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

<div>
    <h1>Jumlah: {{ $count }}</h1>
    <button wire:click="increment">Tambah</button>
</div>

#Volt (Functional API)

<?php
 
use Livewire\Volt\Component;
 
new class extends Component {
    public int $count = 0;
 
    public function increment()
    {
        $this->count++;
    }
};
?>
 
<div>
    <h1>Jumlah: {{ $count }}</h1>
    <button wire:click="increment">Tambah</button>
</div>

Keduanya melakukan hal identik. Class component lebih eksplisit dan mudah di-test secara unit; Volt lebih ringkas dan cepat untuk komponen kecil. Perbandingan mendalam kita bahas di episode 19 — untuk sekarang cukup paham bahwa keduanya ada.

#Root Element dan Morphing

Ada satu aturan yang sering membuat pemula tersandung: setiap komponen harus memiliki satu elemen root — satu elemen paling luar yang membungkus seluruh view.

<div>
    <h1>Counter</h1>
    <button wire:click="increment">+</button>
</div>

<h1>Counter</h1>
<button wire:click="increment">+</button>

Mengapa? Karena Livewire mengidentifikasi dan mengganti komponen lewat root element-nya. Saat render baru tiba, Livewire mencari div (atau elemen root) tersebut dan me-morph isinya. Jika ada dua elemen akar tanpa pembungkus, Livewire tidak tahu mana yang harus diganti.

Root element juga menjadi pembatas zona morphing: perubahan di dalamnya di-track, perubahan di luar (misalnya bagian layout yang statis) tidak.

#Snapshot dan Diff

Setiap request Livewire membawa snapshot — representasi JSON dari seluruh state komponen — dan menerima snapshot baru beserta diff HTML. Yang perlu kalian pahami bukan detail formatnya, melainkan implikasinya:

• Ukuran snapshot bergantung pada jumlah dan ukuran public property.
• Diff dihitung antara HTML lama dan baru; elemen yang tidak berubah tidak di-sentuh (fokus input, posisi scroll, dan event listener tetap bertahan).
• Karena morphing mempertahankan elemen DOM yang sama, status transient seperti fokus pada input tidak hilang — inilah yang membuat Livewire terasa "reactive" tanpa SPA.

#Memori Per Request dan Keamanan

Karena state di-serialisasi, ada dua aturan emas:

• Hanya properti publik yang menjadi state. Property protected/private untuk dependensi (misalnya service) tidak dikirim ke client.
• Jangan pernah menyimpan data sensitif rahasia di public property. Bayangkan public property sebagai data yang bisa dibaca user. Rincian keamanan kita bahas di episode 13.

public string $search = '';          // state — dikirim ke client
protected UserRepository $repo;      // dependensi — tidak dikirim
private string $internalToken = 'x'; // rahasia — tidak dikirim

#Penutup

Inti yang harus dibawa pulang:

• Livewire = server-rendered: komponen PHP merender Blade, client hanya me-morph DOM.
• Alur tiap interaksi: Ajax → re-execute komponen → render baru → snapshot + diff → morph.
• State hidup di server; public property = state, protected/private = dependensi.
• Wajib satu root element per komponen; morphing berlangsung di dalamnya.
• Class component dan Volt adalah dua cara menulis komponen yang setara.

Di episode 3 selanjutnya kita akan langsung praktik: menginstall Livewire (composer require livewire/livewire), menyiapkan layout Blade dengan @livewireStyles/@livewireScripts, membuat komponen pertama dengan php artisan make:livewire, dan merendernya di halaman. Sampai jumpa di episode 3!