#Introducción
Laravel es un framework backend que proporciona todas las características necesarias para construir aplicaciones web modernas, como routing, validación, caché, colas, almacenamiento de archivos y más. Sin embargo, creemos que es importante ofrecer a los desarrolladores una experiencia full-stack atractiva, incluyendo enfoques potentes para construir el frontend de su aplicación.
Existen dos formas principales de abordar el desarrollo frontend al construir una aplicación con Laravel, y la elección depende de si desea construir su frontend aprovechando PHP o utilizando frameworks de JavaScript como Vue y React. A continuación, discutiremos ambas opciones para que pueda tomar una decisión informada sobre el mejor enfoque para el desarrollo frontend de su aplicación.
#Uso de PHP
#PHP y Blade
En el pasado, la mayoría de las aplicaciones PHP renderizaban HTML en el navegador usando plantillas HTML simples intercaladas con sentencias PHP echo que mostraban 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 todavía se puede lograr usando views y Blade. Blade es un lenguaje de plantillas extremadamente ligero que proporciona una sintaxis conveniente y corta para mostrar datos, iterar sobre ellos y más:
<div>
@foreach ($users as $user)
Hello, {{ $user->name }} <br />
@endforeach
</div>
Al construir aplicaciones de esta manera, las envíos de formularios y otras interacciones en la página típicamente reciben un documento HTML completamente nuevo desde el servidor y toda la página es renderizada de nuevo por el navegador. Incluso hoy, muchas aplicaciones pueden ser perfectamente adecuadas para tener sus frontends construidos de esta forma usando plantillas Blade simples.
#Expectativas en crecimiento
Sin embargo, a medida que las expectativas de los usuarios sobre las aplicaciones web han evolucionado, muchos desarrolladores han encontrado la necesidad de construir frontends más dinámicos con interacciones que se sienten más pulidas. En vista de esto, algunos desarrolladores optan por comenzar a construir el frontend de su aplicación usando frameworks de JavaScript como Vue y React.
Otros, prefiriendo mantenerse con el lenguaje backend con el que se sienten cómodos, han desarrollado soluciones que permiten la construcción de interfaces modernas para aplicaciones web mientras utilizan principalmente su lenguaje backend preferido. Por ejemplo, en el ecosistema de Rails, esto ha impulsado la creación de librerías como Turbo, Hotwire y Stimulus.
Dentro del ecosistema 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 framework para construir frontends con Laravel que se sienten dinámicos, modernos y vivos, al igual que los frontends construidos con frameworks modernos de JavaScript como Vue y React.
Al usar Livewire, creará "componentes" Livewire que renderizan una porción discreta de su UI y exponen métodos y datos que pueden ser invocados e interactuados desde el frontend de su aplicación. Por ejemplo, un componente simple "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 puede ver, Livewire le permite escribir nuevos atributos HTML como wire:click que conectan el frontend y backend de su aplicación Laravel. Además, puede renderizar el estado actual de su componente usando expresiones Blade simples.
Para muchos, Livewire ha revolucionado el desarrollo frontend con Laravel, permitiéndoles permanecer dentro del entorno familiar de Laravel mientras construyen aplicaciones web modernas y dinámicas. Normalmente, los desarrolladores que usan Livewire también utilizan Alpine.js para "espolvorear" JavaScript en su frontend solo donde es necesario, como para renderizar una ventana de diálogo.
Si es nuevo en Laravel, recomendamos familiarizarse primero con el uso básico de views y Blade. Luego, consulte la documentación oficial de Laravel Livewire para aprender cómo llevar su aplicación al siguiente nivel con componentes interactivos Livewire.
#Kits de inicio
Si desea construir su frontend usando PHP y Livewire, puede aprovechar nuestros kits de inicio Breeze o Jetstream starter kits para acelerar el desarrollo de su aplicación. Ambos kits de inicio generan el backend y el flujo de autenticación frontend de su aplicación usando Blade y Tailwind para que pueda comenzar a construir su próxima gran idea.
#Uso de Vue / React
Aunque es posible construir frontends modernos usando Laravel y Livewire, muchos desarrolladores prefieren aprovechar el poder de un framework 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, combinar Laravel con Vue o React nos dejaría con la necesidad de resolver una variedad de problemas complicados como routing del lado cliente, hidratación de datos y autenticación. El routing del lado cliente a menudo se simplifica usando frameworks opinados de Vue / React como Nuxt y Next; sin embargo, la hidratación de datos y la autenticación siguen siendo problemas complejos y engorrosos de resolver al combinar un framework backend como Laravel con estos frameworks frontend.
Además, los desarrolladores deben mantener dos repositorios de código separados, a menudo necesitando coordinar mantenimiento, lanzamientos y despliegues 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 su aplicación Laravel y su moderno frontend Vue o React, permitiéndole construir frontends modernos y completos usando Vue o React mientras aprovecha las rutas y controladores de Laravel para routing, hidratación de datos y autenticación — todo dentro de un solo repositorio de código. Con este enfoque, puede disfrutar del poder completo tanto de Laravel como de Vue / React sin limitar las capacidades de ninguna de las dos herramientas.
Después de instalar Inertia en su aplicación Laravel, escribirá rutas y controladores como de costumbre. Sin embargo, en lugar de devolver una plantilla Blade desde su controlador, devolverá 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
{
/**
* Mostrar 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, típicamente almacenado dentro del directorio resources/js/Pages de su aplicación. Los datos proporcionados a la página mediante el método Inertia::render se usará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 puede ver, Inertia le permite aprovechar todo el poder de Vue o React al construir su frontend, mientras proporciona un puente ligero entre su backend potenciado por Laravel y su frontend potenciado por JavaScript.
#Renderizado del lado servidor
Si le preocupa comenzar con Inertia porque su aplicación requiere renderizado del lado servidor, no se preocupe. Inertia ofrece soporte para renderizado del lado servidor. Y, al desplegar su aplicación mediante Laravel Forge, es muy sencillo asegurar que el proceso de renderizado del lado servidor de Inertia esté siempre activo.
#Kits de inicio
Si desea construir su frontend usando Inertia y Vue / React, puede aprovechar nuestros kits de inicio Breeze o Jetstream starter kits para acelerar el desarrollo de su aplicación. Ambos kits de inicio generan el backend y el flujo de autenticación frontend de su aplicación usando Inertia, Vue / React, Tailwind y Vite para que pueda comenzar a construir su próxima gran idea.
#Agrupación de assets
Independientemente de si elige desarrollar su frontend usando Blade y Livewire o Vue / React e Inertia, probablemente necesitará agrupar el CSS de su aplicación en assets listos para producción. Por supuesto, si elige construir el frontend de su aplicación con Vue o React, también necesitará agrupar sus componentes en assets JavaScript listos para el navegador.
Por defecto, Laravel utiliza Vite para agrupar sus assets. Vite ofrece tiempos de construcción ultrarrápidos y reemplazo instantáneo de módulos (HMR) durante el desarrollo local. En todas las nuevas aplicaciones Laravel, incluyendo aquellas que usan nuestros starter kits, encontrará un archivo vite.config.js que carga nuestro plugin ligero Laravel Vite que hace que usar Vite con aplicaciones Laravel sea un placer.
La forma más rápida de comenzar con Laravel y Vite es iniciando el desarrollo de su aplicación usando Laravel Breeze, nuestro kit de inicio más simple que acelera su aplicación proporcionando scaffolding de autenticación frontend y backend.
Para documentación más detallada sobre cómo utilizar Vite con Laravel, consulte nuestra documentación dedicada sobre agrupación y compilación de sus assets.