---
title: "Lattice: опис Inertia UI на PHP"
url: https://laravelukraine.com/blog/lattice-opis-inertia-ui-na-php
date: 2026-06-19
source: https://laravel-news.com/lattice-describe-inertia-uis-in-php?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+laravelnews
---

# Lattice: опис Inertia UI на PHP

**Lattice** - це server-driven UI фреймворк для Laravel, який дозволяє описувати екран цілком на PHP: сторінки, форми, таблиці, дії та меню. Цей опис потім рендериться як справжні React-компоненти через Inertia. Модель Lattice робить сервер єдиним джерелом правди щодо того, *що саме* має відображати екран, залишаючи клієнту одне завдання - відрендерити це.

Сторінка в Lattice - це PHP-клас, який будує дерево визначень компонентів. Фреймворк серіалізує це дерево у типізований payload, передає його через Inertia як звичайний page visit, а єдиний React-компонент резолвить кожен вузол у реєстрі компонентів і малює інтерфейс.

## Переваги цієї моделі

- **Сторінки як класи з автоматичною маршрутизацією.** Атрибут `#[AsPage]` реєструє маршрут; Lattice сканує налаштовані шляхи та підключає їх автоматично, без ручного додавання роутів.
- **Форми на основі Laravel-валідації.** Поля оголошуються в PHP, валідуються стандартними правилами Laravel і можуть опціонально валідуватися в реальному часі через Precognition.
- **Таблиці на основі Eloquent.** Колонки, сортування, фільтрація та пагінація визначаються в класі таблиці, який повертає query builder.
- **Серверні дії, що повертають ефекти.** Дія виконує ваш PHP-код при кліку та повертає інструкції (toast, редірект, оновлення компонента), які клієнт виконує.

## Сторінки

Сторінка успадковує базовий клас `Page`, несе атрибут `#[AsPage]` для маршруту та будує UI в методі `render()`. Дерево компонентів збирається через fluent PHP - `Stack`, `Grid`, `Heading`, `Card` тощо - а не через JSX:

```php
use Lattice\Lattice\Attributes\AsPage;
use Lattice\Lattice\Core\Components\Card;
use Lattice\Lattice\Core\Components\Grid;
use Lattice\Lattice\Core\Components\Heading;
use Lattice\Lattice\Core\Components\Stack;
use Lattice\Lattice\Core\Components\Text;
use Lattice\Lattice\Core\Enums\Gap;
use Lattice\Lattice\Core\PageSchema;
use Lattice\Lattice\Http\Page as BasePage;

#[AsPage(route: '/dashboard', middleware: ['web'])]
final class DashboardPage extends BasePage
{
    public function title(): string
    {
        return 'Dashboard';
    }

    public function render(PageSchema $schema): PageSchema
    {
        return $schema->schema([
            Stack::make('dashboard')
                ->gap(Gap::Large)
                ->schema([
                    Heading::make('Dashboard'),
                    Text::make('Everything below is described in PHP and rendered as React.'),
                    Grid::make('stats')
                        ->columns(2)
                        ->schema([
                            Card::make('Orders', '128 this week.'),
                            Card::make('Revenue', '$4,210 this week.'),
                        ]),
                ]),
        ]);
    }
}
```

Параметри маршруту резолвляться прямо в сигнатуру `render()` через route-model binding Laravel, а метод `authorize()` контролює доступ перед рендерингом сторінки:

```php
#[AsPage(route: '/products/{product}/edit')]
class ProductEditPage extends Page
{
    public function authorize(Request $request): bool
    {
        return $request->user()?->can('update', Product::class) ?? false;
    }

    public function render(PageSchema $schema, Product $product): PageSchema
    {
        return $schema->schema([
            Heading::make("Edit {$product->name}"),
        ]);
    }
}
```

## Форми

Форма - це клас, що успадковує `FormDefinition` і оголошує поля та обробляє відправлення. Lattice рендерить React-інпути, валідує запит за вашими Laravel-правилами та виконує `handle()` при успішному submit:

```php
use Illuminate\Http\Request;
use Lattice\Lattice\Attributes\AsForm;
use Lattice\Lattice\Forms\Components\Form as FormComponent;
use Lattice\Lattice\Forms\Components\TextInput;
use Lattice\Lattice\Forms\FormDefinition;
use Symfony\Component\HttpFoundation\Response;

#[AsForm('app.profile.form')]
class ProfileForm extends FormDefinition
{
    public function definition(FormComponent $form, Request $request): FormComponent
    {
        return $form->schema([
            TextInput::make('name', 'Name')->rules(['required', 'string', 'max:255']),
            TextInput::make('email', 'Email')->email()->rules(['required', 'email']),
        ]);
    }

    public function handle(Request $request): Response
    {
        $validated = $this->validate($request);
        $request->user()->update($validated);
        return redirect('/profile');
    }
}
```

Додати форму на сторінку можна одним викликом, із fluent-конфігурацією HTTP-методу, label кнопки submit та даних для заповнення. Додавання `->precognitive(500)` вмикає live-валідацію через Laravel Precognition:

```php
Form::use(ProfileForm::class)
    ->method(HttpMethod::Patch)
    ->submitLabel('Save changes')
    ->precognitive(500)
    ->fill([
        'name' => $user->name,
        'email' => $user->email,
    ]);
```

## Таблиці

Таблиці успадковують `EloquentTableDefinition`. Ви оголошуєте колонки та повертаєте query builder; сортування, фільтрація та пагінація обробляються автоматично на основі того, які колонки ви позначили як `sortable()` чи `filterable()`:

```php
use Illuminate\Database\Eloquent\Builder;
use Lattice\Lattice\Attributes\AsTable;
use Lattice\Lattice\Tables\Columns\BooleanColumn;
use Lattice\Lattice\Tables\Columns\NumberColumn;
use Lattice\Lattice\Tables\Columns\TextColumn;
use Lattice\Lattice\Tables\EloquentTableDefinition;
use Lattice\Lattice\Tables\TableQuery;

#[AsTable('app.products')]
class ProductsTable extends EloquentTableDefinition
{
    public function columns(): array
    {
        return [
            TextColumn::make('name')->sortable()->filterable(),
            NumberColumn::make('price')->sortable()->filterable(),
            BooleanColumn::make('featured'),
            TextColumn::make('updated_at')->date('Y-m-d')->sortable(),
        ];
    }

    public function builder(TableQuery $query): Builder
    {
        return Product::query();
    }
}
```

Рендеринг таблиці на сторінці використовує той самий патерн `::use()`, що й форми, тож сторінка продуктів складається з заголовка та таблиці з двох класів:

```php
$schema->schema([
    Heading::make('Products'),
    Table::use(ProductsTable::class),
]);
```

## Дії та клієнтські ефекти

Дії - місце, де відбувається round trip. Дія успадковує `ActionDefinition`, описує свою кнопку в `definition()` та виконується на сервері в `handle()`. Замість повернення view вона повертає `ActionResult` із *ефектами* - інструкціями, які клієнт виконує, як-от toast та перезавантаження компонента:

```php
use Illuminate\Http\Request;
use Lattice\Lattice\Actions\ActionDefinition;
use Lattice\Lattice\Actions\ActionResult;
use Lattice\Lattice\Actions\Components\Action;
use Lattice\Lattice\Attributes\AsAction;
use Lattice\Lattice\Core\Enums\ButtonVariant;
use Lattice\Lattice\Core\Enums\Variant;

#[AsAction('app.products.archive')]
class ArchiveProductAction extends ActionDefinition
{
    public function definition(Action $action): Action
    {
        return $action
            ->label('Archive')
            ->variant(ButtonVariant::Destructive)
            ->confirm('Archive product?', 'This hides it from the catalogue.');
    }

    public function handle(Request $request): ActionResult
    {
        $product = $this->product($request);
        $product->update(['status' => 'archived']);

        return ActionResult::success()
            ->toast(Variant::Success, 'Product archived.')
            ->reloadComponent('app.products');
    }
}
```

Прикріплена до рядка таблиці, дія передає контекст рядка на сервер, щоб `handle()` знав, з яким записом працювати:

```php
Action::use(ArchiveProductAction::class)
    ->context(['product_id' => $row['id']]);
```

## Дізнатися більше

Інструкції з встановлення, довідник компонентів та опції темізації доступні в [документації](https://latticephp.com/). Вихідний код опубліковано на [GitHub](https://github.com/lattice-php/lattice).