Đơn giản hóa Laravel với Volt và Folio: Cách tiếp cận hiện đại

· 6 min read
#laravel #livewire #volt #folio #frontend

Hệ sinh thái Laravel không ngừng phát triển. Với sự ra đời của Volt và Folio, framework này mang đến một cách tiếp cận mới, đơn giản hóa việc xây dựng ứng dụng, đặc biệt dành cho những lập trình viên yêu thích sự gọn nhẹ của "single-file components" thường thấy trong các framework JavaScript như Vue hay React, nhưng vẫn giữ được sức mạnh của PHP và Livewire.

Folio là gì?

Folio mang đến khả năng định tuyến dựa trên trang (page-based routing) cho Laravel. Thay vì phải khai báo routes trong file routes/web.php, bạn chỉ cần tạo một file Blade view trong thư mục resources/views/pages. Đường dẫn file sẽ trở thành URL của trang.

Cài đặt

composer require laravel/folio
php artisan folio:install

Sử dụng cơ bản

Tạo file tại resources/views/pages/users/index.blade.php. Trang này sẽ truy cập được qua đường dẫn /users.

{{-- resources/views/pages/users/index.blade.php --}}

<div>
    <h1>Danh sách người dùng</h1>
    {{-- Hiển thị danh sách tại đây --}}
</div>

Tham số Route (Route Parameters)

Các segment động được xử lý bằng dấu ngoặc vuông. Ví dụ: resources/views/pages/users/[User].blade.php sẽ tương ứng với URL /users/{user}. Folio tự động xử lý Route Model Binding.

{{-- resources/views/pages/users/[User].blade.php --}}

<?php
    use function Laravel\Folio\{name};
     
    name('users.show');
?>

<div>
    <h1>Hồ sơ người dùng: {{ $user->name }}</h1>
</div>

Volt là gì?

Volt là một API theo phong cách functional dành cho Livewire, cho phép logic và view của component cùng tồn tại trong một file duy nhất. Nó giúp giảm thiểu đáng kể lượng code boilerplate.

Cài đặt

composer require livewire/volt
php artisan volt:install

So sánh Class-based và Functional

Theo cách truyền thống, một Livewire component cần 2 file: 1 class PHP và 1 file view Blade. Volt gộp chúng lại làm một.

Livewire truyền thống:

  1. app/Livewire/Counter.php
  2. resources/views/livewire/counter.blade.php

Volt (Functional):

{{-- resources/views/livewire/counter.blade.php --}}

<?php

use function Livewire\Volt\{state};

state(['count' => 0]);

$increment = fn () => $this->count++;

?>

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

Kết hợp Folio và Volt

Sức mạnh thực sự được thể hiện khi bạn kết hợp cả hai. Bạn có thể xây dựng toàn bộ trang với logic backend, routing, và tương tác frontend chỉ trong một file duy nhất.

Ví dụ: Trang "Liên hệ" (Contact Us).

{{-- resources/views/pages/contact.blade.php --}}

<?php

use function Livewire\Volt\{state, rules};
use App\Mail\ContactFormMail;
use Illuminate\Support\Facades\Mail;

state(['email' => '', 'message' => '']);

rules([
    'email' => 'required|email',
    'message' => 'required|min:10',
]);

$submit = function () {
    $this->validate();

    Mail::to('admin@example.com')->send(
        new ContactFormMail($this->email, $this->message)
    );

    $this->reset();
    session()->flash('success', 'Tin nhắn đã được gửi!');
};

?>

<x-layout>
    <div class="max-w-2xl mx-auto p-6">
        <h1 class="text-2xl font-bold mb-4">Liên hệ</h1>

        @if (session('success'))
            <div class="bg-green-100 text-green-800 p-2 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif

        <form wire:submit="submit" class="space-y-4">
            <div>
                <label>Email</label>
                <input wire:model="email" type="email" class="border p-2 w-full">
                @error('email') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <div>
                <label>Nội dung</label>
                <textarea wire:model="message" class="border p-2 w-full"></textarea>
                @error('message') <span class="text-red-500">{{ $message }}</span> @enderror
            </div>

            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
                Gửi đi
            </button>
        </form>
    </div>
</x-layout>

Khi nào nên sử dụng?

  • Prototyping (Làm mẫu): Tốc độ phát triển cực nhanh.
  • Ứng dụng vừa và nhỏ: Giảm thiểu số lượng file, dễ quản lý.
  • Micro-frontends: Các tính năng biệt lập, khép kín.

Tuy nhiên, với các ứng dụng enterprise có logic nghiệp vụ quá phức tạp, việc sử dụng class truyền thống và routing tập trung vẫn mang lại khả năng tìm kiếm (searchability) và phân tách trách nhiệm (separation of concerns) tốt hơn cho team lớn.

Kết luận

Volt và Folio đưa Laravel tiến sâu hơn vào lãnh địa "modern full-stack", vay mượn những tính năng tiện lợi nhất từ thế giới JavaScript nhưng vẫn giữ vững sự ổn định và mạnh mẽ của PHP. Hãy thử nghiệm chúng trong tính năng tiếp theo của bạn!

Bình luận