Livewire

> Temas > Livewire
Editar

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:

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.

Editar

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()
        ]);
    }
}

Editar

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.

Editar

¿Quieres añadir algo sobre Livewire?

Crea artículos, recursos o comparte información sobre Livewire

Crear un bloque

Livewire

Temas relacionados

Preguntas y respuestas

Se han recibido 0 faqs en Livewire

Hacer una pregunta