Primer ejemplo con Laravel Livewire

Cuando hablamos de Laravel Livewire nos referimos a una herramienta de Laravel que directamente nos permite crear sistemas interactivos y reactivos sin escribir código Javascript, es muy común implementar VUE o React para resolver problemas de este tipo pero la novedad con esta herramienta es que usamos código y estructura propia del Framework para lograr el mismo resultado.

Cuando creamos un componente Livewire tenemos dos archivos, uno .blade.php y otro .php, este conjunto reemplaza el código Javascript, VUE o React que puedas estar utilizando; tu resultado final será rápido, fácil, interactivo y reactivo desde tu producto PHP.

La ventaja principal es que podemos centrarnos en la lógica del proyecto sin descuidar la poderosa solución que ofrecen las herramientas frontend.

Sigamos los siguientes pasos:

Instalación de Laravel:

$ laravel new first-livewire-project

Nos movemos al proyecto:

$ cd first-livewire-project

Instalamos a Laravel Livewire

$ composer require livewire/livewire

Luego de instalarlo podemos crear nuestro primer componente, le llamaré testing livewire porque nuestro objetivo es probar la herramienta.

$ php artisan make:livewire testing-livewire

Tenemos un resultado maravilloso, dos archivos debido a que un componente Livewire necesita de su vista y clase para operar y funcionar con orden.

CLASS: app/Http/Livewire/TestingLivewire.php (lógica, código PHP)
VIEW: resources/views/livewire/testing-livewire.blade.php (vista del componente)

Clase app/Http/Livewire/TestingLivewire.php:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class TestingLivewire extends Component
{
   public function render()
   {
       return view('livewire.testing-livewire');
   }
}

Dentro del método render() especificamos la vista que mostrará nuestro resultado, en nuestro ejemplo tenemos livewire.testing-livewire dentro de resources/views. Esta vista no es complicada, solo tenemos la típica estructura Blade que conocemos de Laravel.

Vista resources/views/livewire/testing-livewire.blade.php

<div>
   {{-- Care about people's approval and you will be their prisoner. --}}
</div>

Hagamos un ejemplo, seguramente has visto que después del año 2020 se hizo popular el letrero de aforo (capacidad) en sitios como supermercados, teatros y salas públicas básicamente . Capacidad total de las localidades de un teatro u otro recinto de espectáculos públicos:

No existe un sensor como tal, la persona encargada ubicada en la puerta va sumando a través de un botón cada vez que ingresen personas y va presionando el botón de restar cada vez que algunas personas salgan, no es muy exacto pero da una idea de que tantas personas se están manejando en el lugar.

Proyecto

Vista

<div>
   <h1>Aforo máximo (450 personas)</h1>

   <h3>
       Actualmente: {{ $count }}
       persona{{ $count !== 1 ? 's' : '' }}
   </h3>

   <div>
       <button wire:click="increment">+</button>
       <button wire:click="decrement">-</button>
   </div>
</div>

Clase

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class TestingLivewire extends Component
{
   public $count = 0;
  
   public function increment()
   {
       $this->count++;
   }

   public function decrement()
   {
       if ($this->count > 0)
           $this->count--;
   }

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

Carga del componente: Vista welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>Laravel Livewire</title>

       @livewireStyles
   </head>
   <body>
       @livewire('testing-livewire')
      
       @livewireScripts
   </body>
</html>

En conclusión, el resultado es un sistema interactivo pero construido de una manera fácil, sencilla y elegante. Con esta herramienta nos enfocamos en PHP sin tener que preocuparnos de la complejidad que demanda la implementación de Javascript.

Laravel Livewire es una herramienta increíble y útil para crear proyectos importantes como si usaramos un framework poderoso del frontend.

El código está en github.

Compartir en: Facebook Twitter

Recursos

Primer ejemplo con Laravel Livewire

Proyecto