Frontend

Introduzione

Laravel è un framework backend che fornisce tutte le funzionalità necessarie per creare applicazioni web moderne, come routing, validazione, caching, code di attesa, archiviazione dei file e altro ancora. Tuttavia, riteniamo importante offrire agli sviluppatori un’esperienza completa di sviluppo, che comprenda anche potenti approcci per la creazione del frontend dell’applicazione.

Ci sono due modi principali per affrontare lo sviluppo del frontend quando si costruisce un’applicazione con Laravel, e la scelta dell’approccio dipende dal fatto che si desideri costruire il frontend sfruttando PHP o utilizzando framework JavaScript come Vue e React. Discuteremo entrambe le opzioni di seguito, in modo che tu possa prendere una decisione informata riguardo all’approccio migliore per lo sviluppo del frontend della tua applicazione.

Utilizzando PHP

PHP & Blade

In passato, la maggior parte delle applicazioni PHP rendeva l’HTML nel browser utilizzando semplici modelli HTML con istruzioni “PHP echo” che mostravano i dati recuperati dal database durante la richiesta:

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

In Laravel, questo approccio alla generazione di HTML può ancora essere realizzato utilizzando le viste e Blade. Blade è un linguaggio di template estremamente leggero che fornisce una sintassi comoda e breve per mostrare dati, iterare su dati e altro ancora:

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

Quando si costruiscono applicazioni in questo modo, le sottomissioni di form e altre interazioni con la pagina ricevono tipicamente un nuovo documento HTML dal server e l’intera pagina viene nuovamente renderizzata dal browser. Ancora oggi, molte applicazioni possono essere perfettamente adatte a avere i loro frontend costruiti in questo modo utilizzando semplici template Blade.

Aspettative in crescita

Tuttavia, poiché le aspettative degli utenti riguardo alle applicazioni web si sono evolute, molti sviluppatori hanno sentito la necessità di costruire front-end più dinamici con interazioni più fluide. In considerazione di ciò, alcuni sviluppatori scelgono di iniziare a costruire il front-end delle loro applicazioni utilizzando framework JavaScript come Vue e React.

Altri, preferendo restare fedeli al linguaggio back-end con cui sono più familiari, hanno sviluppato soluzioni che consentono di costruire interfacce utente moderne per le applicazioni web utilizzando principalmente il loro linguaggio back-end di scelta. Ad esempio, nell’ecosistema di Rails, ciò ha portato alla creazione di librerie come Turbo Hotwire e Stimulus.

Nell’ecosistema di Laravel, la necessità di creare front-end moderni e dinamici principalmente utilizzando PHP ha portato alla creazione di Laravel Livewire e Alpine.js.

Livewire

Laravel Livewire è un framework per la creazione di interfacce front-end con Laravel che appaiono dinamiche, moderne e vivaci, proprio come le interfacce front-end costruite con i moderni framework JavaScript come Vue e React.

Utilizzando Livewire, creerai “componenti” Livewire che renderizzano una parte discreta dell’interfaccia utente e espongono metodi e dati che possono essere invocati e interagiti dal front-end della tua applicazione. Ad esempio, un semplice componente “Contatore” potrebbe apparire come segue:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 0;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

E, il corrispondente template per il contatore sarebbe scritto così:

<div>
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
</div>

Come puoi vedere, Livewire ti consente di scrivere nuovi attributi HTML come wire:click che collegano il frontend e il backend della tua applicazione Laravel. Inoltre, puoi renderizzare lo stato attuale del componente utilizzando semplici espressioni Blade.

Per molti sviluppatori, Livewire ha rivoluzionato lo sviluppo frontend con Laravel, consentendo loro di rimanere all’interno del comfort di Laravel mentre costruiscono applicazioni web moderne e dinamiche. Tipicamente, gli sviluppatori che utilizzano Livewire utilizzeranno anche Alpine.js per “spruzzare” JavaScript nel frontend solo dove è necessario, ad esempio per renderizzare una finestra di dialogo.

Se sei nuovo di Laravel, ti consigliamo di familiarizzare con l’uso di base delle views e di Blade. Successivamente, consulta la documentazione ufficiale di Laravel Livewire per imparare come portare la tua applicazione al livello successivo con componenti interattivi Livewire.

Starter Kits

Se desideri costruire il tuo frontend utilizzando PHP e Livewire, puoi sfruttare i nostri starter kit Breeze o Jetstream per avviare lo sviluppo della tua applicazione. Entrambi questi starter kit forniscono lo scheletro del flusso di autenticazione backend e frontend della tua applicazione utilizzando Blade e Tailwind, in modo che tu possa semplicemente iniziare a sviluppare la tua prossima grande idea.

Utilizzo di Vue/React

Sebbene sia possibile costruire frontend moderni utilizzando Laravel e Livewire, molti sviluppatori preferiscono ancora sfruttare la potenza di un framework JavaScript come Vue o React. Questo consente agli sviluppatori di beneficiare del ricco ecosistema di pacchetti e strumenti JavaScript disponibili tramite NPM.

Tuttavia, senza strumenti aggiuntivi, l’abbinamento di Laravel con Vue o React richiederebbe la risoluzione di una varietà di problemi complicati, come il routing lato client, l’idratazione dei dati e l’autenticazione. Il routing lato client viene spesso semplificato utilizzando framework Vue / React orientati come Nuxt e Next; tuttavia, l’idratazione dei dati e l’autenticazione rimangono problemi complessi e onerosi da risolvere quando si abbinano un framework backend come Laravel a questi framework frontend.

Inoltre, gli sviluppatori sono costretti a mantenere due repository di codice separati, spesso con la necessità di coordinare manutenzione, rilasci e distribuzioni su entrambi i repository. Sebbene questi problemi non siano insormontabili, non riteniamo che sia un modo produttivo o piacevole di sviluppare applicazioni.

Inertia

Fortunatamente, Laravel offre il meglio di entrambi i mondi. Inertia colma il divario tra la tua applicazione Laravel e il tuo frontend moderno Vue o React, consentendoti di costruire frontend completi e moderni utilizzando Vue o React, sfruttando al contempo i percorsi e i controller di Laravel per il routing, l’idratazione dei dati e l’autenticazione, il tutto all’interno di un singolo repository di codice. Con questo approccio, puoi godere della piena potenza di Laravel e di Vue/React senza limitare le capacità di nessuno degli strumenti.

Dopo aver installato Inertia nella tua applicazione Laravel, scriverai percorsi e controller come al solito. Tuttavia, anziché restituire un template Blade dal tuo controller, restituirai una pagina Inertia:

<?php
 
namespace App\Http\Controllers;
 
use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;
 
class UserController extends Controller
{
    /**
     * Show the profile for a given user.
     */
    public function show(string $id): Response
    {
        return Inertia::render('Users/Profile', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Una pagina Inertia corrisponde a un componente Vue o React, tipicamente memorizzato nella directory resources/js/Pages della tua applicazione. I dati forniti alla pagina tramite il metodo Inertia::render saranno utilizzati per idratare le “props” del componente della pagina:

<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
 
const props = defineProps(['user']);
</script>
 
<template>
    <Head title="User Profile" />
 
    <Layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Profile
            </h2>
        </template>
 
        <div class="py-12">
            Hello, {{ user.name }}
        </div>
    </Layout>
</template>

Come puoi vedere, Inertia ti permette di sfruttare tutto il potenziale di Vue o React durante la creazione del tuo frontend, fornendo nel contempo un ponte leggero tra il tuo backend basato su Laravel e il tuo frontend basato su JavaScript.

Rendering lato server

Se sei preoccupato di utilizzare Inertia perché la tua applicazione richiede il rendering lato server, non preoccuparti. Inertia offre il supporto per il rendering lato server. E, quando distribuisci la tua applicazione tramite Laravel Forge, è molto semplice assicurarsi che il processo di rendering lato server di Inertia sia sempre in esecuzione.

Starter Kits

Se desideri costruire il tuo frontend utilizzando Inertia e Vue / React, puoi sfruttare i nostri kit di avvio Breeze o Jetstream per avviare lo sviluppo della tua applicazione. Entrambi i kit di avvio scaffolderanno il flusso di autenticazione del backend e del frontend della tua applicazione utilizzando Inertia, Vue / React, Tailwind e Vite, in modo da poter iniziare a costruire la tua prossima grande idea.

Raggruppamento delle risorse

Indipendentemente dalla scelta di sviluppare il frontend utilizzando Blade e Livewire o Vue / React e Inertia, probabilmente sarà necessario raggruppare il CSS dell’applicazione in risorse pronte per la produzione. Naturalmente, se si sceglie di costruire il frontend dell’applicazione con Vue o React, sarà anche necessario raggruppare i componenti in risorse JavaScript pronte per il browser.

Per impostazione predefinita, Laravel utilizza Vite per raggruppare le risorse. Vite offre tempi di compilazione estremamente veloci e un sostituzione istantanea dei moduli (HMR) durante lo sviluppo locale. In tutte le nuove applicazioni Laravel, inclusi quelli che utilizzano i nostri starter kit, troverai un file vite.config.js che carica il nostro leggero plugin Laravel Vite che rende Vite un piacere da usare con le applicazioni Laravel.

Il modo più veloce per iniziare con Laravel e Vite è iniziare lo sviluppo dell’applicazione utilizzando Laravel Breeze, il nostro starter kit più semplice che avvia il tuo sviluppo fornendo un’infrastruttura di autenticazione frontend e backend.

Per una documentazione più dettagliata sull’utilizzo di Vite con Laravel, ti invitiamo a consultare la nostra documentazione dedicata al raggruppamento e alla compilazione delle risorse.