Tabla de contenido:
Introducción
Livewire es un paquete para el framework Laravel que permite crear interfaces reactivas sin preocuparte por escribir y mantener código JavaScript, esto permite crear interfaces complejas sin salirse de laravel, ya que Livewire dota de grandes características a Blade el motor de plantillas de Laravel.
¿Qué es Livewire?
En la web de Livewire se define como un marco completo para Laravel que simplifica la creación de interfaces dinámicas, sin abandonar la comodidad de Laravel.
¿Por qué Livewire y no JavaScript?
Si bien es cierto JavaScript es el lenguaje por excelencia para crear interfaces reactivas utilizando Ajax o axios agrega un nivel de complejidad a los proyectos debido a que se debe mantener código PHP y JavaScript, pero no suena interesante tener la posibilidad de crear este tipo de interfaces utilizando únicamente PHP para aprovechar los beneficios de Blade, esta es una razón para optar por livewire, más a delante veremos unos ejemplos que pueden profundizar de mejor manera el funcionamiento.
Creando un contador con Livewire
El ejemplo clásico que se encuentra en la documentación oficial muestra cómo se crea un contador para este caso, primero lo realizaremos con JavaScript y luego con livewire para ver la diferencia que existe en ambos casos.
Ejemplo con Javascript
En el html tendremos,
<h1 class="counter-display">(..)</h1>
<button class="counter-minus">-</button>
<button class="counter-plus">+</button>
En la sección de JavaScript tendríamos lo siguiente, si bien existen formas más cortas de hacer el código, esto es para el ejemplo.
let counterDisplayElem = document.querySelector('.counter-display');
let counterMinusElem = document.querySelector('.counter-minus');
let counterPlusElem = document.querySelector('.counter-plus');
let count = 0;
updateDisplay();
counterPlusElem.addEventListener("click",()=>{
count++;
updateDisplay();
}) ;
counterMinusElem.addEventListener("click",()=>{
count--;
updateDisplay();
});
function updateDisplay(){
counterDisplayElem.innerHTML = count;
};
Con esto genera el siguiente resultado
Ejemplo con livewire
Para este caso utilizaremos un proyecto nuevo de larave previamente creado. Pueden ver este proceso aquí
Para instalar livewire en un proyecto nuevo, se hace de la siguiente forma utilizando composer.
Instalando Livewire
composer require livewire/livewire
Componentes
Livewire utiliza el concepto de componente y en su documentación los define de la siguiente manera. Los componentes son los componentes básicos de su aplicación Livewire. Combinan estado y comportamiento para crear piezas de interfaz de usuario reutilizables para su interfaz.
¿Cómo crear un componente Livewire?
Para crearlos se utiliza el siguiente comando
php artisan make:livewire counter
Esto creará dos archivos en el proyecto’ app/Livewire/Counter. PHPyresources/views/livewire/counter. blade. PHP` ambos archivos conforman el componente de Livewire, el primer archivo es una clase PHP que contiene la lógica del componente, mientras que el archivo’.blade’ muestra el resultado o la interfaz al usuario.
Estructura de los componentes
Al crear la clase la estructura basica del archivo Counter.php es el siguiente
<?php
namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
public function render()
{
return view('livewire.counter');
}
}
y el archivo blade que se genera es
<div>
{{-- The Master doesn't talk, he acts. --}}
</div>
Creando el contador con Livewire
Para esto eliminamos el contenido del archivo welcome.blade.php y solo dejamos la estructura basica de html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel - Livewire</title>
</head>
<body>
</body>
</html>
Procedemos a crear las funciones que permitiran manipular el contador, esto se hace en el archivo Counter.php, para esto necesitamos una propiedad que guarde el valor y dos funciones add y minus.
<?php
namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function add()
{
$this->count++;
}
public function minus()
{
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}
y en el archivo counter.blade.php agregamos los elementos html para poder interactuar con el contador.
<div>
{{-- The Master doesn't talk, he acts. --}}
<h1>{{ $count }}</h1>
<button wire:click="minus">-</button>
<button wire:click="add">+</button>
</div>
con el siguiente codigo se incluye el componente en el archivo welcome.blade.php
<livewire:counter />
Con esto tendremos el siguiente resultado
Con esto tenemos un primer componente reactivo escrito con PHP sin escribir JavaScript.
Si bien es cierto que no escribimos JavaScript Livewire utiliza JavaScript bajo el capo, livewire utiliza como base AlpineJs una librería JavaScript liviana, pero de gran potencial que fue creado por Caleb Porzio quien a su vez creo Livewire.
En mi opinión Livewire es una gran herramienta que permite crear interfaces reactivas de una manera rápida y sencilla por el hecho de utilizar PHP y el motor de plantilla Blade, sin duda el complemento ideal para los desarrolladores Laravel que necesitan crear aplicaciones increíbles sin preocuparse de integrar otro lenguaje para realizar ciertas interacciones con el usuario.
"Hola, soy un desarrollador apasionado por Laravel y su ecosistema que permiten desarrollar aplicaciones magnificas, tratare de compartir mis conocimientos y vivencias desarrollando aplicaciones utilizando TALL stack, PostgreSQL y MySQL. 🤘"