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.