Laravel blade cada vez se parece más a Vue... directiva @class y otras
Como te he comentado cuando hice un pequeño análisis de la versión 12 de Laravel, una de las cosas que más me gusta de esta nueva versión es que siento que todo está un poco más compenetrado:
Laravel YA NO es *solo* un Framework PHP
Ahora no solo tenemos, por ejemplo, Laravel, y si quieres emplear Vue tienes que usar un paquete con Jetstream, Inertia y todos esos "novelones", sino que ya todo se siente como parte de un mismo sistema.
Y ese “algo más” es una combinación bastante interesante de varias tecnologías, según lo que tú quieras usar.
Si quieres emplear React, ya tienes un scaffolding preparado.
Si quieres usar Vue, también está listo. Incluso hay proyectos de la comunidad (tema del que también hablé en otro video; si lo hice, te dejo la tarjeta aquí) donde puedes usar otros frameworks como Svelte, entre otros.
Y obviamente también está Alpine. Creo que no lo mencioné antes, pero React, Alpine y Vue son los que vienen por defecto. Y por supuesto, Laravel puro, sin ningún agregado, o como yo lo llamo: Laravel Base.
La evolución de Blade
Lo que más me gusta, más allá de toda esta integración, es que Blade también ha mejorado muchísimo.
Cada vez lo siento más parecido a Vue, lo cual me encanta, obviamente.
Si nos vamos a la documentación oficial de Blade, podemos ver su funcionamiento básico.
No entraré en muchos detalles porque supongo que ya lo conoces, pero todo comienza con una simple impresión de datos desde el servidor, igual que en Vue (lo menciono porque es el framework que más uso):
{{ $name }}
Aunque Angular, React, Astro, etc., también funcionan de forma similar en esta parte básica.
Además de las impresiones, Blade tiene condicionales, y lo que me gusta es que también hay condicionales específicos, como por ejemplo @auth o @guest, para verificar si el usuario está autenticado o es invitado.
También hay directivas como @empty, @isset, entre otras. Estas "muletillas" hacen que el código sea mucho más limpio y fácil de leer:
@isset($records)
// $records is defined and is not null...
@endisset
@empty($records)
// $records is "empty"...
@endempty
Claro que todo esto se puede hacer con un if clásico y funciones de PHP, pero esto es más elegante, especialmente cuando estás en Blade y necesitas mostrar contenido condicional de forma sencilla y legible.
Descubrimiento interesante: la directiva @class
Pero lo que realmente quería comentarte, y que recién descubrí gracias al canal Laravel Daily (te lo recomiendo, aunque es en inglés), es la directiva @class.
No la conocía, y era precisamente una de las cosas que no me gustaban de Blade: cuando quería aplicar una clase condicionalmente.
Con esta directiva, puedes hacer exactamente eso, similar a cómo funciona en Vue:
@class([
'active' => $isActive,
'disabled' => !$isEnabled,
])
A mí siempre me pareció que este tipo de lógica está "al revés", porque me gusta colocar primero la condición y luego el valor, pero bueno, así funciona.
Y funciona igual en Vue, Alpine, etc.
Lo bueno es que puedes evaluar múltiples condiciones sin necesidad de escribir @if por todos lados.
La directiva @class lo hace automáticamente. Incluso puedes colocar clases normales, junto con condiciones:
@class([
'text-red' => $hasError,
'font-bold',
])
Y si usas negaciones, también funciona: 'text-gray' => !$hasError.
Acepto recibir anuncios de interes sobre este Blog.
Te muestro una directiva excelente para trabajar con las clases en HTML mediante Laravel blade y otras directivas interesantes.
- Andrés Cruz