Livewire é um dos projetos mais importantes do ecossistema Laravel voltado especificamente para o desenvolvimento frontend. O Livewire v3 foi lançado recentemente, então vamos explorar o que é o Livewire e que tipo de projetos se adaptam à sua arquitetura.

A peculiaridade do Livewire é que ele permite o desenvolvimento de uma aplicação web "moderna" sem a necessidade de usar frameworks JavaScript dedicados.

Com o Livewire é possível desenvolver componentes Blade que oferecem um nível de reatividade igual ao oferecido pelo Vue ou React, sem a necessidade de gerenciar a complexidade de um projeto com frontend e backend desacoplados. Você pode continuar desenvolvendo seu aplicativo dentro das fronteiras dos modelos Laravel e Blade.

Como funciona o Livewire

Livewire é um pacote Composer que você pode adicionar a um projeto Laravel. Ele deve então ser ativado em cada página HTML (ou na página, caso você queira criar um aplicativo de página única) usando as diretivas Blade apropriadas. Os componentes Livewire consistem em uma classe PHP e um arquivo Blade que contém a lógica de como um componente frontend específico funciona e deve ser renderizado.

Quando o navegador pede para acessar uma página onde o Livewire é usado, acontece o seguinte:

• A página é renderizada com os estados iniciais do componente, como qualquer página criada usando Blade;
• Quando a UI do componente dispara uma interação, uma chamada AJAX é feita para uma rota apropriada indicando o componente Livewire e a interação que ocorreu, além do status do componente;
• Os dados são processados ​​na parte PHP do componente, que realiza a nova renderização como resultado da interação e os envia de volta ao navegador;
• O DOM da página é alterado de acordo com as alterações recebidas do servidor.

É muito semelhante ao que Vue e React fazem, mas neste caso a lógica de reatividade para responder a uma interação é gerenciada pelo backend e não pelo lado do javascript.

Para ajudar você a entender melhor a lógica, mostrarei abaixo um exemplo dessa comparação.

Se você quiser saber mais sobre os desafios de construir uma empresa voltada para desenvolvedores, pode me seguir no Linkedin ou no X.

Como instalar o Laravel LiveWire

A instalação do Livewire é absolutamente mínima. Instale o pacote Composer em seu projeto Laravel e adicione as diretivas Blade necessárias a todas as páginas (ou ao layout comum do qual todos os modelos Blade no projeto são derivados).

composer require livewire/livewire

    ...

    @livewireStyles


    ...

    @livewireScripts

Como criar um componente Laravel Livewire

Depois que o pacote Composer for instalado, um novo subcomando Artisan make estará disponível para criar um novo componente Livewire. Cada componente será feito com uma classe PHP e uma visualização Blade.

É semelhante aos componentes baseados em classe do Blade.

php artisan make:livewire SpyInput    
COMPONENT CREATED ?

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

O componente neste exemplo irá "espionar" o que está escrito em um campo de entrada HTML, sem a necessidade de escrever código JavaScript.

Em seguida, inserimos uma propriedade pública na classe do 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 a visualização do componente da seguinte maneira:

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


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

E finalmente coloque o componente Livewire em uma visualização blade:

    @livewireStyles



    

    @livewireScripts

Em um componente Blade normal, todas as propriedades públicas da classe do componente são visíveis no modelo blade. Portanto, em {{ $message }} o valor da propriedade $message será exibido automaticamente. Em um componente normal baseado em classe, entretanto, isso só acontece na renderização do primeiro componente. Se você digitar algo no campo de entrada, nada mudará na tag span.

No componente Livewire, entretanto, usamos o atributo wire:model="message" no campo. Este atributo garante que o valor do campo de entrada esteja vinculado à propriedade $message na classe PHP. Ao escrever o novo valor no campo de entrada ele é enviado ao servidor, que atualiza o valor de $message e realiza uma nova renderização, enviando-o de volta ao frontend que, então, atualiza o texto em {{ $ mensagem }}.

Ao abrir a aba Rede das ferramentas de desenvolvimento do navegador, notaremos que a cada pressionamento de tecla do teclado faz-se uma chamada para o servidor na rota abaixo:

/livewire/message/

A resposta a cada chamada contém o novo HTML renderizado para o componente, que o Livewire inserirá na página no lugar do antigo. Vários atributos de ligação personalizados estão disponíveis. Por exemplo, você pode executar um método público da classe do componente ao clicar em um botão. Aqui está um exemplo dessa licitação:

Click Here

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

onde doSomething é um método público da classe PHP do componente Livewire.

Integração com outros recursos do Laravel

A classe PHP conectada ao componente se comporta como qualquer outra classe PHP em um projeto Laravel. A única diferença é que ele usa o método mount em vez do clássico construtor da classe __construct para inicializar as propriedades públicas da classe.

{{-- 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;
    }
}

Você também pode usar a propriedade protegida $rules para configurar as restrições de validação nos dados enviados do frontend para o backend. Você tem que chamar o método activate() para validar os dados:

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

Ou você pode usar atributos PHP para declarar as regras de validação desejadas para uma propriedade de classe:

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

Em geral, cada componente Livewire se comporta da maneira que um desenvolvedor Laravel espera de uma classe PHP dentro de um projeto Laravel. Permitindo assim a criação de interfaces web reativas sem a necessidade de separar os projetos de desenvolvimento entre Laravel e Vue/React.

Monitore seu aplicativo Laravel gratuitamente

Inspector é uma ferramenta de monitoramento de execução de código projetada especificamente para desenvolvedores de software. Você não precisa instalar nada no nível do servidor, basta instalar o pacote Laravel e você está pronto para começar.

Se você está procurando monitoramento HTTP, insights de consulta de banco de dados e a capacidade de encaminhar alertas e notificações para seu ambiente de mensagens preferido, experimente o Inspector gratuitamente. Registre sua conta.

Ou saiba mais no site: https://inspector.dev