Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Вы знаете, как пишутся SPA на Laravel? Если коротко, не очень удобно. Конечно, можно использовать любой фронтенд-фреймворк. Традиционно принято работать со связкой Laravel + Vue.js.
Мы пишем весь фронтенд на Vue.js в resources/js
, а Laravel используем как API.
Примерно вот так:
Vue.js
// resources/js/pages/Users.vue
<template>
<div v-for="user in users" :key="user.id">
<a :href="`/users/${user.id}`">
{{ user.name }}
</a>
<div>{{ user.email }}</div>
</div>
</template>
<script>
export default {
data() {
return {
users: []
}
},
methods: {
async loadUsers() {
const { data } = await this.$axios.get('/api/users');.
this.users = data;
}
},
async beforeMount() {
await this.loadUsers();
}
}
</script>
Laravel
// routes/api.php
Route::get('/users', function index(User $user) {
return $user->all();
});
То есть сначала мы создаем на бэкенде эндпоинт, а затем на фронте получаем с него данные через AJAX-запрос.
Удобно ли это? Смотря для кого. Фронтендерам не привыкать. AJAX на сегодня – самый классический способ получения данных с сервера. Но, если вы до этого много работали с Blade, вы понимаете, насколько это больше телодвижений.
Хотелось бы как с Blade, просто вернуть страницу уже с массивом данных, доступном на фронте как переменные:
return view('users', [
'users' => $user->all()
]);
Какая разница? Она заметна, если нам нужно добавить еще какую-нибудь информацию во фронтенд-компонент. С Blade мы просто добавляем новую пару ключ-значение в массив данных. Но если Laravel – это просто API, нам нужно по-хорошему создавать отдельный эндпоинт. И т.д. и т.п.
От этого неудобства нас избавляет библиотека Inertia.js. С её помощью мы можем писать своё приложение так, будто бы мы пишем всё на Blade. Однако вместо него на стороне фронта использовать любимый фреймворк – Vue, React или Svelte.
Кроме Laravel, Inertia.js также может работать с бэкендом на Rails. И это только официально. Сторонние разработчики также добавляют поддержку других фреймворков и библиотек (например, Symfony или Yii2).
Далее все примеры будут на Vue.js и Laravel. Но при этом держите в уме, что всё это же можно делать и с другими вышеуказанными библиотеками.
Теперь на стороне сервера мы пишем
return Inertia::render('Users', [
'users' => $user->all()
]);
А на фронте получаем данные как props
.
props: {
users: Array,
},
Круто! Но это еще не всё.
Киллер-фича №2: Роутеры (Vue Router, React Router) больше не нужны. Теперь все страницы – это записи в routes
и Vue-компоненты в папке resources/js/Pages
(название папки кастомизируется). Всё, как с Blade, единственное, теперь вместо component.blade.php
у вас Component.vue
.
Ну и моё любимое: валидация на сервере. Больше не нужно отправлять ошибки AJAX-ом, а потом парсить их на фронте, где-то сохранять и таскать оттуда. Теперь можно просто расшарить ошибки из сессии в AppServiceProvider
Inertia::share([
'errors' => function () {
return Session::get('errors')
? Session::get('errors')->getBag('default')->getMessages()
: (object) [];
},
]);
и получать их во Vue-компонентах как $page.errors
.
<div v-if="$page.errors.first_name">{{ $page.errors.first_name[0] }}</div>
Тоже самое для уведомлений и любых других общих для всех компонентов данных.
При этом, данные можно шарить как синхронно (как в примере выше), так и "лениво", просто передавая в массив вместо самих данных колбэк, который их возвращает.
Inertia::share([
// Синхронно
'app' => [
'name' => Config::get('app.name')
],
// Лениво
'auth' => function () {
return [
'user' => Auth::user() ? [
'id' => Auth::user()->id,
'first_name' => Auth::user()->first_name,
'last_name' => Auth::user()->last_name,
] : null
];
}
]);
Чтобы начать пользоваться, переходим в документации на страницу установки, выбираем нужные адаптеры – один для фронта, другой для бэка – и просто следуем инструкциям (1, 2).
Кстати, документация очень небольшая и удобная, всё наглядно и понятно, есть примеры на всех официально поддерживаемых фреймворках. Есть даже демо-приложение для того, чтобы посмотреть на всё в работе.
Я рассказал только об основных возможностях этой библиотеки. Тем не менее, если вы всё еще не впечатлены, я не знаю, как еще я могу вас удивить. Про остальные фишки вы можете узнать в той же документации. Среди них, удобная работа с ошибками в ходе разработки, кэширование локального состояния компонента и другие.
Но как и в любой бочке мёда, тут есть своя ложка дегтя.
Во-первых, Inertia.js должен контролировать рендеринг. Это значит, что нельзя просто перевести какой-то конкретный компонент на Inertia.js, нужно переносить всё приложение. По крайней мере, весь инстанс (если у вас микрофронтенды).
Во-вторых, тут нет Server-Side Rendering (SSR). Что, в принципе, неудивительно, ведь это просто прослойка между фронтом и бэком, а фронт как был SPA без SSR, так и остается. Но, возможно, эту функциональность добавят в будущем, разработчики говорят, что это возможно. Если вам кровь из носа нужен SSR, стоит посмотреть на бойца в противоположном углу ринга – Livewire. Но про него как-нибудь в другой раз.
Ну и в-третьих, Inertia.js – еще очень молодой проект. Последняя версия на момент написания статьи – v0.1.9. Поэтому смотрите сами, хотите ли вы использовать его в продакшене.
Тем не менее, я советую всем web-разработчикам попробовать и оценить самим этот замечательный инструмент.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Если бы вы писали на Laravel, какой поход вы бы выбрали?
-
18,8%Blade6
-
40,6%Vue.js + API13
-
12,5%Inertia.js4
-
12,5%Livewire4
-
34,4%Лучше вообще не писать ничего на Laravel11
-
12,5%Другое4