Jak funguje Livewire 3: Stav na serveru, wire:click a reaktivní DOM

Architektura Livewire 3: Žádné REST API ani manuální JSON synchronizace

Tradiční tvorba dynamických webových aplikací donedávna vyžadovala rozdělení projektu na dva světy: backendové REST/GraphQL API a klientskou SPA aplikaci (Vue, React, Angular). Tento přístup přináší obrovskou režii – duplikaci validačních pravidel, nutnost psát stavový management na klientovi (Pinia, Redux) a řešení tokenové autentizace.

Livewire 3 tento problém řeší revolučním způsobem: umožňuje psát plně reaktivní komponenty v čistém PHP a Blade šablonách. Komponenta běží na serveru, ale uživatel v prohlížeči zažívá okamžitou, plynulou interakci bez problikávání a reloadu stránky.

1. Stav komponenty a proces hydratace / dehydratace

Základem každé Livewire komponenty je třída dědící z Livewire\Component. Veřejné vlastnosti (public) této třídy představují stav komponenty:

class LessonQuiz extends Component
{
    public CourseLesson $lesson;
    public array $selectedAnswers = [];
    public bool $submitted = false;
    public int $scorePercent = 0;
    // ...
}

Když se stránka poprvé načte (initial GET request):

1. Laravel zavolá metodu mount() komponenty, kde můžete inicializovat proměnné nebo načíst data.
2. Následně proběhne metoda render(), která vygeneruje běžné HTML.
3. Livewire k tomuto HTML přibalí kryptograficky podepsaný JSON snapshot obsahující aktuální hodnoty veřejných vlastností (dehydratace).

Jakmile uživatel v prohlížeči provede akci (například klikne na tlačítko označené wire:click="selectOption(1, 2)"):

1. Klientská knihovna Livewire zachytí událost a odešle lehký AJAX POST požadavek na interní endpoint /livewire/update.
2. Požadavek obsahuje payload se snapshotem původního stavu a informaci o volané metodě.
3. Server ověří integritu snapshotu, zrekonstruuje stav komponenty do PHP objektu (hydratace), provede volanou PHP metodu a znovu spustí render().
4. Místo celé stránky vrátí server pouze inteligentní rozdílový balíček (diff).

2. Algoritmus DOM Morphing (Morphdom)

Když klientský JavaScript v prohlížeči obdrží odpověď ze serveru, nenahrazuje celý DOM element. Místo toho využívá integrovaný balíček Alpine Morph (vycházející z algoritmu Morphdom):

• Projde stávající strom DOM a porovná jej s nově vyrenderovaným HTML ze serveru.
• Změní výhradně ty textové uzly a atributy (např. CSS třídy pro barevné označení správné odpovědi), které se skutečně liší.
• Zachovává stav formulářových prvků, focus kurzoru i běžící CSS přechody (transitions).

3. Autowiring a Dependency Injection přímo v akcích

Všimněte si metody submitQuiz v našem souboru app/Livewire/LessonQuiz.php:

public function submitQuiz(StudentProgressService $progressService): void
{
    // Livewire automaticky injektuje instanci StudentProgressService ze Service Containeru!
    $progressService->recordQuizScore($profile, $this->lesson->id, $this->scorePercent);
}

V Livewire 3 nemusíte závislosti předávat přes konstruktor ani používat statické fasády. Laravel Service Container provede automatický autowiring typovaných parametrů přímo při zavolání akce z frontendu.

4. Indikátory načítání: wire:loading

Protože akce probíhá přes síť, je klíčové poskytnout uživateli okamžitou zpětnou vazbu. K tomu slouží direktivy wire:loading:

• wire:loading.attr="disabled" zabrání vícenásobnému kliknutí během probíhajícího požadavku.
• wire:loading.remove a wire:loading wire:target="submitQuiz" umožňují vyměnit text tlačítka (např. „Vyhodnotit kvíz“ za „Vyhodnocuji...“).