Домашняя страница LaravelDocs Laravel Docs
  1. Primeros pasos
  2. Frontend

Introducción

Laravel es un marco backend que proporciona todas las características necesarias para construir aplicaciones web modernas, como enrutamiento, validación, caché, colas, almacenamiento de archivos, y más. Sin embargo, creemos que es importante ofrecer a los desarrolladores una hermosa experiencia completa, incluidos enfoques poderosos para construir el frontend de su aplicación.

Hay dos formas principales de abordar el desarrollo frontend al construir una aplicación con Laravel, y la elección de enfoque depende de si deseas construir tu frontend aprovechando PHP o utilizando marcos de JavaScript como Vue y React. Discutiremos ambas opciones a continuación para que puedas tomar una decisión informada sobre el mejor enfoque para el desarrollo frontend de tu aplicación.

Usando PHP

PHP y Blade

En el pasado, la mayoría de las aplicaciones PHP renderizaban HTML al navegador mediante simples plantillas HTML intercaladas con declaraciones echo de PHP que representaban datos recuperados de una base de datos durante la solicitud:

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

En Laravel, este enfoque para renderizar HTML aún se puede lograr utilizando vistas y Blade. Blade es un lenguaje de plantillas extremadamente liviano que proporciona una sintaxis conveniente y breve para mostrar datos, iterar sobre datos y más:

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

Al construir aplicaciones de esta manera, los envíos de formularios y otras interacciones de la página generalmente reciben un documento HTML completamente nuevo del servidor y el navegador vuelve a renderizar toda la página. Incluso hoy, muchas aplicaciones pueden adaptarse perfectamente a tener sus frontends construidos de esta manera mediante simples plantillas Blade.

Expectativas en Crecimiento

Sin embargo, a medida que las expectativas de los usuarios sobre las aplicaciones web han madurado, muchos desarrolladores han sentido la necesidad de construir frontends más dinámicos con interacciones que se sientan más pulidas. A raíz de esto, algunos desarrolladores eligen comenzar a construir el frontend de su aplicación utilizando marcos de JavaScript como Vue y React.

Otros, prefiriendo quedarse con el lenguaje backend con el que se sienten cómodos, han desarrollado soluciones que permiten la construcción de interfaces de usuario modernas para aplicaciones web mientras siguen utilizando principalmente su lenguaje de backend preferido. Por ejemplo, en el ecosistema de Rails, esto ha impulsado la creación de bibliotecas como Turbo Hotwire y Stimulus.

Dentro del ecosistema de Laravel, la necesidad de crear frontends modernos y dinámicos utilizando principalmente PHP ha llevado a la creación de Laravel Livewire y Alpine.js.

Livewire

Laravel Livewire es un marco para construir frontends alimentados por Laravel que se sienten dinámicos, modernos y vivos, al igual que los frontends construidos con marcos modernos de JavaScript como Vue y React.

Al usar Livewire, crearás "componentes" Livewire que representan una parte discreta de tu interfaz de usuario y exponen métodos y datos que se pueden invocar e interactuar desde el frontend de tu aplicación. Por ejemplo, un simple componente "Counter" podría verse así:

<?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');
    }
}

Y, la plantilla correspondiente para el contador se escribiría así:

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

Como puedes ver, Livewire te permite escribir nuevos atributos HTML como wire:click que conectan el frontend y el backend de tu aplicación Laravel. Además, puedes renderizar el estado actual de tu componente mediante simples expresiones Blade.

Para muchos, Livewire ha revolucionado el desarrollo frontend con Laravel, permitiéndoles permanecer dentro de la comodidad de Laravel mientras construyen aplicaciones web modernas y dinámicas. Por lo general, los desarrolladores que utilizan Livewire también aprovecharán Alpine.js para "rociar" JavaScript en su frontend solo donde sea necesario, como para renderizar una ventana de diálogo.

Si eres nuevo en Laravel, te recomendamos familiarizarte con el uso básico de vistas y Blade. Luego, consulta la documentación oficial de Laravel Livewire para aprender cómo llevar tu aplicación al siguiente nivel con componentes interactivos de Livewire.

Kits de Inicio

Si deseas construir tu frontend utilizando PHP y Livewire, puedes aprovechar nuestros kits de inicio Breeze o Jetstream starter kits para iniciar el desarrollo de tu aplicación. Ambos de estos kits de inicio crean el flujo de autenticación backend y frontend de tu aplicación utilizando Blade y Tailwind para que puedas comenzar a construir tu próxima gran idea de manera sencilla.

Usando Vue / React

Aunque es posible construir frontends modernos con Laravel y Livewire, muchos desarrolladores aún prefieren aprovechar el poder de un marco de JavaScript como Vue o React. Esto permite a los desarrolladores aprovechar el rico ecosistema de paquetes y herramientas de JavaScript disponibles a través de NPM.

Sin embargo, sin herramientas adicionales, la combinación de Laravel con Vue o React nos dejaría con la necesidad de resolver una variedad de problemas complicados como el enrutamiento del lado del cliente, la hidratación de datos y la autenticación. El enrutamiento del lado del cliente a menudo se simplifica mediante el uso de marcos Vue / React con opiniones como Nuxt y Next; sin embargo, la hidratación de datos y la autenticación siguen siendo problemas complicados y engorrosos de resolver al combinar un marco backend como Laravel con estos marcos frontend.

Además, los desarrolladores quedan con la tarea de mantener dos repositorios de código separados, a menudo necesitando coordinar el mantenimiento, las versiones y las implementaciones en ambos repositorios. Aunque estos problemas no son insuperables, no creemos que sea una forma productiva o agradable de desarrollar aplicaciones.

Inertia

Afortunadamente, Laravel ofrece lo mejor de ambos mundos. Inertia cierra la brecha entre tu aplicación Laravel y tu frontend moderno de Vue o React, permitiéndote construir frontends modernos de Vue o React mientras aprovechas las rutas y controladores de Laravel para el enrutamiento, la hidratación de datos y la autenticación, todo dentro de un solo repositorio de código. Con este enfoque, puedes disfrutar del poder completo tanto de Laravel como de Vue / React sin limitar las capacidades de ninguna de las herramientas.

Después de instalar Inertia en tu aplicación Laravel, escribirás rutas y controladores como de costumbre. Sin embargo, en lugar de devolver una plantilla Blade desde tu controlador, devolverás una página 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
{
    /**
     * Muestra el perfil de un usuario dado.
     */
    public function show(string $id): Response
    {
        return Inertia::render('Users/Profile', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Una página Inertia corresponde a un componente Vue o React, que suele estar almacenado en el directorio resources/js/Pages de tu aplicación. Los datos proporcionados a la página mediante el método Inertia::render se utilizarán para hidratar las "props" del componente de la página:

<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>

Como puedes ver, Inertia te permite aprovechar todo el poder de Vue o React al construir tu frontend, al tiempo que proporciona un puente ligero entre tu backend alimentado por Laravel y tu frontend alimentado por JavaScript.

Renderización en el Servidor

Si te preocupa sumergirte en Inertia porque tu aplicación requiere renderización del lado del servidor, no te preocupes. Inertia ofrece soporte para renderización del lado del servidor. Y, al implementar tu aplicación a través de Laravel Forge, es muy fácil asegurarse de que el proceso de renderización del lado del servidor de Inertia siempre esté en funcionamiento.

Kits de Inicio

Si deseas construir tu frontend utilizando Inertia y Vue / React, puedes aprovechar nuestros kits de inicio Breeze o Jetstream starter kits para iniciar el desarrollo de tu aplicación. Ambos de estos kits de inicio crean el flujo de autenticación backend y frontend de tu aplicación utilizando Inertia, Vue / React, Tailwind y Vite, para que puedas comenzar a construir tu próxima gran idea.

Empaquetado de Recursos

Independientemente de si eliges desarrollar tu frontend utilizando Blade y Livewire o Vue / React e Inertia, es probable que necesites agrupar el CSS de tu aplicación en activos listos para producción. Por supuesto, si eliges construir el frontend de tu aplicación con Vue o React, también deberás agrupar tus componentes en activos JavaScript listos para el navegador.

Por defecto, Laravel utiliza Vite para agrupar tus activos. Vite ofrece tiempos de compilación ultrarrápidos y reemplazo de módulos en caliente (HMR) casi instantáneo durante el desarrollo local. En todas las nuevas aplicaciones de Laravel, incluidas aquellas que utilizan nuestros kits de inicio, encontrarás un archivo vite.config.js que carga nuestro ligero complemento Laravel Vite que hace que Vite sea fácil de usar con aplicaciones Laravel.

La forma más rápida de comenzar con Laravel y Vite es iniciar el desarrollo de tu aplicación utilizando Laravel Breeze, nuestro kit de inicio más sencillo que impulsa tu aplicación proporcionando el armazón de autenticación frontend y backend.

Nota Para obtener documentación más detallada sobre cómo utilizar Vite con Laravel, consulte nuestra documentación dedicada sobre la agrupación y compilación de sus activos.