Livewire es un framework fullstack para el desarrollo de componentes Laravel que pueden comunicarse automáticamente entre la vista y el controlador, de modo que se produzcan comportamientos dinámicos sin usar Javascript.
Livewire es un sistema para desarrollo de componentes dinámicos basados en PHP y con vistas en Blade, que son capaces de reaccionar reactivamente en el lado del cliente con Ajax a cambios en los datos.
Livewire es un framework para el desarrollo con Laravel que ofrece la posibilidad de realizar componentes con programación Javascript avanzada, pero sin necesidad de escribir código del lado del cliente.
Por medio de componentes Livewire que puedes escribir con vistas de Blade, es posible conversar entre el cliente y el servidor de una manera sencilla y sin necesidad de recargar la página. Gracias a Livewire el navegador puede reaccionar dinámicamente a los cambios en los modelos del lado del servidor, mediante Ajax, pero sin usar Javascript.
Livewire permite realizar sitios web con una experiencia de usuario avanzada, similares a los que realizarías con sistemas como Vue o React, pero de una manera extremadamente más sencilla. Si trabajas con componentes del estilo de React o Vue y necesitas realizar comportamientos que requieran cambios o acceso a los datos del servidor, debes realizar las correspondientes conexiones por HTTP, crear los endpoints en Laravel que devuelvan JSON y todo ese flujo conocido para la comunicación entre cliente y servidor. Sin embargo, Livewire permite hacer las mismas cosas, solamente con programación en el lado del servidor.
Es excelente para todos los profesionales que se sienten poco confortables escribiendo código Javascript y para cualquier desarrollador que pretenda ahorrar un tiempo considerable a la hora de crear sitios que presentan una cuidada experiencia de usuario.
Más información:
Artículos destacados de Livewire:
Instalar Livewire
El primer paso para instalar Livewire consiste en agregarlo como dependencia al proyecto mediante Composer. El comando es el suguiente:
composer require livewire/livewire
Nota que, para poder instalar Livewire se requiere una versión de PHP actualizada (7.2 en adelante) y una versión de Laravel 7.0 o superior.
Incluir el script de Livewire y los estilos, en todas las páginas donde lo pretendas usar
A continuación tendrás que usar la directiva @livewireStyles y @livewireScripts para incluir todo el código de los assets que requiere Livewire para funcionar.
Los estilos se recomienda colocarlos en el <head> de la página, mientras que el Javascript generalmente lo colocaremos antes de cerrar el <body>.
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
Este código debe estar presente en cada página donde pretendamos usar Livewire.
Publicar el archivo de configuración
En la mayoría de los casos podemos usar Livewire sin más configuraciones. Sin embargo, en el caso que necesitemos personalizar algún aspecto de su configuración, podemos hacerlo mediante el comando:
php artisan livewire:publish --config
Esto situará un archivo llamado livewire.php en la carpeta config, que podremos editar para modificar la configuración del framework.
Componentes en Livewire
Un componente en Livewire es cualquier elemento de la página en el que tenemos una presentación y una lógica del lado del servidor.
Los componentes se usan desde las vistas de Laravel y son capaces de ser reutilizados de una manera sencilla a lo largo de toda una aplicación, encapsulando toda su complejidad dentro de una sencilla etiqueta.
En Livewire se pueden hacer componentes sencillos y complejos pero casi siempre tendrán dos partes diferenciadas: controlador y vista, aunque también se pueden hacer componentes "inline", en los que se define tanto la lógica como la presentación dentro del controlador.
El controlador
Que contiene la lógica de PHP que sirve para definir las propiedades y acceder a datos que maneja este componente. En el controlador consiste en una clase, de programación orientada a objetos, donde podemos definir propiedades del componente por medio de propiedades públicas de la propia clase.
El controlador contiene un método render() que invoca a la vista que se encargará de mostrar la parte visual del componente.
Aquí podemos ver un controlador de ejemplo en Livewire:
namespace App\Http\Livewire;
use App\Models\Country;
use Livewire\Component;
class CountrySearch extends Component
{
public $keyword = '';
public function render()
{
return view('livewire.country-search')->with([
'countries' => Country::where('name', 'like', "%$this->keyword%")->get()
]);
}
}
La vista
Consiste en un archivo creado con el sistema de templates Blade de Laravel. En la vista podemos usar todas las propiedades públicas del componente y por medio de directivas conversar con el controlador, cambiando sus propiedades o ejecutando sus métodos.
Cuando las propiedades del controlador cambian, se invoca de nuevo el método render, que se encarga de refrescar la vista, cerrando el ciclo de cambios y actualizaciones que proporciona esa experiencia dinámica de Livewire.
Una vista de un componente Livewire tiene un aspecto como este:
<div>
<section>
<input wire:model="keyword" type="text" placeholder="Filtrar países"/>
</section>
<div class="paises">
@foreach($countries as $country)
<article>
<h2>{{ $country->name }}</h2>
<div class="description">
{{ $country->description }}
</div>
</article>
@endforeach
</div>
</div>
Dentro de la vista encontramos un input que tiene la directiva "wire:model". Esta produce un enlace de datos, o "data binding", con el controlador. La propiedad pública del controlador llamada "keyword" estará enlazada a lo que el usuario escriba dentro del campo de texto. Por tanto, si el usuario escribe cualquier cosa en el <input> se producirá el cambio de la propiedad y con ello la invocación del método render y el correspondiente refresco de la vista.
Usar componentes Livewire
Para usar un componente de Livewire lo invocamos desde una vista de Blade. Se consigue con la directiva @livewire de Blade, indicando el nombre del componente con "Kebab Case".
@livewire('country-search')
A partir de Laravel 7 se introdujeron componentes gestionados por medio de clases, algo que aprovechó Livewire para introducir una sintaxis alternativa de uso de los componentes.
<livewire:country-search>
Ambas notaciones producen el renderizado del mismo componente y se pueden mezclar en una misma vista de Blade, y por supuesto en toda la aplicación, siempre que nos encontramos en Laravel 7 en adelante.
¿Quieres añadir algo sobre Livewire?
Crea artículos, recursos o comparte información sobre Livewire
Temas relacionados
Preguntas y respuestas de Livewire
Se han recibido 2 faqs en Livewire
Resp.
1
Votos
1
Resp.
1
Votos
1