About the talk
Hello there. I'm Brandon Char. I'm a developer. And Bella watts is an awesome company focused on building user-friendly software for the energy industry. And in my capacity there. I'm part of the team that built in maintains the inertia for real Gem. And I do want to make sure to give credit to the initial creator of inertia. As both the original lyrical version and all of the front end packages were created or maintain by Jonathan riding, who is a top-notch guy. And it's been a great help as we built the rails version of his concept. 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. And that's Hotwire. We all recognize that modern web dev has changed and now requires increasing amounts of reactivity apps that can accept a full-page load between every new action and have limited user feedback or becoming few and far between. And if you ever used a single page at you, probably agree that the user experience for it is excellent, but if you've ever built, You may not have had that same experience, a single page, app requires you to write a
single page out. It is there was no page reload these toggles work. Right on the page. And the cool thing I can see is there is only one piece of State in this entire app and it is this Xbox for this little bit of validation. So how does that work? The best way is let's just had a quick feature that you click on a picture of a user right now. We just filter their tweets. So instead let's let's send us to a user profile page. So we'll go here to our user image. And the first thing we'll do is just change that to be a link to users / the user ID. So, how do we make that work? Well, the same
way we always have, we add a route to our user show. We go over there. I use your controller and we have our show method. The only difference is instead of letting rails automatically render us of you. We're going to use the inertia renderer which asks us to provide it with the name of a components. So now when we click this, we end up in a new page, a new page that looks like this. This is obviously a super simple example. So we use a little bit of cooking show. Imagine. You are putting some more Mark out. All this is is just show you their image
show tweets. The user sent show, tweet. The user's liked and some props that we need to make that work. If I do this, I m going to break. Why is that? Well, where do these props come from? Well, that's Do frogs come from the same place? They always have. However, we always gotten data down to the view, the other controller. So now we have our same render function. We just had and we give it a hash of props. We can refresh. Now we end up in this new page with everything. We just asked where in the exact same response of world. We were before the same
enable page app, and now we got a new page. That is it, that is as much energy as I can, possibly tell you about in 5 minutes. I am planning, a short video series, that will dive a lot deeper into this. Would include a ton more info. How did the layout set up? How do we test this? How to get current user prop show up? I clearly didn't put that in the route and a whole lot more. So if you're interested, let me know. Once again, I'm Brandon chart. Thank you very much for watching. I will be in Discord.
Buy this talk
Buy this video
Our other topics
With ConferenceCast.tv, you get access to our library of the world's best conference talks.