Frontend

• Introduzione
• Usare PHP
• Utilizzo di Vue / React
• Bundling degli Asset

Introduzione

Laravel è un framework backend che offre tutte le funzionalità necessarie per creare applicazioni web moderne, come routing, validazione, caching, code, file storage e altro ancora. Tuttavia, riteniamo importante offrire agli sviluppatori un’esperienza full-stack completa, includendo metodi potenti per costruire il frontend della tua applicazione.

Ci sono due modi principali per affrontare lo sviluppo del frontend quando costruisci un’applicazione con Laravel, e la scelta dipende se preferisci creare il frontend utilizzando PHP o con framework JavaScript come Vue e React. Di seguito discuteremo entrambe le opzioni, così potrai decidere quale approccio allo sviluppo frontend è il migliore per la tua applicazione.

Usare PHP

PHP e Blade

In passato, la maggior parte delle applicazioni PHP generava HTML per il browser utilizzando semplici template HTML intervallati da istruzioni echo di PHP 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 metodo per generare HTML può ancora essere usato tramite view e Blade. Blade è un linguaggio di templating molto leggero che offre una sintassi comoda e breve per mostrare dati, iterare su di essi e altro:

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

Quando si costruiscono applicazioni in questo modo, ad ogni richiesta vengono generati documenti HTML completamente nuovi dal server e l’intera pagina viene rigenerata dal browser. Ancora oggi, molte applicazioni possono essere perfettamente adatte a costruire il frontend in questo modo utilizzando semplici template Blade.

Aumento delle Aspettative

Tuttavia, man mano che le aspettative degli utenti riguardo alle applicazioni web sono cresciute, molti sviluppatori hanno sentito la necessità di creare frontend più dinamici con interazioni più raffinate. Di conseguenza, alcuni sviluppatori scelgono di iniziare a costruire il frontend della loro applicazione utilizzando framework JavaScript come Vue e React.

Altri, preferendo rimanere con il linguaggio backend con cui si sentono a loro agio, hanno sviluppato soluzioni che permettono la creazione di interfacce moderne per applicazioni web utilizzando principalmente il linguaggio backend di loro scelta. Ad esempio, nell’ecosistema Rails, ciò ha portato alla creazione di librerie come Turbo, Hotwire e Stimulus.

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

Livewire

Laravel Livewire è un framework per creare frontend alimentati da Laravel che risultano dinamici, moderni e vivi proprio come i frontend realizzati con framework JavaScript moderni come Vue e React.

Utilizzando Livewire, creerai "componenti" Livewire che renderizzano una parte specifica della tua interfaccia utente ed espongono metodi e dati che possono essere invocati e interagiti dal frontend della tua applicazione. Ad esempio, un semplice componente "Counter" 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 template corrispondente per il counter verrebbe scritto in questo modo:

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

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

Per molti, Livewire ha rivoluzionato lo sviluppo frontend con Laravel, permettendo di rimanere nell’ambiente Laravel mentre si costruiscono applicazioni web moderne e dinamiche. Tipicamente, gli sviluppatori che utilizzano Livewire useranno anche Alpine.js per aggiungere JavaScript al frontend solo dove è necessario, ad esempio per renderizzare una finestra di dialogo.

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

Starter Kit

Se desideri costruire il tuo frontend utilizzando PHP e Livewire, puoi sfruttare i nostri Breeze o Jetstream, degli starter kit per dare il via allo sviluppo della tua applicazione. Entrambi questi kit di avvio strutturano il backend e il flusso di autenticazione frontend della tua applicazione utilizzando Blade e Tailwind, permettendoti così di iniziare a sviluppare la tua prossima grande idea in modo molto semplice.

Utilizzo di Vue / React

Anche se è possibile creare frontend moderni usando Laravel e Livewire, molti sviluppatori preferiscono ancora sfruttare la potenza di un framework JavaScript come Vue o React. Questo permette di approfittare del ricco ecosistema di pacchetti e strumenti JavaScript disponibili tramite NPM.

Tuttavia, senza strumenti aggiuntivi, abbinare Laravel con Vue o React richiederebbe di risolvere vari problemi complessi come il routing lato client, data hydration e autenticazione. Il routing lato client è spesso semplificato utilizzando framework Vue / React opinati come Nuxt e Next; tuttavia, data hydration e autenticazione rimangono problemi complicati e difficili da risolvere quando si abbina un framework backend come Laravel con questi framework frontend.

Inoltre, gli sviluppatori devono mantenere due repository di codice separate, spesso necessitando di coordinare manutenzione, rilascio e deploy su entrambe i repository. Anche se questi problemi non sono 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 in Vue o React, permettendoti di costruire frontend completi e moderni usando Vue o React sfruttando al contempo le route e i controller di Laravel per il routing, l’idratazione dei dati e l’autenticazione — tutto all’interno di un unico repository di codice. Con questo approccio, puoi godere di tutta la potenza sia di Laravel sia di Vue / React senza limitare le capacità di nessuno dei due strumenti.

Dopo aver installato Inertia nella tua applicazione Laravel, scriverai route e controller come al solito. Tuttavia, invece di 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
{
    /**
     * Mostra il profilo per un utente dato.
     */
    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/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 vedi, Inertia ti permette di sfruttare tutta la potenza di Vue o React quando costruisci il tuo frontend, fornendo al contempo un ponte tra il backend potenziato da Laravel e il frontend alimentato da JavaScript.

Rendering lato server

Se sei preoccupato di iniziare con Inertia perché la tua applicazione ha bisogno di rendering lato server, non ti preoccupare. Inertia offre supporto per il server-side rendering. Inoltre, quando distribuisci la tua applicazione tramite Laravel Forge, è molto semplice assicurarsi che il processo di rendering lato server di Inertia sia sempre in esecuzione.

Usare gli Starter Kit

Se desideri costruire il tuo frontend con Inertia e Vue / React, puoi utilizzare i nostri starter kit Breeze o Jetstream starter kits per iniziare lo sviluppo della tua applicazione. Entrambi gli starter kit configurano il backend e il flusso di autenticazione frontend usando Inertia, Vue / React, Tailwind e Vite, permettendoti di iniziare a realizzare la tua prossima grande idea.

Bundling degli Asset

Indipendentemente dal fatto che tu scelga di sviluppare il frontend con Blade e Livewire o con Vue / React e Inertia, probabilmente dovrai compilare il CSS della tua applicazione in asset pronti per la produzione. Naturalmente, se decidi di costruire il frontend della tua applicazione con Vue o React, dovrai anche compilare i tuoi componenti in asset JavaScript pronti per il browser.

Di default, Laravel utilizza Vite per compilare i tuoi asset. Vite offre tempi di build estremamente rapidi e una sostituzione dei moduli a caldo (HMR) quasi istantanea durante lo sviluppo locale. In tutte le nuove applicazioni Laravel, comprese quelle che usano i nostri starter kits, troverai un file vite.config.js che carica il nostro plugin leggero Laravel Vite, che rende Vite facile da usare con le applicazioni Laravel.

Il modo più veloce per iniziare con Laravel e Vite è iniziare lo sviluppo della tua applicazione usando Laravel Breeze, il nostro starter kit più semplice che avvia la tua applicazione fornendo uno scheletro di autenticazione frontend e backend.

Per una documentazione più dettagliata sull’utilizzo di Vite con Laravel, consulta la nostra documentazione dedicata sul bundling e la compilazione dei tuoi asset.