Livewire w Laravel

Livewire to biblioteka open-source, która pozwala tworzyć dynamiczne interfejsy użytkownika bez konieczności pisania dużej ilości kodu JavaScript. Została stworzona z myślą o wydajności, prostocie i płynnym zintegrowaniu się z frameworkiem Laravel. Jej głównym założeniem jest ułatwienie komunikacji między warstwą widoku (Blade) a warstwą logiki (PHP) przy pomocy automatycznych żądań AJAX i mechanizmu, który nazywany jest „two-way data binding”.

Czym jest Livewire i jakie problemy rozwiązuje?

W klasycznym podejściu do budowania aplikacji z Laravelem konieczne jest pisanie pewnej ilości kodu JavaScript, aby obsłużyć bardziej interaktywne i dynamiczne elementy UI. Wiele osób sięga wtedy po takie frameworki jak Vue.js czy React. Z jednej strony daje to bardzo duże możliwości, ale z drugiej – wymaga dodatkowej wiedzy i podziału projektu na „świat Laravela” (PHP, Blade, routing itp.) oraz „świat frontendu” (JavaScript, Vue, React, Webpack lub Vite, itd.).

Livewire eliminuje ten podział i pozwala tworzyć dynamiczne komponenty w ramach ekosystemu Laravela, pisząc głównie w PHP i korzystając z szablonów Blade. Główne korzyści to:

  1. Mniej JavaScriptu – wiele rzeczy, które normalnie wymagałyby osobnej logiki JS, można teraz załatwić w samym Livewire.
  2. Spójna architektura – nie musimy tworzyć API do komunikacji z Vue/React, bo żądania AJAX obsługuje za nas Livewire.
  3. Szybka iteracja – zmiany w logice można wprowadzić bez przechodzenia do osobnego ekosystemu (npm, Vite, bundlery itp.).

Podstawowe różnice między Livewire a klasycznym podejściem (Laravel + JavaScript / frameworki JS)

  • Komunikacja z serwerem

    • Klasyczne podejście: Zazwyczaj tworzy się endpointy AJAX (REST lub GraphQL), do których wysyła się żądania z frontendu napisanego w JS (Vue, React lub „vanilla” JS).
    • Livewire: Samo zarządza żądaniami AJAX – każdy komponent Livewire może się komunikować z serwerem „pod spodem”, a my prawie nie dotykamy kodu AJAX.

  • Odświeżanie widoku

    • Klasyczne podejście: Po otrzymaniu odpowiedzi z serwera, frontendowy framework samodzielnie aktualizuje wybrane fragmenty DOM.
    • Livewire: Wysyła do serwera aktualny stan komponentu i otrzymuje już wygenerowany fragment widoku Blade. Ten fragment jest dynamicznie wstawiany w istniejący kod HTML.

  • Architektura

    • Klasyczne podejście: Możemy mieć w Laravelu kontrolery i Blade, ale dynamiczne UI zwykle pisane jest w zupełnie innej warstwie (kod JS).
    • Livewire: Komponenty Livewire mają swoją klasę w PHP (kontroler), a widok jest w pliku Blade o tej samej nazwie. To wszystko pozostaje w strukturze Laravela, bez dużego rozdziału na dwie różne technologie.

Architektura Livewire (komponenty, komunikacja AJAX, odświeżanie widoków)

Każdy komponent Livewire składa się z dwóch plików:

  1. Klasa PHP – zawiera logikę biznesową i stan komponentu (np. aktualne wartości zmiennych).
  2. Plik Blade – odpowiada za część widoku (HTML z dyrektywami Blade i atrybutami wire:*).

Gdy użytkownik wchodzi w interakcję z komponentem (np. klikając przycisk, zmieniając wartość w polu tekstowym), Livewire automatycznie wysyła żądanie AJAX do serwera, który:

  • Uruchamia kod w klasie komponentu (np. wykonuje się funkcja increment(), która podnosi licznik).
  • Generuje nową wersję widoku Blade w oparciu o zaktualizowane wartości zmiennych.
  • Zwraca tę nową wersję HTML do przeglądarki, która podmienia tylko fragment odpowiadający naszemu komponentowi (bez przeładowania całej strony).

Omówienie środowiska: wymagania, instalacja Laravela i Livewire

Aby skorzystać z Livewire, potrzebujemy:

  • Zainstalowanego PHP w wersji zgodnej z aktualnym Laravelem (zwykle jest to PHP 8.x).
  • Kompozytora (Composer) do zarządzania pakietami w PHP.
  • Zainstalowanego Laravela (np. za pomocą composer create-project laravel/laravel nazwa-projektu lub laravel new nazwa-projektu).

Po utworzeniu i uruchomieniu projektu Laravel (np. lokalnie z użyciem komendy php artisan serve), możemy zainstalować Livewire:

				
					composer require livewire/livewire

Następnie w plikach Blade, w których chcemy korzystać z Livewire, musimy dodać dyrektywę:

				
					@livewireStyles

w sekcji <head> (najlepiej w głównym pliku layoutu np. resources/views/layouts/app.blade.php) oraz:

				
					@livewireScripts

przed zamknięciem taga </body>. Pozwala to Livewire prawidłowo działać w przeglądarce (m.in. osadza skrypty JS potrzebne do obsługi AJAX).

Pierwszy komponent – „Hello World”

Załóżmy, że chcemy stworzyć prosty licznik, który będzie zwiększał się po kliknięciu przycisku. Możemy to zrobić w kilku krokach.

1. Generowanie komponentu

W katalogu projektu w terminalu wydajemy polecenie:

				
					php artisan make:livewire Counter

To polecenie:

  • Utworzy plik klasy komponentu app/Http/Livewire/Counter.php.
  • Utworzy plik widoku resources/views/livewire/counter.blade.php.

2. Implementacja klasy komponentu

Domyślna zawartość Counter.php może wyglądać mniej więcej tak (pomijając komentarze):

				
					namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}
  • Zmienna $count przechowuje aktualny stan licznika.
  • Metoda increment() zwiększa ten licznik.
  • Metoda render() zwraca widok (w tym przypadku livewire.counter).

3. Widok komponentu

Otwieramy plik resources/views/livewire/counter.blade.php i uzupełniamy:

				
					<div style="text-align: center;">
    <h1>Licznik: {{ $count }}</h1>

    <button wire:click="increment">
        Zwiększ
    </button>
</div>

Zwróć uwagę na atrybut wire:click="increment". Mówi on Livewire, że gdy nastąpi kliknięcie w ten przycisk, ma wywołać w komponencie metodę increment().

4. Umieszczenie komponentu w widoku

Aby wyświetlić nasz licznik na stronie, w którymś pliku Blade (np. na stronie głównej resources/views/welcome.blade.php) używamy dyrektywy:

				
					@livewire('counter')

lub alternatywnie w wersji składni:

				
					<livewire:counter />

Teraz, gdy uruchomimy w przeglądarce naszą aplikację i przejdziemy do tej strony, zobaczymy przycisk i wartość licznika. Kliknięcie przycisku natychmiast wywoła funkcję po stronie serwera i zaktualizuje widok, bez przeładowania całej strony.

Struktura plików Livewire

  • Klasa komponentu (PHP)
    Znajduje się w katalogu app/Http/Livewire. Nazwa klasy powinna być zbieżna z nazwą pliku i zwykle opisuje to, co dany komponent robi (np. Counter, ContactForm, PostsList).

  • Plik widoku (Blade)
    Znajduje się w katalogu resources/views/livewire. Nazwa pliku to z reguły nazwa komponentu zapisana małymi literami z myślnikami lub podkreśleniami (np. counter.blade.php, contact-form.blade.php).

  • Połączenie klasy z widokiem
    Domyślnie Laravel Livewire dopasowuje widok do nazwy klasy. Możemy również definiować inną ścieżkę w metodzie render().

Mechanizm „two-way data binding” (wire:model, wire:click, itp.)

Livewire udostępnia wiele atrybutów wire:*, które ułatwiają interakcję z danymi:

  1. wire:model – tworzy powiązanie między polem formularza (np. <input>, <select>) a zmienną w komponencie Livewire. Wszelkie zmiany w inputach automatycznie aktualizują wartość zmiennej w komponencie.
  2. wire:click=”metodaKomponentu” – po kliknięciu uruchamia zdefiniowaną metodę w komponencie (np. increment).
  3. wire:submit.prevent=”zapiszDane” – w przypadku formularza można uniknąć tradycyjnego odświeżania strony i zamiast tego wywołać metodę w komponencie po kliknięciu przycisku submit.
  4. wire:loading – pozwala wyświetlać np. spinner lub ładowanie w czasie, gdy Livewire czeka na odpowiedź z serwera.

Przykład użycia wire:model w prostym formularzu:

				
					<div>
    <input type="text" wire:model="name" placeholder="Twoje imię">
    <button wire:click="saveName">Zapisz</button>
</div>

W pliku klasy Livewire może to wyglądać tak:

				
					public $name;

public function saveName()
{
    // Zmienna $name zawiera aktualną wartość wpisaną w polu tekstowym
    // Możemy np. zapisać do bazy
    // User::create(['name' => $this->name]);
}

Ćwiczenia – Twój pierwszy komponent

1. Zainstalowanie projektu Laravel i dodanie Livewire

Stwórz nowy projekt (o ile go jeszcze nie masz)

				
					composer create-project laravel/laravel my-livewire-app

Przejdź do katalogu projektu

				
					cd my-livewire-app

Zainstaluj Livewire

				
					composer require livewire/livewire

Dodaj dyrektywy @livewireStyles i @livewireScripts w plikach Blade (zwykle layout resources/views/layouts/app.blade.php).

2. Stworzenie pierwszego komponentu licznika

W terminalu w katalogu projektu:

				
					php artisan make:livewire Counter

W pliku app/Http/Livewire/Counter.php upewnij się, że masz zmienną $count i metodę increment().

W pliku resources/views/livewire/counter.blade.php dodaj prosty kod HTML z przyciskiem zwiększającym licznik.

W widoku głównym (np. welcome.blade.php) wywołaj swój komponent

				
					@livewire('counter')

lub

				
					<livewire:counter />

Odpal lokalny serwer (np. php artisan serve) i wejdź w przeglądarce na http://127.0.0.1:8000. Upewnij się, że przycisk działa, a liczba licznika rośnie bez przeładowania strony.

Gratulacje! Masz już działający przykład Livewire.

Podsumowanie

Livewire to świetne rozwiązanie, jeśli chcesz szybko dodawać interaktywne elementy w aplikacji Laravel bez zanurzania się w kompletne frameworki JS. Umożliwia:

  • Trzymanie większej części logiki w PHP.
  • Łatwe dodawanie reaktywnych elementów.
  • Zmniejszenie konieczności pisania kodu AJAX i JavaScript.

W kolejnym kroku możesz zainteresować się bardziej zaawansowanymi tematami Livewire, takimi jak:

  • Walidacja danych „w locie”.
  • Obsługa zdarzeń i komunikacja między komponentami.
  • Persistowanie danych w modelach Eloquent.
  • Integracja z innymi narzędziami ekosystemu Laravela (np. Alpine.js).

Dzięki Livewire tworzenie interaktywnych funkcji w Laravelu staje się dużo prostsze – wypróbuj to sam, wykonując ćwiczenia, i przekonaj się, jak szybko można wdrożyć nowe funkcjonalności w aplikacji. Powodzenia!

Kategorie