Mi az a Laravel Livewire?

Mi az a Laravel Livewire? Többet tényleg nem kell JavaScript és bonyolult frontend oldali keretrendszer többé? A frontend oldal fejleszthető backend kóddal?
Létrehozva: 2 év 4 perc olvasás
Utolsó frissítés2022.09.25.
Laravel livewire

Aki ismeri a Laravel keretrendszert, tudja, az tudja hogy ez egy PHP nyelven íródott MVC alapú keretrendszer PHP alkalmazások szerver oldali fejlesztési feladatainak elvégézéséhez.

Backend fejlesztőként nap, mint nap használjuk, de milyen jó lenne, ha a frontend munkákhoz nem kellene bonyolult frontend oldali keretrendszereket megtanulni (pl.: Angular).

Röviden a Livewire ehhez ad egy eszközkészletet a kezünkbe. Laravel kódban tudunk olyan dinamikus megoldásokat legyártani, amiket korábban React, vagy Vue fejlesztő segítségével lehetett csak.

Ugyan aki full-stack fejlesztő, az valószínűleg ezt megmosolyogja és talán egyet is értek vele. A teljes értékű frontend oldali keretrendszerek célirányosan arra lettek létrehozva, hogy optimális kliens oldali megoldásokat biztosítson.

A Laravel Livewire segítségével ezt a frontend oldali dinamizmust tudjuk alkalmazni backend megközelítéssel. Ugyan ettől nem leszünk full-stack fejlesztők, de ha nincs időnk egy modern frontend oldali keretrendszer elsajátításához, akkor ez egy gyors és kompakt megoldás lehet. Gyakorlatilag mindent meg lehet vele valósítani, így képes kiváltani a hagyományos frontend oldalt.

Nem tudod mi a különbség a frontend és backend fejlesztő között? Vagy nem tudod mit jelent a fullstack fejlesztés? A Mindent a programozási keretrendszerekről és az MVC – ről cikkünkben részletesen utánajárhatsz.

A Livewire egy full-stack keretrendszer a Laravel számára, amely egyszerűvé teszi a dinamikus frontend oldali interfészek létrehozását anélkül, hogy elhagynánk a Laravel kényelmét.

A Livewire működése

Nézzünk meg egy példakódot a Livewire hivatalos oldaláról:

Hozzunk létre egy SearchUsers nevű osztályt, mely tulajdonképpen egy Livewire komponens. Adjuk meg a lenti kis forráskódot, amivel azt érjük el, hogy a $search változóban lévő érték alapján rákeresünk a felhasználók nevére és amire illeszkedik, azt visszaadjuk egy users nevű változóban a livewire.search-users.blade számára.

// App/Http/LiveWire/SearchUsers.php
use Livewire\Component;
 
class SearchUsers extends Component
{
    public $search = '';
 
    public function render()
    {
        return view('livewire.search-users', [
            'users' => User::where('username', $this->search)->get(),
        ]);
    }
}

Ezután hozzuk létre a livewire.search-users.blade nevű view-t. Ugye a fenti komponensben ezt adtuk meg renderelendő tartalomként. Látható, hogy ez a view számít az előző komponensben átadott $users változóra és annak tartalma alapján kilistázza a találatokat.

Felfedezhetjük a livewire mágiát is ezen a ponton. A szöveges input, aminek a wire:model attribútuma van, search néven van elnevezve. Emlékezzünk csak a fenti részre. Az osztályváltozó neve $search. A livewire és laravel kapcsalata itt teremtődik meg. Amit az inputba beírunk, azt a fenti komponens azonnal tudja használni.

{{--resources/views/livewire/search-users.blade.php--}}
<div>
    <input wire:model="search" type="text" placeholder="Search users..."/>
 
    <ul>
        @foreach($users as $user)
            <li>{{ $user->username }}</li>
        @endforeach
    </ul>
</div>

És végül ezt a létrehozott kis felhasználónév alapján kereső komponenst már bármely view – n fel tudjuk használni, ahol ilyen típusú funkcióra van szükség.

{{--resources/views/welcome.blade.php--}}
<body>
    ...
    @livewire('search-users')
    ...
</body>

A fenti megoldáshoz livewire nélkül szükséges lenne egy olyan javascript megoldás, ami a search inputot figyeli, hogy történik-e gépelés az inputban. Ha igen, akkor egy ajax művelettel lehetne biztosítani a fenti működést. Látható, hogy a livewire megoldás sokkal gyorsabb és rövidebb, mint a bonyolult JavaScript szintaktikák.

Mi történik a háttérben?

  • A Livewire a kezdeti komponens kimenetet az oldallal együtt jeleníti meg (a blade-eknél megszokott módon), ezáltal SEO-barát is.
  • Interakció esetén a Livewire AJAX-kérést küld a szervernek az input pillanatnyi értékével
  • A szerver újra rendereli ezt a kis komponenst és az új HTML-kóddal válaszol.
  • A Livewire ezután frissíti a DOM-ot a megváltozott HTML – el.

Tehát látható, hogy nem az oldal újratöltésével, hanem a háttérben, aszinkron módon csak a szükséges részek újratöltését végzi a livewire.

Részletes dokumentáció és oktatóanyag a Livewire dokumentációs oldalán érhető el.

Címkék