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:

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() контролює доступ перед рендерингом сторінки:

#[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:

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:

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

Таблиці

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

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(), що й форми, тож сторінка продуктів складається з заголовка та таблиці з двох класів:

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

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

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

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() знав, з яким записом працювати:

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

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

Інструкції з встановлення, довідник компонентів та опції темізації доступні в документації. Вихідний код опубліковано на GitHub.