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