WEBVTT 1 00:00:05.200 --> 00:00:08.560 Hey, folks, welcome back to another episode of JavaScript Jabber. 2 00:00:08.960 --> 00:00:11.359 This week, on our panel, we have Dan Shapier. 3 00:00:11.720 --> 00:00:13.519 Hey from a still warm Tel Aviv. 4 00:00:14.640 --> 00:00:18.519 We also have Steve Edwards Hello from Oregon where it 5 00:00:18.600 --> 00:00:23.519 is finally officially fall, and a j O'Neill. 6 00:00:24.199 --> 00:00:26.320 Yo yo yo, coming at you live from now the 7 00:00:26.399 --> 00:00:29.760 fourth straight day of twenty four to seven. Vertigo. 8 00:00:30.480 --> 00:00:32.880 Well that sounds fun. My mom went through something like that. 9 00:00:32.920 --> 00:00:36.320 She actually went to the er, but they just told her, yeah, 10 00:00:36.320 --> 00:00:39.039 she had some kind of vertigo. Anyway, I'm Charles max 11 00:00:39.079 --> 00:00:42.079 Wood from Top End Devs, and this week we are 12 00:00:42.119 --> 00:00:47.600 talking about our stimulus and turbo. If you're if you 13 00:00:47.640 --> 00:00:51.159 can't guess, this is something I put forward and I 14 00:00:51.280 --> 00:00:53.560 decided that I would just come on and talk about 15 00:00:53.560 --> 00:00:58.039 it myself since I use this every day and I'm 16 00:00:58.359 --> 00:01:02.280 loving it, so I'm anyway, I'm kind of curious that 17 00:01:02.359 --> 00:01:06.599 have you guys heard much about hot wire stimulus or Turbo. 18 00:01:07.359 --> 00:01:09.319 Well, yeah, I use it for to find plane tickets 19 00:01:09.319 --> 00:01:09.799 all the time. 20 00:01:14.040 --> 00:01:16.959 I've kind of heard about it. I know that it's 21 00:01:17.040 --> 00:01:20.640 big in the rails world where I am not present. 22 00:01:22.040 --> 00:01:25.239 I know that it's kind of like HTMX in a way. 23 00:01:26.640 --> 00:01:29.439 But that's more or less. Yeah, that's more or less 24 00:01:29.439 --> 00:01:30.519 all that I know about it. 25 00:01:32.760 --> 00:01:35.840 Yeah, yeah, it looks like they all go together. 26 00:01:36.120 --> 00:01:37.159 I'm looking at the web page. 27 00:01:38.799 --> 00:01:42.719 You can use them together, you don't have to. So 28 00:01:42.719 --> 00:01:45.000 so I'll give a little bit of history on this. 29 00:01:47.760 --> 00:01:51.000 So David I was calling David. Everybody else calls him 30 00:01:51.040 --> 00:01:57.319 DH and I don't know why. But anyway, so, way 31 00:01:57.359 --> 00:02:02.719 back in the day, he created a system for Java 32 00:02:03.000 --> 00:02:07.480 in JavaScript for rails apps called turbo Links, And effectively 33 00:02:07.480 --> 00:02:11.639 what it did was it would reload. Initially, I think 34 00:02:11.639 --> 00:02:14.199 it just reloaded the body of the page, so if 35 00:02:14.240 --> 00:02:17.800 you click the link, then uh, turbo links would intercept 36 00:02:18.000 --> 00:02:20.680 the click, and then it would load just the body 37 00:02:20.719 --> 00:02:22.840 of the page or just certain sections of the page 38 00:02:23.240 --> 00:02:27.159 so that it would load faster, right because it didn't 39 00:02:27.159 --> 00:02:31.120 have to re render the entire page. Turbo is kind 40 00:02:31.120 --> 00:02:32.360 of the successor to that. 41 00:02:33.120 --> 00:02:35.520 Before before we go into the successor, I want to 42 00:02:35.560 --> 00:02:39.080 better understand that aspect. So basically, it did an HTP 43 00:02:39.280 --> 00:02:44.400 request to the back end, presumably with a slightly different header, uh, 44 00:02:44.439 --> 00:02:48.560 and then it would get the response back. Would it 45 00:02:48.599 --> 00:02:51.599 be like HTMX, would it be like basically HTML? 46 00:02:51.680 --> 00:02:54.280 In the response was HTML in the results and. 47 00:02:54.319 --> 00:02:57.879 Then and then it would basically do in like a 48 00:02:58.000 --> 00:03:03.000 diff like an HTML equal whatever the response was or 49 00:03:03.039 --> 00:03:03.919 something along the lines. 50 00:03:04.520 --> 00:03:07.599 Yeah, basically, and I don't know all the internals on that, 51 00:03:07.639 --> 00:03:09.439 but yeah, basically that's what it would do. 52 00:03:10.199 --> 00:03:13.240 And I assumed that it would also like work with 53 00:03:13.400 --> 00:03:18.000 the history API, so that back and forward would work properly. Yep. 54 00:03:19.159 --> 00:03:22.599 So it's just similar to HTMX in the sense that 55 00:03:22.680 --> 00:03:25.840 it would It was a mechanism that allowed you to 56 00:03:25.919 --> 00:03:30.120 replace portions of the page rather than the page in its. 57 00:03:30.080 --> 00:03:35.879 Entirety right, But turbo links when it was out was 58 00:03:37.159 --> 00:03:41.400 kind of a blunt tool, and so you couldn't target 59 00:03:41.520 --> 00:03:46.080 specific areas of your app or different specific dom elements. 60 00:03:46.520 --> 00:03:49.120 It would it was literally just the whole page, and 61 00:03:49.159 --> 00:03:52.159 so it would effectively figure out what change and then 62 00:03:52.240 --> 00:03:55.919 just update the changes. But it would get the HTML 63 00:03:55.960 --> 00:03:59.319 from the back end, as opposed to I guess some 64 00:03:59.400 --> 00:04:02.520 of the shadowed stuff that we see in JavaScript, where you. 65 00:04:02.479 --> 00:04:04.560 Know, not shadow down virtual dom. 66 00:04:04.919 --> 00:04:07.680 Or virtual dom where it yeah, where it manipulates, it 67 00:04:08.039 --> 00:04:10.319 calculates and the manipulates the dom. 68 00:04:10.879 --> 00:04:13.879 And this shadow dome is also a thing, but it's 69 00:04:13.879 --> 00:04:14.319 a different thing. 70 00:04:14.400 --> 00:04:18.759 Yeah, yeah, fair enough. But but anyway, so that's that's 71 00:04:18.800 --> 00:04:23.160 generally the idea behind turbo links, and you know it 72 00:04:23.240 --> 00:04:26.360 did it sped up, you know, rendering on on rails 73 00:04:26.360 --> 00:04:29.879 apps in particular, and that's that's almost exclusively where it 74 00:04:29.920 --> 00:04:34.839 was used. And then we started to see this proliferation 75 00:04:34.959 --> 00:04:36.720 of other Again. 76 00:04:36.639 --> 00:04:39.319 A question before you move on. You said that it 77 00:04:39.439 --> 00:04:42.639 was mostly used in the rails world, and I assume 78 00:04:42.759 --> 00:04:45.839 dGH created it for rails for those who don't know, 79 00:04:45.959 --> 00:04:51.759 the also created rails. Yes, but was there anything specific 80 00:04:51.800 --> 00:04:55.160 in the technology that kind of precluded it from being 81 00:04:55.279 --> 00:04:59.000 used with other back end systems I don't know, PHP, whatever. 82 00:05:00.000 --> 00:05:03.000 In other words, if someone uses it without Ruby, you 83 00:05:03.000 --> 00:05:04.920 could say that they went off the rails. 84 00:05:07.399 --> 00:05:11.120 You could take turbo links off the rails. Yes, yeah, 85 00:05:11.439 --> 00:05:16.839 so so in more recent applications they move to Turbo. 86 00:05:17.399 --> 00:05:20.120 And so Turbo does more what you're thinking of with 87 00:05:20.279 --> 00:05:24.920 HTMX right, where you can target specific areas of your app, 88 00:05:25.680 --> 00:05:30.399 and you can you can replace items, you can delete items. 89 00:05:32.439 --> 00:05:36.399 Turbo has a number of different pieces to it, and 90 00:05:36.480 --> 00:05:38.839 this is probably I don't know, I guess stimulus is 91 00:05:38.839 --> 00:05:42.839 probably interesting to more traditional folks as well, But Turbo 92 00:05:43.480 --> 00:05:49.439 Turbo has four pieces to it. We're not going to 93 00:05:49.480 --> 00:05:53.160 talk about Turbo Native because Turbo Native is effectively a 94 00:05:53.279 --> 00:05:58.079 wrapper around your web app that you can use to 95 00:05:58.160 --> 00:06:03.079 deploy and put it up native iOS and Android apps, right, 96 00:06:03.199 --> 00:06:07.560 and so it's it's a completely different technology from the other. 97 00:06:08.279 --> 00:06:12.720 So it's basically a way for me again without you know, 98 00:06:12.959 --> 00:06:17.160 we won't discuss in detail, but just to generally understand, 99 00:06:17.199 --> 00:06:20.639 it's a way to implement a native app using a 100 00:06:20.680 --> 00:06:25.560 web component essentially with the Rails back end driving the system. 101 00:06:26.279 --> 00:06:30.199 You can use any website. It just wraps around the 102 00:06:30.199 --> 00:06:33.600 website and so it turns your website into your web 103 00:06:33.600 --> 00:06:36.319 app or into your native app. And so it's just 104 00:06:36.360 --> 00:06:40.639 a native shell that loads without the Chrome your browser 105 00:06:40.800 --> 00:06:44.279 or a browser with your web application in it. Cool, 106 00:06:44.600 --> 00:06:47.439 and it has a bit more fit so you can 107 00:06:48.399 --> 00:06:52.800 provide some native functionality to it, but it's fairly limited. 108 00:06:53.079 --> 00:06:57.639 And anyway, if you want to just keep the same 109 00:06:57.680 --> 00:07:01.279 experience across your web and native apps, it's actually a 110 00:07:01.279 --> 00:07:05.040 pretty good option. And you know, it does, like I said, 111 00:07:05.120 --> 00:07:08.160 have some tie ins to native things that make it 112 00:07:08.279 --> 00:07:11.519 kind of a nice seamless experience. It's definitely not the 113 00:07:11.600 --> 00:07:16.839 right solution for everybody. But anyway, I've I'm still learning 114 00:07:16.879 --> 00:07:21.720 about turbo natives, so I'm not using it myself. But 115 00:07:21.800 --> 00:07:27.160 the other three elements of turbo turbo drive and what 116 00:07:27.600 --> 00:07:31.319 turbo drive does is essentially what we talked about with turbolinks, right, 117 00:07:31.720 --> 00:07:34.800 And so if you have a link and you've loaded 118 00:07:34.800 --> 00:07:37.680 turbo into your web page and you click the link, 119 00:07:38.120 --> 00:07:41.680 then it will go and it will retrieve the page, 120 00:07:41.879 --> 00:07:46.040 the new page from the server, and it'll bring it 121 00:07:46.120 --> 00:07:49.959 back and then it'll diff it against what's already there, 122 00:07:50.000 --> 00:07:52.600 and it'll only change the pieces that have actually changed. 123 00:07:54.199 --> 00:07:57.800 I'm kind of curious about this diffing mechanism, like, you know, 124 00:07:57.879 --> 00:08:02.759 how sophisticated is it? I mean, you know, all of 125 00:08:03.240 --> 00:08:06.040 the v dome kind of exists to do all the 126 00:08:06.160 --> 00:08:10.879 sorts of a diffing, so like like any parts that 127 00:08:11.040 --> 00:08:13.759 of the page that haven't changed will not be touched, 128 00:08:13.959 --> 00:08:17.199 or you know, how does it reconcile? How does it? 129 00:08:17.279 --> 00:08:23.319 You know the reconciliation is you know, is the is 130 00:08:23.360 --> 00:08:26.680 the challenge, especially if you've got sophisticated pages. 131 00:08:27.759 --> 00:08:32.440 Yeah, it uses another library. I think it's called idiomorph 132 00:08:33.480 --> 00:08:37.559 and and so idiomorph is what does a lot of 133 00:08:37.559 --> 00:08:43.399 the changes under the hood for Turbo. 134 00:08:45.799 --> 00:08:50.360 But basically it kind of it retrieves the new version 135 00:08:50.600 --> 00:08:54.720 but does diffing in order to not replace stuff that 136 00:08:54.799 --> 00:08:55.639 hasn't changed. 137 00:08:56.200 --> 00:08:59.000 Right, So let's say you have like a menu bar 138 00:09:00.039 --> 00:09:04.240 on the top or down the side. You know, maybe 139 00:09:04.240 --> 00:09:07.399 you're clicking a link and it only changes one small 140 00:09:07.440 --> 00:09:11.039 part of the page. When it does, the end rent 141 00:09:11.080 --> 00:09:13.360 to the back end, and when you click the link, 142 00:09:13.720 --> 00:09:16.600 it may give back the HTML for the entire page. 143 00:09:17.159 --> 00:09:19.799 But idiomorph is smart enough to look at the two 144 00:09:20.039 --> 00:09:23.399 and say, I need to merge these right and get 145 00:09:23.440 --> 00:09:26.039 the stuff from the new page into the old page. 146 00:09:26.519 --> 00:09:30.200 And so when you do that, it just replaces that 147 00:09:30.279 --> 00:09:32.360 one piece of the page instead of re rendering the 148 00:09:32.519 --> 00:09:33.200 entire page. 149 00:09:33.440 --> 00:09:36.200 Now I'm not obviously, I'm not familiar with it because 150 00:09:36.240 --> 00:09:39.320 I'm basically learning about it from you right now. But 151 00:09:39.600 --> 00:09:42.279 there are like three big advantages to this type of 152 00:09:42.279 --> 00:09:46.600 an approach. One is, of course, that you avoid unnecessary flashing. 153 00:09:46.759 --> 00:09:48.399 Like you said, if you've got the menu on the 154 00:09:48.480 --> 00:09:51.399 side and the menu at the top, if they haven't changed, 155 00:09:51.480 --> 00:09:54.120 you don't want them rerendered. You just want them to 156 00:09:54.159 --> 00:09:57.600 stay where they are, and you know, stay put and 157 00:09:57.720 --> 00:10:00.759 avoid the flash of them being arrested and then re rendered. 158 00:10:01.480 --> 00:10:06.200 Another advantage is that if you've got various form elements 159 00:10:06.200 --> 00:10:10.320 that you've already put stuff in as a user, you 160 00:10:10.399 --> 00:10:13.919 don't want them reloading and losing their content. So, for example, 161 00:10:13.919 --> 00:10:17.279 if you type something into a textbox, if the textbox 162 00:10:17.360 --> 00:10:20.840 re renders, then effectively it can lose whatever was in 163 00:10:20.879 --> 00:10:25.360 it if you've not taken special steps for preserving that stuff. 164 00:10:25.840 --> 00:10:29.320 So again, if you avoid re rendering those stuff that stuff, 165 00:10:29.519 --> 00:10:34.320 that makes it easier not losing the contents of form 166 00:10:34.440 --> 00:10:37.080 data just because I don't know, you updated some counter 167 00:10:38.120 --> 00:10:41.200 at the top of the page or whatever. And another 168 00:10:41.320 --> 00:10:46.159 reason is to avoid videos from jumping to the start. 169 00:10:46.279 --> 00:10:50.080 If you reload the video element, the video will you 170 00:10:50.440 --> 00:10:53.320 go back to the beginning, and which is often not 171 00:10:53.440 --> 00:10:56.039 what you want if the effect that you want to 172 00:10:56.240 --> 00:10:58.799 create is the user just staying where they are. 173 00:11:00.120 --> 00:11:03.120 Yeah, one, there are a couple of other things. One 174 00:11:03.159 --> 00:11:04.919 is your scroll position. 175 00:11:05.519 --> 00:11:12.320 M hmm, can kind of handle it, but yeah. 176 00:11:12.080 --> 00:11:14.600 Yeah, but but if you if you click to the 177 00:11:14.639 --> 00:11:17.240 next page, a lot of times it will take you 178 00:11:17.279 --> 00:11:20.240 to the top of that page. And in this case 179 00:11:20.279 --> 00:11:22.679 it doesn't because all it does is again it just 180 00:11:22.759 --> 00:11:25.799 merges the page in where you want. I could I 181 00:11:25.840 --> 00:11:28.159 could see where maybe you don't want that all the time, 182 00:11:28.200 --> 00:11:34.960 but it's it's a pretty nice feature. And I think 183 00:11:35.000 --> 00:11:39.559 that was the only other benefit that you didn't bring up, 184 00:11:39.559 --> 00:11:45.799 but that, Yeah, essentially, that's that's how that goes together. 185 00:11:46.600 --> 00:11:50.600 And anyway, it's it's pretty nice. It's uh. I found 186 00:11:50.600 --> 00:11:55.840 that it has sped up the the rendering and work 187 00:11:55.919 --> 00:12:01.559 on my web pages where I use it, and you 188 00:12:01.639 --> 00:12:03.759 just install Turbo and it just kind of does this thing. 189 00:12:03.879 --> 00:12:05.879 Now that it does have an API, so you can 190 00:12:06.080 --> 00:12:08.960 tell it how you want it to operate, but for 191 00:12:09.000 --> 00:12:11.360 the most part, it just is kind of an automatic. 192 00:12:11.840 --> 00:12:14.960 So a few questions about it, again as somebody who's 193 00:12:15.000 --> 00:12:18.519 really not so familiar with the technologies, and it kind 194 00:12:18.559 --> 00:12:22.519 of related to some concerns that I had when we 195 00:12:22.559 --> 00:12:30.320 spoke with Carson about HTMX. Is how it works with 196 00:12:31.080 --> 00:12:36.720 the browser's history, like when you back and forward, how 197 00:12:36.759 --> 00:12:39.759 smart it is it about things, how well does it 198 00:12:40.159 --> 00:12:44.440 work with the address bar which kind of goes together 199 00:12:44.480 --> 00:12:48.600 with the history, and also how well does it work 200 00:12:48.679 --> 00:12:49.879 with browser caching. 201 00:12:52.320 --> 00:12:57.399 Yeah, honestly, I haven't had any problems with the history 202 00:12:57.480 --> 00:13:04.679 back and forward with that, now we get into turbo 203 00:13:05.240 --> 00:13:08.960 turbo frames and turbo streams. Yeah, that that's a little 204 00:13:08.960 --> 00:13:14.840 bit different. But with with turbo drive itself, I haven't 205 00:13:14.840 --> 00:13:18.279 had any issues, so you know. And and in rails, 206 00:13:18.360 --> 00:13:22.120 nearly every page loads using turbo drive, you know, once 207 00:13:22.159 --> 00:13:25.279 you click a link it and so that that's worked 208 00:13:25.279 --> 00:13:28.480 pretty seamlessly. And I do weird stuff in rails sometimes, 209 00:13:28.480 --> 00:13:31.679 and it seems to work, So I'm for that. 210 00:13:31.960 --> 00:13:34.200 Is it called kind of curious? Why is it called 211 00:13:34.279 --> 00:13:38.960 turbo drive? Like, is it the drive related to turbo 212 00:13:39.399 --> 00:13:43.360 the fact that it drives faster or somehow related to. 213 00:13:43.639 --> 00:13:44.399 I have no idea. 214 00:13:45.480 --> 00:13:49.879 DHH is a race car driver, Okay, okay, he is, But. 215 00:13:51.480 --> 00:13:52.879 Yeah, I don't know. I don't know why they called 216 00:13:52.879 --> 00:13:54.039 it turbo turbo drive. 217 00:13:54.879 --> 00:13:57.120 Thought I thought that. I thought the PHP guys were 218 00:13:57.159 --> 00:13:59.000 supposed to have the lambos. 219 00:13:59.480 --> 00:14:02.840 Well, you know, there's a lot of joint a lambo group. 220 00:14:02.919 --> 00:14:04.799 There's a lot of problems with Lambo's. 221 00:14:06.360 --> 00:14:09.039 Not they're pretty Let's put it this way, it's probably 222 00:14:09.080 --> 00:14:11.600 not not the sort of problems that I need to 223 00:14:11.600 --> 00:14:14.080 contend with, So. 224 00:14:14.000 --> 00:14:15.039 You probably shouldn't get away. 225 00:14:15.080 --> 00:14:16.960 That's a problem. Is a problem. 226 00:14:17.000 --> 00:14:21.159 I would like to have, okay for me cars for me, 227 00:14:21.279 --> 00:14:23.879 cars mostly ways to get from point A to point B. 228 00:14:25.200 --> 00:14:27.600 So I'm gonna jump in he real quick. And obviously 229 00:14:27.639 --> 00:14:31.519 you guys are talking about Taylor Otwell and his orange lambeau. 230 00:14:32.639 --> 00:14:38.679 But being a devoted inertia JS fanboy has been well 231 00:14:38.720 --> 00:14:40.480 documented here, I'm going to say a lot of this 232 00:14:41.120 --> 00:14:44.960 is very similar. I think it's maybe the same thing 233 00:14:45.080 --> 00:14:48.759 with just slightly different implementations in terms of what I 234 00:14:48.799 --> 00:14:50.480 see in inertia and what I use in innertia on 235 00:14:50.519 --> 00:14:55.639 a regular basis, In terms of only loading certain parts 236 00:14:55.639 --> 00:14:58.360 of the page, you know, being able to make a 237 00:14:58.440 --> 00:15:04.200 query and get specific in preventing or controlling where the 238 00:15:04.240 --> 00:15:07.759 page rolls too after a change is updated, just a 239 00:15:07.879 --> 00:15:10.559 general speed of it in terms of how that it works. 240 00:15:10.559 --> 00:15:15.279 So it's just from listening to Chuck and reading to 241 00:15:15.399 --> 00:15:19.279 the documentation, it's it's sort of just a different implementation 242 00:15:19.360 --> 00:15:21.080 of the same idea. 243 00:15:22.320 --> 00:15:25.080 I'm really not surprised that there's a sort of a 244 00:15:25.120 --> 00:15:29.320 convergent evolution. I mean, if you want to drive more 245 00:15:29.399 --> 00:15:33.799 dynamic web pages and a more dynamic experience for web users, 246 00:15:34.440 --> 00:15:39.000 but don't want to build like React application on the 247 00:15:39.039 --> 00:15:41.879 front end. It kind of they kind of all pushes 248 00:15:41.919 --> 00:15:42.960 you in the same direction. 249 00:15:43.120 --> 00:15:46.960 I guess, yeah, and that's that's where a lot of 250 00:15:46.960 --> 00:15:53.279 this came out of, both with stimulus and turbo is. Yeah. 251 00:15:53.399 --> 00:15:58.159 The feeling is in communities that I talked to outside 252 00:15:58.200 --> 00:16:01.480 of this one, where you know people generally embrace React 253 00:16:02.240 --> 00:16:07.200 is that, yeah, we we don't necessarily need a framework 254 00:16:07.879 --> 00:16:13.000 that takes over the entire page. We don't need you know, 255 00:16:13.039 --> 00:16:17.519 we don't need the heavy handed approach that React has. 256 00:16:18.840 --> 00:16:22.279 You know, DH calls them JavaScript sprinkles, right, So you 257 00:16:22.360 --> 00:16:24.480 just put in what you need where you need it. 258 00:16:25.279 --> 00:16:30.639 And I have to admit I really like that approach 259 00:16:30.759 --> 00:16:33.840 as as far as it goes. And so you know, 260 00:16:34.279 --> 00:16:35.960 look at the way that we used to build things with, 261 00:16:36.080 --> 00:16:39.559 say jQuery, right, and so you would have a jQuery 262 00:16:39.600 --> 00:16:42.960 plug in, you would tell it to act or react 263 00:16:43.000 --> 00:16:47.600 on a specific dam element, and you know, you would 264 00:16:47.639 --> 00:16:50.159 get what you wanted where you wanted it, and that 265 00:16:50.200 --> 00:16:55.320 would kind of be the entire story. And so you know, 266 00:16:57.080 --> 00:17:01.600 it's it's not necessarily an approach that is unfamiliar to people, 267 00:17:03.519 --> 00:17:05.799 at least in principle, but a lot of the ideas 268 00:17:06.039 --> 00:17:08.319 behind how it's put together and why it works the 269 00:17:08.359 --> 00:17:10.440 way it works are definitely not new. 270 00:17:12.440 --> 00:17:16.079 Is it also like HGMX driven by attributes that you 271 00:17:16.160 --> 00:17:17.759 put on the HTML elements? 272 00:17:19.640 --> 00:17:24.160 Yes, yes, stimulus much more than turbo, but yes. 273 00:17:25.440 --> 00:17:27.039 Now you can see it on the very front page 274 00:17:27.039 --> 00:17:28.319 of the stimulus stocks. 275 00:17:28.839 --> 00:17:32.359 So what is stimulus versus Turbo or are you still talking 276 00:17:32.400 --> 00:17:33.039 about turbo? 277 00:17:33.880 --> 00:17:36.519 I still wanted to cover a couple more things with Turbo, 278 00:17:36.599 --> 00:17:40.119 So Turbo has a couple of other features. Again, if 279 00:17:40.200 --> 00:17:43.440 you're familiar with HTMX, these are going to sound fairly familiar. 280 00:17:44.599 --> 00:17:48.200 So one other thing you could do with Turbo is 281 00:17:48.240 --> 00:17:51.799 you can break your page up into Turbo frames. And 282 00:17:51.880 --> 00:17:56.720 so the different Turbo frames are effectively dom elements in 283 00:17:56.759 --> 00:18:01.960 your application that you can and target for specific things. 284 00:18:02.720 --> 00:18:05.400 And typically what you do is you use them in 285 00:18:05.440 --> 00:18:09.720 conjunction with turbo streams. And turbostream is where you send 286 00:18:09.720 --> 00:18:12.480 the request back to the server with a specific header 287 00:18:12.799 --> 00:18:16.720 saying this is a turbostream, and then the turbostream responds 288 00:18:17.400 --> 00:18:21.720 with new Turbo frames that either say delete this element 289 00:18:22.000 --> 00:18:27.519 or replace the contents of this element, or there are 290 00:18:27.519 --> 00:18:29.200 a whole bunch of different ones that you can do 291 00:18:30.920 --> 00:18:37.680 that have different actions. You replace, update, append, prepend, You 292 00:18:37.720 --> 00:18:40.440 can add something before, you can add something after. You 293 00:18:40.480 --> 00:18:43.519 can just tell it to refresh the turboframe. 294 00:18:45.440 --> 00:18:47.960 So these are kind of like ie frames in a 295 00:18:48.079 --> 00:18:52.160 logical sense that they represent parts of the page that 296 00:18:52.400 --> 00:18:57.240 update separately. But they're not implemented I would guess as 297 00:18:57.400 --> 00:18:58.559 actual eye frames. 298 00:18:58.720 --> 00:18:59.079 No, they're not. 299 00:19:00.000 --> 00:19:06.359 Whether they're just placeholders. I guess that you can update 300 00:19:06.400 --> 00:19:09.640 the content of in various different ways. 301 00:19:10.160 --> 00:19:15.759 Right, So for example, if I filled in a form 302 00:19:16.680 --> 00:19:19.599 and when it did the post, it sent the post 303 00:19:19.599 --> 00:19:23.599 as a turbo stream instead of a and and you 304 00:19:23.599 --> 00:19:26.079 know the return header it's saying, give me a turbo 305 00:19:26.079 --> 00:19:30.559 stream back instead of an HTML header or an HTML page. 306 00:19:30.599 --> 00:19:32.279 What you what you would get back, as you could, 307 00:19:32.319 --> 00:19:34.680 you would get back a series of turbo frames in 308 00:19:34.720 --> 00:19:40.599 your turbo stream. And the turbo frames might say replace 309 00:19:41.079 --> 00:19:46.960 the user's name turbo frame with the new name, and 310 00:19:47.039 --> 00:19:51.559 replace the user's avatar turbo frame. Right, you put a 311 00:19:51.559 --> 00:19:53.440 turbo frame around that, And so you can tell it 312 00:19:53.480 --> 00:19:55.480 to replace all of those or update all of those, 313 00:19:56.200 --> 00:19:59.240 and uh, you know, or if you're doing you using 314 00:19:59.359 --> 00:20:02.640 a turbo turbo streams for comments, right, you have a 315 00:20:02.640 --> 00:20:07.240 turbo frame around your series of comments, and then when 316 00:20:07.319 --> 00:20:11.079 you submit the comment form, instead of making an end 317 00:20:11.119 --> 00:20:13.400 run to the server and getting back a full new 318 00:20:13.440 --> 00:20:16.440 page with the comment added, it just sends back the 319 00:20:16.559 --> 00:20:20.640 HTML snippet with the comment, and it's inside of a 320 00:20:20.640 --> 00:20:24.559 turbo frame that says append this to the comments element 321 00:20:24.640 --> 00:20:25.880 or to the comments turbo frame. 322 00:20:26.519 --> 00:20:30.200 Now, again, obviously I'm not really familiar with it, as 323 00:20:30.240 --> 00:20:32.720 I've never used it and I'm mostly learning about it 324 00:20:32.880 --> 00:20:36.400 listening to you right now. But it does seem on 325 00:20:36.440 --> 00:20:38.480 the face of it that it would be a good 326 00:20:38.559 --> 00:20:42.240 candidate to use in conjunction with the web components. I 327 00:20:42.279 --> 00:20:44.720 don't know if that's maybe what they're doing or not. 328 00:20:44.960 --> 00:20:48.599 If they're not, maybe it's something to consider, because that 329 00:20:48.720 --> 00:20:56.200 would really create a strong separation between the various turbo frames, like, 330 00:20:56.359 --> 00:20:59.079 for example, thanks to the shadow dom it would mean 331 00:20:59.160 --> 00:21:03.200 that SS from one would not impact the other unless 332 00:21:03.440 --> 00:21:05.920 you know you specifically want to and stuff like that. 333 00:21:06.039 --> 00:21:10.359 It would create an interesting, like clean separation between the 334 00:21:10.440 --> 00:21:15.359 various frames. But again, I'm just saying this as a 335 00:21:15.640 --> 00:21:17.599 thought that occurs to me off the top of my head. 336 00:21:18.319 --> 00:21:20.720 By the way, I don't know, just as an aside 337 00:21:21.079 --> 00:21:23.240 and we won't go there. But there's been all this 338 00:21:23.440 --> 00:21:27.240 brew a ha about web components all over again. So 339 00:21:27.960 --> 00:21:31.480 you know we were due, Yeah we were, do you. 340 00:21:32.640 --> 00:21:38.319 Ryan Carniato, a friend of the show, wrote scathing commentary 341 00:21:38.359 --> 00:21:40.759 about it and got all the brew haha started all 342 00:21:40.799 --> 00:21:41.279 over again. 343 00:21:41.839 --> 00:21:46.039 Anyway, Yeah, I honestly I haven't looked at the code 344 00:21:46.039 --> 00:21:49.079 base for Turbo, so I don't know if they're using 345 00:21:49.200 --> 00:21:52.680 web components or not. But yeah, you do put in 346 00:21:52.799 --> 00:21:58.079 a turbo frame tag, you know, and. 347 00:21:58.160 --> 00:22:00.279 That's an interesting Yeah, sorry. 348 00:22:00.119 --> 00:22:03.839 Gone, when you respond again, you you were you respond 349 00:22:03.920 --> 00:22:05.279 with the turbo frame tag. 350 00:22:05.519 --> 00:22:12.079 So that's an interesting difference from HDMX, where they Carson 351 00:22:12.240 --> 00:22:16.559 Gross kind of intentionally did not create special elements as 352 00:22:16.599 --> 00:22:21.680 targets and rather made it possible to use any dom 353 00:22:21.720 --> 00:22:28.079 element as a target for for updates. Yeah, so it's 354 00:22:28.119 --> 00:22:34.240 an interesting distinction between the turbo drive philosophy and HDMX. 355 00:22:35.839 --> 00:22:42.400 Yeah. I believe you can work around things without the frame, 356 00:22:42.559 --> 00:22:46.559 but it's much it's much easier to just go with 357 00:22:46.640 --> 00:22:50.599 the frames. That's how it's designed to work. But yeah, 358 00:22:50.599 --> 00:22:53.400 I mean that's that's effectively the ins and outs of 359 00:22:53.400 --> 00:22:58.880 of turbo and so yeah, I gave some examples. I've 360 00:22:58.960 --> 00:23:04.160 updated menus and menu items, I've updated you know other things. 361 00:23:04.279 --> 00:23:06.279 I mean, one one place that I've used it is 362 00:23:06.480 --> 00:23:12.960 I've loaded a modal and so effectively used stimulus with 363 00:23:13.279 --> 00:23:17.039 turbo to update the modal contents and then you stimulus 364 00:23:17.079 --> 00:23:17.720 to make it appear. 365 00:23:18.880 --> 00:23:23.720 So so again, now can you now explain what stimulus is. 366 00:23:23.680 --> 00:23:30.200 Right, So, stimulus is it's a model of you controller 367 00:23:31.440 --> 00:23:42.400 approach to HTML or to manipulating your dom and so effectively, 368 00:23:43.240 --> 00:23:45.720 the way that it works is you assign a controller 369 00:23:46.160 --> 00:23:49.440 to a section of your code, so you know, usually 370 00:23:49.480 --> 00:23:52.119 what you'll see is you'll see a div is placed 371 00:23:52.119 --> 00:23:54.640 around the area that you want your your controller to 372 00:23:54.680 --> 00:24:00.759 work on, and then you can define. There are a 373 00:24:00.839 --> 00:24:06.160 number of different elements you can use within stimulus to 374 00:24:06.559 --> 00:24:09.279 make a lot of this work. So the kind of 375 00:24:09.319 --> 00:24:15.680 the big ones are actions and targets. And what you 376 00:24:15.720 --> 00:24:18.160 do is you have data. You use a data elements, 377 00:24:18.200 --> 00:24:21.319 so data dash whatever. Right, So let's say your controller 378 00:24:21.519 --> 00:24:25.960 is you want drop down menu, so you have a 379 00:24:26.000 --> 00:24:31.440 drop down menu controller, so you're on your menu where 380 00:24:31.440 --> 00:24:33.680 you have the drop down menu. You would have a 381 00:24:33.759 --> 00:24:37.880 data dash controller attribute and you would assign it menu 382 00:24:38.119 --> 00:24:42.039 dash drop down right, and so that tells it this 383 00:24:42.279 --> 00:24:46.119 area is all operating under a single instance of the 384 00:24:46.160 --> 00:24:50.839 menu drop down controller. And then and then from there 385 00:24:50.920 --> 00:24:53.920 you can assign actions and that's usually on links and 386 00:24:53.960 --> 00:24:58.000 buttons where if you click it. You can also put 387 00:24:58.000 --> 00:25:00.599 it on other elements, so you can have it on forms, 388 00:25:01.519 --> 00:25:05.319 you can have them actions on all kinds of other things. 389 00:25:05.599 --> 00:25:08.240 And so what you have there is then you have 390 00:25:08.319 --> 00:25:11.599 a data action element. 391 00:25:13.119 --> 00:25:17.119 So it's kind of like it sounds kind of like 392 00:25:17.920 --> 00:25:22.640 an angular style templating approach to doing things, but instead 393 00:25:22.680 --> 00:25:26.359 of creating your own templating language on top of the 394 00:25:26.519 --> 00:25:32.599 HTML syntax, you're just making do mostly with HTML standard 395 00:25:32.680 --> 00:25:34.720 data elements data. 396 00:25:34.680 --> 00:25:41.400 Yeah, basically, So then the targets are effectively you're telling 397 00:25:41.440 --> 00:25:45.759 the controller you need to know where this dumb element 398 00:25:45.880 --> 00:25:49.400 is right, and so then in the action you tell 399 00:25:49.440 --> 00:25:54.240 it on a click call this function in your controller. 400 00:25:54.359 --> 00:25:57.119 And the function is what is it JavaScript on the 401 00:25:57.160 --> 00:25:57.839