CONTATTACI

Guide per aspiranti programmatori

Lezione 28 / 30

Laravel e il Frontend: come integrare il frontend in Laravel

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.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.