Inertia.js – современный монолит

Вы знаете, как пишутся 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-разработчикам попробовать и оценить самим этот замечательный инструмент.