Frontend

Giới thiệu (Introduction)

Laravel là backend framework cung cấp tất cả tính năng bạn cần để xây dựng ứng dụng web hiện đại, như routing, validation, caching, queues, file storage và nhiều hơn nữa. Tuy nhiên, chúng tôi tin rằng điều quan trọng là cung cấp cho developer trải nghiệm full-stack tuyệt vời, bao gồm các cách tiếp cận mạnh mẽ để xây dựng frontend.

Có hai cách chính để phát triển frontend khi xây dựng ứng dụng với Laravel, và cách bạn chọn phụ thuộc vào việc bạn muốn xây frontend bằng PHP hay sử dụng JavaScript frameworks như React, Svelte và Vue. Chúng ta sẽ thảo luận cả hai phương án bên dưới.

Sử dụng PHP (Using PHP)

PHP và Blade (PHP and Blade)

Trước đây, hầu hết ứng dụng PHP render HTML đến trình duyệt bằng các template HTML đơn giản xen kẽ với câu lệnh echo của PHP để render dữ liệu lấy từ database:

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

Trong Laravel, cách tiếp cận render HTML này vẫn có thể thực hiện bằng views và Blade. Blade là ngôn ngữ template cực kỳ nhẹ, cung cấp cú pháp ngắn gọn tiện lợi cho việc hiển thị dữ liệu, lặp qua dữ liệu và nhiều hơn nữa:

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

Khi xây dựng ứng dụng theo cách này, việc submit form và các tương tác trang thường nhận một tài liệu HTML hoàn toàn mới từ server và toàn bộ trang được trình duyệt render lại. Ngày nay, nhiều ứng dụng vẫn hoàn toàn phù hợp với cách xây dựng frontend bằng Blade templates đơn giản.

Kỳ vọng ngày càng tăng (Growing Expectations)

Tuy nhiên, khi kỳ vọng của người dùng về ứng dụng web đã trưởng thành hơn, nhiều developer thấy cần xây dựng frontend động hơn với các tương tác tinh xảo hơn. Vì điều này, một số developer chọn bắt đầu xây frontend bằng JavaScript frameworks như React, Svelte và Vue.

Những người khác, ưa thích ngôn ngữ backend họ đã quen, đã phát triển các giải pháp cho phép xây dựng UI ứng dụng web hiện đại trong khi vẫn chủ yếu sử dụng ngôn ngữ backend. Trong hệ sinh thái Laravel, nhu cầu tạo frontend hiện đại, động bằng PHP đã dẫn đến sự ra đời của Laravel Livewire và Alpine.js.

Livewire

Laravel Livewire là framework để xây dựng frontend chạy bằng Laravel nhưng cảm giác động, hiện đại và sống động — giống như frontend xây bằng JavaScript frameworks hiện đại như React, Svelte và Vue.

Khi sử dụng Livewire, bạn tạo các "components" render một phần riêng biệt của UI và expose methods và data có thể được gọi và tương tác từ frontend. Ví dụ, component "Counter" đơn giản có thể trông như sau:

<?php

use Livewire\Component;

new class extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }
};
?>

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

Như bạn thấy, Livewire cho phép viết các HTML attributes mới như wire:click kết nối frontend và backend của ứng dụng Laravel. Ngoài ra, bạn có thể render trạng thái hiện tại của component bằng Blade expressions đơn giản.

Với nhiều người, Livewire đã cách mạng hóa phát triển frontend với Laravel, cho phép họ ở lại trong sự thoải mái của Laravel đồng thời xây dựng ứng dụng web hiện đại, động. Thông thường, developer sử dụng Livewire cũng sẽ dùng Alpine.js để "rắc" JavaScript vào frontend chỉ khi cần thiết.

GỢI Ý

Nếu mới làm quen với Laravel, hãy làm quen với cách sử dụng cơ bản của views và Blade. Sau đó, xem tài liệu Laravel Livewire chính thức để tìm hiểu cách đưa ứng dụng lên tầm cao mới với Livewire components tương tác.

Starter Kits

Nếu muốn xây frontend bằng PHP và Livewire, bạn có thể tận dụng Livewire starter kit để khởi đầu nhanh.

Sử dụng React, Svelte hoặc Vue

Dù có thể xây frontend hiện đại bằng Laravel và Livewire, nhiều developer vẫn thích tận dụng sức mạnh của JavaScript framework như React, Svelte hoặc Vue. Điều này cho phép developer tận dụng hệ sinh thái phong phú của JavaScript packages và tools qua NPM.

Tuy nhiên, nếu không có công cụ bổ sung, việc kết hợp Laravel với React, Svelte hoặc Vue để lại cho chúng ta nhiều vấn đề phức tạp cần giải quyết như client-side routing, data hydration và authentication. Client-side routing thường được đơn giản hóa bằng các frameworks có chủ kiến (opinionated) như Next và Nuxt; tuy nhiên, data hydration và authentication vẫn là vấn đề phức tạp khi kết hợp backend framework như Laravel với các frontend frameworks này.

Inertia

May mắn thay, Laravel cung cấp cả hai ưu điểm. Inertia kết nối ứng dụng Laravel với frontend React, Svelte hoặc Vue hiện đại, cho phép bạn xây dựng frontend hoàn chỉnh bằng React, Svelte hoặc Vue đồng thời tận dụng Laravel routes và controllers cho routing, data hydration và authentication — tất cả trong một code repository duy nhất.

Sau khi cài Inertia, bạn vẫn viết routes và controllers như bình thường. Tuy nhiên, thay vì trả về Blade template, bạn trả về một Inertia page:

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;

class UserController extends Controller
{
    /**
     * Hiển thị profile cho user.
     */
    public function show(string $id): Response
    {
        return Inertia::render('users/show', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Một Inertia page tương ứng với một React, Svelte hoặc Vue component, thường được lưu trong thư mục resources/js/pages. Dữ liệu truyền vào page qua method Inertia::render sẽ được dùng để hydrate "props" của page component:

import Layout from '@/layouts/authenticated';
import { Head } from '@inertiajs/react';

export default function Show({ user }) {
    return (
        <Layout>
            <Head title="Welcome" />
            <h1>Welcome</h1>
            <p>Hello {user.name}, welcome to Inertia.</p>
        </Layout>
    )
}

Như bạn thấy, Inertia cho phép tận dụng toàn bộ sức mạnh của React, Svelte hoặc Vue khi xây frontend, đồng thời cung cấp cầu nối nhẹ giữa Laravel backend và JavaScript frontend.

Server-Side Rendering

Nếu bạn lo lắng về việc sử dụng Inertia vì ứng dụng cần server-side rendering, đừng lo. Inertia cung cấp hỗ trợ server-side rendering. Và khi triển khai ứng dụng qua Laravel Cloud hoặc Laravel Forge, việc đảm bảo quá trình server-side rendering của Inertia luôn chạy trở nên rất dễ dàng.

Starter Kits

Nếu muốn xây frontend bằng Inertia và React / Svelte / Vue, bạn có thể tận dụng starter kits cho React, Svelte hoặc Vue. Cả hai starter kits đều scaffold authentication flow cho backend và frontend bằng Inertia, React / Svelte / Vue, Tailwind và Vite.

Đóng gói tài nguyên (Bundling Assets)

Dù chọn phát triển frontend bằng Blade và Livewire hay React / Svelte / Vue và Inertia, bạn sẽ cần đóng gói CSS của ứng dụng thành tài nguyên sẵn sàng cho production. Tất nhiên, nếu chọn xây frontend bằng React, Svelte hoặc Vue, bạn cũng cần đóng gói components thành JavaScript assets cho trình duyệt.

Mặc định, Laravel sử dụng Vite để đóng gói tài nguyên. Vite cung cấp thời gian build cực nhanh và Hot Module Replacement (HMR) gần như tức thời trong quá trình phát triển local. Trong tất cả ứng dụng Laravel mới, bao gồm những ứng dụng sử dụng starter kits, bạn sẽ tìm thấy file vite.config.js tải plugin Laravel Vite nhẹ, giúp Vite hoạt động tuyệt vời với ứng dụng Laravel.

GỢI Ý

Cách nhanh nhất để bắt đầu với Laravel và Vite là sử dụng starter kits. Để tìm hiểu chi tiết hơn, xem tài liệu chuyên sâu về Vite.