Джерело: https://laravelukraine.com/docs/13.x/frontend

# Фронтенд

- [Вступ](#introduction)
- [Використання PHP](#using-php)
    - [PHP і Blade](#php-and-blade)
    - [Livewire](#livewire)
    - [Стартові набори](#php-starter-kits)
- [Використання React, Svelte чи Vue](#using-react-svelte-or-vue)
    - [Inertia](#inertia)
    - [Стартові набори](#inertia-starter-kits)
- [Складання ресурсів](#bundling-assets)

<a name="introduction"></a>
## Вступ

Laravel - це бекенд-фреймворк, який дає всі можливості, потрібні для створення сучасних веб-застосунків: [маршрутизацію](/docs/{{version}}/routing), [валідацію](/docs/{{version}}/validation), [кешування](/docs/{{version}}/cache), [черги](/docs/{{version}}/queues), [файлове сховище](/docs/{{version}}/filesystem) тощо. Утім, ми вважаємо важливим давати розробникам приємний повностековий досвід, зокрема потужні підходи до створення фронтенду вашого застосунку.

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

<a name="using-php"></a>
## Використання PHP

<a name="php-and-blade"></a>
### PHP і Blade

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

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

У Laravel такий підхід до рендерингу HTML усе ще доступний завдяки [представленням](/docs/{{version}}/views) і [Blade](/docs/{{version}}/blade). Blade - надзвичайно легка мова шаблонів, що дає зручний короткий синтаксис для виведення даних, ітерування по них тощо:

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

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

<a name="growing-expectations"></a>
#### Зростання очікувань

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

Інші, віддаючи перевагу звичній для себе бекенд-мові, розробили рішення, що дозволяють створювати сучасні інтерфейси веб-застосунків, залишаючись переважно в межах обраної бекенд-мови. Наприклад, в екосистемі [Rails](https://rubyonrails.org/) це спонукало появу бібліотек на кшталт [Turbo](https://turbo.hotwired.dev/), [Hotwire](https://hotwired.dev/) і [Stimulus](https://stimulus.hotwired.dev/).

В екосистемі Laravel потреба створювати сучасні динамічні фронтенди переважно засобами PHP привела до появи [Laravel Livewire](https://livewire.laravel.com) та [Alpine.js](https://alpinejs.dev/).

<a name="livewire"></a>
### Livewire

[Laravel Livewire](https://livewire.laravel.com) - це фреймворк для створення фронтендів на базі Laravel, які відчуваються динамічними, сучасними й живими - так само, як фронтенди, побудовані на сучасних JavaScript-фреймворках на кшталт React, Svelte і Vue.

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

```php
<?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](https://alpinejs.dev/), щоб «присипати» фронтенд JavaScript лише там, де це потрібно - наприклад, щоб показати діалогове вікно.

Якщо ви новачок у Laravel, радимо спершу ознайомитися з базовим використанням [представлень](/docs/{{version}}/views) і [Blade](/docs/{{version}}/blade). Далі зверніться до офіційної [документації Laravel Livewire](https://livewire.laravel.com/docs), щоб дізнатися, як вивести застосунок на новий рівень за допомогою інтерактивних компонентів Livewire.

<a name="php-starter-kits"></a>
### Стартові набори

Якщо ви хочете будувати фронтенд засобами PHP і Livewire, скористайтеся нашим [стартовим набором Livewire](/docs/{{version}}/starter-kits), щоб пришвидшити початок розробки застосунку.

<a name="using-react-svelte-or-vue"></a>
## Використання React, Svelte чи Vue

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

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

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

<a name="inertia"></a>
### Inertia

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

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

```php
<?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» компонента сторінки:

```jsx
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 пропонує [підтримку рендерингу на боці сервера](https://inertiajs.com/server-side-rendering). А розгортаючи застосунок через [Laravel Cloud](https://cloud.laravel.com) чи [Laravel Forge](https://forge.laravel.com), ви легко забезпечите, щоб процес серверного рендерингу Inertia працював завжди.

<a name="inertia-starter-kits"></a>
### Стартові набори

Якщо ви хочете будувати фронтенд за допомогою Inertia і React / Svelte / Vue, скористайтеся нашими [стартовими наборами застосунків для React, Svelte чи Vue](/docs/{{version}}/starter-kits), щоб пришвидшити початок розробки. Усі ці набори створюють каркас автентифікації для бекенду та фронтенду вашого застосунку за допомогою Inertia, React / Svelte / Vue, [Tailwind](https://tailwindcss.com) і [Vite](https://vitejs.dev), тож ви можете братися до втілення своєї наступної великої ідеї.

<a name="bundling-assets"></a>
## Складання ресурсів

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

За замовчуванням Laravel використовує [Vite](https://vitejs.dev) для складання ваших ресурсів. Vite забезпечує блискавичну швидкість збірки та майже миттєву гарячу заміну модулів (HMR) під час локальної розробки. У всіх нових застосунках Laravel, зокрема тих, що використовують наші [стартові набори](/docs/{{version}}/starter-kits), ви знайдете файл `vite.config.js`, який завантажує наш легкий плагін Laravel Vite, завдяки чому користуватися Vite із застосунками Laravel - справжнє задоволення.

Найшвидший спосіб почати з Laravel і Vite - розпочати розробку застосунку з [наших стартових наборів](/docs/{{version}}/starter-kits), які дають фору, надаючи готовий каркас автентифікації для фронтенду й бекенду.

> [!NOTE]
> Докладнішу документацію щодо використання Vite з Laravel дивіться в нашій [окремій документації про складання та компіляцію ресурсів](/docs/{{version}}/vite).