Livewire es uno de los proyectos más importantes del ecosistema Laravel dirigido específicamente al desarrollo frontend. Livewire v3 se lanzó recientemente, así que exploremos qué es Livewire y qué tipo de proyectos se adaptan a su arquitectura.

La peculiaridad de Livewire es que permite el desarrollo de una aplicación web "moderna" sin la necesidad de utilizar frameworks JavaScript dedicados.

Con Livewire es posible desarrollar componentes Blade que ofrezcan un nivel de reactividad igual al que ofrecen Vue o React, sin la necesidad de gestionar la complejidad de un proyecto con un frontend y backend desacoplados. Puedes continuar desarrollando tu aplicación dentro de los límites de las plantillas de Laravel y Blade.

Cómo funciona Livewire

Livewire es un paquete de Composer que puedes agregar a un proyecto de Laravel. Luego debe activarse en cada página HTML (o la página, en caso de que desee crear una aplicación de página única) utilizando las directivas Blade apropiadas. Los componentes de Livewire constan de una clase PHP y un archivo Blade que contiene la lógica de cómo funciona un componente frontend específico y se debe representar.

Cuando el navegador solicita acceder a una página donde se utiliza Livewire, sucede lo siguiente:

• La página se representa con los estados iniciales del componente, como cualquier página creada con Blade;
• Cuando la interfaz de usuario del componente activa una interacción, se realiza una llamada AJAX a una ruta adecuada que indica el componente Livewire y la interacción que ocurrió, además del estado del componente;
• Los datos se procesan en la parte PHP del componente, que realiza la nueva representación como resultado de la interacción y los envía de vuelta al navegador;
• El DOM de la página se cambia según los cambios recibidos del servidor.

Es muy similar a lo que hacen Vue y React, pero en este caso la lógica de reactividad para responder a una interacción es administrada por el backend y no por el lado de JavaScript.

Para ayudarte a comprender mejor la lógica, te mostraré un ejemplo de esta comparación a continuación.

Si quieres obtener más información sobre los desafíos de construir una empresa impulsada por desarrolladores, puedes seguirme en Linkedin o X.

Cómo instalar Laravel Livewire

La instalación de Livewire es absolutamente mínima. Instale el paquete Composer en su proyecto Laravel y agregue las directivas Blade necesarias a todas las páginas (o al diseño común del que se derivan todas las plantillas Blade del proyecto).

composer require livewire/livewire

    ...

    @livewireStyles


    ...

    @livewireScripts

Cómo crear un componente Laravel Livewire

Una vez instalado el paquete Composer, hay disponible un nuevo subcomando Artisan make para crear un nuevo componente Livewire. Cada componente se creará con una clase PHP y una vista Blade.

Es similar a los componentes basados ​​en clases de Blade.

php artisan make:livewire SpyInput    
COMPONENT CREATED ?

CLASS: app/Http/Livewire/SpyInput.php
VIEW: resources/views/livewire/spy-input.blade.php

El componente en este ejemplo "espiará" lo que está escrito en un campo de entrada HTML, sin necesidad de escribir código JavaScript.

Luego insertamos una propiedad pública en la clase de componente:

// app/Http/Livewire/SpyInput.php

namespace App\Livewire;

use Livewire\Component;

class SpyInput extends Component
{
    public string $message;

    public function render()
    {
        return view('livewire.spy-input');
    }
}

Implemente la vista de componentes de la siguiente manera:

// resources/views/livewire/spy-input.blade.php


    Type here:
    You typed: {{ $message }}

Y finalmente coloque el componente Livewire en una vista de hoja:

    @livewireStyles



    

    @livewireScripts

En un componente Blade normal, todas las propiedades públicas de la clase de componente son visibles en la plantilla Blade. Entonces, en {{ $message }} el valor de la propiedad $message se mostrará automáticamente. Sin embargo, en un componente normal basado en clases, esto solo sucede en la representación del primer componente. Si escribe algo en el campo de entrada, nada cambia en la etiqueta de extensión.

En el componente Livewire, sin embargo, utilizamos el atributo wire:model="message" en el campo. Este atributo garantiza que el valor del campo de entrada esté vinculado a la propiedad $message en la clase PHP. Cuando escribe el nuevo valor en el campo de entrada, se envía al servidor, que actualiza el valor de $message y realiza una nueva representación, enviándolo de regreso al frontend que, luego, actualiza el texto en {{ $ mensaje }}.

Al abrir la pestaña Red de las herramientas de desarrollo del navegador, notaremos que con cada pulsación de tecla en el teclado se realiza una llamada al servidor en la siguiente ruta:

/livewire/message/

La respuesta a cada llamada contiene el nuevo HTML renderizado para el componente, que Livewire insertará en la página en lugar del anterior. Hay varios atributos de cables personalizados disponibles. Por ejemplo, puede ejecutar un método público de la clase de componente al hacer clic en un botón. A continuación se muestra un ejemplo de esta oferta:

Click Here

class SpyInput extends Component
{
    public function doSomething()
    {
        // Your code here…
    }
}

donde doSomething es un método público de la clase PHP del componente Livewire.

Integración con otras funciones de Laravel

La clase PHP conectada al componente se comporta como cualquier otra clase PHP en un proyecto Laravel. La única diferencia es que utiliza el método mount en lugar del clásico constructor de clase __construct para inicializar las propiedades públicas de la clase.

{{-- Initial assignment of the the $book property in the ShowBook class --}}


class ShowBook extends Component
{
    public $title;
    public $excerpt;

    // "mount" instead of "__constuct"
    public function mount(Book $book = null)
    {
        $this->title = $book->title;
        $this->excerpt = $book->excerpt;
    }
}

También puede usar la propiedad protegida $rules para configurar las restricciones de validación de los datos enviados desde el frontend al backend. Tienes que llamar al método validar() para validar los datos:

class BookForm extends Component
{
    public $title;
    public $excerpt;
    public $isbn;

    protected $rules = [
        'title' => ['required', 'max:200'],
        'isbn' => ['required', 'unique:books', 'size:17'],
        'excerpt' => 'max:500'
    ];

    public function saveBook()
    {
        $validated = $this->validate($this->rules);

        Book::create($validated);

        return redirect()->to('/books);
    }
}

O puede usar atributos PHP para declarar las reglas de validación deseadas para una propiedad de clase:

class BookForm extends Component
{
    #[Validate('required|max:200')]
    public $title;

    #[Validate('required|unique:books|size:17')]
    public $isbn;

    #[Validate('max:500')]
    public $excerpt;

    public function saveBook()
    {
        $this->validate();

        Book::create([
            'title' => $this->title,
            'isbn' => $this->isbn,
            'excerpt' => $this->excerpt,
        ]);

        return redirect()->to('/books);
    }
}

En general, cada componente de Livewire se comporta de la manera que un desarrollador de Laravel espera de una clase PHP dentro de un proyecto de Laravel. Permitiendo así la creación de interfaces web reactivas sin necesidad de separar los proyectos de desarrollo entre Laravel y Vue/React.

Monitoriza tu aplicación Laravel gratis

Inspector es una herramienta de monitoreo de ejecución de código diseñada específicamente para desarrolladores de software. No necesita instalar nada a nivel de servidor, simplemente instale el paquete Laravel y estará listo para comenzar.

Si busca monitoreo HTTP, información sobre consultas de bases de datos y la capacidad de reenviar alertas y notificaciones a su entorno de mensajería preferido, pruebe Inspector de forma gratuita. Registre su cuenta.

O obtenga más información en el sitio web: https://inspector.dev