Frontend

​

Overzicht

Laravel is een backend-framework, maar hecht ook veel waarde aan de ontwikkelervaring aan de frontend-kant.
In Laravel 13 kun je zowel PHP-centrisch werken als JavaScript-frameworks zoals React, Vue en Svelte inzetten. Welke aanpak je kiest, wordt overzichtelijker als je naar deze drie punten kijkt:

• Wil je de UI vooral in PHP schrijven?
• Wil je de UI vooral in JavaScript / TypeScript schrijven?
• Wil je alles in één repository houden, of de API en SPA scheiden?

​

Verder met PHP

​

Blade

Blade is de standaard template-engine van Laravel. Je retourneert views vanuit controllers of routes, en de server stuurt de gegenereerde HTML naar de browser. Voordelen

• Integreert naadloos met de routing, validatie en authenticatie van Laravel
• Je kunt bijna alles in PHP afhandelen, dus de leercurve is laag
• Past goed bij pagina’s waar SEO en de initiële weergave belangrijk zijn

Nadelen

• Bij elke paginanavigatie of formulierverzending wordt de pagina al snel volledig opnieuw gerenderd
• Voor complexe interacties heb je aanvullende JavaScript nodig

Blade is geschikt voor beheerpanelen, interne tools, contentgerichte schermen en applicaties die vooral rond formulieren draaien.

​

Livewire

Laravel Livewire is een aanpak waarmee je, voortbouwend op Blade, dynamischere UI’s PHP-centrisch implementeert. Interacties zoals modals, zoeken en inline bewerken bouw je met een ervaring die dicht bij React of Vue ligt. Voordelen

• Je bouwt dynamische UI’s in het verlengde van PHP en Blade
• Sluit goed aan op het state-management en de validatie van Laravel
• Wil je alleen op specifieke plekken JavaScript toevoegen, dan combineert het makkelijk met Alpine.js

Nadelen

• Complex client-side state-management gaat minder goed dan met JavaScript-frameworks
• Soms minder geschikt voor grootschalige SPA’s waar de frontend een grote verantwoordelijkheid draagt

​

PHP-first starter kits

De starter kits van Laravel 13 bevatten een op Livewire gebaseerde optie voor teams die PHP-centrisch tot en met dynamische UI’s willen bouwen. Beginnen met alleen Blade kan natuurlijk ook, maar de PHP-first optie die als starter kit wordt aangeboden is Livewire. Authenticatie, layouts en de Vite-configuratie worden in één keer klaargezet, zodat je zo snel mogelijk kunt starten met ontwikkelen.

​

JavaScript-frameworks gebruiken

​

Inertia + React / Vue / Svelte

Inertia is de brug waarmee je paginacomponenten bouwt in React, Vue of Svelte, terwijl je de routes, controllers en authenticatie van Laravel blijft gebruiken. Je hoeft de API-server en SPA niet volledig te scheiden en bouwt een moderne UI binnen één Laravel-applicatie. Voordelen

• Je kunt het componentenmodel van React / Vue / Svelte gebruiken
• Routing en authenticatie kun je bij Laravel laten
• Backend en frontend zijn makkelijk in één repository te beheren

Nadelen

• Er is meer te leren dan bij een opzet met alleen Blade
• Kennis van de Node.js-toolchain en TypeScript is al snel nodig

In de officiële starter kits van Laravel 13 kun je React / Vue / Svelte + Inertia vanaf het begin kiezen.

​

API en een onafhankelijke SPA scheiden

Je kunt er ook voor kiezen de frontend volledig van Laravel te scheiden en de API te gebruiken vanuit een aparte SPA of mobiele app. Dit past goed wanneer je dezelfde backend wilt delen met meerdere clients. In dat geval vervult Laravel vooral deze rollen:

• API-routes aanbieden
• Authenticatie en autorisatie (bijvoorbeeld Sanctum)
• JSON-responses vormgeven (bijvoorbeeld Eloquent API Resources)

Voordelen

• Makkelijk uit te rollen naar meerdere clients zoals web, mobiel en desktop
• De technologiekeuze voor de frontend staat los van Laravel zelf

Nadelen

• Authenticatie, dataophaling en deployment moet je apart ontwerpen
• Al snel complexer dan een opzet die volledig binnen één Laravel-app blijft

​

JavaScript-first starter kits

Met de starter kits begin je met Inertia, React / Vue / Svelte, Tailwind CSS en Vite al ingebouwd. Ook de authenticatieschermen staan vanaf het begin klaar, zodat je je kunt concentreren op UI-ontwikkeling.

​

Assets bundelen met Vite

Welke aanpak je ook kiest, in Laravel 13 bouw je CSS en JavaScript doorgaans met Vite. Bij Blade en Livewire bundel je lichte scripts en styles met Vite, bij Inertia de volledige frontend-code van je applicatie. De voordelen van Vite zijn:

• Snelle HMR tijdens lokale ontwikkeling
• Bundeling en versionering van productie-assets
• Integratie met de @vite()-directive van Laravel

​

Vergelijking van aanpakken

​

Volgende stappen