Laravel/UI vs Vue vs Breeze vs Jetstream: Inertia vs Livewire


SpĂ€testens mit der EinfĂŒhrung von Laravel Jetstream sollte erneut hinterfragt werden, auf welche Pfeiler das neue Webprojekt gestellt werden soll. FĂŒr einen kurzen Überblick habe ich mögliche Varianten kurz zusammengefasst.

Server:PHP und Client:Javascript

UrsprĂŒnglich wurden fĂŒr eine Laravel-Webseite als Frontend Blade-Templates und Bootstrap fĂŒr das Layout verwendet, dabei wurde die Webseite serverseitig mit PHP im Controller und den Blade-Templates gerendert und ein fertiger HTML-Code fĂŒr die Anzeige zum Browser geschickt. Der Aufruf einer Webseite funktioniert ĂŒber diese Komponenten:

Browser -> Routes -> Controller -> Model -> View (HTML) -> Browser 

Heute geht der Trend stark in Richtung Client-Side Rendering und SPA (Single-Page-Applications). Beim Client-Side Rendering schickt der Webserver JavaScript zum Browser, welcher diesen interpretiert und sich bei Bedarf die Inhalte vom Server lĂ€dt. Der Vorteil des Client-Side Rendering liegt hauptsĂ€chlich in der Benutzerfreundlichkeit der Seite: diese fĂŒhlt sich mehr wie eine Anwendung an. 

Das eigentliche Laravel-Framework besteht aus diversen PHP-Quellen die mittels composer auf einem PHP-basierten Webserver installiert werden, als Browser-Frontend sind primĂ€r Blade-Templates vorgesehen. FĂŒr dynamische Inhalte im Browser werden zusĂ€tzliche Java-Script Frameworks, wie Vue.js, eingesetzt. Vue.js erweitert die Möglichkeiten im Browser und lĂ€dt die Daten vom Backend mit Hilfe von AJAX-Requests (Axios), welche dann wieder im klassischen Laravel-Controller abgehandelt werden.

Der Request schaut dann wie folgt aus:
Browser -> Routes (web.php) -> Controller -> View mit Javascript-Sourcen -> Browser (lĂ€dt Seite mit Ajax-Sourcen und fĂŒhrt AJAX-Requests aus) -> Routes (web.php oder api.php) -> Controller (Rest-API-JSON-Antwort) -> Browser 

Schauen wir uns die Version 8 von Laravel an, bietet Laravel mit Jetstream neben dem ursprĂŒnglichen Frontend-Template Laravel/ui, weitere vorbereitete Frontend-Varianten welche sich besser in das Laravel-Backend integrieren: Inertia und Livewire.

Laravel/ui

Eine klassische Laravel-Applikation war bis zur Version 8 auf Basis von Blade-Templates fĂŒr HTML, Bootstrap fĂŒr die Styles (css) und Vue.js, sowie jQuery, axios usw. fĂŒr den optionalen JavaScript-Teil im Browser. 

Ein Beispiel eines klassischen Laravel MVC-Implementierung ist hier beschrieben: Laravel Beispiel Tutorial - Schritt fĂŒr Schritt. 

Laravel/ui bietet zudem vorbereitete Blade-Files fĂŒr eine Benutzer-Registrierung und Anmeldung, siehe: Laravel Authentication und Authorization Beispiel

Die Assets benötigen, in der Standard-Installation, folgende GrĂ¶ĂŸen: 

                 Asset      Size  Chunks                          Chunk Names
          /css/app.css   142 KiB       0  [emitted]               /js/app
            /js/app.js   256 KiB       0  [emitted]        [big]  /js/app

(getestet mit Laravel 8.5.6, ohne jeglicher Anpassung)

Breeze

Breeze ist die jĂŒngste Variante unter den Laravel Starter Kits und bietet Ă€hnlich Laravel/ui eine OberflĂ€che fĂŒr die Registrierung und die Benutzeranmeldung. Der Unterschied zu Laravel/ui ist der Einsatz von Tailwind CSS und Alpline.js anstelle von Bootstrap fĂŒr das Styling. Tailwind macht die Assets schlanker, entsprechend sind diese kleiner, als mit Laravel/ui:

                 Asset       Size  Chunks             Chunk Names
          /css/app.css   17.2 KiB       0  [emitted]  /js/app
            /js/app.js    112 KiB       0  [emitted]  /js/app

(getestet mit Laravel 8.5.6, ohne jeglicher Anpassung)

Jetstream

Laravel Jetstream vereinfacht die Kommunikation zwischen Frontend und Backend und liefert eine Anwendungsvorlage. Diese umfasst die Anmeldung, Registrierung, E-Mail-ÜberprĂŒfung, Zwei-Faktor-Authentifizierung, Sitzungsverwaltung, API-UnterstĂŒtzung ĂŒber Laravel Sanctum und ein optionales Teammanagement. Anstelle von Bootstrap kommt Tailwind CSS zum Einsatz. FĂŒr die Umsetzung kann, wie bereits erwĂ€hnt, zwischen Livewire und Inertia gewĂ€hlt werden. Jetstream wird zu Laravel mit folgenden Befehl hinzugefĂŒgt: "composer require laravel/jetstream",  siehe auch: Laravel - Grundlagen - Beispiel - Übersicht. Nach der Installation von Livewire oder Inertia (php artisan jetstream:install livewire oder inertia), bietet Laravel eine fertige Applikation mit den oben beschriebenen Basis-Funktionen.

Livewire

Bei der Installation von Livewire (php artisan jetstream:install livewire --teams), wird als Template-Engine Blade verwendet. Jetstream ĂŒbernimmt dabei Teile der AJAX-Kommunikation zwischen den Blade-Templates und dem Controller. Livewire kann mit den bestehenden Blade-Templates gemeinsam betrieben werden und somit optional an bestimmten Stellen der Applikation verwendet werden. Livewire erweitert bestehende Blade-Templates um Livewire-Components. In einem Blade-Template kann mit @livewire('my-component') eine Livewire-View geladen werden, diese kann dann Elemente fĂŒr eine Interaktion beinhalten, darauf reagieren und per AJAX Daten von einem zugehörigen Livewire-Component laden. Alle Statusupdates werden zwischen Frontend und Backend mittels AJAX-Requests ausgetauscht. Stellen wir uns als Beispiel ein einfaches Formular vor: Normal wĂŒrde das Formular im Browser ausgefĂŒllt und der Inhalt mit einem Request zum Server geschickt werden, anders bei Livewire: Jede Änderung, und sei es nur ein einzelner anderer Buchstabe im Formular, wird sofort ĂŒbertragen, Dropdowns ev. nachgeladen, etc. Beim eigentlichen Speichern des Formulars wird dann nur mehr eine Aktion dazu geschickt, die Daten des Formulars sind lĂ€ngst schon im Backend. Livewire generiert hier wesentlich mehr Requests und bei einer schlechten Internetverbindung wĂŒrde das Formular eventuell nicht mehr richtig funktionieren. Die Assets schlagen mit dem Default-Livewire-Setup wie folgt zu Buche:

                 Asset       Size  Chunks             Chunk Names
          /css/app.css     92 KiB       0  [emitted]  /js/app
            /js/app.js    112 KiB       0  [emitted]  /js/app

(getestet mit Laravel 8.5.6, ohne jeglicher Anpassung)

Herstellerseite: laravel-livewire.com.

Vorteile:

  • mit Livewire können AJAX-Requests ohne JavaScript-Kenntnisse umgesetzt werden, entsprechend fĂ€llt gerade fĂŒr AnfĂ€nger einiges an KomplexitĂ€t weg. (vue, npm, webpack, ...)
  • Livewire ist suchmaschinenfreundlich, da beim initialen rendern HTML an den Browser geliefert wird.
  • Livewire kann in bestehende Laravel-Seiten integriert werden.

Nachteile:

  • alle StatusĂ€nderungen werden per AJAX-Request ĂŒbertragen, entsprechend produziert Livewire eine höhere Serverlast.
  • Backend und Frontend-Logik verschmelzen, was bei einer Fehlersuche Schwierigkeiten bereiten könnte.

Inertia

Bei Verwendung von Inertia wird Vue.js als Template-Engine verwendet (php artisan jetstream:install inertia --teams). Inertia ist eine kleine Library, die es ermöglicht Daten vom Laravel-Backend in die Props bestimmter Vue-Components zu ĂŒbertragen. Als Router wird nicht Vue Router, sondern Laravel's Router (routes/web.php) und als Controller ein Laravel-Controller verwendet, welcher eine Vue-Component aufrufen kann, siehe auch: inertiajs.com. Die GrĂ¶ĂŸe der Assets schaut mit der Standard-Inertia Installation wie folgt aus:

css/app.css │ 26 KiB 
/js/app.js │ 344 KiB

(getestet mit Laravel 8.21.0, ohne jeglicher Anpassung)

Vorteile:

  • Ideal fĂŒr komplexere Seiten oder Anwendungen, speziell fĂŒr den Bereich innerhalb einer Benutzeranmeldung.
  • die Applikations-Logik zwischen Frontend und Backend ist sauber getrennt.

Nachteile:

  • Nachdem die Seite mittels JavaScript gerendert wird und initial beim Laden eventuell etwas mehr Zeit benötigt, könnte das eventuell einen negativen Einfluss auf das Suchmaschinenergebnis haben. 

Fazit

Speziell fĂŒr AnfĂ€nger bietet Livewire eine Möglichkeit schnell und mit nur wenig zusĂ€tzlichem Wissensaufbau Applikationen zu erstellen. Inertia setzt ein zusĂ€tzliches Vue-Wissen voraus, spielt aber seine Vorteile speziell fĂŒr Anwendungsbereiche innerhalb einer Benutzeranmeldung, wie Admin-Panels oder Userbereiche, voll aus. Der Einsatz der beschriebenen Varianten hĂ€ngt stark davon ab, was genau umgesetzt werden soll: Theoretisch könnten öffentliche Bereiche einer Webseite klassisch erstellt werden, Userbereiche ĂŒber Jetstream. Keine der Varianten ist fĂŒr alle Einsatzzwecke die Beste und auch Jetstream Ă€ndert nichts daran, dass ein bestimmtes Laravelbasiswissen fĂŒr die Erstellung der Webanwendung vorausgesetzt wird.

positive Bewertung({{pro_count}})
Beitrag bewerten:
{{percentage}} % positiv
negative Bewertung({{con_count}})

DANKE fĂŒr deine Bewertung!


Fragen / Kommentare


(sortiert nach Bewertung / Datum) [alle Kommentare(neueste zuerst)]

✍anonym
11.01.2021 12:41
Eine Anleitung, wie man mit Lifewire sein System aufbauen und erweitern kann, das wÀre hilfreich.

z.B. ein Kunden Model mit CRUD, wo wie am saubersten Blade organisieren.

Tests wÀren auch super !!!

✍anonym
18.08.2021 08:18
Servus! Ich habe eine Laravel-Website mit Breeze aufgesetzt. Kann ich diese ohne weiteres zu Jetstream/Livewire upgraden?
↳
✍Bernhard
gepostet am 18.08.2021 08:23
Nachdem Breeze normale Blade-Views verwendet und Jetstream / Livewire eigene Views verwendet, sollten bestehende Views am besten auf Jetstream/Livewire umgebaut werden, ein einfaches Upgrade gibt es meines Wissens nicht.

Beitrag erstellt von Bernhard