Livewire vs. Inertia.js
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.