Alpine.js: Sự Thay Thế jQuery Cho Laravel

· 4 min read
#laravel #alpinejs #javascript #frontend

Trong một thời gian dài, jQuery là vua của việc "rắc" JavaScript lên các trang render từ server. Cần dropdown? jQuery. Cần modal? jQuery.

Nhưng phát triển hiện đại đòi hỏi tính reactive. Chúng ta muốn state điều khiển DOM, không phải thao tác DOM thủ công. Vue và React rất tuyệt, nhưng thiết lập build step cho một nút toggle đơn giản là quá mức cần thiết.

Giới thiệu Alpine.js.

Alpine.js Là Gì?

Alpine là công cụ nhỏ gọn, mạnh mẽ để tạo hành vi trực tiếp trong markup của bạn. Nó được ví như "Tailwind cho JavaScript".

Các Directive Cốt Lõi

1. State (x-data)

Định nghĩa phạm vi dữ liệu cho một component.

<div x-data="{ open: false }">
    ...
</div>

2. Hiển Thị (x-show)

Chuyển đổi hiển thị dựa trên state.

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>
 
    <div x-show="open">
        Tôi đang hiển thị!
    </div>
</div>

3. Binding (x-text, x-html)

Cập nhật nội dung text của element.

<div x-data="{ count: 0 }">
    <button @click="count++">Tăng</button>
    <span x-text="count"></span>
</div>

Ví Dụ Thực Tế: Search Dropdown

Hãy tưởng tượng việc triển khai input tìm kiếm tự xóa khi bạn nhấn ESC.

<div x-data="{ query: '' }">
    <input 
        type="text" 
        x-model="query"
        @keydown.escape="query = ''"
        placeholder="Tìm kiếm..."
    >
 
    <div x-show="query.length > 0">
        Đang tìm: <span x-text="query"></span>
    </div>
</div>

Với jQuery, điều này sẽ là 10 dòng event listener và selector lookup. Với Alpine, không cần file JS bổ sung nào.

Tích Hợp Với Laravel Blade

Alpine tỏa sáng khi kết hợp với Blade component (x-components).

components/dropdown.blade.php

<div x-data="{ open: false }" @click.outside="open = false" class="relative">
    <div @click="open = ! open">
        {{ $trigger }}
    </div>

    <div x-show="open" 
         x-transition
         class="absolute z-50 mt-2 w-48 rounded-md shadow-lg bg-white">
        {{ $content }}
    </div>
</div>

Cách sử dụng:

<x-dropdown>
    <x-slot name="trigger">
        <button>Menu</button>
    </x-slot>
    <x-slot name="content">
        <a href="#" class="block px-4 py-2">Hồ sơ</a>
        <a href="#" class="block px-4 py-2">Đăng xuất</a>
    </x-slot>
</x-dropdown>

Tại Sao Lập Trình Viên Laravel Yêu Thích Nó

  1. Không Cần Build Step: Chỉ cần include qua CDN và nó hoạt động.
  2. Thân Thiện Với Blade: Truyền biến (x-data="{ id: {{ $user->id }} }") hoạt động hoàn hảo.
  3. Bạn Thân Của Livewire: Livewire sử dụng Alpine bên trong.

Nếu bạn đang xây dựng ứng dụng Laravel tiêu chuẩn và chỉ cần tương tác, hãy bỏ qua React/Vue và sử dụng Alpine.

Bình luận