Los motores de plantillas de Laravel son compatibles con React, Vue y otras bibliotecas. Sin embargo, a los desarrolladores les encanta la robusta capacidad del motor Blade de Laravel para crear vistas modulares y reutilizables rápidamente. Blade te permite ampliar sin esfuerzo los diseños, definir secciones y utilizar estructuras de control para generar contenido basado en datos.
Este artículo práctico explora qué es Blade, cómo funciona y cómo mejora tus aplicaciones Laravel.
Todo lo que Necesitas para Usar Laravel Blade
Laravel Blade es el motor de plantillas por defecto del framework Laravel. Te permite utilizar variables, bucles, sentencias condicionales y otras características de PHP directamente en tu código HTML. Para crear archivos Blade, simplemente define vistas Blade creando archivos con la extensión .blade.php en el directorio resources/views de tu proyecto Laravel, y luego estructura tus páginas dinámicas preferidas en estos archivos.
¿Por qué deberías utilizar Blade?
Una de las principales ventajas de Blade es su organización modular del código. Blade ayuda a organizar tu código en módulos reutilizables que puedes añadir, eliminar o actualizar fácilmente sin afectar al resto de tu aplicación.
La encapsulación del código es otra de las ventajas de Blade. Blade ayuda a encapsular funciones, haciendo que las pruebas, la depuración y el mantenimiento del código sean más manejables. Este enfoque beneficia a las aplicaciones más grandes, ya que las aplicaciones desorganizadas pueden convertirse rápidamente en un reto de gestión.
El motor de plantillas de Blade tiene un gran rendimiento y es el framework PHP más rápido que hemos probado. El motor compila todas tus vistas blade en código PHP plano y luego las almacena en caché hasta que las modificas. Este enfoque favorece una renderización más rápida y un mejor rendimiento general.
Cómo Usar Laravel Blade
En este tutorial, crearemos una aplicación Laravel para experimentar las plantillas Blade en acción. Aprende a definir y ampliar los diseños blade, a pasar datos entre vistas blade, a utilizar las distintas estructuras de control disponibles y a crear tus propios blades.
Requisitos previos
Para seguir este tutorial, asegúrate de que tienes lo siguiente:
- Familiaridad previa con PHP
- Composer instalado. Verifica que Composer está en tu sistema ejecutando
composer -V
Consulta el código completo tutorial para guiarte mientras trabajas.
Cómo Crear Una Aplicación Laravel
Para crear una aplicación Laravel de ejemplo, ejecuta
composer create-project laravel/laravel my-appSigue el conjunto de instrucciones en tu terminal para terminar de crear la aplicación.
A continuación, entra en el directorio de la app y sírvela con este comando:
cd my-app
php artisan serveHaz clic en el enlace del terminal para abrir la página de bienvenida de Laravel en tu navegador.
Cómo Definir el Diseño
Los diseños te permiten configurar secciones de tu aplicación web para compartirlas en varias páginas. Por ejemplo, si tu aplicación tiene una barra de navegación y un pie de página consistentes en todas las páginas, es más eficiente crearlos una vez que construirlos de nuevo para cada página.
Antes de seguir las instrucciones paso a paso, echa un vistazo al siguiente esqueleto de demostración.
A continuación se muestra el código para crear páginas web sin diseños. Te obliga a reescribir el código de la barra de navegación y del pie de página para cada página.
<nav>. . . </nav>
Content for page 1
<footer> . . . </footer>
<nav>. . . </nav>
Content for page 2
<footer> . . . </footer>En su lugar, puedes construir fácilmente tu aplicación utilizando diseños para compartir los mismos componentes en un único bloque de código:
<nav>. . . </nav>
{slot}
<footer> . . . </footer>Una vez que hayas definido tu diseño, puedes utilizarlo en cualquier página que desees:
<main-layout>
Content for page n
</main-layout>En versiones anteriores de Laravel, tenías que crear diseños utilizando la herencia de plantillas. Sin embargo, cuando la empresa añadió la función de componentes, resultó mucho más fácil crear diseños robustos.
Para crear un nuevo diseño con Laravel Blade, ejecuta primero este comando para crear el componente del diseño:
php artisan make:component LayoutEste comando genera un nuevo archivo layout.blade.php ubicado en una nueva carpeta llamada components en el directorio resources/views/. Abre ese archivo y pega este código:
<html>
<head>
<title>{{ $title ?? 'Example Website' }}</title>
<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
</head>
<body>
<nav>
<h3>Welcome to my website</h3>
<hr>
</nav>
{{ $slot }}
<footer>
<hr />
© 2023 example.com
</footer>
</body>
</html>Este código crea un componente de diseño que tiene una barra de navegación y un pie de página sencillos. La función slot define dónde pasar el contenido principal cada vez que amplíes tu componente de diseño.
Cómo Ampliar el Diseño
Puedes importar fácilmente un componente en una vista de hoja utilizando la etiqueta <x-component-name>. Este método también se aplica al componente de diseño que creaste anteriormente.
Para ver cómo queda la ampliación del diseño, abre el archivo por defecto resources/views/welcome.blade.php y sustituye el contenido del archivo por este código:
<x-layout>
<div>
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
<button class="btn">Get Started</button>
</div>
</x-layout>Este enfoque actualiza la página de bienvenida para que utilice el componente de diseño, pasando como contenido un elemento de encabezado y un párrafo con texto simulado. Recarga el enlace que has abierto antes para ver los cambios.
En la definición de tu diseño, observa que el código pasa un dato de título que por defecto es «Example Website” si el código no pasa el dato de título. Puedes pasar estos datos como ranuras con nombre en tus vistas a través del código <x-slot name="slotName" /> – en este caso, <x-slot name="title" />. Actualiza el archivo welcome.blade.php con el código que aparece a continuación y vuelve a cargar la página:
<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<div>
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
<button class="btn">Get Started</button>
</div>
</x-layout>A continuación, añade algo de estilo para mejorar el aspecto de tu aplicación. Crea un nuevo archivo app.css dentro del directorio /public/css y pega el código de este archivo.
Con todas estas actualizaciones, deberías ver el siguiente resultado cuando previsualices tu aplicación en http://127.0.0.1:8000/.
Cómo Incluir Datos de Backend
En el ejemplo anterior, has compartido fácilmente datos entre componentes y vistas mediante ranuras. Sin embargo, hay enfoques mejores para cargar datos desde una base de datos u otra fuente remota.
En ese caso, carga y pasa los datos directamente desde la definición de tu enrutador y accede a ellos como accediste a una ranura con nombre en el ejemplo anterior. Para ello, abre el archivo routes/web.php y sustituye su contenido por este código:
<?php
use IlluminateSupportFacadesRoute;
Route::get('/', function () {
$name = "John Doe";
return view('welcome', ['name' => $name]);
});En el código anterior, has actualizado tu ruta web para pasar el nombre "John Doe" a la vista de bienvenida. Ahora, accede a este valor en tus vistas de hoja de la siguiente forma:
<div>
Hello, {{ $name }}
</div>Puedes utilizar este método para cargar datos de una base de datos. Por ejemplo, supongamos que tienes una tabla de tareas pendientes que contiene una lista de tareas pendientes. Utiliza la facade BD para cargar estas tareas pendientes y pasárselas a tu vista:
<?php
use IlluminateSupportFacadesDB; // Import DB Facade
use IlluminateSupportFacadesRoute;
Route::get('/', function () {
$todos = DB::table('todos')->get();
return view('welcome', ['todos' => $todos]);
});Sin embargo, si no tienes una base de datos, actualiza la ruta de entrada web para pasar una matriz de tareas estáticas. Abre el archivo routes/web.php y actualiza la ruta por defecto (/) con el código que aparece a continuación:
Route::get('/', function () {
$todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
return view('welcome', ['todos' => $todos]);
});Sustituye el contenido del archivo welcome.blade.php por el código siguiente para acceder a las tareas pendientes como una matriz JSON codificada.
<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<p>{{ json_encode($todos) }}</p>
</x-layout>Cómo Utilizar los Atajos de Control
El motor de plantillas de Blade también admite múltiples directivas para mostrar varios tipos de datos de forma condicional. Por ejemplo, para iterar a través de la matriz de to-dos devuelta que habías pasado a tu vista de bienvenida, aplica un bucle foreach pegando el siguiente código en el archivo welcome.blade.php:
<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<ul>
@foreach ($todos as $todo)
<li>{{ $todo }}</li>
@endforeach
</ul>
</x-layout>Este cambio debería mostrar las tareas pendientes en una lista desordenada, como en la captura de pantalla siguiente.
Para construir un bloque de sentencias condicionales, utiliza las directivas @if, @elseif, @else, y @endif. Por ejemplo
@if (count($todos) === 1)
<p>I have one task!</p>
@elseif (count($todos) > 1)
<p>I have multiple tasks!</p>
@else
<p>I don't have any tasks!</p>
@endifSustituye el contenido del archivo welcome.blade.php por el código anterior. Las distintas directivas if–else cuentan los elementos pendientes y muestran un mensaje personalizado para distintos escenarios. Dado que tienes más de una tarea en tu matriz de tareas pendientes, deberías ver la salida «¡Tengo varias tareas!» en el navegador.
Puedes encontrar más directivas compatibles en la documentación de Laravel.
Cómo Hacer una Extensión Personalizada
También puedes escribir una directiva personalizada, similar al ejemplo anterior. Para explorar esta técnica, crea una directiva personalizada de truncamiento de texto.
Primero, crea un nuevo proveedor de servicios ejecutando
php artisan make:provider TruncateTextServiceProviderEste comando genera un nuevo archivo de proveedor de servicios en app/Providers/TruncateTextServiceProvider.php. Abre este archivo y sustituye su contenido por
<?php
namespace AppProviders;
use IlluminateSupportFacadesBlade;
use IlluminateSupportServiceProvider;
class TruncateTextServiceProvider extends ServiceProvider
{
public function register()
{
//
}
public function boot()
{
Blade::directive('truncate', function ($expression) {
list($text, $length) = explode(',', $expression);
return "<?php echo Str::limit($text, $length); ?>";
});
}
}El código importa la fachada Blade y define una nueva directiva personalizada llamada @truncate. La directiva acepta dos argumentos: $text y $length. Utiliza el método Str::limit() para truncar el texto a la longitud especificada.
Por último, registra el proveedor de servicios añadiéndolo a tu matriz de proveedores en el archivo de configuración config/app.php:
'providers' => [
// Other service providers
AppProvidersTruncateTextServiceProvider::class,
],
Utiliza la directiva personalizada en tus plantillas Blade (welcome.blade.php) invocándola mediante la sintaxis @truncate.
<div>
@truncate('Lorem ipsum dolor sit amet', 10)
</div>Resumen
Este artículo ha explorado cómo Laravel Blade te permite agilizar tu proceso de desarrollo mientras creas vistas modulares y reutilizables para aplicaciones web. Sin embargo, tu viaje de desarrollo en Laravel no debería terminar ahí.
La infraestructura que aloja tu aplicación es tan crítica para tu éxito como tu proceso de desarrollo local. Para llevar tu aplicación Laravel al siguiente nivel, necesitas una plataforma de alojamiento fiable que pueda soportar sus exigencias.
Kinsta optimiza las soluciones de alojamiento en cuanto a rendimiento, seguridad y escalabilidad, permitiéndote hacer crecer tu aplicación en el mejor entorno posible. Despliega tu aplicación Laravel en Kinsta para experimentarlo por ti mismo.
Deja una respuesta