Laravel dispone de Livewire<\/a>. Una tecnolog\u00eda de backend que permite desarrollar frontales reactivos sin necesidad de saber Javascript.<\/p>\n\n\n\nLivewire es un m\u00f3dulo independiente que se instala en la capa de control y de vista de Laravel, para crear comunicaciones punto a punto entre los elementos de dise\u00f1o de una web y en framework del backend.<\/p>\n\n\n\n
Encapsula el c\u00f3digo PHP y las vistas de Blade, transformando el c\u00f3digo en Javascript de forma transparente al desarrollador.<\/p>\n\n\n\n
Posiblemente no sea la soluci\u00f3n perfecta para aplicaciones con un alto grado de reactividad, pero s\u00ed es una soluci\u00f3n muy \u00fatil cuando este uso es puntual, que es lo que nos ocurre habitualmente en las aplicaciones empresariales.<\/p>\n\n\n\n
Cualquier zona o elemento de la pantalla es susceptible de tener reactividad y solamente necesitamos poder encapsularlo en una etiqueta DIV. La conectamos con Livewire por cualquiera de los m\u00e9todos disponibles y autom\u00e1ticamente tendremos refrescos parciales de la pantalla. Mediante comunicaci\u00f3n AJAX, solicitar\u00e1 al backend la informaci\u00f3n necesaria para pintar nuevamente ese espacio que tiene reservada nuestra vista Blade al componente Livewire.<\/p>\n\n\n\n
Ejemplo de uso<\/h2>\n\n\n\n
Livewire fue creado en 2020 y su popularidad lo llev\u00f3 a ser incluido en Laravel 8. Actualmente, nos encontramos con su tercera versi\u00f3n mayor, que puede ser utilizada en Laravel 10 o en Laravel 11. En el ejemplo, realizaremos una peque\u00f1a aplicaci\u00f3n con Laravel 11 para poder ver el uso de Livewire, no obstante, si tienes la versi\u00f3n anterior, el c\u00f3digo es totalmente compatible.<\/p>\n\n\n\n
Vamos suponer que tenemos un listado de usuarios creados con el model User por defecto de cualquier instalaci\u00f3n de Laravel, con un campo nombre y un campo email. Dentro de ese listado vamos a filtrar por Nombre y as\u00ed localizar los usuarios coincidentes.<\/p>\n\n\n\n
Para poder crear un componente Livewire, debemos instalar el paquete correspondiente, porque no forma parte de la instalaci\u00f3n b\u00e1sica de Laravel en ninguna de sus versiones:<\/p>\n\n\n
composer require<\/span> livewire\/livewire<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nY tras unos segundos tenemos disponible el comando para que podamos crear un nuevo componente Livewire con artisan<\/p>\n\n\n
php<\/span> artisan<\/span> make<\/span>:livewire<\/span> FilterUser<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nEsto crea dos ficheros.<\/p>\n\n\n\n
Por una parte, tenemos el componente visual, que se encuentra en la carpeta livewire de las vistas. Si es nuestro primer componente livewire del proyecto, adem\u00e1s, nos crea la propia carpeta. El nombre del fichero ser\u00e1 el mismo que hemos utilizado en min\u00fasculas y separado por un guion.<\/p>\n\n\n\n
Por otra parte, tenemos el componente con la l\u00f3gica de negocio, que se encuentra en la carpeta livewire dentro del bloque de aplicaci\u00f3n. En este caso, el fichero respeta la nomenclatura CamelCase original.<\/p>\n\n\n\n
En el fichero con la clase, podemos verificar, que extiende de la clase Component y tiene un \u00fanico m\u00e9todo render. Este m\u00e9todo ser\u00e1 el que se ejecute cada vez que se solicite el repintado. Inicialmente s\u00f3lo contiene una llamada para obtener la vista que nos acaba de crear artisan.<\/p>\n\n\n\n
En la vista tenemos un tag de tipo div que contiene una frase c\u00e9lebre. Este ser\u00e1 el \u00e1mbito de Livewire, es decir, la parte de la pantalla que nos va a repintar tras cada llamada al servidor.<\/p>\n\n\n\n
Vamos a modificar nuestro fichero filter-user.blade.php para que tenga un aspecto como este:<\/p>\n\n\n
<div<\/span>><\/span>\n <div<\/span>><\/span>Filtrar usuarios: <input<\/span> type<\/span>=\"text\"<\/span> wire:model.live<\/span>=\"text\"<\/span>><\/span><\/div<\/span>><\/span>\n <br<\/span>><\/span>\n \n <table<\/span>><\/span>\n <thead<\/span>><\/span>\n <tr<\/span>><\/span>\n <th<\/span>><\/span>Nombre<\/th<\/span>><\/span>\n <th<\/span>><\/span>Email<\/th<\/span>><\/span>\n <\/tr<\/span>><\/span>\n <\/thead<\/span>><\/span>\n <tbody<\/span>><\/span>\n @foreach ($users as $key => $user)\n <tr<\/span>><\/span>\n <td<\/span>><\/span>{{ $user->name }}<\/td<\/span>><\/span>\n <td<\/span>><\/span>{{ $user->email }}<\/td<\/span>><\/span>\n <tr<\/span>><\/span>\n @endforeach\n <\/tbody<\/span>><\/span>\n <\/table<\/span>><\/span>\n \n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nCuando creamos el campo de tipo texto, debemos decirle el tipo de cable <\/em>(wire<\/strong>, que es la forma en la que Livewire denomina la reactividad) que queremos aplicar. En este este caso, hemos elegido que la conexi\u00f3n sea con el modelo text. Este modelo no hay que confundirlo con un modelo Laravel, sino que es el nombre de la propiedad dentro de la clase FilterUser donde se copiar\u00e1 el valor del campo tras ser modificado.<\/p>\n\n\n\nVamos ahora a la clase.<\/p>\n\n\n\n
Tenemos que definir como propiedades p\u00fablicas todas aquellas que se utilicen para comunicar la clase y la vista. En nuestro caso vamos a tener dos. Por una parte el modelo <\/em>indicado en la vista y por otra parte, vamos a definir un objeto que ser\u00e1 la colecci\u00f3n de resultados. Sobre esta colecci\u00f3n haremos que se carguen todos los datos que luego la vista de Livewire debe pintar por pantalla.<\/p>\n\n\n\nCon esto, nos quedar\u00eda un c\u00f3digo de la clase FilterUser.php m\u00e1s o menos as\u00ed:<\/p>\n\n\n
<?php<\/span>\n\nnamespace<\/span> App<\/span>\\Livewire<\/span>;\n\nuse<\/span> App<\/span>\\Models<\/span>\\User<\/span>;\nuse<\/span> Livewire<\/span>\\Component<\/span>;\nuse<\/span> Illuminate<\/span>\\Database<\/span>\\Eloquent<\/span>\\Collection<\/span>;\n\nclass<\/span> FilterUser<\/span> extends<\/span> Component<\/span>\n<\/span>{\n public<\/span> $text = \"\"<\/span>;\n public<\/span> $users = null<\/span>; \n public<\/span> function<\/span> render<\/span>()<\/span>\n <\/span>{\n \n if<\/span> ($this<\/span>->text == ''<\/span>) {\n $this<\/span>->users = new<\/span> Collection();\n }\n else<\/span> {\n $this<\/span>->users = User::where('name'<\/span>, 'like'<\/span>, '%'<\/span> . $this<\/span>->text . '%'<\/span>)->get();\n }\n \n return<\/span> view('livewire.filter-user'<\/span>);\n }\n}\n<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nComo el componente por s\u00ed mismo no es de gran utilidad debemos insertarlo en una vista de tipo listado. Nos vamos a nuestra vista index.blade.php y creamos todo el contenido, menos el campo de b\u00fasqueda y el listado.<\/p>\n\n\n\n
Donde necesitemos que se visualice tanto el campo como el listado, vamos a incorporar una llamada a nuestro componente y a\u00f1adimos las directivas Blade para poder utilizar los estilos y el Javascript de Livewire. Indicamos los estilos en la cabecera y tan al final del body como sea posible, indicamos los scripts de Livewire. M\u00e1s o menos igual que har\u00edamos si trat\u00e1semos de utilizar jQuery.<\/p>\n\n\n\n
Con esto nos queda un HTML m\u00e1s o menos as\u00ed:<\/p>\n\n\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"{{ str_replace('_', '-', app()->getLocale()) }}\"<\/span>><\/span>\n <head<\/span>><\/span>\n <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\n <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1\"<\/span>><\/span>\n\n <title<\/span>><\/span>Laravel<\/title<\/span>><\/span>\n\n