Xây dựng Giao diện Động với Laravel Livewire 3

· 4 min read
#laravel #livewire #frontend #php

Trong nhiều năm, xây dựng ứng dụng web động đồng nghĩa với việc xây dựng một API và một frontend riêng biệt sử dụng React hoặc Vue. Laravel Livewire đã thay đổi cuộc chơi bằng cách cho phép bạn xây dựng giao diện động trong khi vẫn ở trong sự thoải mái của Laravel và Blade.

Livewire 3 tiến xa hơn với hiệu năng được cải thiện, trải nghiệm developer tốt hơn và các tính năng mới mạnh mẽ.

Tại sao chọn Livewire?

Livewire hoạt động như một cầu nối giữa backend và frontend của bạn. Nó render HTML ban đầu trên server (thân thiện với SEO), và sau đó "hydrate" nó với JavaScript. Khi có tương tác của người dùng, Livewire thực hiện AJAX requests đến server, re-render component, và thông minh cập nhật chỉ những DOM đã thay đổi.

Các tính năng chính trong Livewire 3

1. Alpine.js mặc định

Livewire 3 được xây dựng trên nền Alpine.js. Bạn có thể inject logic Alpine trực tiếp vào Livewire components mà không cần setup thêm.

2. Properties & Locking

Binding data đơn giản hơn.

class CreatePost extends Component
{
    public $title = '';
    public $content = '';
 
    public function save()
    {
        Post::create([
            'title' => $this->title,
            'content' => $this->content,
        ]);
    }
}

View:

<input type="text" wire:model="title">

3. Wire:navigate

Tính năng này cho phép điều hướng giống SPA mà không cần reload toàn trang.

<a href="/posts" wire:navigate>Tất cả bài viết</a>

Xây dựng Component Tìm kiếm Real-time

Hãy xây dựng một ví dụ kinh điển: ô tìm kiếm.

Component (app/Livewire/SearchUsers.php)

namespace App\Livewire;

use Livewire\Component;
use App\Models\User;

class SearchUsers extends Component
{
    public $search = '';

    public function render()
    {
        return view('livewire.search-users', [
            'users' => User::where('name', 'like', '%'.$this->search.'%')->get(),
        ]);
    }
}

View (resources/views/livewire/search-users.blade.php)

<div>
    <input wire:model.live.debounce.300ms="search" type="text" placeholder="Tìm kiếm users...">
 
    <ul>
        @foreach($users as $user)
            <li>{{ $user->name }}</li>
        @endforeach
    </ul>
</div>

Lưu ý các modifiers:

  • .live: Cập nhật server ngay lập tức (không chỉ khi blur).
  • .debounce.300ms: Đợi 300ms sau khi ngừng gõ trước khi gửi request, tiết kiệm tài nguyên server.

Form Objects

Cho các forms phức tạp, Livewire 3 giới thiệu Form Objects để giữ components sạch sẽ.

class PostForm extends Form
{
    #[Rule('required|min:5')]
    public $title = '';
 
    #[Rule('required')]
    public $content = '';
}

Kết luận

Livewire 3 giảm đáng kể sự phức tạp khi xây dựng web apps hiện đại. Nó hoàn hảo cho dashboards, admin panels và các ứng dụng SaaS tương tác nơi SEO và "Time to First Byte" quan trọng.

Bình luận