Фронтенд

Вступ

Laravel - це бекенд-фреймворк, який дає всі можливості, потрібні для створення сучасних веб-застосунків: маршрутизацію, валідацію, кешування, черги, файлове сховище тощо. Утім, ми вважаємо важливим давати розробникам приємний повностековий досвід, зокрема потужні підходи до створення фронтенду вашого застосунку.

Є два основні способи підійти до фронтенд-розробки, створюючи застосунок на Laravel, і вибір залежить від того, чи хочете ви будувати фронтенд засобами PHP, чи за допомогою JavaScript-фреймворків на кшталт React, Svelte і Vue. Нижче ми розглянемо обидва варіанти, щоб ви могли зважено обрати найкращий підхід до фронтенду для свого застосунку.

Використання PHP

PHP і Blade

Колись більшість PHP-застосунків віддавали HTML у браузер за допомогою простих HTML-шаблонів, перемежованих інструкціями echo, які виводили дані, отримані з бази під час запиту:

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

У Laravel такий підхід до рендерингу HTML усе ще доступний завдяки представленням і Blade. Blade - надзвичайно легка мова шаблонів, що дає зручний короткий синтаксис для виведення даних, ітерування по них тощо:

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

Коли застосунки будуються в такий спосіб, надсилання форм та інші взаємодії зі сторінкою зазвичай отримують із сервера цілком новий HTML-документ, і браузер перерендерює всю сторінку. Навіть сьогодні багатьом застосункам чудово підходить фронтенд, побудований саме так - на простих шаблонах Blade.

Зростання очікувань

Однак у міру того, як очікування користувачів від веб-застосунків зростали, багато розробників відчули потребу створювати динамічніші фронтенди з відточенішими взаємодіями. З огляду на це частина розробників обирає будувати фронтенд свого застосунку за допомогою JavaScript-фреймворків, як-от React, Svelte і Vue.

Інші, віддаючи перевагу звичній для себе бекенд-мові, розробили рішення, що дозволяють створювати сучасні інтерфейси веб-застосунків, залишаючись переважно в межах обраної бекенд-мови. Наприклад, в екосистемі Rails це спонукало появу бібліотек на кшталт Turbo, Hotwire і Stimulus.

В екосистемі Laravel потреба створювати сучасні динамічні фронтенди переважно засобами PHP привела до появи Laravel Livewire та Alpine.js.

Livewire

Laravel Livewire - це фреймворк для створення фронтендів на базі Laravel, які відчуваються динамічними, сучасними й живими - так само, як фронтенди, побудовані на сучасних JavaScript-фреймворках на кшталт React, Svelte і Vue.

Використовуючи Livewire, ви створюватимете «компоненти» Livewire, які рендерять окрему частину вашого інтерфейсу та надають методи й дані, що їх можна викликати й з якими можна взаємодіяти з фронтенду вашого застосунку. Наприклад, простий компонент «лічильник» може виглядати так:

<?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>

Як бачите, Livewire дозволяє писати нові HTML-атрибути на кшталт wire:click, які з'єднують фронтенд і бекенд вашого застосунку Laravel. Крім того, ви можете виводити поточний стан компонента звичайними виразами Blade.

Для багатьох Livewire став революцією у фронтенд-розробці з Laravel, дозволивши залишатися в комфорті Laravel, створюючи водночас сучасні динамічні веб-застосунки. Зазвичай розробники, які використовують Livewire, також беруть Alpine.js, щоб «присипати» фронтенд JavaScript лише там, де це потрібно - наприклад, щоб показати діалогове вікно.

Якщо ви новачок у Laravel, радимо спершу ознайомитися з базовим використанням представлень і Blade. Далі зверніться до офіційної документації Laravel Livewire, щоб дізнатися, як вивести застосунок на новий рівень за допомогою інтерактивних компонентів Livewire.

Стартові набори

Якщо ви хочете будувати фронтенд засобами PHP і Livewire, скористайтеся нашим стартовим набором Livewire, щоб пришвидшити початок розробки застосунку.

Використання React, Svelte чи Vue

Хоча сучасні фронтенди цілком можна створювати за допомогою Laravel і Livewire, багато розробників усе ж віддають перевагу потужності JavaScript-фреймворків на кшталт React, Svelte чи Vue. Це дозволяє скористатися багатою екосистемою JavaScript-пакетів та інструментів, доступних через NPM.

Однак без додаткових інструментів поєднання Laravel із React, Svelte чи Vue залишило б нам купу складних проблем: маршрутизацію на боці клієнта, гідратацію даних і автентифікацію. Маршрутизацію на боці клієнта часто спрощують фреймворки з чіткими домовленостями, як-от Next і Nuxt, але гідратація даних і автентифікація лишаються складними й марудними задачами, коли ви поєднуєте бекенд-фреймворк на кшталт Laravel із цими фронтенд-фреймворками.

До того ж розробникам доводиться підтримувати два окремі репозиторії коду, часто узгоджуючи супровід, релізи й розгортання в обох. Хоча ці проблеми й не є нездоланними, ми не вважаємо це продуктивним чи приємним способом розробляти застосунки.

Inertia

На щастя, Laravel пропонує найкраще з обох світів. Inertia долає розрив між вашим застосунком Laravel і сучасним фронтендом на React, Svelte чи Vue, дозволяючи створювати повноцінні сучасні фронтенди на React, Svelte чи Vue, використовуючи водночас маршрути й контролери Laravel для маршрутизації, гідратації даних і автентифікації - і все це в одному репозиторії. За такого підходу ви отримуєте всю потужність і Laravel, і React / Svelte / Vue, не обмежуючи можливостей жодного з інструментів.

Після встановлення Inertia у ваш застосунок Laravel ви писатимете маршрути й контролери як зазвичай. Однак замість повернення шаблону Blade із контролера ви повертатимете сторінку Inertia:

<?php

namespace App\Http\Controllers;

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

class UserController extends Controller
{
    /**
     * Show the profile for a given user.
     */
    public function show(string $id): Response
    {
        return Inertia::render('users/show', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Сторінці Inertia відповідає компонент React, Svelte чи Vue, який зазвичай зберігається в каталозі resources/js/pages вашого застосунку. Дані, передані сторінці через метод Inertia::render, використовуються для гідратації «props» компонента сторінки:

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>
    )
}

Як бачите, Inertia дозволяє скористатися всією потужністю React, Svelte чи Vue під час створення фронтенду, даючи водночас легкий місток між вашим бекендом на Laravel і фронтендом на JavaScript.

Рендеринг на боці сервера

Якщо ви вагаєтеся братися за Inertia, бо ваш застосунок потребує рендерингу на боці сервера, не хвилюйтеся. Inertia пропонує підтримку рендерингу на боці сервера. А розгортаючи застосунок через Laravel Cloud чи Laravel Forge, ви легко забезпечите, щоб процес серверного рендерингу Inertia працював завжди.

Стартові набори

Якщо ви хочете будувати фронтенд за допомогою Inertia і React / Svelte / Vue, скористайтеся нашими стартовими наборами застосунків для React, Svelte чи Vue, щоб пришвидшити початок розробки. Усі ці набори створюють каркас автентифікації для бекенду та фронтенду вашого застосунку за допомогою Inertia, React / Svelte / Vue, Tailwind і Vite, тож ви можете братися до втілення своєї наступної великої ідеї.

Складання ресурсів

Незалежно від того, чи розробляєте ви фронтенд на Blade і Livewire, чи на React / Svelte / Vue та Inertia, вам, найімовірніше, знадобиться зібрати CSS вашого застосунку у готові до продакшену ресурси. Звісно, якщо ви будуєте фронтенд на React, Svelte чи Vue, вам також потрібно буде зібрати компоненти в готові для браузера JavaScript-ресурси.

За замовчуванням Laravel використовує Vite для складання ваших ресурсів. Vite забезпечує блискавичну швидкість збірки та майже миттєву гарячу заміну модулів (HMR) під час локальної розробки. У всіх нових застосунках Laravel, зокрема тих, що використовують наші стартові набори, ви знайдете файл vite.config.js, який завантажує наш легкий плагін Laravel Vite, завдяки чому користуватися Vite із застосунками Laravel - справжнє задоволення.

Найшвидший спосіб почати з Laravel і Vite - розпочати розробку застосунку з наших стартових наборів, які дають фору, надаючи готовий каркас автентифікації для фронтенду й бекенду.

Докладнішу документацію щодо використання Vite з Laravel дивіться в нашій окремій документації про складання та компіляцію ресурсів.