Livewire vs. Inertia.js
Címkék
Laravel
Vue.js
PHP
Livewire
Inertia.js
Megosztás
Vissza

Livewire vs. Inertia.js

M. Novák Kornél

A Laravel 8-as verziójának megjelenésével a fejlesztők új eszközök közül választhatnak az applikációk frontend-jének struktúrálására. Ezekhez az alapot a Jetstream nevű csomag szolgáltatja, amely lehetővé teszi, hogy különösebb erőfeszítés nélkül létrehozzunk egy alap Laravel applikációt, amely kihasználja a modern JS alapú framework-ök előnyeit a Livewire illetve az Inertia.js közötti választás lehetőségének biztosításával.

Ebben a bejegyzésben megvizsgáljuk kicsit közelebbről, hogy mi is az alapvető különbség a két frontend stack között.

  ​

Livewire

​ A Livewire oldalra belépve a következő leírással találkozunk:

"A Livewire egy modern full-stack framework a Laravel számára, amely leegyszerűsíti a dinamikus grafikus felületek készítését, anélkül, hogy a fejlesztő feláldozná a megszokott Laravel környezetet."

Tehát, a Livewire ígérete, hogy összeköttetést biztosít a front-end és back-end környezet között, olyan módon, hogy a már jól megszokott PHP és Laravel funkciók segítségével, felhasználva a modern SPA framework-ök moduláris elrendezését, biztosítja egyedi és újrahasznosítható komponensek készítését a Laravel alapú kódunkba ágyazva.

Nézzünk is egy példát a Livewire oldaláról.

Egy valósidejű kereső elkészítése a Livewire-ben pillanatok alatt elérhető: ​

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

​

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

​ Később ez a komponens szabadon felhasználható a kódunkban: ​

<body>
    ...
    @livewire('search-users')
    ...
</body>

​ Egy rövid összefoglaló a működés lépéseiről:

  • A Livewire lerendereli az alapkomponenst az oldalon (hasonlóan a Blade include parancsához). Ilyen módon biztosítja a SEO barát működést.
  • Amikor a felhasználó interakcióba lép a komponenssel, a Livewire egy AJAX kérést küld a szerverre a megváltozott adatokkal.
  • A szerver újra-rendereli a komponenst és visszaküldi a frissített HTML-t.
  • A Livewire végül intelligens módon frissíti a DOM-ot a változások követésével. ​  

További példák és a Livewire API elérhető a Livewire dokumentációs oldalán: https://laravel-livewire.com/docs/2.x/quickstart

  ​

Inertia.js

​ Az Inertia.js a Livewire-rel ellentétben nem a Laravel Blade template enginjére hagyatkozik, hanem a Vue.js framework template-jeit használja a felületek elkészítése során. Ebből a szemszögből nagyon sok hasonlóságot találunk egy vue.js applikáció fejlesztése és az inertia.js használata között, azzal a jelentős különbséggel, hogy az applikáció útvonalainak kezelését a Laravel fogja végezni a Vue.js routere helyett.

Az Inertia.js használata során tehát Vue.js komponenseket készítünk, kihasználva a framework minden előnyét, de a Laravelre hagyjuk azok renderelését és adatokkal feltöltését.

Fejlesztés közben a renderelésnél kell megadnunk, hogy a Laravel ne Blade alapú view-kat küldjön vissza, hanem az Inertia-t használja: ​

use Illuminate\Http\Request;
use Inertia\Inertia;
​
/**
 * Show the general profile settings screen.
 *
 * @param \Illuminate\Http\Request $request
 * @return \Inertia\Response
 */
public function show(Request $request)
{
    return Inertia::render('Profile/Show', [
        'sessions' => $this->sessions($request)->all(),
    ]);
}

​ Az Inertia.js egy másik előnye, hogy előre definiált komponenseket is tartalmaz (Dialog és Confirmation Modal), illetve, hogy saját validációs csomaggal rendelkezik, amelyet az NPM-en keresztül lehet telepíteni.

További példák és az Inertia.js API elérhető az Inertia dokumentációs oldalán: https://inertiajs.com/

Mielőtt elkezdenél dolgozni a Jetstream-mel javasolt az Inertia.js dokumentáció tanulmányozása, hogy érthető legyen az alapkoncepció.

Ha segítségre lenne szükséged, keress minket nyugodtan elérhetőségeinken.

Kapcsolat