de de de nl en de de ca es de de de en en de de de de de de de de de en en en en de en de de de de de de de de de de de en de en de de de de de de de de de de de de de de de de en de de de de de en en de en en de de de de de da it fr de de de ceb en en de ca de fr de it de
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.
Zeit sparen mit Laravel: Livewire und Inertia im Vergleich
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
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:
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
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:
Alle Anwendungsrouten sind in einer einzigen Datei enthalten
Komplexität des clientseitigen Routings entfällt
Kann mit React aufgesetzt werden
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.
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.
Willkommen bei byte5 ... Alexandra Hochhaus Wir bei byte5 ... Vincent Bärtsch Willkommen bei byte5 ... David Glogaza Wir bei byte5 ... Jonathan Rüsche Umbraco Version 10
Ob Blogposts, Übersetzungen oder Case-Storys – Lea kümmert sich um Texte jeder Art. Die informatikbegeisterte Wissenschaft-Medien-Kommunikatorin pflegt außer dem byte5-Blog auch die Social-Media-Kanäle und ist zuständig für die Organisation und Durchführung von Events.
Laravel ist das PHP-Framework unserer Wahl bei der Umsetzung komplexer, missionskritischer Web-Lösungen und sorgt für eine starke, moderne Architektur.
60314 Frankfurt am Main
Telefon: +49 (0) 69 8700506 - 0
Fax: +49 (0) 69 8700506 - 60
Willkommen bei byte5 ... Alexandra Hochhaus Wir bei byte5 ... Vincent Bärtsch Willkommen bei byte5 ... David Glogaza Wir bei byte5 ... Jonathan Rüsche Umbraco Version 10 The Developer’s Diary Teil 3
Copetri Convention 2022 Wir bei byte5 ... Marlon Basten byte5 in Österreich Volltextsuchen mit Laravel Scout Willkommen bei byte5 ... Vincent Bärtsch Deutschlands beste Arbeitgeber