WEBVTT 1 00:00:05.639 --> 00:00:10.960 Hello, and welcome to Ruby Rokes. I'm John Epperson, and 2 00:00:11.240 --> 00:00:13.880 we are we have a couple of panelists today. 3 00:00:13.919 --> 00:00:18.399 We have Luke I welcome, and we have Jonathan Nni. 4 00:00:18.679 --> 00:00:20.519 Your thing like cut off and gave me the dots 5 00:00:20.600 --> 00:00:22.079 right as I was looking at it, and I was like, 6 00:00:22.120 --> 00:00:25.920 oh my gosh, Rinie, welcome. Jonathan is the author or 7 00:00:26.039 --> 00:00:27.960 creator however you want to say that of a nurser 8 00:00:28.079 --> 00:00:30.839 JS and we just have him here today to yap 9 00:00:30.839 --> 00:00:32.520 about it. Can you just give us a little bit 10 00:00:32.679 --> 00:00:35.039 just to start out about your background and how why 11 00:00:35.039 --> 00:00:36.920 you might be famous, and then we can go ahead 12 00:00:37.200 --> 00:00:38.000 to a nursery after that. 13 00:00:38.159 --> 00:00:38.840 Yeah, for sure. 14 00:00:39.000 --> 00:00:42.560 I am a web developer and I've been doing web 15 00:00:42.600 --> 00:00:46.039 development for almost two decades by now, and I hang 16 00:00:46.079 --> 00:00:49.280 out mostly in the Layra bell community, so I contribute 17 00:00:49.320 --> 00:00:51.600 to that framework and kind of like doing all things 18 00:00:51.640 --> 00:00:55.560 PHP and yeah, my main projects have been some libraries 19 00:00:55.600 --> 00:00:59.119 and some phree libraries. I was also involved early on 20 00:00:59.280 --> 00:01:02.200 in the tail when CSS framework if you're familiar with that. 21 00:01:02.359 --> 00:01:04.400 Me and my buddy Adam Weathern built that, and more 22 00:01:04.400 --> 00:01:08.840 recently I have focused on inertia as well as a bunch. 23 00:01:08.599 --> 00:01:09.879 Of database stuff. 24 00:01:09.920 --> 00:01:13.159 I'm a big fan of databases and optimizing databases and 25 00:01:13.319 --> 00:01:15.519 active record and so I put out a course recently 26 00:01:15.560 --> 00:01:17.719 about that. So those are kind of the things I 27 00:01:17.799 --> 00:01:20.079 mostly work on. I work for myself. Outside of that, 28 00:01:20.159 --> 00:01:23.439 I run a small SaaS business solo SaaS and that's fun. 29 00:01:23.519 --> 00:01:25.480 That's pretty much me awesome. 30 00:01:25.640 --> 00:01:28.079 So, since we were planning to talk about inertia, let's 31 00:01:28.120 --> 00:01:30.840 go ahead and dive in what exactly is inertia. 32 00:01:30.920 --> 00:01:33.040 Yeah, so it's always fun when you come up with 33 00:01:33.079 --> 00:01:36.120 a new project that's a little bit different than other things. 34 00:01:35.480 --> 00:01:38.280 It's certainly been one of the most challenging things. It's 35 00:01:38.319 --> 00:01:41.719 just explaining what inertia is. And kind of the simplest 36 00:01:41.799 --> 00:01:44.799 way to describe it is it's a way to build 37 00:01:44.959 --> 00:01:49.799 single page applications without needing an API, Meaning you can 38 00:01:49.840 --> 00:01:52.959 build a single page app using a classic server side 39 00:01:53.000 --> 00:01:56.719 framework such as Rails or layer bel and you can 40 00:01:56.799 --> 00:02:00.560 use classic service side routing, classic server side control. But 41 00:02:00.599 --> 00:02:03.959 the only difference is with inertia there is no server 42 00:02:04.079 --> 00:02:07.439 side views. All the views are done with view or 43 00:02:07.480 --> 00:02:10.560 they're done and react or done using spell And what 44 00:02:10.680 --> 00:02:14.439 happens is you basically return some data from our controller 45 00:02:14.560 --> 00:02:17.039 and where you'd normally return a view and they'll put 46 00:02:17.039 --> 00:02:21.639 that data. You instead return a JavaScript page component. So 47 00:02:21.879 --> 00:02:24.840 just imagine a JavaScript page component being rendered on the 48 00:02:24.879 --> 00:02:27.520 page instead of like an EERB template I guess is 49 00:02:27.560 --> 00:02:29.800 what they would be considered in rails. And obviously that's 50 00:02:29.879 --> 00:02:32.400 client side rendered, so it's not server side rendered. But 51 00:02:32.479 --> 00:02:34.759 what happens is every single time you navigate from one 52 00:02:34.800 --> 00:02:38.560 page to the next, inertia intercepts any page clicks so 53 00:02:38.599 --> 00:02:41.759 that you don't do full page reloads, but instead, when 54 00:02:41.759 --> 00:02:44.879 you click a link, inertia will intercept that link click 55 00:02:45.039 --> 00:02:47.240 and instead of doing a full page reload, it'll run 56 00:02:47.240 --> 00:02:49.719 off to the server making what's called an inertia request, 57 00:02:49.800 --> 00:02:51.599 and the server will pick it up saying okay, this 58 00:02:51.639 --> 00:02:53.800 is the inertia request, and it'll fire back the data 59 00:02:53.879 --> 00:02:56.159 needed for the next page. And the data is the 60 00:02:56.280 --> 00:03:00.280 JavaScript page component, be view or react or whatever, the 61 00:03:00.360 --> 00:03:03.280 data the props for that component. And then what happens 62 00:03:03.319 --> 00:03:05.919 is client side, so that's made as an age AX request, 63 00:03:05.960 --> 00:03:09.120 that data comes back, the response comes back, and then dynamically, 64 00:03:09.280 --> 00:03:12.840 client side, the page component is swapped out, and that's 65 00:03:12.960 --> 00:03:15.840 using dynamic components, which is a feature of all three 66 00:03:15.879 --> 00:03:19.159 of the popular client side frameworks view Reaction SPELT, so 67 00:03:19.159 --> 00:03:22.680 it's dynamically swapped out and it's given its new page props. 68 00:03:22.759 --> 00:03:26.199 And the big, big, big benefit there is one when 69 00:03:26.199 --> 00:03:27.120 you're navigating from one. 70 00:03:27.199 --> 00:03:28.680 So there's like three key benefits. 71 00:03:28.919 --> 00:03:31.599 One, you're navigating page page, you're not doing full page reloads, 72 00:03:31.599 --> 00:03:34.400 so there's a performance benefit to that. Two when it's 73 00:03:34.400 --> 00:03:36.280 doing that because you're not doing a full page reload, 74 00:03:36.319 --> 00:03:39.280 it's not having to reboot, view or react every single time. 75 00:03:39.560 --> 00:03:42.400 So it's like really like silky smooth kind of experience. 76 00:03:42.479 --> 00:03:44.800 It's just like a it's like you're working with an SPA, 77 00:03:44.919 --> 00:03:47.560 except you're not. You're just navigating from one page to 78 00:03:47.560 --> 00:03:49.719 the next, and it's just swapping out those components, those 79 00:03:49.759 --> 00:03:51.159 page components dynamically. 80 00:03:51.439 --> 00:03:53.599 And three and I knew this was going to happen. 81 00:03:53.639 --> 00:03:57.000 I don't remember my third third benefit, but oh, the 82 00:03:57.039 --> 00:03:58.719 third one is the obvious one. You get to build 83 00:03:58.719 --> 00:04:02.199 an app using client side technology. And really kind of 84 00:04:02.280 --> 00:04:04.919 what pushed me down this road is I was building 85 00:04:04.960 --> 00:04:07.360 more like in my applications that I built and I build, 86 00:04:07.360 --> 00:04:10.080 I always use layravel, which is very similar to rails. 87 00:04:10.120 --> 00:04:12.120 So for this audience just kind of think of them 88 00:04:12.120 --> 00:04:14.159 more or less as the same thing I was. You know, 89 00:04:14.240 --> 00:04:16.240 much of my apps were starting to contain more and 90 00:04:16.319 --> 00:04:20.759 more like rich UI and more client side functionality, more 91 00:04:20.839 --> 00:04:24.199 JavaScript requirements to basically make the UI's work a certain 92 00:04:24.240 --> 00:04:27.160 way that just kind of wasn't possible using classic server 93 00:04:27.279 --> 00:04:30.319 side rendering. And what I was basically doing is I 94 00:04:30.480 --> 00:04:34.120 was in my page responses, I was returning server side renderview, 95 00:04:34.160 --> 00:04:38.160 which would then have view components mixed into the page. 96 00:04:38.360 --> 00:04:40.079 So what would happen is the response would come back 97 00:04:40.079 --> 00:04:42.000 from the server, then view would kick in the gear, 98 00:04:42.040 --> 00:04:43.839 and any of the view components on the page there'd 99 00:04:43.879 --> 00:04:45.480 be like a little flicker and then they would show 100 00:04:45.560 --> 00:04:48.120 up right, and then you'd have those individual components would 101 00:04:48.160 --> 00:04:51.480 be reactive and whatnot right. And so by going that 102 00:04:51.560 --> 00:04:53.480 kind of comes with a whole bunch of interesting problems. 103 00:04:53.519 --> 00:04:55.480 I mentioned the flicker and just kind of having to 104 00:04:55.480 --> 00:04:57.600 manage each one of those separate components. 105 00:04:57.800 --> 00:04:59.680 So by going this way with. 106 00:04:59.639 --> 00:05:02.639 A NURSE, you're really like fully committing to client side 107 00:05:02.680 --> 00:05:04.959 render views, So you give up server side rendered views. 108 00:05:04.959 --> 00:05:08.480 That is a trade off, but that means is anytime 109 00:05:08.519 --> 00:05:10.680 you're working with any of the templates within your application. 110 00:05:10.920 --> 00:05:13.079 You have the power of JavaScript, you have the power 111 00:05:13.120 --> 00:05:14.959 of view or React, and you can do whatever you 112 00:05:15.000 --> 00:05:15.519 need to do. 113 00:05:15.720 --> 00:05:18.040 And it's just a really really nice way of working it. 114 00:05:18.160 --> 00:05:20.839 Yeah, so that's kind of a longer description. I would 115 00:05:20.839 --> 00:05:24.240 say that, like, I definitely built it for people who 116 00:05:24.399 --> 00:05:28.639 have traditionally worked with server side rendered applications like frameworks 117 00:05:28.680 --> 00:05:31.480 like again layer Bell, Ruby, Django, that kind of stuff. 118 00:05:31.519 --> 00:05:34.639 People who are familiar with creating controllers and getting data 119 00:05:34.639 --> 00:05:37.040 from the database and then passing that data to a view. 120 00:05:37.079 --> 00:05:40.399 The whole paradigm is very, very similar and much different 121 00:05:40.480 --> 00:05:44.000 than the classic, the more standard SPA approach where you 122 00:05:44.040 --> 00:05:47.560 have some separate API, some separate app that provides like 123 00:05:47.639 --> 00:05:49.319 ar rest API or graphic you LAPI. 124 00:05:49.600 --> 00:05:51.480 So it's definitely targeted. 125 00:05:51.079 --> 00:05:53.720 At that audience, and kind of, as I've said to 126 00:05:53.800 --> 00:05:55.879 people before, I kind of joke that Inertia is like 127 00:05:55.920 --> 00:05:59.040 the gateway drug to creating single page applications because if 128 00:05:59.040 --> 00:06:01.360 you're coming from a monol with background in er should 129 00:06:01.360 --> 00:06:03.399 just makes it so easy to get up and running 130 00:06:03.439 --> 00:06:06.199 with creating like what essentially feels exactly like a client 131 00:06:06.279 --> 00:06:09.000 side single page app of kind of using the technology 132 00:06:09.040 --> 00:06:10.120 that you know and love already. 133 00:06:10.279 --> 00:06:13.680 Yeah, I actually find it super interesting. I mean I've 134 00:06:13.720 --> 00:06:16.439 been for at least the past day or so kind 135 00:06:16.480 --> 00:06:18.759 of checking out some of the stuff on the side 136 00:06:18.879 --> 00:06:21.160 and things like this, and there's a lot of interest. 137 00:06:21.279 --> 00:06:23.240 So it kind of sounds just to make sure that 138 00:06:23.360 --> 00:06:25.480 I understand this the way that I think that I 139 00:06:25.560 --> 00:06:28.879 understand this, You're more or less going to, obviously, being 140 00:06:28.879 --> 00:06:31.160 familiar with rails here, You're going to create like this 141 00:06:31.279 --> 00:06:33.720 kind of high level sort of meta layout as you 142 00:06:33.759 --> 00:06:37.680 will or whatever. And then instead of creating a whole 143 00:06:37.680 --> 00:06:40.560 bunch of views for all of my pages, I'm just 144 00:06:40.639 --> 00:06:44.480 returning this inertia thing which has a props attribute or whatever, 145 00:06:44.560 --> 00:06:47.240 and then I'm just basically returning data is Jason, so 146 00:06:47.360 --> 00:06:50.000 kind of a bit like an inline API kind of 147 00:06:50.079 --> 00:06:52.720 thing almost like I'm just kind of rendering Jason almost there, 148 00:06:52.759 --> 00:06:54.360 And that's more or less how my page is going 149 00:06:54.439 --> 00:06:56.480 to run, and that's how my back end's going to run. 150 00:06:56.560 --> 00:06:59.160 And then I basically just have a single page. 151 00:06:59.000 --> 00:06:59.680 App on the page. 152 00:06:59.800 --> 00:07:02.639 That's it, and all these props get passed down and 153 00:07:02.720 --> 00:07:04.519 I just do with it what I want to in 154 00:07:04.519 --> 00:07:05.199 that single page. 155 00:07:05.240 --> 00:07:07.839 Of Yes, so a couple interface as you will. 156 00:07:08.560 --> 00:07:11.600 Yes, I like, yeah, So a couple of things to 157 00:07:11.639 --> 00:07:13.720 be aware of. Like, I like to compare inertia in 158 00:07:13.759 --> 00:07:17.040 a lot of ways to almost React router or view router, 159 00:07:17.160 --> 00:07:20.879 because in a way, all Inertia is is a specialized 160 00:07:21.079 --> 00:07:24.879 router like client side router that lives between your server 161 00:07:25.040 --> 00:07:28.279 and your controllers, which is returning data as Jason and 162 00:07:28.360 --> 00:07:29.399 your client. 163 00:07:29.120 --> 00:07:31.639 Side page components. So it's the piece that connects the two. 164 00:07:31.800 --> 00:07:35.040 But unlike with a classic app, you know, with view router, 165 00:07:35.160 --> 00:07:38.639 React router, whatever, you don't have any client side state 166 00:07:38.720 --> 00:07:42.600 management at all, So you're not using any client side 167 00:07:42.680 --> 00:07:46.160 like view x or whatever the React equivalents are. You're 168 00:07:46.160 --> 00:07:48.519 not using any of that stuff because all your data 169 00:07:48.600 --> 00:07:51.360 and all your state is essentially at the server, So 170 00:07:51.360 --> 00:07:54.560 it's not like you're making requests to the API client side, 171 00:07:54.600 --> 00:07:58.680 saving that in your client side's vieux library or database 172 00:07:58.759 --> 00:08:00.600 or whatever you want to call it, and then rendering 173 00:08:00.800 --> 00:08:04.079 components based on that. Basically, every single time you visit 174 00:08:04.120 --> 00:08:07.480 a page, the data's coming straight from your controller and 175 00:08:07.519 --> 00:08:10.079 go into your your client side page component. 176 00:08:10.199 --> 00:08:12.399 All right, I got a dumb question. You're going to 177 00:08:12.439 --> 00:08:15.120 have a few votes from me. So I wanted to 178 00:08:15.199 --> 00:08:17.040 kind of have a go at this. And I've been 179 00:08:17.040 --> 00:08:20.959 building this view app. And the way I populate my 180 00:08:21.560 --> 00:08:25.079 VU is it a view or VU view? It's the accent, 181 00:08:25.120 --> 00:08:27.160 isn't it. I can't I can't even tell. I think 182 00:08:27.199 --> 00:08:29.199 I'm trying to make it English. The way I populate 183 00:08:29.240 --> 00:08:31.759 my component is I go off with my HERB, my 184 00:08:32.120 --> 00:08:35.759 ERB template downloads, and then I do a get to 185 00:08:35.840 --> 00:08:38.679 get the initial data from the page, and then it 186 00:08:38.759 --> 00:08:41.360 drops in when to get returns. You've got your view 187 00:08:41.519 --> 00:08:45.519 building there. Yeah. Now in the examples on the inertia 188 00:08:45.799 --> 00:08:49.759 JS site, then it uses Laravelle. And we could take 189 00:08:49.799 --> 00:08:53.279 a nice divergence here because I'm starting to get Laravelle 190 00:08:53.399 --> 00:08:56.440 envy some of the tooling, some of the tooling that 191 00:08:56.519 --> 00:08:59.480 you show off on the inertia jas website. I don't. 192 00:08:59.519 --> 00:09:02.679 I didn't think the Ruby or rails community have. I'm 193 00:09:02.720 --> 00:09:05.799 sure John no more. But there's a there's a plug 194 00:09:05.799 --> 00:09:10.120 in where you can see the database queries being done 195 00:09:10.240 --> 00:09:13.120 on that page like the sequel, and I saw that. 196 00:09:13.399 --> 00:09:17.240 Oh would have been useful. I mean for years if 197 00:09:17.279 --> 00:09:20.000 I could just see what the what the page was hitting. 198 00:09:20.200 --> 00:09:21.919 You know, does that exist for rails. 199 00:09:22.120 --> 00:09:24.360 I'm pretty sure I've seen various things, and you can 200 00:09:24.440 --> 00:09:25.759 definitely see it in your logs. 201 00:09:26.000 --> 00:09:28.120 I know, I know I can see it in my logs, 202 00:09:28.559 --> 00:09:29.679 but you know to have it. 203 00:09:30.200 --> 00:09:32.440 There, you know, Hang on, I mean, maybe I could 204 00:09:32.480 --> 00:09:33.919 go find this. I don't know if it's a good 205 00:09:34.000 --> 00:09:35.480 use of my time, but maybe I could go find this. 206 00:09:35.519 --> 00:09:37.399 But I'm pretty sure that I've seen something somewhere that 207 00:09:37.519 --> 00:09:40.279 does something like that. However, regardless, you do know that 208 00:09:40.320 --> 00:09:43.279 you can switch those Laravel things to Rails to see 209 00:09:43.320 --> 00:09:46.240 the Rails examples on the Inertia site. 210 00:09:46.360 --> 00:09:49.080 No, I don't actually no, I didn't find a tab. 211 00:09:49.120 --> 00:09:49.879 Where's the tab? 212 00:09:50.440 --> 00:09:53.480 Every code snippet, every code snippet there is on the site? 213 00:09:53.519 --> 00:09:56.000 It defaults to Larvel, but you can switch it over 214 00:09:56.080 --> 00:09:56.600 to rails. 215 00:09:56.840 --> 00:09:59.399 Oh no, some basic fail going on here. 216 00:09:59.559 --> 00:10:00.000 No worry. 217 00:10:00.360 --> 00:10:03.159 So what I'm saying is you're very appreciative of how 218 00:10:03.200 --> 00:10:05.240 awesome Laaravel is on a review podcast. 219 00:10:05.960 --> 00:10:08.480 All right, listen, I'll be honest. 220 00:10:08.279 --> 00:10:10.159 This is not the first time this has happened. 221 00:10:11.440 --> 00:10:14.200 That's a nice workflow, you know. I like the tool. 222 00:10:14.200 --> 00:10:17.240 I can't find this finger I don't believe it. 223 00:10:17.240 --> 00:10:19.960 Exists, right, now I'll take a screenshot. 224 00:10:20.360 --> 00:10:23.759 Yeah, So the tool and layer bel in the PHP 225 00:10:24.039 --> 00:10:27.120 community it's called it's called the PHP debug bar, and 226 00:10:27.159 --> 00:10:30.600 there's a Layervell debug Bar version built on top of that. 227 00:10:30.840 --> 00:10:33.120 And it's fantastic because it's exactly what you can. 228 00:10:33.360 --> 00:10:35.279 You know, you can figure out all your database queries 229 00:10:35.320 --> 00:10:37.639 and your logs and whatnot. But what the layravel debug 230 00:10:37.759 --> 00:10:39.279 bar does is it just puts them right in the 231 00:10:39.320 --> 00:10:41.480 bottom of your screen, just like it's almost like a 232 00:10:41.600 --> 00:10:45.080 Chrome console right where it shows you exactly what database 233 00:10:45.159 --> 00:10:47.759 queris you're making, and what models you're loading from the database, 234 00:10:47.799 --> 00:10:50.840 and how much memory you're using. It's super super helpful, 235 00:10:50.840 --> 00:10:53.600 helpful you identify N plus one issues and slow queries 236 00:10:53.639 --> 00:10:54.039 and stuff. 237 00:10:54.080 --> 00:10:56.720 Where's my Rails debug bar? That's what I want to know, 238 00:10:56.960 --> 00:11:00.799 Moving swiftly on from my basic ability to use a website. 239 00:11:00.960 --> 00:11:03.879 So I was asking about the way you cook it 240 00:11:03.919 --> 00:11:06.559 in what there's for the benefit of people who can't 241 00:11:06.639 --> 00:11:09.720 use website like me. How does Rail send down that 242 00:11:09.879 --> 00:11:13.120 lump that cut because there's two things, aren't there. There's 243 00:11:13.159 --> 00:11:15.679 the kind of layout and there's the and the props. 244 00:11:15.879 --> 00:11:17.720 Yes, yeah, yeah, so I'll walk you through. 245 00:11:17.759 --> 00:11:20.720 That's I often failed to kind of explain this just 246 00:11:20.759 --> 00:11:23.000 because you know, you forget sometimes kind of where to 247 00:11:23.039 --> 00:11:25.360 start after you've talked about something for long enough. But 248 00:11:25.480 --> 00:11:28.320 so what essentially happens, and I'll explain it as best 249 00:11:28.360 --> 00:11:30.600 I can kind of using Rail's lingo, but I'm not 250 00:11:30.720 --> 00:11:32.759 super familiar with with it all, but like. 251 00:11:32.720 --> 00:11:33.200 Work with me. 252 00:11:33.360 --> 00:11:35.320 So basically, a request is going to come in, so 253 00:11:35.440 --> 00:11:38.279 through the very first time that someone hits your inertia application, 254 00:11:38.320 --> 00:11:41.120 your inertia rails application. What's going to happen is it's 255 00:11:41.120 --> 00:11:43.360 going to notice that it's just it's a standard full 256 00:11:43.440 --> 00:11:45.639 page visit, right, And what it's going to do is 257 00:11:45.720 --> 00:11:48.399 it's going to hit rails and it's going to see 258 00:11:48.399 --> 00:11:50.480 that it's not an inertial request. So it's not going 259 00:11:50.559 --> 00:11:52.840 to return some JSON. It's just going to go through 260 00:11:52.840 --> 00:11:55.000 the normal flow. And what it's going to do is 261 00:11:55.120 --> 00:11:58.240 it's going to return your base ERB template, so your 262 00:11:58.360 --> 00:12:00.679 layout file, right, and that layout file, well, it's just 263 00:12:00.720 --> 00:12:03.399 like a standard layout file that has your head which 264 00:12:03.519 --> 00:12:06.080 is going to have your script tags and it's gonna 265 00:12:06.080 --> 00:12:08.559 have your style tags kind of just your standard layout. 266 00:12:08.679 --> 00:12:11.039 The difference is what it's not going to do is 267 00:12:11.080 --> 00:12:13.399 it's not going to keep in mind that someone may 268 00:12:13.480 --> 00:12:15.360 land on your app on any different page. It doesn't 269 00:12:15.360 --> 00:12:16.960 have to be the homepage, of course, of the index page. 270 00:12:16.960 --> 00:12:18.840 It could be any page in your application, right, So 271 00:12:18.879 --> 00:12:20.320 it's going to see that request coming in, so it's 272 00:12:20.360 --> 00:12:22.440 going to return or it's going to server side render 273 00:12:22.559 --> 00:12:25.879 that layout. Except the only difference is within the body 274 00:12:26.200 --> 00:12:29.240 of that server side rendered HTML file, it's not going 275 00:12:29.320 --> 00:12:31.360 to have any page content, So the page content will 276 00:12:31.360 --> 00:12:34.240 not exist. So you landed on, say the user's page 277 00:12:34.240 --> 00:12:36.320 within your application, it's not going to have a bunch 278 00:12:36.320 --> 00:12:39.720 of HTML server side HTML generated and rendered. What it's 279 00:12:39.759 --> 00:12:42.879 going to do instead is there is a base DIV 280 00:12:43.039 --> 00:12:46.080 that it's that you need to put in your base layout, 281 00:12:46.320 --> 00:12:49.840 and that's the DIV that your client side application is 282 00:12:49.879 --> 00:12:52.799 going to mount to. So what happens is that based div, 283 00:12:53.039 --> 00:12:56.320 your client side app, view, React whatever mounts to that. 284 00:12:56.440 --> 00:13:00.200 But what happens is server side it passes this page 285 00:13:00.240 --> 00:13:03.399 object so Adjason encoded page object as one of the 286 00:13:03.600 --> 00:13:07.960 attributes within that DIV. So I think it's called data 287 00:13:08.039 --> 00:13:11.879 dash page is the page attribute. I should probably double 288 00:13:12.000 --> 00:13:14.080 check and know that offhand, but I'm pretty certain, Yeah, 289 00:13:14.120 --> 00:13:16.840 it's a data dash page. That's the attribute on the div. 290 00:13:16.919 --> 00:13:19.440 So imagine ATIV has an idea of app, which is 291 00:13:19.440 --> 00:13:21.919 what your Viewer React apps can amount into, and then 292 00:13:21.960 --> 00:13:24.919 it has an attribute called data dash page and the 293 00:13:25.519 --> 00:13:29.399 contents of that data dash page attribute is just a string, 294 00:13:29.440 --> 00:13:32.399 but it's actually a Jason encoded string, and what it's 295 00:13:32.440 --> 00:13:37.240 including is all the necessary information that INERTI needs in 296 00:13:37.360 --> 00:13:40.919 order to boot up that particular client side page component. 297 00:13:41.000 --> 00:13:43.039 So it's going to include two main things that the 298 00:13:43.080 --> 00:13:45.799 most important things to know are. One the component name, 299 00:13:45.919 --> 00:13:47.519 So the component name is going to be the viewer 300 00:13:47.559 --> 00:13:50.480 React component page component name, so in this case it 301 00:13:50.559 --> 00:13:52.360 might be the user page, which is going to have 302 00:13:52.399 --> 00:13:55.960 a corresponding user page dot view file or user page 303 00:13:55.960 --> 00:13:58.799 dot react file. And then the second piece of information 304 00:13:58.879 --> 00:14:01.360 that's going to be in that Jason payload is the props, 305 00:14:01.399 --> 00:14:03.559 which is the data. I call them props because they're 306 00:14:03.600 --> 00:14:06.960 considered when you're working with viewer React. Props are the 307 00:14:07.000 --> 00:14:10.080 properties there, the attributes the data that gets passed to 308 00:14:10.279 --> 00:14:12.279 that component. So it's essentially the data. 309 00:14:12.360 --> 00:14:15.679 So if you imagine now if we hit the Rails app, 310 00:14:15.759 --> 00:14:18.960 it's the user's page which gets which causes the routing 311 00:14:19.120 --> 00:14:22.080 to go to the user's controller, the index method of 312 00:14:22.120 --> 00:14:24.919 the user's controller. Your index method is going to go off, 313 00:14:25.000 --> 00:14:27.159 and it's gonna use active record to get some data 314 00:14:27.200 --> 00:14:29.320 from the database for the users that you want to 315 00:14:29.320 --> 00:14:30.440 display on that page. 316 00:14:30.519 --> 00:14:32.039 And then in a classic. 317 00:14:31.679 --> 00:14:33.600 Rails app and jump in if I get any of 318 00:14:33.639 --> 00:14:36.120 the terms wrong here, gents, because I'm you know, I'm 319 00:14:36.440 --> 00:14:38.879 gonna use more kind of lingo that I know. But 320 00:14:38.919 --> 00:14:41.320 what it's going to do is normally you would then 321 00:14:41.360 --> 00:14:44.559 return an ERB template that you pass the user index 322 00:14:44.919 --> 00:14:47.840 view too, and pass the data which is the users 323 00:14:47.919 --> 00:14:50.120 you just looked up from the database, use an active record, 324 00:14:50.279 --> 00:14:52.279 and that's going to go off and generate your HTML. 325 00:14:52.440 --> 00:14:56.360 In this situation, you would instead return an inertia response. 326 00:14:56.480 --> 00:14:59.559 So it's but the clever thing about the inertia response 327 00:14:59.720 --> 00:15:02.320 is so it's basically the exact same thing. You basically 328 00:15:02.519 --> 00:15:05.799 return inertia. You pass it the name of the page component, 329 00:15:05.879 --> 00:15:08.399 and you pass it the data. So the controller itself 330 00:15:08.519 --> 00:15:11.399 doesn't know if it was a full page visit like 331 00:15:11.440 --> 00:15:14.360 a standard get visit, or if it was an actual 332 00:15:14.360 --> 00:15:17.840 inertia visit. Inertia takes care of that. All the controller 333 00:15:17.879 --> 00:15:20.720 has to do is to return the page component name, 334 00:15:20.840 --> 00:15:23.279 so the client side page component name and the data 335 00:15:23.320 --> 00:15:26.519 for that component. Then the Inertia behind the scenes, it 336 00:15:26.600 --> 00:15:29.559 inspects the request and says, okay, was this a full 337 00:15:29.639 --> 00:15:31.919 page visit? You know, so where we need to display 338 00:15:31.960 --> 00:15:33.679 the layout? Well, if that's the case, well then we're 339 00:15:33.679 --> 00:15:35.159 going to display the layout. We're going to render its 340 00:15:35.159 --> 00:15:38.840 server side, and we're going to inject that base div 341 00:15:38.960 --> 00:15:42.120 with the idea of app and with the data page 342 00:15:42.159 --> 00:15:43.759 attribute with all the data for it, and then we're 343 00:15:43.799 --> 00:15:45.279 just going to render that out. It's kind of just 344 00:15:45.279 --> 00:15:48.159 a standard htam olt page. Then Inertia will grab that 345 00:15:48.279 --> 00:15:51.679 data and boot up the client side application. However, on 346 00:15:51.919 --> 00:15:55.000 subsequent visits, when inertia, so if you go then and 347 00:15:55.000 --> 00:15:56.840 click to a different page, maybe you click on one 348 00:15:56.840 --> 00:15:58.440 of the users you want to view the user, when 349 00:15:58.440 --> 00:16:01.919 inertia does is it intersect that click that page visit 350 00:16:02.200 --> 00:16:04.639 and it then makes the XHR request to the server. 351 00:16:04.799 --> 00:16:06.120 It's going to hit in the exact same way. 352 00:16:06.159 --> 00:16:08.679 Now imagine it's going to hit your user's controller again, 353 00:16:08.679 --> 00:16:10.240 but this time it's going to hit the show method. 354 00:16:10.399 --> 00:16:11.440 So again, what would you. 355 00:16:11.399 --> 00:16:14.919 Do just an standard layer or standard layer belt or 356 00:16:15.000 --> 00:16:17.279 rails app is you go off, you'd get that user 357 00:16:17.279 --> 00:16:19.840 from the database, use an active record, right, and then 358 00:16:19.879 --> 00:16:21.960 you would normally just return a response to show the 359 00:16:22.440 --> 00:16:25.679 user show page with the user data. Except again with inertia, 360 00:16:25.679 --> 00:16:27.399 you wouldn't do that. You would do you'd return an 361 00:16:27.440 --> 00:16:31.320 inertial response that would then have the user show page component, 362 00:16:31.360 --> 00:16:33.600 client side page component, and the data which would be 363 00:16:33.639 --> 00:16:35.840 the user data maybe their ID and their first name, 364 00:16:35.879 --> 00:16:37.840 their email and their last name and whatever else. Right, 365 00:16:38.080 --> 00:16:41.320 So when that request comes through the XHR request, what 366 00:16:41.399 --> 00:16:44.960 inertia does is it passes through an ex inertia header 367 00:16:45.000 --> 00:16:47.679 which is set to true so that your rails app 368 00:16:47.879 --> 00:16:50.840 knows that this isn't a full pagreload. This is this 369 00:16:50.919 --> 00:16:53.440 is like an inertia request, So it's an XHR request, 370 00:16:53.600 --> 00:16:56.840 and what it does instead is it returns not the 371 00:16:57.200 --> 00:16:59.279 full body and the full layout and everything else. 372 00:16:59.360 --> 00:17:02.519 It just turns the Jason data that it requires. 373 00:17:02.519 --> 00:17:04.920 So that's the same Jason data that we put in 374 00:17:04.920 --> 00:17:07.359 the data page attribute if it was like the full 375 00:17:07.680 --> 00:17:10.960 you know, HTML layout render kind of on the first visit, 376 00:17:11.240 --> 00:17:14.480 except it just returns the Jason and nothing else and 377 00:17:14.480 --> 00:17:16.839 it returns out obviously is adjacent response, which that's gonna 378 00:17:16.880 --> 00:17:19.440 have your component name and all your props and then 379 00:17:19.519 --> 00:17:21.440 kind of getting back to what I explained earlier, and 380 00:17:21.519 --> 00:17:24.720 Nursa's gonna then take that. It's gonna dynamically swap out 381 00:17:24.759 --> 00:17:27.680 the client side page component with the new page component 382 00:17:27.880 --> 00:17:31.319 and dynamically swap out the data the props for that 383 00:17:31.359 --> 00:17:34.720 component and like service sorry for the for the user 384 00:17:34.720 --> 00:17:35.799 and the browser, it's. 385 00:17:35.680 --> 00:17:37.440 Gonna look like you went to a whole new page. 386 00:17:37.519 --> 00:17:39.799 But the reality is it's just done some really nice 387 00:17:39.839 --> 00:17:41.720 magical work in the background to just kind of flip 388 00:17:41.720 --> 00:17:43.359 it for you. And then, of course, like I said, 389 00:17:43.440 --> 00:17:46.839 Inertia is essentially in its simplest form, it is a 390 00:17:46.839 --> 00:17:50.480 client side routing library. So it's gonna update your URL 391 00:17:50.519 --> 00:17:53.079 in the browser, and it's gonna update the necessary page 392 00:17:53.079 --> 00:17:55.160 state so that you have like you know, proper history 393 00:17:55.200 --> 00:17:57.200 and stuff so you can navigate back and forth and 394 00:17:57.240 --> 00:17:59.279 stuff like that. So that's kind of like the trickiness 395 00:17:59.279 --> 00:18:01.279 that we do with the reality is from a development 396 00:18:01.359 --> 00:18:04.559 experience for people who are using rails or layervell who 397 00:18:04.559 --> 00:18:06.480 are kind of used to working with that, Hey, I 398 00:18:06.519 --> 00:18:08.799 got a controller, I got a controller method, I got 399 00:18:08.799 --> 00:18:10.279 to get some data from the database and I got 400 00:18:10.279 --> 00:18:12.880 a return of you with some data. It literally feels 401 00:18:12.880 --> 00:18:16.160