Привет Мир!

Сегодня решил протестировать новый для себя инструмент LiveWire.

Что же это такое?

Перевод с официального сайта https://laravel-livewire.com/

Создавать современные веб-приложения сложно. Такие инструменты, как Vue и React, чрезвычайно эффективны, но сложность, которую они добавляют к рабочему процессу разработчика с полным стеком, просто безумна.

Livewire — это фреймворк с полным стеком для Laravel, который упрощает создание динамических интерфейсов, не выходя за рамки комфорта Laravel.

Получается, что можно писать динамические компоненты с AJAX запросами без JS :-).

Фантастика подумал я! Это просто какая-то магия!

Надо все попробовать самому. Все должно быть просто.

Установка:

composer require livewire/livewire

В шаблон нужно включить

    ...
    @livewireStyles
</head>
    ...
    @livewireScripts
</body>

Теперь можно создать компонент:

php artisan make:livewire SearchPosts

Далее я добавил свою логику без единой строчки JS. Ccылка на Gist https://gist.github.com/imjonos/8adc7d3bb78a29e8247b080a9a920252

    namespace App\Http\Livewire;
	use App\Services\PostService;
	use Illuminate\Contracts\Container\BindingResolutionException;
	use Illuminate\Contracts\View\View;
	use Livewire\Component;

	final class SearchPosts extends Component
	{
	    public string $search = '';
	    private PostService $postService;

	    /**
	     * @throws BindingResolutionException
	     */
	    public function __construct($id = null)
	    {
	        $this->postService = app()->make(PostService::class);
	        parent::__construct($id);
	    }
	
	    public function render(): View
	    {
	        return view('livewire.search-posts', [
	            'posts' => $this->postService->search([
	                'name' => $this->search
	            ])
	        ]);
	    }
	}

Blade

<div>
	    <input wire:model="search" type="text" placeholder="Search"/>
	    <ul>
	        @foreach($posts as $post)
	            <li>{{ $post->name }}</li>
	        @endforeach
	    </ul>
</div>

Показать компонент в нужном месте

@livewire('search-posts')

Это все что необходимо!

При вводе текста в поле ввода видно отправку запросов и список обновляется динамически.

Само тело запроса выглядит так:

Ответ от сервера:

Тут я немного огорчился. Сервер возвращает JSON в котором HTML. Не знаю на сколько это хорошо. Нужно больше изучить вопрос. Просто я привык к тому что нужно отправлять как можно меньше данных и самое нужное. А отрисовывать все на стороне клиента, если мы говорим об AJAX запросах.

В целом очень крутой инструмент который позволяет очень быстро создавать динамические компоненты без JS.

Всем счастливой разработки </>