Fallback Image
Fallback Image

Zeit sparen mit Laravel:

Livewire und Inertia im Vergleich

Beim 12. Laravel Meetup Germany gab‘s Einblicke in‘s Serverless-Deployment mit Vapor sowie State-of-the-Art-UIs mit den Frontend-Varianten Livewire und Inertia.

Bei der neuen Online-Ausgabe unseres Laravel-Meetups kommen Laravelians aus dem gesamten deutschsprachigen Raum zusammen, helfen sich gegenseitig und diskutieren aktuelle Laravel-Themen. Tiefgehenden technischen Input gibt es dabei von den Laravel-Experten von byte5.

Wir haben einen Neustart gewagt: Am 15. April fand unser 12. Laravel Meetup Germany statt – und zwar remote. Obwohl Remote-Calls und -Meetings bei byte5 schon lange zur täglichen Arbeit gehören, haben wir nun mit der neuen Online-Eventreihe bisher unbekanntes Terrain erschlossen. Mit dabei waren sowohl alte Bekannte als auch einige neue Gesichter, über die wir uns sehr gefreut haben.

Unsere Speaker und Laravel-Experten Marcel, Jure und Janosch gaben den Teilnehmenden einen Einblick in die neusten Laravel-Entwicklungen seit Version 8: Serverless-Deployment mit Vapor sowie State-of-the-Art-UIs mit Livewire und Inertia.js.

Laravel Vapor

© Laravel

Laravel Vapor

Den Anfang machte dabei Marcel mit einer Einführung in Laravel Vapor, eine automatisch skalierende, serverlose Deployment-Plattform, welche seit 2019 verfügbar ist und von AWS (Lambda) betrieben wird. Mit Vapor lassen sich Laravel-Anwendungen auf AWS sowie deren Schnittstellen mit Datenbanken (RDS/serverless), Redis Clustern und vielem mehr verwalten. Einige Teilnehmende schilderten ihre Erfahrung mit Vapor und stellten interessante Fragen, welche Marcel unter anderem anhand eines Anwendungsbeispiels erläuterte.

Im zweiten Teil des Meetups übernahmen dann Jure und Janosch. Sie widmeten sich Inertia und Livewire, zwei intuitiv nutzbaren Frontend-Komponenten von Laravel, die im Application-Starter-Kit Jetstream verwendet werden. Die beiden Frontend-Stacks bieten Templates für die Implementierung interaktiver Elemente und viele weitere Komponenten out-of-the-box. Livewire ist dabei für die modernen, reaktiven Blade-Komponenten zuständig, Inertia für die Kopplung des Laravel-Backend mit Vue-Komponenten.

Livewire – ein Full-Stack-Framework für moderne, dynamische Interfaces

Livewire ist ein Full-Stack-Framework für Laravel, dass die Erstellung moderner, dynamischer Interfaces vereinfacht, ohne den Komfort von Laravel zu verlassen. Im ersten Schritt rendert es die Komponentenausgaben mit der Seite, ähnlich wie Laravel Blade. Anschließend führt es einen AJAX-Request an den Server mit aktualisierten Daten aus. Der Server wiederum rendert die Komponenten neu und antwortet mit einem neuen HTML. Zuletzt modifiziert das Framework das Document Object Model (DOM) entsprechend der Änderungen.

Livewire Blade

© Livewire

Livewire Blade

Livewire Class

© Livewire

Livewire Class

Aufruf der Livewire Component in Welcome View

© Livewire

Aufruf der Livewire Component in Welcome View

 

In der praktischen Anwendung bietet Livewire verschiedene Vor- und Nachteile, welche unsere Experten kurz gegenüberstellten:

 

Inertia & Vue für die Erstellung servergesteuerter Web-Apps

Inertia ist eine neue Herangehensweise, um klassische servergesteuerte Web-Apps zu erstellen. Die kleine Bibliothek ermöglicht es den Anwendern, Single-File-Vue-Komponenten aus dem Laravel-Backend zu rendern. Dabei können vollständig clientseitig gerenderte, Single-Page-Apps erstellt werden ohne die hohe Komplexität, welche gewöhnlich mit modernen Single-Page-Webanwendungen (SPAs) einhergeht. Inertia funktioniert dabei wie eine klassische serverseitig gerenderte App: Controller, Datenbankoperationen und Views werden wie bisher geschrieben, wobei JavaScript-Seitenkomponenten nun die Views ersetzen.

Neben Vue bietet Inertia auch offizielle Unterstützung und Dokumentation für React und Svelte. Es wurde für Teams entwickelt, die typischerweise serverseitige Anwendungen realisieren und serverseitig gerenderte Ansichten durch eine JavaScript-Lösung ersetzen möchten. Im Falle von Laravel verwendet Inertia vorhandene Authentifizierungen, erfordert keine Entwicklung der gesamten API und Blade-Ansichten werden durch JavaScript-Komponenten ersetzt.

 

Fallback Image

Wie auch Livewire bietet Inertia den Nutzern verschiedene Vor- und Nachteile:

 

Livewire und Inertia.js im Vergleich

Das Fazit unserer Experten Jure und Janosch: Livewire eignet sich gut für Anfänger mit wenig JavaScript-Erfahrung. Für die Anwendung von Inertia.js werden Vue- oder React-Kenntnisse benötigt, wobei nur Vue aktuell durch Jetstream unterstützt wird. Damit ist Inertia besonders für erfahrene Nutzer geeignet.

Welcher Ansatz für welches Projekt sinnvoll ist, hängt also von der Art der Anwendung und der Erfahrung des Entwicklers mit dem zugrundeliegenden Technologie-Stack ab. Weder Livewire noch Inertia ist die perfekte Lösung für alle Anwendungsfälle. Dennoch bieten beide Technologien ihren Anwender viele nützliche Funktionen und tun vor allem eines: ihnen viel Zeit ersparen.

Wir bedanken uns bei allen Teilnehmenden für die spannenden Einblicke und regen Diskussionen. Wir freuen uns jetzt schon auf die Weiterführung der Serie am 6. Mai und auf den ein oder anderen Special-Guest wie Taylor Otwell!

Allen, die sich weiter in die behandelten Themen einlesen möchte, legen wir zwei Tutorial-Serien zu Vapor und Livewire ans Herz.

 

Komm zum

Laravel Meetup Germany!

Jetzt kostenlos anmelden!