Laravel è un framework nato in ambito backend e il suo punto di forza è fornire tutte le funzionalità necessarie “lato server” a una moderna applicazione web o servizio di API. D’altro canto, uno degli obiettivi di Laravel è anche poter fornire una esperienza di sviluppo full stack di qualità. Per questo motivo, Laravel offre soluzioni integrate e approcci versatili per poter gestire tutto quello che riguarda la parte frontend di una applicazione web.
Nell’approcciarsi alla gestione del front end con Laravel, è importante distinguere tre diverse aree:
- building degli asset
- implementazione del frontend con il linguaggio PHP
- implementazione del frontend con framework JavaScript
Con building degli asset si intendono tutte le attività necessarie a trasformare una serie di file sorgenti in risorse CSS o JS erogate dalla nostra applicazione Laravel. Più semplicemente, partendo di una serie di file sorgenti Sass o Less e di singoli moduli JavaScript o TypeScript presenti nella directory resources della nostra applicazione, il processo di build crea una serie di file CSS e JavaScript nella directory public ottimizzati per l’erogazione.
Tale processo di build è necessario a entrambe le modalità di implementazione che si potrà scegliere e nelle versioni più recenti di Laravel è gestito da Vite.
La scelta di come affrontare lo sviluppo front end, invece, dipende molto dal tipo di applicazione web che si vuole realizzare. Tale scelta influenzerà molto anche lo stack di tecnologie e librerie che sarà necessario includere nella nostra applicazione.
Frontend con PHP
In questa modalità di implementazione del frontend è l’applicativo Laraver lato server – e quindi PHP – a gestire tutto quello che riguarda la generazione di ogni pagina HTML. In questo contesto, l’interazione tra il browser e il server avviene principalmente per mezzo di submit di form HTML o di altre richieste di risorse specifiche (per esempio la richiesta di una pagina di index con una query string per indicare ordinamento o eventuali filtri).
Abbiamo già visto queste implementazioni nel capitolo dedicato ai template Blade e nella costruzione dei form per creare una nuova utenza nella lezione sull’autenticazione.
Questo approccio, però, presenta alcuni limiti nel momento in cui si voglia offrire un’esperienza d’uso più dinamica nella propria web application, in linea con le modalità di interazione che gli utenti si aspettano di trovare sul web.
Per coloro che non vogliono abbandonare il linguaggio PHP ma hanno la necessità di realizzare dei frontend dinamici e moderni, Laravel mette a disposizione Livewire. Approfondiremo qualche dettaglio su Livewire in una prossima lezione.
Frontend con framework JavaScript
Nel caso in cui si voglia realizzare il proprio frontend utilizzando un framework JavaScript come Vue o React ed avvantaggiarsi dell’ecosistema di pacchetti NPM – ad esempio per realizzare applicazioni single-page app, con il rendering completamente client-side – è necessario indirizzare alcuni problemi che potrebbero presentarsi nel momento in cui dobbiamo far interagire due progetti ben distinti (il back end con Laravel e il front end JavaScript).
Non solo, infatti, potremmo dover tenere sincronizzate e coordinare due diverse codebase, ma dovremmo anche trovare il modo di far convivere due progetti che hanno soluzione e implementazioni molto diverse a problematiche quali il routing, il recupero e utilizzo dei dati per fare il rendering della view (data hydration) e la possibilità di riconoscere le sessioni autenticate.
La soluzione suggerita da Laravel per questi scenari è Intertia, un non framework che si offre come ponte tra il mondo PHP del backend Laravel e il mondo JavaScript del frontend Vue o React.
Intertia va installato come pacchetto Composer nella propria applicazione Laravel e come pacchetto NPM al proprio frontend. In questo modo, sarà possibile mantenere invariata la gestione di rotte e controller nella applicazione Laravel. Tali rotte e controller, però, restituiranno il render di pagina Intertia invece della “classica” view di un template Blade.
class BookController
{
public function index()
{
$users = Book::paginate(RESULTS_PER_PAGE);
return Inertia::render('Books', [
'books' => $books
]);
}
}
Le pagine Intertia altro non sono che componenti realizzati in View o React e salvati nella directory resources/js/Pages della propria applicazione Laravel. I dati passati al metodo render saranno usati per fare hydration delle props del componente JavaScript.
<script setup>
import Layout from './Layout'
import { Link, Head } from '@inertiajs/vue3'
defineProps({ books: Array })
</script>
<template>
<Layout>
<Head title="Books" />
<div v-for="book in books" :key="book.id">
<Link :href="`/book/${book.id}`">
{{ book.title }}
</Link>
<div>{{ book.excerpt }}</div>
</div>
</Layout>
</template>
Per maggiori approfondimenti su Intertia rimandiamo al sito del progetto o a uno dei vari starter kit di Laravel pensati per integrare frontend in React o Vue.
