00:00:05.220
All right, hello there! I'm Brandon Shar, a developer at Bellawat, which is an awesome company focused on building user-friendly software for the energy industry. In my capacity there, I'm part of the team that built and maintains the Inertia for Rails gem. I want to take a moment to give credit to the initial creator of Inertia, as both the original Laravel version and all of the frontend packages were created or maintained by Jonathan Reinink, who is a top-notch guy and has been a great help as we built the Rails version of his concept.
00:00:22.619
So, what is Inertia, and why would I want to use it? I think it would help to introduce it in the vein of a very similar concept that we've heard a lot about this week: Hotwire. We all recognize that modern web development has changed and now requires increasing amounts of reactivity. Applications that can accept a full page load between every new action and have limited user feedback are becoming few and far between.
00:00:40.079
If you've ever used a single-page app, you'd probably agree that the user experience is excellent. However, if you've ever built one, you may not have had that same experience. A single-page app requires you to write a separate API, use front-end routing to recreate browser features, and manage increasingly complex data situations.
00:01:04.080
With a Rails app, we used to always know that every page load would bring us the freshest data the database had to offer. With a single-page app, that's not a given. So now we have to manage these new state issues and introduce even more libraries, like Redux, Vue, and GraphQL. Both Hotwire and Inertia saw this as a problem, but they differ in how they solved it.
00:01:27.479
Hotwire said, let's write as little JavaScript as possible and move to sending HTML over the wire. That’s an awesome solution for a lot of people. But at least for me, and I'm sure for some of you, I thought: hang on! I like writing React components, I like Vue, and I like Svelte. I want to go back to a simpler way of app development too, but I don't want to give up on that JavaScript.
00:01:45.600
As DHH mentioned in his keynote, different languages, different patterns, and different frameworks fit people differently. For me, React, Vue, and Svelte are great ways to write and reason about front-end code. And this is where Inertia comes in. Inertia allows you to write performant single-page applications using a Rails backend—Rails controllers and Rails routing that you're used to—but with React, Vue, or Svelte on the front end.
00:02:10.380
There's no need for APIs, no front-end routing, and no global state—just the same MVC approach you prefer, but with modern JavaScript on the front end. To illustrate that, let's check out a quick app. This is just a very typical, generic, simplified Twitter clone.
00:02:30.900
We can write a tweet, delete our own tweets, scroll to view tweets, like or unlike a tweet, view replies to tweets, and write a reply. You can see that this performs like a single-page app; there is no page reload and these toggles work right on the page. The cool thing about this is that there is only one piece of state in this entire app, which is the text box for this little bit of validation.
00:02:56.459
So, how does that work? The best way to show this is to add a quick feature. If you click on a picture of a user, right now we just filter their tweets; instead, let's send us to a user profile page. So, we'll change the user image to link to users slash the user ID. How do we make that work? Well, we do it the same way we always have: we add a route to our user show and go over to our user controller and implement the show method.
00:03:36.060
The only difference is that instead of letting Rails automatically render a view for us, we're going to use the Inertia renderer, which asks us to provide the name of a component. When we click this, we end up at a new page, a new page that looks like this. This is obviously a super simple example, so we'll use a little bit of cooking show magic to put in some more markup.
00:03:59.700
All this does is show a user image, display tweets the user sent, show tweets the user liked, and some props that we need to make that work. If I do this, the page is going to break. Why is that? Where do these props come from? Well, they come from the same place they always have. How have we always gotten data down to the view? Via the controller.
00:04:27.300
So now we have our same render function; we just had to give it a hash of props. After refreshing, we end up in this new page with everything we just asked for. We're in the exact same responsive world we were before, the same single-page app, and now we've added a new page.
00:04:50.820
So that is it! That is as much Inertia as I can possibly tell you about in five minutes. I am planning a short video series that will dive a lot deeper into this, including a ton more info about the layout setup, how do we test this, how did that current user prop show up—clearly, I didn't put that in the route—and a whole lot more.
00:05:12.020
So if you're interested, let me know. Once again, I'm Brandon Shar. Thank you very much for watching! I will be on Discord.