WEBVTT 1 00:00:05.440 --> 00:00:09.919 Hey, welcome back to another episode of JavaScript Jabber. This week, 2 00:00:10.439 --> 00:00:13.119 I'm your panel Charles Maxwood, and we've got a special 3 00:00:13.160 --> 00:00:14.080 guest this week. 4 00:00:14.480 --> 00:00:18.800 We have Kelvin. I don't even have it in front 5 00:00:18.800 --> 00:00:22.839 of me anymore. Where to go? Oh, Marashione. I hope 6 00:00:22.839 --> 00:00:23.719 I got close. 7 00:00:25.079 --> 00:00:25.760 Close enough? 8 00:00:26.879 --> 00:00:29.320 So do you want to introduce yourself? Let people know 9 00:00:29.359 --> 00:00:32.600 who you are and why you're famous and all that 10 00:00:32.640 --> 00:00:33.560 good stuff. 11 00:00:34.719 --> 00:00:37.280 Famous? Not yet? Thank you, Chiles. 12 00:00:38.799 --> 00:00:41.520 Hey everyone, my name is Calvin. I am a Fusta 13 00:00:41.679 --> 00:00:46.399 Javascar developer. I'm also the lead maintainer for an NBC 14 00:00:46.520 --> 00:00:50.719 framework for cat sales. I do a couple of teaching, 15 00:00:51.000 --> 00:00:54.560 anus work, built the bone stack. 16 00:00:54.640 --> 00:00:55.840 And some more that things. 17 00:00:55.880 --> 00:00:58.640 So yeah, I love JavaScript. I like to beat everything 18 00:00:58.719 --> 00:01:00.640 JavaScript because that's here. 19 00:01:02.079 --> 00:01:02.560 Awesome. 20 00:01:02.719 --> 00:01:05.400 We should have you back definitely to talk about sales. 21 00:01:06.719 --> 00:01:10.280 But we brought you to talk about inertia jas two 22 00:01:10.400 --> 00:01:13.719 or two point zero. So do you want to just 23 00:01:13.719 --> 00:01:15.719 give us kind of a quick overview of what inertia 24 00:01:15.760 --> 00:01:18.359 jas is for those that are familiar with it or 25 00:01:18.400 --> 00:01:19.040 haven't used it. 26 00:01:20.640 --> 00:01:29.079 Yeah, for sure. So it's at the basic level, it's. 27 00:01:29.120 --> 00:01:33.519 A paradigm sort of like a concept of building food 28 00:01:33.560 --> 00:01:39.840 stack applications, single page applications that don't necessarily need you 29 00:01:39.959 --> 00:01:45.040 to do the separate APIs like back end, and then 30 00:01:45.200 --> 00:01:49.359 your your UI can be in React views belt. So 31 00:01:49.400 --> 00:01:52.480 it gives you this ability to have both your back 32 00:01:52.560 --> 00:01:54.959 end and your front and in one code base and 33 00:01:55.280 --> 00:01:57.959 just take out that layer of having to do vetch 34 00:01:58.079 --> 00:02:03.120 core because your back end can return your UIs component 35 00:02:03.200 --> 00:02:05.200 as pages and also saying that the props that they 36 00:02:05.239 --> 00:02:09.280 need when it sends down the page. So it came 37 00:02:09.280 --> 00:02:13.400 out from the Lava world. It's what love Cloud is 38 00:02:13.439 --> 00:02:16.680 being built on now, which is the new rithing cloud things. 39 00:02:16.800 --> 00:02:19.560 I don't know if you've done that. So a bunch 40 00:02:19.560 --> 00:02:23.719 of people use it, Phantom analytics use it. I also 41 00:02:24.120 --> 00:02:27.080 use it for salescast dot Com and hackfish. So it 42 00:02:27.400 --> 00:02:30.639 just simplified. If you like MVC stuff and you want 43 00:02:30.680 --> 00:02:33.639 to keep your SPA, but you don't want to maintain 44 00:02:33.719 --> 00:02:37.120 two different projects and have like a back end separate 45 00:02:37.159 --> 00:02:39.800 and a frontag separate, and so it's a nottnity to 46 00:02:39.879 --> 00:02:43.680 things like next years. If you like traditional server sight 47 00:02:43.759 --> 00:02:45.560 applications but you still want an SPA. 48 00:02:48.080 --> 00:02:48.520 Gotcha. 49 00:02:49.319 --> 00:02:54.280 So I'm curious because you know, I saw the information 50 00:02:54.319 --> 00:03:00.039 about the Nursia JAS two dot zero. I'll admit I 51 00:03:00.120 --> 00:03:01.599 kind of looked at it. I haven't done a whole 52 00:03:01.639 --> 00:03:06.280 lot with it. What's new in too that? What and 53 00:03:06.520 --> 00:03:07.919 why did we need it to that? 54 00:03:09.520 --> 00:03:12.199 Yeah, it's a couple of things new. First of all, 55 00:03:12.400 --> 00:03:20.560 the first version was kind of making synchronous style of 56 00:03:22.479 --> 00:03:27.840 so if you make a like a page request and 57 00:03:27.879 --> 00:03:29.919 you want to make another one, it's going to cancel 58 00:03:29.960 --> 00:03:30.599 like the old one. 59 00:03:30.639 --> 00:03:33.199 So it wasn't a synchronous at all. 60 00:03:33.280 --> 00:03:36.319 It was really synchrolar, just like the way the pages 61 00:03:36.400 --> 00:03:39.719 work in a browser, right, like anytime you make a 62 00:03:39.759 --> 00:03:43.599 new request, GET is going to cancel out the old one. 63 00:03:44.039 --> 00:03:47.280 So but with two point zero from the ground up 64 00:03:47.400 --> 00:03:50.800 is built to be a synchronous which opened the door 65 00:03:50.840 --> 00:03:54.960 to like more goodies to come into the tech, meaning 66 00:03:55.000 --> 00:03:58.479 that we could do things like partial reload and make 67 00:03:58.520 --> 00:04:00.879 that to be a synchronous. We could do things like 68 00:04:02.360 --> 00:04:07.159 deferred props and a bunch of other things like prefetching 69 00:04:07.719 --> 00:04:12.400 pulling for example. So two point zero the biggest changes 70 00:04:12.840 --> 00:04:16.319 is a synple notes now, so that means all requests 71 00:04:16.600 --> 00:04:19.000 a simple just like what you get in something like 72 00:04:19.120 --> 00:04:20.639 next years or any other thing. 73 00:04:21.079 --> 00:04:26.279 But now you have more things that you could use 74 00:04:26.319 --> 00:04:26.680 it for. 75 00:04:26.800 --> 00:04:30.759 Because so let's use my app for example that I'm 76 00:04:30.759 --> 00:04:34.959 doing hackfish with, and an invoice app. It has an 77 00:04:35.079 --> 00:04:38.360 editor that lets you edit your invoice like and give 78 00:04:38.399 --> 00:04:40.439 you this notion like faiel to edit. 79 00:04:40.879 --> 00:04:43.279 Right. So in one point, soo inertia. 80 00:04:43.319 --> 00:04:45.160 If I make a change and I want to partially 81 00:04:45.519 --> 00:04:50.319 submit those like saving drafts, right, it's going to make 82 00:04:50.720 --> 00:04:53.759 a request like a Synchlen request. 83 00:04:53.800 --> 00:04:56.000 So if I make a new change to cancel out 84 00:04:56.000 --> 00:04:58.560 the old change, I was supposed to go to. 85 00:04:58.480 --> 00:05:01.680 The server and make that update. But with two part 86 00:05:01.879 --> 00:05:04.680 now everything's going to be a sync, so it could 87 00:05:04.720 --> 00:05:08.360 do that. Partial updates is synchronously. 88 00:05:10.040 --> 00:05:12.800 So when you're saying a partial update, you're talking about 89 00:05:12.800 --> 00:05:14.959 where you only update part of the page. 90 00:05:17.000 --> 00:05:19.480 Yes, so yes, exactly. 91 00:05:19.600 --> 00:05:22.759 So when you like, so if you have let's say 92 00:05:22.759 --> 00:05:26.079 you have on a page, you have users, and then 93 00:05:26.160 --> 00:05:30.160 you have let's say companies, let's just use that. Right, 94 00:05:30.360 --> 00:05:32.839 So if I want to update or like want to 95 00:05:32.920 --> 00:05:36.519 change the UI or filtered by users, but I don't 96 00:05:36.560 --> 00:05:41.000 need to touch the companies, right, I could say, when 97 00:05:41.040 --> 00:05:44.680 I make this updates, I want you to send back 98 00:05:44.800 --> 00:05:47.240 only the user. I don't send back the users and 99 00:05:47.279 --> 00:05:53.120 the companies. So that is partial updates right in inertia. 100 00:05:53.199 --> 00:05:55.839 So before it was all going to be synchronous. So 101 00:05:55.920 --> 00:06:01.040 anything that if you make, if you tie a new thing, 102 00:06:01.560 --> 00:06:06.600 and I was already finding an older synchronous request, it's 103 00:06:06.600 --> 00:06:08.199 going to concern out the old one to send a 104 00:06:08.279 --> 00:06:10.279 new one. But now it's all these things, so they 105 00:06:10.319 --> 00:06:13.519 could all have multiple requests. It's a big deal because 106 00:06:13.560 --> 00:06:16.800 it changes how it works, and I could talk about 107 00:06:16.879 --> 00:06:21.399 things like the like the defect props and every other 108 00:06:21.439 --> 00:06:24.000 thing that this new system brings to. 109 00:06:24.079 --> 00:06:27.439 Two po right, I'm just trying to get my head 110 00:06:27.480 --> 00:06:31.680 around when you so when you're saying partial updates, you're 111 00:06:31.720 --> 00:06:32.560 talking about data. 112 00:06:32.600 --> 00:06:33.839 You're not talking about UI. 113 00:06:33.879 --> 00:06:37.720 Then, yeah, so the because the page will come with 114 00:06:37.920 --> 00:06:42.040 the data. So if you partially update the data, of 115 00:06:42.079 --> 00:06:44.519 course it's going to like change what page you're going 116 00:06:44.600 --> 00:06:47.839 to see, right or the you yeah, like what is 117 00:06:47.879 --> 00:06:48.519 on the UI? 118 00:06:48.680 --> 00:06:51.160 Yeah, because every page comes with the data as prop. 119 00:06:52.560 --> 00:06:55.439 Okay, I guess the other question I have then is 120 00:06:56.680 --> 00:06:58.639 let's say that you and I are both looking at 121 00:06:58.680 --> 00:07:02.959 the same data on machines. That does it then give 122 00:07:02.959 --> 00:07:06.439 you a way to push those updates like from my 123 00:07:06.639 --> 00:07:08.680 machine to your machine or. 124 00:07:09.560 --> 00:07:12.519 No, that's more real time. I don't think so. 125 00:07:12.920 --> 00:07:15.680 It's mostly because you're just going to be for just 126 00:07:15.759 --> 00:07:17.759 my copy of it, all. 127 00:07:17.439 --> 00:07:21.399 Right, okay, yeah, but but it does do call to 128 00:07:21.439 --> 00:07:23.439 the back end and tells the back end, Hey, there's 129 00:07:23.519 --> 00:07:24.279 new data here. 130 00:07:25.839 --> 00:07:29.240 Yeah. So that's when you make like a classic like. 131 00:07:31.480 --> 00:07:33.720 Create an update, it's going to change and of course 132 00:07:33.759 --> 00:07:36.160 if you're looking at the page that was changed, the 133 00:07:36.199 --> 00:07:38.639 next time you visit the page, of course you're going 134 00:07:38.639 --> 00:07:40.800 to see the new data, even if you're not like 135 00:07:40.959 --> 00:07:42.040 so it's just classic. 136 00:07:43.079 --> 00:07:48.839 Yeah, I gotcha. So does this change the way you 137 00:07:48.879 --> 00:07:50.120 build things with inertia? 138 00:07:51.959 --> 00:07:53.439 Oh yes, it does. It doesn't. 139 00:07:53.600 --> 00:07:56.560 It just gives you more good is because the way 140 00:07:57.240 --> 00:08:01.160 INITIAL work, it's adapted based for both the back end 141 00:08:01.639 --> 00:08:04.800 and the front end. So they are they are adapters 142 00:08:04.839 --> 00:08:10.079 for Love for Whales, Phoenix. I also built the one 143 00:08:10.120 --> 00:08:13.480 for sales, which is what the boys that uses. So 144 00:08:14.639 --> 00:08:19.079 these changes need you and the for your So so 145 00:08:19.120 --> 00:08:21.279 now you have to conform to the new things that 146 00:08:21.439 --> 00:08:24.160 is in the core of Initial. So you add some 147 00:08:24.199 --> 00:08:29.160 new method there like change house, some setting back end work. 148 00:08:29.519 --> 00:08:31.879 But for the. 149 00:08:31.000 --> 00:08:36.759 View and the other fronted them from a adapters, you 150 00:08:36.759 --> 00:08:39.120 don't have to touch anything, so it's just me I 151 00:08:39.360 --> 00:08:43.000 myself as a as a maintainer, they have to change 152 00:08:43.000 --> 00:08:43.679 all that stuff. 153 00:08:43.799 --> 00:08:46.759 But with the two point zero you could do things. 154 00:08:46.840 --> 00:08:51.360 So so now that it's all a synchronous you could 155 00:08:51.360 --> 00:08:55.039 do things like if you finish scrolling really easily. In fact, 156 00:08:55.559 --> 00:08:59.039 they are components that are baked into two point two 157 00:08:59.120 --> 00:09:02.799 that lets you do so, like the when visible component. 158 00:09:03.240 --> 00:09:06.120 So if you're scrolling, I want to load new data, 159 00:09:06.240 --> 00:09:08.559 so it's just gonna make sure that you don't just 160 00:09:08.639 --> 00:09:13.240 load every data wants the page mount for example, so 161 00:09:13.240 --> 00:09:15.399 you could do things like one scrolling joins the classic 162 00:09:16.960 --> 00:09:23.519 infinite scrowthing, and because it comes in the core of inertia, 163 00:09:23.519 --> 00:09:25.519 it's pretty easy to do that. So you could do 164 00:09:25.559 --> 00:09:28.879 things like that and deferred prop. So let's say you 165 00:09:28.960 --> 00:09:34.559 have like an admin dashboard and you show the starts 166 00:09:34.600 --> 00:09:35.159 at the top. 167 00:09:35.799 --> 00:09:36.200 Mm hmm. 168 00:09:36.559 --> 00:09:38.480 So instead of you showing the starts at the top 169 00:09:38.480 --> 00:09:42.480 and also fetched the maybe recent users that will only 170 00:09:42.480 --> 00:09:46.600 be seeing when user scroll, you could defer like those 171 00:09:46.639 --> 00:09:49.519 props like okay, send all of the stats and then 172 00:09:50.720 --> 00:09:52.559 incrementally send down everything else. 173 00:09:54.039 --> 00:09:58.200 So this would be used, like you said, for like 174 00:09:58.480 --> 00:10:02.639 an admin dashboard or or something else where it's it's 175 00:10:02.879 --> 00:10:05.320 essentially you don't want it to do all of the 176 00:10:05.440 --> 00:10:09.399 work and take forever to load the page, and so 177 00:10:09.519 --> 00:10:11.840 you can you can say, hey, look, I've got this 178 00:10:11.960 --> 00:10:15.240 page with this structure, and then the deferred props are 179 00:10:15.320 --> 00:10:17.399 essentially the data, so it can go back and i 180 00:10:17.399 --> 00:10:20.639 can say, okay, the page is loaded, and now I'm 181 00:10:20.679 --> 00:10:24.159 ready to populate this section of the page. So I've 182 00:10:24.200 --> 00:10:28.759 deferred getting those props and filling in the blanks essentially. 183 00:10:28.960 --> 00:10:31.480 Exactly exactly, so it's now more. 184 00:10:31.960 --> 00:10:35.039 I think these features really make it like a good 185 00:10:35.559 --> 00:10:38.559 contender for things like next years for example, right like, 186 00:10:38.600 --> 00:10:41.080 because I've seen folks like in one Point Tho, I've 187 00:10:41.120 --> 00:10:44.919 seen folks preferred the boy stack because of how stimpoint 188 00:10:45.080 --> 00:10:47.919 is and how because the cool thing about this old 189 00:10:47.919 --> 00:10:50.440 thing that it brings for you that you get the 190 00:10:50.480 --> 00:10:55.039 old truce of an MBC framework to handle your back end, 191 00:10:55.120 --> 00:10:59.440 your authorization and your ROM. And then then the bridge 192 00:10:59.440 --> 00:11:03.360 which is initia, so we just got a better bridge. 193 00:11:03.559 --> 00:11:07.720 The back end that keep getting better, the front that 194 00:11:07.799 --> 00:11:09.559 keep getting better than the bridge now gives you this 195 00:11:09.840 --> 00:11:16.120 amazing experience in DX prefetching, deferred props and infinite screwl 196 00:11:16.320 --> 00:11:18.799 pulling as well. Like it's easy to like pull for 197 00:11:18.919 --> 00:11:20.360 new data if you want to. So if you don't 198 00:11:20.360 --> 00:11:22.840 want to do website get stuff and you want to pull, 199 00:11:23.159 --> 00:11:27.279 like it's it is possible. It's come big teams, so 200 00:11:27.279 --> 00:11:33.279 you could do things like trouttling or don't pull when that. 201 00:11:31.840 --> 00:11:36.000 That type is is inactive and all that stuff. 202 00:11:36.000 --> 00:11:40.159 It comes backed into the frame of the the. 203 00:11:39.440 --> 00:11:41.320 Tech right now. So it's really really good. 204 00:11:41.360 --> 00:11:45.720 It's just going to make it easier to build really 205 00:11:45.840 --> 00:11:49.200 nice experiences with the tech. 206 00:11:50.200 --> 00:11:50.919 That makes sense. 207 00:11:51.080 --> 00:11:55.360 Is it sending the data back as fully formed HTML 208 00:11:55.480 --> 00:11:58.519 or is it just Jason and you're relying on whatever 209 00:11:58.519 --> 00:12:01.159 you're doing on the front end to populate the data 210 00:12:01.279 --> 00:12:02.039 or how does that work? 211 00:12:03.440 --> 00:12:09.399 Yeah, so it's it's leverage the fact that you could 212 00:12:09.559 --> 00:12:15.840 swap out components in real time for every. 213 00:12:17.639 --> 00:12:19.960 Like view, veiled and the rest. 214 00:12:20.039 --> 00:12:23.360 Right, So what happens is that today's like you have 215 00:12:23.440 --> 00:12:26.480 like an app door jas that you would do a 216 00:12:27.240 --> 00:12:32.600 like a create initial app for views vert or react 217 00:12:32.720 --> 00:12:36.600 and then you'll be like, okay, look for the pages 218 00:12:36.919 --> 00:12:42.639 and maybe jazz slash pages right, So you give it 219 00:12:42.639 --> 00:12:44.080 the page name and you would know that. 220 00:12:44.159 --> 00:12:47.399 Okay. So once the back end. 221 00:12:47.440 --> 00:12:51.240 Say look for a page that there is user for example, 222 00:12:51.799 --> 00:12:56.240 it's to use that to find the user the jas 223 00:12:56.440 --> 00:13:01.200 and then swap the page okay, and also send the 224 00:13:01.240 --> 00:13:07.879 props into datum page page. So it has a DSL 225 00:13:08.039 --> 00:13:12.000 that would be like the name of the page, the props, 226 00:13:12.240 --> 00:13:14.559 the you are well, and every other. 227 00:13:15.879 --> 00:13:16.840 Data that you would need. 228 00:13:17.120 --> 00:13:22.120 So it's swap it as you click, it's gonna intercept 229 00:13:22.360 --> 00:13:27.120 does click, then it will make an SHL to get 230 00:13:27.120 --> 00:13:27.480 the page. 231 00:13:27.600 --> 00:13:30.840 So you say all spo like right. 232 00:13:31.159 --> 00:13:35.440 So most of the work I do is server rendered, 233 00:13:35.679 --> 00:13:38.879 and so I'm I'm pretty accustomed to making the call 234 00:13:38.960 --> 00:13:41.200 to the back end and getting HTML back and saying 235 00:13:41.320 --> 00:13:44.320 drop this in where I tell you to. But what 236 00:13:44.360 --> 00:13:47.559 you're saying is, since you're using a front end library 237 00:13:47.679 --> 00:13:52.159 like React or view or celt or something, it already knows, hey, 238 00:13:52.200 --> 00:13:55.519 I've got a component, and this component has these behaviors 239 00:13:55.559 --> 00:13:59.120 and this data behind it. And so effectively what you 240 00:13:59.159 --> 00:14:03.039 do is when you click, it says okay, take this component. 241 00:14:03.080 --> 00:14:05.639 You're gonna put it here, or maybe it's a collection 242 00:14:05.679 --> 00:14:07.879 of components or something like that, and you're going to 243 00:14:07.960 --> 00:14:10.159 go get the data, and the data is the props, 244 00:14:10.480 --> 00:14:12.799 and you're going to load those and you're gonna you're 245 00:14:12.840 --> 00:14:17.159 basically going to hydrate your your components with the data 246 00:14:17.559 --> 00:14:20.240 so that then it knows, Okay, now I've got fully 247 00:14:20.320 --> 00:14:23.639 formed functional things that I can put onto my page. 248 00:14:24.799 --> 00:14:27.600 Yeah, exactly, so do the cool thing. 249 00:14:27.679 --> 00:14:32.639 It's so if you're doing something like a classic SPA, 250 00:14:32.799 --> 00:14:38.600 like when you want to see let's see cost this 251 00:14:38.679 --> 00:14:41.559 for example, right, if you visit the page, the pitche 252 00:14:41.600 --> 00:14:44.919 would load, right, but now you have to make another 253 00:14:45.120 --> 00:14:48.120 call with the spiner right to see like to get 254 00:14:48.159 --> 00:14:51.080 to the data. But in this way, everything is sevi 255 00:14:51.080 --> 00:14:56.480 aside centric, so the page will always. 256 00:14:55.559 --> 00:14:56.559 Load with the data. 257 00:14:56.600 --> 00:14:59.279 So there's no need for like a spinner so it 258 00:14:59.360 --> 00:15:03.279 costs with the Yeah, but it's an SPA, so there's 259 00:15:03.279 --> 00:15:04.759 no need for the spin out. There's no need to 260 00:15:04.799 --> 00:15:10.360 have states in like what redogs or all those other stuff, 261 00:15:10.399 --> 00:15:13.360 because your state is in the database, so everything always 262 00:15:13.360 --> 00:15:15.000 come I know like that. 263 00:15:15.360 --> 00:15:18.480 Yeah, that's cool. 264 00:15:18.840 --> 00:15:22.360 So let's say because I can kind of see two 265 00:15:22.399 --> 00:15:26.519 scenarios here. So one scenario is, hey, I've got my 266 00:15:26.679 --> 00:15:29.480 React app or my next JS app or you know 267 00:15:29.639 --> 00:15:34.200 view or whatever. Right, and I've been using inertia JS 268 00:15:34.720 --> 00:15:36.000 one dot zero for a while. 269 00:15:36.600 --> 00:15:39.000 This sounds great, let's upgrade it. What do I have 270 00:15:39.039 --> 00:15:39.759 to do upgrade it? 271 00:15:42.080 --> 00:15:44.360 So it depends on what you're using already, So if 272 00:15:44.399 --> 00:15:47.960 you use it, so IF for the most part, is 273 00:15:48.120 --> 00:15:51.200 very popular in the Lava ecosystem. So all you have 274 00:15:51.240 --> 00:15:55.279 to do is update both the back end adapter, which 275 00:15:55.320 --> 00:15:58.960 we go be inertial level, and then the front end 276 00:15:58.960 --> 00:16:00.759 re I is View or React. 277 00:16:01.600 --> 00:16:03.559 I think that's all you need to do. 278 00:16:03.600 --> 00:16:05.840 It doesn't have a lot of breaking changes for like 279 00:16:06.200 --> 00:16:09.360 a major like this doesn't have a lot I said, 280 00:16:09.399 --> 00:16:11.639 you're using a couple of things that you do so 281 00:16:11.720 --> 00:16:14.120 but as soon as you do those change, your app 282 00:16:14.200 --> 00:16:17.799 is a sync now. So everything is a sync by Deffault, 283 00:16:17.919 --> 00:16:21.519 so it will just work. But you could now tap 284 00:16:21.600 --> 00:16:25.120 into using things like the prefetching, which is really cool. 285 00:16:26.480 --> 00:16:29.639 So this one, like I think next year is already 286 00:16:29.639 --> 00:16:29.759 have it. 287 00:16:29.799 --> 00:16:31.879 And I think like like if you've a building on 288 00:16:31.919 --> 00:16:34.399 the web for like a while, you know how to 289 00:16:34.720 --> 00:16:36.919 prefetch the but does not come with the stuff, So 290 00:16:36.960 --> 00:16:39.279 you could be like, okay, if you over on something, 291 00:16:39.480 --> 00:16:44.879 prefetch that page or if it mounts load these other 292 00:16:45.039 --> 00:16:47.879 pages of domestically that I think that you're going to visit. 293 00:16:48.279 --> 00:16:49.080 So it now comes. 294 00:16:49.200 --> 00:16:51.200 So it's more giving you more add ons, so you 295 00:16:51.200 --> 00:16:53.519 don't really have to change much of your apps. So 296 00:16:53.559 --> 00:16:55.000 for me, I have to do a lot because I 297 00:16:55.039 --> 00:16:58.840 have to. I'm not updated my own adapter yet. But 298 00:16:58.919 --> 00:16:59.480 after that. 299 00:16:59.480 --> 00:17:03.799 Updates, users just have it for free because it would 300 00:17:03.799 --> 00:17:04.160 just walk. 301 00:17:04.200 --> 00:17:06.519 They just have to use the new things the way 302 00:17:06.519 --> 00:17:10.160 in visible components pulling if you have to pull for data. 303 00:17:10.279 --> 00:17:11.119 I know this stuff. 304 00:17:11.680 --> 00:17:13.319 Yeah, right, So. 305 00:17:14.799 --> 00:17:17.599 What you're saying is is if I update Inertia on 306 00:17:17.680 --> 00:17:19.480 the front end, right, they just say, okay, now I'm 307 00:17:19.519 --> 00:17:22.759 using Inertia too. That's that's all I have to do 308 00:17:22.799 --> 00:17:24.480 on the front end, and on the back end I 309 00:17:24.599 --> 00:17:28.079 update my adapter and then everything that I was doing 310 00:17:28.119 --> 00:17:31.599 with Inertia still works, right, some of it might be. 311 00:17:32.920 --> 00:17:33.920 Or things like that. 312 00:17:34.279 --> 00:17:36.799 It just opens the door so I can use some 313 00:17:36.799 --> 00:17:38.079 of these other features. 314 00:17:38.799 --> 00:17:45.200 Yeah, and it's like the best like major update ever 315 00:17:45.359 --> 00:17:47.839 with no breaking changes at all except like just a 316 00:17:47.839 --> 00:17:48.279 few things. 317 00:17:48.359 --> 00:17:50.759 And they're like this is like this is the dream. 318 00:17:50.839 --> 00:17:52.720 It's just so easy to update. 319 00:17:53.000 --> 00:17:57.799 Right, Yeah, I mean I've worked on some systems and yeah, 320 00:17:57.880 --> 00:18:02.079 you get that major verse version update and it's like, okay, 321 00:18:02.359 --> 00:18:05.519 it was all this stuff that depends on all of 322 00:18:05.519 --> 00:18:09.839 these features out of version last version, right, and so 323 00:18:10.680 --> 00:18:12.880 now when I do the upgrade, I either have to 324 00:18:13.039 --> 00:18:17.000 find some way of like running both versions or you know, 325 00:18:17.079 --> 00:18:18.319 jumping through a bunch of goops. 326 00:18:18.319 --> 00:18:21.200 And so this is this is pretty refreshing, right. 327 00:18:21.559 --> 00:18:23.599 Yes, it is like it's a it's a joy. It's 328 00:18:23.640 --> 00:18:27.440 a joy like everything this just work, and you just 329 00:18:27.480 --> 00:18:30.200 have to know that you're not usaying like. 330 00:18:30.160 --> 00:18:30.559 You would have. 331 00:18:30.640 --> 00:18:33.839 You probably would notice the change as much because it's 332 00:18:33.960 --> 00:18:38.039 just you just work and just think. So it's more 333 00:18:38.079 --> 00:18:42.279 like it's more like an architectural change down actual like 334 00:18:42.359 --> 00:18:43.799 things you would take notice off. 335 00:18:45.240 --> 00:18:49.079 Right, So I want to kind of back into some 336 00:18:49.160 --> 00:18:50.079 of these other features. 337 00:18:50.200 --> 00:18:51.799 You know, we've talked a bit about async. 338 00:18:54.039 --> 00:18:57.359 Is there any concern about because because you can have 339 00:18:57.440 --> 00:19:00.640 multiple requests and now, is there any learned about those 340 00:19:00.720 --> 00:19:03.200 coming in in the wrong order or anything like that 341 00:19:03.240 --> 00:19:05.119 where maybe you get a race condition or something like 342 00:19:05.119 --> 00:19:08.440 that where you can get unexpected results, or does the 343 00:19:08.480 --> 00:19:09.680 nur shol handle all that for you. 344 00:19:11.160 --> 00:19:14.640 Yeah, I think so, Like it's why you have to 345 00:19:14.720 --> 00:19:16.279 update the adapters. 346 00:19:17.880 --> 00:19:20.920 Already, like take it. 347 00:19:21.640 --> 00:19:24.319 So it's more like you most likely would't have to 348 00:19:24.400 --> 00:19:27.240 run into any of those issues. But the adapters have 349 00:19:28.119 --> 00:19:32.480 have also made sure that all the race conditions, which 350 00:19:32.480 --> 00:19:35.759 I don't think it's even possible because things it's all 351 00:19:35.799 --> 00:19:37.720 a sync, right, so if I'm loading this part of 352 00:19:37.759 --> 00:19:39.960 the page and the parties, so it doesn't really matter, 353 00:19:40.039 --> 00:19:43.640 but I'm pretty sure it's all taking care of. That's 354 00:19:43.640 --> 00:19:47.200 how we have to update those adapters. Okay, so what 355 00:19:47.319 --> 00:19:51.160 with the cod versions. 356 00:19:50.640 --> 00:19:55.400 And then you mentioned the pulling, So do I just 357 00:19:55.480 --> 00:20:00.680 tell it how frequently the check or how how long 358 00:20:00.759 --> 00:20:01.880 I wanted to pull for. 359 00:20:02.279 --> 00:20:11.400 Or yeah, so it comes with the front end comes 360 00:20:11.400 --> 00:20:17.920 with them. So for view we have the composable. For React, 361 00:20:18.000 --> 00:20:21.200 there's also the hook, the useful hook, so you could 362 00:20:21.240 --> 00:20:23.839 just drop it in there and be like useful then 363 00:20:23.920 --> 00:20:27.799 pull every twenty second, and you could put like some 364 00:20:27.880 --> 00:20:30.799 callbacks like on start unfinished, like to just you know, 365 00:20:31.000 --> 00:20:32.880 and you could also stop it if you want to, 366 00:20:33.319 --> 00:20:36.160 so like it's not like forever, and you could you 367 00:20:36.200 --> 00:20:40.559 could throttle it, you know, like so that yeah, so 368 00:20:40.599 --> 00:20:43.559 that you don't just so if I'm not on the page. 369 00:20:43.279 --> 00:20:45.359 It's no need for you to finish data, right, So 370 00:20:45.400 --> 00:20:47.680 you could also trottle it for that. Yeah. 371 00:20:47.720 --> 00:20:50.880 Right, So. 372 00:20:52.559 --> 00:20:55.119 And then you mentioned I'm looking at this article. I 373 00:20:55.119 --> 00:20:59.039 I guess I could post it to the comments, but 374 00:20:59.319 --> 00:21:01.519 they mentioned and the when visible and that was where 375 00:21:01.559 --> 00:21:03.799 you were talking about things like infinite scrolling. 376 00:21:03.920 --> 00:21:06.839 Yeah, so this comes on, Now do the work. 377 00:21:07.119 --> 00:21:10.000 But I could also see this as kind of a 378 00:21:10.039 --> 00:21:13.759 performance hack where you know, I have a dashboard, but 379 00:21:14.000 --> 00:21:17.319 some of the graphs or something are below the fold, 380 00:21:17.880 --> 00:21:20.519 and so it's like, Okay, you scrolled up far enough 381 00:21:20.559 --> 00:21:22.960 to where you might want to see this, and so 382 00:21:23.119 --> 00:21:25.440 now I'm gonna load that in. But before I didn't 383 00:21:25.480 --> 00:21:27.039 do that work because I. 384 00:21:26.960 --> 00:21:28.200 Didn't even know if you're gonna look. 385 00:21:28.079 --> 00:21:30.000 At it exactly. 386 00:21:30.240 --> 00:21:34.119 So yeah, it's more good for you actually, and you know, 387 00:21:34.279 --> 00:21:39.039 like all your it's just gonna be good for web vitals. 388 00:21:39.119 --> 00:21:41.839 They're gonna love you for it, and of course you'll 389 00:21:42.559 --> 00:21:45.400 your users are gonna love it too, because not every 390 00:21:45.440 --> 00:21:50.039 part of the page it gets seen or have equal attention. 391 00:21:50.640 --> 00:21:53.160 So you could just be like when visible, do stuff. 392 00:21:53.480 --> 00:21:56.279 If not visible, then that work's never done. And that 393 00:21:56.359 --> 00:21:59.279 page was loaded and us gets what it wanted to 394 00:21:59.279 --> 00:22:00.119 do done really quick. 395 00:22:01.240 --> 00:22:06.759 Right, Yeah, yeah, I think I think you covered everything 396 00:22:06.759 --> 00:22:11.160 that I was able to find on this. So I 397 00:22:11.200 --> 00:22:14.880 guess the next questions are, you know, kind of more 398 00:22:14.920 --> 00:22:19.000 in general with just building web applications and best practices. 399 00:22:19.480 --> 00:22:21.920 So one of the things that I like to do 400 00:22:22.039 --> 00:22:23.920 with a lot of my applications is make sure that 401 00:22:23.960 --> 00:22:28.160