Livewire vs. Inertia beim Laravel Meetup Germany

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.

Freitag, 23. April 2021

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.

Beispiel Vapor - © Laravel

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 Component - © Livewire

Livewire Klasse - © Livewire

Aufruf der Livewire Component in Welcome View - © Livewire

 

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

 

Vorteile:

  • Anfängerfreundlich, da AJAX-Requests ohne bzw. mit wenig JavaScript-Kenntnissen möglich sind
  • SEO-freundlich, da das HTML beim ersten Rendern an den Browser gesendet wird
  • Integration in bestehende Laravel-Seiten möglich
  • Automatisiertes Testing möglich durch eingebundene Testsuite

Nachteile:

  • Erhöhte Serverlast, da alle Statusänderung per AJAX-Request durchgeführt werden
  • Erschwerte Fehlersuche durch das Vermischen von Back- und Frontend-Logik möglich

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.

 

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

 

Vorteile:

  • Alle Anwendungsrouten sind in einer einzigen Datei enthalten
  • Komplexität des clientseitigen Routings entfällt
  • Kann mit React aufgesetzt werden

Nachteile:

  • Wird eine Android/iOS-Anwendung gewünscht, muss die Backend-API erneut erstellt werden
  • Laravel Jetstream derzeit nur für Inertia und Vue konfigurierbar
  • Entwickler muss sowohl PHP als auch Vue beherrschen
  • Eingeschränkte Benutzerfreundlichkeit ohne Vuex

Das Deployment von Vue- und Laravel-Anwendungen in derselben Domain hat oft zu unerwünschtem Verhalten geführt. Die Pflege von einem statt zwei Routern ist daher ein großer Schritt nach vorne. Jetzt können wir einfache Vue-Anwendungen viel schneller entwickeln als es vor Inertia der Fall war.

Jure Knezovic, Junior Entwicklung

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!

Neuigkeiten, Diskussionen, Fragen – sei dabei! Das nächste Laravel Meetup Germany zum Thema Performance-Steigerung mit Octane und Laravel-Fuckups findet online am 06. Mai, von 17:30 – 19:30 Uhr statt.

Jetzt kostenlos anmelden!