Lo segundo mejor de Laravel Livewire, sus componentes REALES

▶

Quiero hablarte de lo segundo que más me gusta de Laravel Livewire. Recuerda que en otro video ya te había comentado lo que más me encanta, que es simplemente el uso de los atributos específicos de Livewire, como el famoso wire:click. Este atributo lo utilizamos por excelencia para desencadenar varias acciones.

Ese video te lo dejo por aquí por si quieres verlo, pero te lo resumo rápidamente: me encanta ese botón o ese tipo de característica porque con wire:click podemos llamar directamente a un método definido en el servidor desde el cliente. Es decir, desde un botón (que vive en el cliente) podemos invocar algo en el servidor sin necesidad de enviar formularios o peticiones manuales con Axios o Fetch.

Con wire:click es tan simple como esto:

wire:click="nombreDelMetodo"

Nada de estar creando rutas, controladores, métodos o configurando peticiones HTTP... Todo es mucho más directo, limpio y modular. Y eso es precisamente lo que más me gusta de Livewire.

¿Qué Es Lo Segundo Que Más Me Gusta?

Lo segundo que más me gusta son los componentes reales que podemos construir. Por eso tengo abierta esta pantalla: todo esto forma parte de mi curso/libro completo sobre Laravel Livewire, que puedes obtener en mi aplicación de academia o en otros medios.

Puedes filtrar por la sección de Laravel, darle clic a Livewire y ahí lo puedes adquirir. También está disponible en otras plataformas, como Udemy, o incluso en formato libro.

Livewire: Componentes Reales, No Solo Vistas

Aquí trabajamos con componentes reales, no simples vistas. Por ejemplo, tenemos un archivo Blade, donde referenciamos con @livewire el componente correspondiente, que es simplemente un formulario.

Este formulario tiene sus validaciones, su lógica, y todo lo demás. Por ejemplo, si quito un campo y envío, vas a ver que las validaciones se ejecutan. Puedes implementar cualquier tipo de lógica en el componente, y eso es lo que lo hace poderoso.

Pero lo que quiero destacar no es solo eso, sino el hecho de que realmente es un componente. Si no pudiéramos hacer alguna inicialización al momento de definirlo, esto no sería más que una simple vista. Es precisamente lo que ocurre con Inertia.js, y por eso no me gusta tanto.

Comparación con Inertia.js

Veamos un ejemplo: el componente Person. Aquí tenemos su clase asociada y su vista, que devolvemos en el método render. Pero lo interesante es que podemos ejecutar código PHP al momento de cargar el componente. Cualquier operación de inicialización, lo que quieras.

Por ejemplo, en el componente Contact1 (el primer paso), que es Person, colocamos un dd() o un dump para ver que efectivamente se ejecuta. No se está llamando por un click, sino por la carga del componente cuando se cumple cierta condición. Es decir, apenas se carga, se ejecuta código del servidor.

Y eso es lo que me encanta de Livewire: esa capacidad de inicialización en el servidor, al momento de montar el componente:

Controlador:

class Person extends Component
{
    ***
    // ****
    function mount($parentId)
    {
        $this->parentId($parentId);
    }


    // **** #[On('parentId')] 
    function parentId($id)
    {
        $this->parentId = $id;

        $c = ContactPerson::where('contact_general_id', $this->parentId)->first();
        if ($c != null) {
            $this->name = $c->name;
            $this->surname = $c->surname;
            $this->other = $c->other;
            $this->choices = $c->choices;
        }
    }

Vista:

@elseif ($step == 2)
    @livewire('volt.contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
    @livewire('volt.contact.person', ['parentId' => $pk])

En cambio, en Inertia.js esto no sucede. Aunque puedes devolver un componente en Vue desde Laravel, lo que realmente estás haciendo es devolver una vista. No se ejecuta nada del lado del servidor como tal. Todo sucede del lado del cliente.

¿Qué Implica Esto?

Esto significa que en Inertia, si quieres hacer alguna lógica al cargar el componente, tienes que hacerlo desde el cliente, por ejemplo en el ciclo de vida de Vue (mounted) y desde ahí disparar una petición al servidor.

Mientras que en Livewire, todo eso ya está integrado. Puedes trabajar directamente desde el backend, inicializar, consultar la base de datos, validar, formatear... lo que quieras.

Por ejemplo, cuando pasamos un identificador a un componente, también podemos pasarle toda la data, como el contacto completo. Esto lo hacemos para que el componente se “arme” correctamente. En Inertia, lo que hacemos es pasar los datos como props desde el controlador, o incluso desde la vista, aprovechando que Vue acepta esos props.

Es como un híbrido un poco extraño, pero funcional. Sin embargo, no tenemos esa ejecución directa del servidor como sí la tenemos en Livewire. En Inertia tendríamos que montar el componente y luego hacer una petición extra si queremos lógica inicial.

Conclusión

Entonces, puedes ver más claramente la diferencia entre:

• Un componente real, como lo vemos en Livewire, con lógica en cliente y servidor integrados.
• Un componente de Vue en Inertia, que en realidad es una vista que requiere lógica manual para hablar con el servidor.