Have your cake and eat it with Inertia.js

One of the harder choices we need to make as web developers in 2019 is how we want to build our app's frontend.

Do we want to stick with Blade for templating? Do we want to build a SPA? SPA's sound cool but then we'll need an API and use some fancy authentication protocol. We still might want a SPA though, since that'd allow us to provide a richer user experience. Decisions are hard!

Let's take a step back. Instead of choosing between the two ends of the spectrum, why not combine them and have the best of both worlds? That's where Inertia.js makes its appearance. Inertia.js is a framework for creating server-driven single page apps. With Inertia.js, we can build an app that keeps business and data concerns on the server, with a JavaScript powered view layer.

In this talk, we'll review the tradeoffs when making a choice between keeping complexity on the server or on the client. Then we'll demonstrate what an app looks like built with Laravel, Vue.js and Inertia.js.

Transcript

1. a JavaScript framework for creating server-driven single page apps @sebdedeyne
2. Sebastian De Deyne Frontend(ish) developer at Spatie Maintainer of Inertia's React adapter Helping out with Inertia About me @sebdedeyne
3. Complex business apps (form heavy) Require authentication (no SEO concerns) No shared public API (MVC) Laravel + React & TypeScript Projects I work on at Spatie @sebdedeyne
4. @sebdedeyne
5. @sebdedeyne
6. @sebdedeyne
7. @sebdedeyne A modern UI needs JavaScript
8. Laravel, Symfony, Ruby on Rails Own templating language Blade, Twig, ERB Sprinkled with JavaScript Server-side MVC frameworks @sebdedeyne
9. @sebdedeyne Let’s just build a SPA!
10. Build your UI entirely in JavaScript Consume existing APIs Offline support Possibly less server load SPAs are awesome! @sebdedeyne ! " # #
11. Client side routing Data fetching State management Recreate browser behaviour SPAs add client complexity @sebdedeyne
12. JavaScript view layer No API Bonus: less AJAX endpoints Keep routing & data fetching on the server Wishlist @sebdedeyne
13. a JavaScript framework for creating server-driven single page apps @sebdedeyne
14. @sebdedeyne 1. No server side templating
15. @extends('layouts.app') @section('main') <h1>Users!"h1> <users-list :users="{{ json_encode($users) }}" >!"users-list> @endsection
16. class UsersController { public function index() { return view('users.index', [ 'users' !$ User!%all(), ]); } }
17. class UsersController { public function index() { return inertia('Users/Index', [ 'users' !$ User!%all(), ]); } }
19. <template> !!!& !!' !!( !"template> <script> export default { props: ['users'] } !"script>
20. @sebdedeyne 2. No full page refreshes
21. @sebdedeyne
22. @sebdedeyne
23. @sebdedeyne First visit HTML Subsequent visits JSON
24. Inertia.js Client side adapter Server side adapter Core + collection of adapters @sebdedeyne
25. Laravel Symfony (community) Server framework adapters @sebdedeyne
26. Vue.js React Svelte Client framework adapters @sebdedeyne
27. @sebdedeyne Time for some code! $ Laravel + Vue.js
28. Add abilities to models or resources Entity specific vs. general use Authorization @sebdedeyne
29. class Post extends Model { public function getPermissionsAttribute() { return [ 'update' !$ Auth!%user()!)can('edit', $this), 'destroy' !$ Auth!%user()!)can('destroy', $this), ]; } }
30. <InertiaLink v-if="post.abilities.destroy" :href="`/posts/${post.id}`" method="delete" > Move to trash !"InertiaLink>
31. class User extends Model { public function getPermissionsAttribute() { return [ 'post' !$ [ 'viewAny' !$ Auth!%user() !)can('viewAny', Post!%class), 'create' !$ Auth!%user() !)can('create', Post!%class), ], ]; } }
32. <InertiaLink v-if="$page.auth.user.permissions.post.create" href="/posts/create" > Add new post !"InertiaLink>
33. Use something like tightenco/ziggy Add routes to models or resources Routes @sebdedeyne
34. class Post extends Model { public function getLinksAttribute() { return [ 'update' !$ action( [PostsController!%class, 'update'], $this ), 'destroy' !$ action( [PostsController!%class, 'destroy'], $this ), ]; } }
35. <InertiaLink v-if="post.permissions.destroy" :href="post.links.destroy" method="delete" > Move to trash !"InertiaLink>
36. @sebdedeyne github.com/spatie/laravel-resource-endpoints
37. Map controller actions to JavaScript components Turbolinks-like navigation
 Preserve page state & scroll Partial data reloads Remember state Asset versioning Features @sebdedeyne
38. No context switching during development Less AJAX endpoints Snappy, no full page refreshes Doesn't break browser behaviour What makes Inertia great? @sebdedeyne DX UX
39. Is Inertia safe for production? @sebdedeyne YES! % %
40. github.com/inertiajs (website & full docs coming soon!) Inertia.js on Twitter: @inertiajs Jonathan Reinink: @reinink sebastiandedeyne.com @sebdedeyne Resources