Kdy použít Livewire (server) a kdy Alpine.js (okamžitá odezva v prohlížeči)

TALL Stack: Dokonalá symbióza Livewire a Alpine.js

V moderním ekosystému Laravelu tvoří kombinace Tailwind CSS + Alpine.js + Laravel + Livewire (tzv. TALL stack) jeden z nejproduktivnějších vývojářských nástrojů současnosti.

Častou chybou méně zkušených vývojářů je však snaha řešit veškerou interaktivitu na serveru přes Livewire. Odesílat síťový požadavek na server kvůli rozbalení dropdown menu nebo přepnutí záložky je architektonický antipattern, který vede ke zbytečné latenci a zatížení serveru.

Pojďme se podívat na to, jak je tato dělící linie navržena v naší aplikaci.

1. Klientská mikro-interaktivita: Alpine.js (0 ms latence)

Alpine.js je lehký JavaScriptový framework (cca 15 kB), který vkládá reaktivitu přímo do HTML atributů podobně jako Vue, ale bez nutnosti build stepu nebo virtuálního DOMu.

Podívejte se do souboru resources/views/course/lesson.blade.php:

Příklad A: Kopírování úryvku kódu do schránky

<div class="rounded-xl bg-slate-950" x-data="{ copied: false }">
    <button type="button"
            @click="navigator.clipboard.writeText($refs.codeSnippet.innerText); copied = true; setTimeout(() => copied = false, 2000)">
        <span x-show="!copied">Kopírovat kód</span>
        <span x-show="copied" class="text-emerald-400">✓ Zkopírováno!</span>
    </button>
    <pre><code x-ref="codeSnippet">{{ $lesson->code_snippet }}</code></pre>
</div>

• Pomocí x-data="{ copied: false }" deklarujeme lokální reaktivní stav komponenty.
• Direktiva @click (zkratka pro x-on:click) zavolá nativní Web Clipboard API prohlížeče.
• Stav se změní okamžitě na klientovi – uživatel vidí potvrzení „✓ Zkopírováno!“ s nulovou latencí a server o tom vůbec nemusí vědět.

Příklad B: Přepínání záložek anatomie

Pravý panel anatomie zobrazuje několik souborů. Všechny soubory jsou vyrenderovány do DOMu a přepínání mezi nimi řídí Alpine:

<div x-data="{ activeTab: 0 }">
    <button @click="activeTab = 0">bootstrap/app.php</button>
    <button @click="activeTab = 1">routes/web.php</button>

    <div x-show="activeTab === 0">...kód 1...</div>
    <div x-show="activeTab === 1" style="display: none;">...kód 2...</div>
</div>

Přepnutí záložky proběhne za 0 milisekund bez ohledu na rychlost internetového připojení.

2. Kdy naopak MUSÍ nastoupit Livewire (Server)

Serverovou komponentu Livewire použijeme vždy, když:

1. Ověřujeme bezpečnost a byznys pravidla: Při vyhodnocení kvízu student nesmí mít v JavaScriptu k dispozici pole se správnými odpověďmi (correct_option), jinak by mohl výsledek snadno podvrhnout v DevTools.
2. Přistupujeme k databázi nebo storage: Zápis dokončené lekce a skóre do PostgreSQL (student_profiles).
3. Provádíme složité serverové operace: Čtení a filtrování souborů z disku (AnatomyInspectorService), volání externích API nebo odesílání e-mailů.

3. Zlaté pravidlo architektury