Что такое inertia в Майнкрафт

Inertia.js позволяет быстро создавать современные одностраничные приложения React, Vue и Svelte использованием классической маршрутизации на стороне сервера и контроллеров.

UsersController.php Users.vue

class UsersController public function index() $users = User::active() ->orderByName() ->get([‘id’, ‘name’, ’email’]); return Inertia::render(‘Users’, [ ‘users’ => $users ]); > >
Наши бизнес-спонсоры:

Монолитные приложения на JavaScript

Inertia это новый подход к созданию классических серверных веб-приложений. Мы называем это современным монолитом.

Inertia позволяет создавать одностраничные приложения, полностью отображаемые на стороне клиента, без особой сложности, характерной для современных SPA. Это достигается за счет использования существующих серверных фреймворков.

Inertia не имеет маршрутизации на стороне клиента и не требует API. Просто создайте контроллеры и просмотры страниц, как Вы всегда это делали!

См. страницы для кого и как это работает, чтобы узнать больше.

СЛИВ НОВОГО WWE! INERTIA CLIENT 1.12.2! ЧИТ ОБЗОР

Не фреймворк

Inertia не является ни фреймворком, ни заменой существующей серверной или клиентской фреймворков. Скорее, он предназначен для работы с ними. Думайте об инерции как о клее, соединяющем их. Инерция делает это через переходники. В настоящее время у нас есть три официальных клиентских адаптера (React, Vue и Svelte) и два серверных адаптера (Laravel и Rails).

Присоединяйтесь к новостной рассылке

Jonathan Reinink

Если Вы заинтересованы в том, чтобы следовать вместе с развитием Inertia.js, я сообщаю обновления об этом в моей новостной рассылке.

Источник: inertiajs.ru

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

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

Вы знаете, как пишутся SPA на Laravel? Если коротко, не очень удобно. Конечно, можно использовать любой фронтенд-фреймворк. Традиционно принято работать со связкой Laravel + Vue.js.

Мы пишем весь фронтенд на Vue.js в resources/js , а Laravel используем как API.

Примерно вот так:

// resources/js/pages/Users.vue `»> > > export default < data() < return < users: [] >>, methods: < async loadUsers() < const < data >= await this.$axios.get(‘/api/users’);. this.users = data; > >, async beforeMount() < await this.loadUsers(); >>
// 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 .

Тоже самое для уведомлений и любых других общих для всех компонентов данных.

При этом, данные можно шарить как синхронно (как в примере выше), так и «лениво», просто передавая в массив вместо самих данных колбэк, который их возвращает.

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

Источник: habr.com