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.
.jpg)
