Fallback Image
Fallback Image

Zeit sparen mit Laravel:

Livewire und Inertia im Vergleich

Beim unserem Meetup im September 2024 drehte sich alles um Livewire und Inertia. Unsere Laravel-Entwickler Phillip und Jure widmeten sich den 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.

Phillip und Jure haben die beiden Technologien gegenübergestellt und sind auf Stärken, Schwächen und praktische Anwendungsszenarien eingegangen. Die wichtigsten Erkenntnisse haben wir hier zusammengefasst. 

Bei unseren Meetups kommen Laravelians aus dem gesamten deutschsprachigen Raum zusammen, helfen einander und diskutieren aktuelle Laravel-Themen. Tiefgehenden technischen Input gibt es dabei von den Laravel-Experten von byte5. Die Meetups finden hybrid statt, in unserem Büro in Frankfurt am Main oder online via Zoom. 

Entdecke unsere nächsten Meetups

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

Livewire ist ein Full-Stack-Framework für Laravel, das 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 den Änderungen.

Wann lohnt es sich Livewire einzusetzen?

Wenn wenig Entwickler zur Verfügung stehen: Front- und Backend sind sehr eng gekoppelt und man kann mit geringeren personellen Ressourcen arbeiten.

Wenn man Laravel-Entwickler ist, aber wenig Expertise in JavaScript-Frameworks hat: Livewire hat eine relativ steile Lernkurve. Laravel-Entwickler können direkt loslegen, ohne JavaScript-Frameworks lernen zu müssen. 

Wenn man ein Legacyprojekt modernisieren möchte: Bestehende Projekte können nach und nach modernisiert werden, indem einzelne Komponenten durch Livewire ersetzt werden, ohne das gesamte System auf einmal umstellen zu müssen.

Was muss man dabei beachten?

Backend-/Frontend-Aufteilung: Da Backend und Frontend sehr eng verbunden sind, macht es mit Livewire weniger Sinn, wenn zwei Teams getrennt an Backend und Frontend arbeiten.

„The way of Livewire“: Livewire hat eine andere Herangehensweise, an die man sich als erfahrener Laravel-Entwickler erst gewöhnen muss. Dabei kann es zu Bugs und Schwierigkeiten beim Troubleshooting kommen.

Livewire ist kein Komplettpaket: Livewire ist nicht vergleichbar mit komplexen Frameworks wie React und Vue, da es weniger umfangreich ist und über weniger Komponenten, Bibliotheken und Komponenten verfügt. 

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

Inertia ist eine neue Herangehensweise, um klassische servergesteuerte Web-Apps zu erstellen. Wir setzen es hauptsächlich mit Vue ein, aber Inertia bietet 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.

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.

Wann bietet sich Inertia an?

Wenn Entwickler schon Erfahrung mit Vue/React haben: Dann habt ihr mit Inertia mehr Möglichkeiten und es ist leicht einzusetzen.

Bei sehr großen Anwendungen: Inertia ist stärker im Umgang mit großen Anwendungen und viel dynamischem Content.

Bei separaten Front- und Backend-Teams: Wenn die Ressourcen ein eigenes Front- und Backend-Team zulassen, ist Inertia eine gute Wahl. 

Livewire und Inertia.js im Vergleich

Das Fazit unserer Experten Phillip und Jure: 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. Damit ist Inertia besonders für erfahrene Nutzer geeignet.

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

In der Aufzeichnung unseres Meetups gehen Phillip und Jure näher auf beide Technologien und die jeweiligen Unterschiede ein. Außerdem geben sie live einen Einblick in den Code.  Schau gerne rein.

Fallback Image

Komm zu unserem nächsten Meetup!

Entdecke unsere nächsten Events.

Die nächsten Termine