Livewire vs. Inertia.js
Megosztás

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.