WEBVTT 1 00:00:05.280 --> 00:00:08.759 Hey, folks, welcome back to another episode of JavaScript Jabber. 2 00:00:09.000 --> 00:00:11.199 This week, on our panel, we have Dan Shapiir. 3 00:00:11.039 --> 00:00:13.800 Hello from a very warm tut a Beef. 4 00:00:14.039 --> 00:00:17.280 We also have Steve Edwards, Hello from the sunny and 5 00:00:17.280 --> 00:00:19.480 clear Portland. And Dan, I must say that last week 6 00:00:19.519 --> 00:00:21.600 I was down in Arizona at my parents, and I 7 00:00:21.640 --> 00:00:23.239 think the weather is more like where you are. 8 00:00:24.519 --> 00:00:28.920 Well, I assume Arizona is dryer. Oh yeah on the coast, 9 00:00:29.079 --> 00:00:30.000 so yeah. 10 00:00:29.800 --> 00:00:32.520 Yeah, oh, I say, yeah, it's very very dry there, 11 00:00:32.759 --> 00:00:34.079 like one hundred degrees fahrenheit. 12 00:00:34.200 --> 00:00:34.439 Yeah. 13 00:00:34.439 --> 00:00:36.679 My son's on the mission in South Carolina and he 14 00:00:36.840 --> 00:00:39.880 was talking about how it gets hot there and I'm 15 00:00:39.920 --> 00:00:40.880 hot here and I'm like. 16 00:00:41.600 --> 00:00:44.200 Yeah, and humid there. Yeah. 17 00:00:44.280 --> 00:00:46.840 Yeah, when I lived in Italy that that was the case. 18 00:00:46.880 --> 00:00:48.880 Too much more human there. 19 00:00:48.960 --> 00:00:51.640 I'm Charles Maxwood from Top End Devs and this week 20 00:00:51.679 --> 00:00:53.799 we have our friend Hadar here. Do you want to 21 00:00:53.799 --> 00:00:56.119 introduce yourself or does Dan want to introduce you? 22 00:00:56.159 --> 00:00:56.520 I don't know. 23 00:00:58.200 --> 00:01:00.560 Yeah, I can go for it definitely. My name is 24 00:01:00.600 --> 00:01:03.920 a Dargeva and I'm the cito and co founder of 25 00:01:04.239 --> 00:01:10.519 Mao Dotev, a pretty small startup company. Yeah, currently at 26 00:01:10.680 --> 00:01:14.400 Tel Aviv originally in the past year and a half 27 00:01:14.480 --> 00:01:17.799 living in Thailand, currently visiting family and friends here in 28 00:01:17.799 --> 00:01:21.560 Tel Aviv. Where have you been in Thailand in the islands, 29 00:01:21.719 --> 00:01:23.599 Samoikopanghan took some. 30 00:01:23.519 --> 00:01:26.239 Break, just spent two years. My daughter just spent two 31 00:01:26.280 --> 00:01:28.959 years in Chang Mai. I went visited her there a 32 00:01:28.959 --> 00:01:30.719 little while ago. But that's not farther north. 33 00:01:31.480 --> 00:01:33.159 Mm hmm, yeah, yeah, yeah. 34 00:01:33.200 --> 00:01:35.879 It sounds exotic, which means I want to travel there someday. 35 00:01:36.879 --> 00:01:41.439 You should, you should, and you actually about heat and 36 00:01:41.519 --> 00:01:43.519 humidity till you go there and got this time. 37 00:01:43.599 --> 00:01:48.079 Yeah, but you know, it's really it's really nice when 38 00:01:48.159 --> 00:01:52.040 you're combining like our kind of jobs with the tech industry, 39 00:01:52.159 --> 00:01:56.319 doing what you know to do with these exotic places 40 00:01:56.480 --> 00:02:00.439 and like a kind of not so developed countries. I 41 00:02:00.519 --> 00:02:02.519 found it like a really nice. 42 00:02:02.319 --> 00:02:04.280 Match digital nomad lifestyle. 43 00:02:04.359 --> 00:02:06.319 Huh yeah, yeah, good, very cool. 44 00:02:06.719 --> 00:02:09.240 So I don't know who wants to introduce the topic. 45 00:02:09.360 --> 00:02:11.240 We kind of had some back and forth on the title, 46 00:02:11.360 --> 00:02:13.759 So I'm gonna let somebody else do it because I 47 00:02:13.759 --> 00:02:14.759 think I would screw it up. 48 00:02:16.719 --> 00:02:19.159 Now you wanna you wanna set the stage? I think 49 00:02:19.199 --> 00:02:20.039 that would be best. 50 00:02:20.960 --> 00:02:24.960 Yeah, yeah, I think I think we can talk today 51 00:02:25.000 --> 00:02:28.879 about like a mix and match of technologies in the 52 00:02:28.960 --> 00:02:32.159 in the front end area, and with all what's going 53 00:02:32.199 --> 00:02:35.800 on nowadays with the AI, with the multi frameworks, with 54 00:02:36.240 --> 00:02:38.599 all the things that's going around with the vibe coding, 55 00:02:38.719 --> 00:02:41.080 and you know, the builders of the world, and this 56 00:02:41.159 --> 00:02:43.439 is also what they were doing in the company. So 57 00:02:43.719 --> 00:02:47.520 I found it like interesting, So yeah, let's dig in. 58 00:02:47.639 --> 00:02:51.479 Yeah, it's it's funny because as it happens, I'm literally 59 00:02:51.800 --> 00:02:55.360 work dealing with that at the company that I'm working 60 00:02:55.400 --> 00:02:59.360 at at Size Sense, where we have this like an 61 00:02:59.400 --> 00:03:05.439 overarching framework or view that's like tabed view of shows 62 00:03:05.520 --> 00:03:08.479 certain parts of the application. You know, we are a 63 00:03:08.520 --> 00:03:13.240 business intelligence application, so you've got a modeling view where 64 00:03:13.400 --> 00:03:17.159 you specify the data sources and the data sets that 65 00:03:17.199 --> 00:03:21.599 you're working with, you connect to various external databases. That's 66 00:03:21.680 --> 00:03:24.879 one view, and then you have an analytics view where 67 00:03:24.879 --> 00:03:27.719 you build all sorts of dashboards and stuff like that, 68 00:03:28.159 --> 00:03:32.639 and they're all implemented. It's like tabs in the main page, 69 00:03:33.240 --> 00:03:38.039 but in reality what they are are distinct effectively Web applications, 70 00:03:38.240 --> 00:03:43.400 and that main framework loads the when you enter a 71 00:03:43.400 --> 00:03:46.360 specific view, it needs to load that view on demand, 72 00:03:47.400 --> 00:03:51.159 and that view might be implemented in various different frameworks. 73 00:03:52.280 --> 00:03:57.360 For example, the modeler is implemented in React, the analytics 74 00:03:57.400 --> 00:03:59.520 one is kind of legacy, where in the process of 75 00:03:59.560 --> 00:04:04.039 replacing it, the current one is still implemented in Angular, 76 00:04:04.680 --> 00:04:07.479 and there are other views implemented in other things, and 77 00:04:07.759 --> 00:04:10.800 even the customer can add their own custom views that 78 00:04:10.840 --> 00:04:14.120 they can implement in whatever they want. So that seems 79 00:04:14.159 --> 00:04:16.839 to be exactly the scenario that you're talking about. 80 00:04:17.360 --> 00:04:20.959 So in that scenario that you're presenting, how you actually 81 00:04:21.000 --> 00:04:21.720 implemented it. 82 00:04:21.959 --> 00:04:24.720 Well, you know, one of the reasons that I'm currently 83 00:04:24.759 --> 00:04:27.240 looking at it is that it was implemented in a 84 00:04:27.279 --> 00:04:31.079 legacy sort of way several years ago. So it was 85 00:04:31.160 --> 00:04:37.480 a hand built kind of framework, effectively built using native 86 00:04:37.800 --> 00:04:42.000 JavaScript and dorm operations. They kind of based it on 87 00:04:42.199 --> 00:04:49.120 the now defunct Google Closure library, but they mostly did 88 00:04:49.160 --> 00:04:54.160 it by hand. And I'm looking at ways to modernize it, 89 00:04:54.240 --> 00:04:58.040 and I'm thinking about effectively looking at the possibility of 90 00:04:58.079 --> 00:05:00.279 reimplementing the whole thing and React. Yeah. 91 00:05:00.360 --> 00:05:03.480 Yeah, So it sounds familiar like a lot of companies 92 00:05:03.680 --> 00:05:08.079 facing these kind of issues, either creating like a manually 93 00:05:08.240 --> 00:05:12.160 bridges like you mentioned like understanding, all right, our host 94 00:05:12.199 --> 00:05:15.480 application is React or Angular, and now we need the 95 00:05:15.519 --> 00:05:18.439 other one. So let's reach between them, which lead to, 96 00:05:19.000 --> 00:05:21.439 first of all, a lot of time spending. Right, you 97 00:05:21.480 --> 00:05:25.279 need to invest in creating those bridges versions specifically most 98 00:05:25.319 --> 00:05:30.879 of the time. Right when React nineteen or twenty published, 99 00:05:30.920 --> 00:05:34.519 you need to fix your API and do whatever things 100 00:05:34.920 --> 00:05:38.519 or Another variant of implementation that I'm hearing a lot 101 00:05:39.560 --> 00:05:43.759 is like loading kind of microphone and in iprams. Right, 102 00:05:44.399 --> 00:05:46.720 this is another things that are going on for. 103 00:05:47.920 --> 00:05:51.839 The problem with microft we're using. So one option is, 104 00:05:52.319 --> 00:05:55.040 like you said, I frames, but that creates a really 105 00:05:55.160 --> 00:05:59.720 rough separation. It's more much more difficult to pass data 106 00:05:59.800 --> 00:06:02.879 back and forth. You don't just pass props into a 107 00:06:02.879 --> 00:06:07.360 component for example, but it does, like you said, it 108 00:06:07.399 --> 00:06:12.160 does create a much like more hard and clear separation 109 00:06:12.720 --> 00:06:16.680 between the container the containing. Another option that used to 110 00:06:16.680 --> 00:06:19.519 be talked about a lot. I'm hearing about it less 111 00:06:20.120 --> 00:06:24.360 is web components that you wrap the internal thing in 112 00:06:24.399 --> 00:06:28.000 a web component. You create a separation that way, but 113 00:06:28.120 --> 00:06:31.399 they actually still live within the same frame, so it's 114 00:06:31.920 --> 00:06:34.920 less of a segregation between the two. And you can 115 00:06:35.160 --> 00:06:38.600 do all sorts of things with the module federation, I guess, 116 00:06:38.680 --> 00:06:42.480 and even the built in import mechanism that you have 117 00:06:42.600 --> 00:06:46.639 in modern browsers yea. And if you look and if 118 00:06:46.680 --> 00:06:50.800 you look at advanced loaders like VAT and stuff like that, 119 00:06:50.879 --> 00:06:52.839 they can do a lot of the heavy lifting for 120 00:06:52.879 --> 00:06:58.000 you as well. So I just to finish the code 121 00:06:58.040 --> 00:07:00.800 that the legacy code that I'm looking at. They actually 122 00:07:00.839 --> 00:07:03.360 did this. They're kind of an old school way. They 123 00:07:03.399 --> 00:07:08.079 didn't go with iframes. Instead, they kind of forced up 124 00:07:08.199 --> 00:07:11.160 the scripts that you want to load to be placed 125 00:07:11.160 --> 00:07:14.519 in a very hard coded sort of way in certain 126 00:07:14.600 --> 00:07:19.399 folders and using certain names and that way. It basically 127 00:07:19.480 --> 00:07:23.480 just creates script tags on the fly and loads it 128 00:07:23.519 --> 00:07:26.600 this way. Yeah, Chuck, sorry for interrupting. No, it's fine. 129 00:07:27.279 --> 00:07:29.519 The question that I have with this because it seems like, 130 00:07:29.800 --> 00:07:32.279 you know, these are all solutions to Okay, we kind 131 00:07:32.319 --> 00:07:35.800 of started in this way, you know, maybe using a 132 00:07:35.839 --> 00:07:39.000 framework or inventing our own framework, and then wait, you know, 133 00:07:39.040 --> 00:07:41.120 we realized that we might be able to be more 134 00:07:41.120 --> 00:07:43.879 productive or get more of what we want or whatever 135 00:07:44.199 --> 00:07:47.600 from another framework. And then you know, maybe you're segregating 136 00:07:47.639 --> 00:07:51.560 between versions because there are reasons why you can't upgrade 137 00:07:51.759 --> 00:07:54.079 the one piece to the other piece, to the same 138 00:07:54.199 --> 00:07:58.439 version of whatever you're using Angular or React or whatever, 139 00:07:58.800 --> 00:08:01.040 and then you know, maybe you start to migrate to 140 00:08:01.199 --> 00:08:03.439 use another technology, and so I can kind of see 141 00:08:03.439 --> 00:08:05.839 how you would wind up coupling this together. My question 142 00:08:06.000 --> 00:08:09.120 is is that are there people that do this on 143 00:08:09.199 --> 00:08:13.120 purpose without having all the historical stuff where they're saying, 144 00:08:13.480 --> 00:08:15.439 you know what, we need a little bit of this 145 00:08:15.600 --> 00:08:17.800 from React and a little bit of this from View 146 00:08:18.720 --> 00:08:20.199 or a little bit of this from you know, one 147 00:08:20.240 --> 00:08:23.920 of the other, maybe some of the smaller frameworks, and 148 00:08:24.000 --> 00:08:26.560 so you know, they blend them on purpose to get 149 00:08:26.720 --> 00:08:30.199 some mix of what they actually need. Or is it 150 00:08:30.240 --> 00:08:33.279 almost exclusively the other thing, where it's we've got a 151 00:08:33.279 --> 00:08:35.200 ton of legacy code and we don't have the time 152 00:08:35.200 --> 00:08:36.039 to migrate at all. 153 00:08:36.200 --> 00:08:40.039 So from my perspective, I think it's mainly the second thing. 154 00:08:40.240 --> 00:08:44.600 It's a not must to be legacy. But even companies 155 00:08:44.600 --> 00:08:48.000 that you know, both other companies are integrated with other 156 00:08:48.720 --> 00:08:55.879 projects or companies that decided a I don't know, to implement, 157 00:08:56.120 --> 00:09:00.639 like to move to a new new framework and the 158 00:09:00.759 --> 00:09:03.519 kind of a legacy is not too old, but now 159 00:09:03.559 --> 00:09:08.039 they want to share components and experiments and and yeah, 160 00:09:08.360 --> 00:09:10.919 and UIs between those two. 161 00:09:11.000 --> 00:09:14.600 The one exception that they can be sorry, just to 162 00:09:14.639 --> 00:09:17.360 mention that it can even be different versions of the 163 00:09:17.399 --> 00:09:21.159 same framework, like if you're life you're large enough organization. 164 00:09:21.480 --> 00:09:25.320 One a group might already be on REACT I don't 165 00:09:25.360 --> 00:09:28.840 know nineteen and another one is still stuck on React seventeen, 166 00:09:29.120 --> 00:09:32.000 and it might be problematic to run them both in 167 00:09:32.080 --> 00:09:32.840 the same page. 168 00:09:33.600 --> 00:09:35.039 Yeah, I mean I can see the same thing in 169 00:09:35.039 --> 00:09:37.960 the view world, where the transition from view to two 170 00:09:38.000 --> 00:09:41.679 to V three is fairly substantial, even though you know 171 00:09:42.080 --> 00:09:45.879 B three has backwards compatibility for the options API, but 172 00:09:46.679 --> 00:09:49.000 you know they're if you were going to make an 173 00:09:49.080 --> 00:09:51.240 upgrade like that, it would be a substantial thing. So 174 00:09:51.639 --> 00:09:55.159 it's perfectly you're not out of the question, you know, 175 00:09:55.240 --> 00:09:58.799 to think of you two versus Q three. You know 176 00:09:59.120 --> 00:10:00.120 that ecosystem. 177 00:10:00.360 --> 00:10:03.320 So is there ever a reason to do this on purpose? 178 00:10:03.519 --> 00:10:06.120 So the one exception that I can say in the 179 00:10:06.480 --> 00:10:12.600 area that we are now experimenting is that more people 180 00:10:12.720 --> 00:10:16.000 or more machines start generating code. And I'm referring to 181 00:10:16.039 --> 00:10:19.519 the AI, right, So let's say that now you have 182 00:10:19.559 --> 00:10:22.600 a view view JAS application and you are fine with it. 183 00:10:22.679 --> 00:10:26.600 Everything works great. But then you go to Gemini, for example, 184 00:10:26.960 --> 00:10:32.120 and asking to generate some component. Gemini exclusively said I 185 00:10:32.159 --> 00:10:35.320 cannot generate view components. I can do it in React 186 00:10:35.559 --> 00:10:38.519 or in pure HTML. And now what you are doing 187 00:10:38.600 --> 00:10:42.360 you are stuck. You either get the output as an inspiration. 188 00:10:42.600 --> 00:10:45.360 All right, I generated something really quick, but now I 189 00:10:45.399 --> 00:10:48.720 need to rewrite it in my framework, which is View. 190 00:10:49.159 --> 00:10:51.879 And by the way, same go with Angular, Same go 191 00:10:52.000 --> 00:10:54.879 with swelt right, which can be a great choice for 192 00:10:55.000 --> 00:10:59.399 some companies in some projects, but now they I limit them. 193 00:10:59.720 --> 00:11:03.039 So I think in this scenario you can in purpose 194 00:11:03.279 --> 00:11:04.440 want to mix a match. 195 00:11:04.559 --> 00:11:06.200 Wait a minute, so let me go back to you 196 00:11:06.279 --> 00:11:09.279 saying that there's some AA models that can write code 197 00:11:09.320 --> 00:11:10.759 in some frameworks but not the other. 198 00:11:11.480 --> 00:11:14.039 Yeah, I was going to say. My experience with this 199 00:11:14.240 --> 00:11:17.360 is not that it can't. It's that some of the 200 00:11:17.519 --> 00:11:22.000 models do better with some languages or frameworks than others. 201 00:11:22.600 --> 00:11:25.440 And so if you're trying to vibe code yourself something 202 00:11:25.600 --> 00:11:27.879 and you want to do it in Angular instead of 203 00:11:27.919 --> 00:11:31.320 React since it's been trained on so much more React, 204 00:11:31.399 --> 00:11:34.279 since that's kind of the dominant framework, you may not 205 00:11:34.480 --> 00:11:38.320 get great results from the Angular and it may take 206 00:11:38.480 --> 00:11:40.759 more work in order to make it work. If you're 207 00:11:40.799 --> 00:11:44.159 not familiar with ANGULAR, you may not recognize that it's 208 00:11:44.159 --> 00:11:47.480 giving you garbage or giving you something that won't entirely work. 209 00:11:47.759 --> 00:11:49.399 So I could see that being an issue too. But 210 00:11:49.559 --> 00:11:52.519 that's my assumption is that, yeah, it's not going to 211 00:11:52.600 --> 00:11:54.440 tell you I don't know Angular, It's just going to 212 00:11:54.440 --> 00:11:56.679 give you something that isn't as refined. 213 00:11:57.440 --> 00:12:00.960 I've yet to Gemini situation. I've had to think, got 214 00:12:00.960 --> 00:12:03.600 to a situation where a model told me I don't 215 00:12:03.639 --> 00:12:07.639 know right. Usually it doesn't. Here you go and it 216 00:12:07.639 --> 00:12:10.759 gives me something totally wrong. Yeah, totally. 217 00:12:10.759 --> 00:12:13.080 It'll make some things up. Yeah, it will make things up, 218 00:12:13.120 --> 00:12:15.399 rather than admit that it doesn't. I saw a news story, 219 00:12:15.840 --> 00:12:18.240 you know, along those lines. I saw a news story 220 00:12:18.559 --> 00:12:22.879 but recently, where a judge had to punish an attorney 221 00:12:22.919 --> 00:12:25.360 because he submitted a brief that was obviously written in 222 00:12:25.440 --> 00:12:28.799 AI and it had submitted. Rather than say, there's no 223 00:12:28.879 --> 00:12:31.240 cases here to back this up, it hit a generated 224 00:12:31.679 --> 00:12:34.639 cases from the past that didn't exist. There's like it 225 00:12:34.759 --> 00:12:37.039 was obvious that he just did this. Nay, I submitted. 226 00:12:37.039 --> 00:12:39.039 It didn't even bother to do any research to make 227 00:12:39.080 --> 00:12:42.559 sure that these cases that were referenced in supporting documents 228 00:12:42.679 --> 00:12:46.360 even existed. Well, so you know, and it's like, so AI, 229 00:12:46.639 --> 00:12:49.960 it seems like it's programmed to not be able to say, sorry, 230 00:12:50.000 --> 00:12:52.559 I don't have anything here, but instead it makes something up. 231 00:12:52.559 --> 00:12:54.279 And that's not the first story I've heard about that. 232 00:12:54.440 --> 00:12:57.399 Well, you have to realize that the large language models, 233 00:12:57.440 --> 00:12:59.759 they don't function by saying what do I know? 234 00:13:00.080 --> 00:13:00.200 Then? 235 00:13:00.200 --> 00:13:01.120 How do I tell you? 236 00:13:01.720 --> 00:13:04.799 It functions by saying, you know, you gave me this prompt, 237 00:13:04.879 --> 00:13:06.639 Here's what I think the first word is going to be. 238 00:13:06.840 --> 00:13:08.480 Here's what I think the next word is going to be. 239 00:13:08.799 --> 00:13:11.159 And it just keeps going, Okay, given that I wrote 240 00:13:11.159 --> 00:13:13.559 the last paragraph, here's what I think the next word's 241 00:13:13.600 --> 00:13:15.399 going to be. Right, And so it takes what it's 242 00:13:15.399 --> 00:13:18.720 already written, and then what's the most recent thing that 243 00:13:18.759 --> 00:13:21.799 it's written, and it just kind of continues to build 244 00:13:21.840 --> 00:13:24.879 onto it. And so what it essentially did in that 245 00:13:24.960 --> 00:13:27.679 case is it said, you know, it had been trained 246 00:13:27.720 --> 00:13:29.799 on all this stuff, and so it just assumed the 247 00:13:29.799 --> 00:13:32.960 next model or the next token in it is as 248 00:13:33.159 --> 00:13:36.279 stated by this case, right, and so then it it 249 00:13:36.320 --> 00:13:38.799 fills it in and so it gives you it makes 250 00:13:38.799 --> 00:13:42.480 it up because it's just predicting that next token and 251 00:13:42.519 --> 00:13:45.000 it's not giving you any real information because that's not 252 00:13:45.000 --> 00:13:45.600 how it works. 253 00:13:46.000 --> 00:13:50.120 And that also means that when you've got more examples 254 00:13:50.159 --> 00:13:55.759 of certain frameworks, say React, right, fewer examples in another framework, 255 00:13:55.799 --> 00:13:56.360 say I don't. 256 00:13:56.200 --> 00:13:59.559 Want more better examples, yes. 257 00:14:00.240 --> 00:14:03.279 Or swelled or something like that. Sometimes it works the opposite, 258 00:14:03.279 --> 00:14:06.679 because sometimes you've got fewer examples, but all the examples 259 00:14:06.720 --> 00:14:10.360 are really good. In that case that actually that's actually 260 00:14:10.440 --> 00:14:13.080 a benefit. But in some cases there might not be 261 00:14:13.200 --> 00:14:15.799 examples of the actual thing that you're trying to achieve, 262 00:14:16.240 --> 00:14:20.440 and that might be a problem. It's sure I meant something. 263 00:14:20.840 --> 00:14:22.919 I'm not sure I know to explain it. But the 264 00:14:22.960 --> 00:14:25.639 scenario that I mentioned actually happened to us a lot 265 00:14:25.840 --> 00:14:29.919 with specifically Gemini. Gemini refused to generate components that are 266 00:14:29.960 --> 00:14:33.159 not React and check all the things that you said are, yeah, 267 00:14:33.399 --> 00:14:36.600 we know them, like it's how the LLMS work. But 268 00:14:36.759 --> 00:14:40.639 probably Google or I don't know, put some extra layer 269 00:14:40.679 --> 00:14:43.960 on top of it in order to that happens to you, Yeah, 270 00:14:44.039 --> 00:14:46.000 don't give you garbage or something like that. 271 00:14:46.000 --> 00:14:48.519 That's interesting because I just use Gemini to rewrite and 272 00:14:48.600 --> 00:14:51.799 view components or to create a you know, components with 273 00:14:51.840 --> 00:14:54.200 a specific style. And you know, I said, here, this 274 00:14:54.240 --> 00:14:55.600 is what I'm looking for, giving me this, and it 275 00:14:55.639 --> 00:14:57.919 did and you know, to tweak it, modified and stuff 276 00:14:57.960 --> 00:14:59.519 for my knees. But it's sped out. 277 00:14:59.600 --> 00:15:00.159 You just I. 278 00:15:00.440 --> 00:15:07.159 Think yesterday Angular So yeah, yeah. 279 00:15:06.879 --> 00:15:08.759 So weird. But yeah, this is what happened to me 280 00:15:08.840 --> 00:15:14.080 yesterday preparing for some meetup talking about you go to Gemini, 281 00:15:14.200 --> 00:15:18.200 ask for pretty simple component like a video player, and 282 00:15:18.240 --> 00:15:20.840 it's refused. He said, I can give it to you 283 00:15:20.919 --> 00:15:23.759 in HTML or in React. I took a screenshot of 284 00:15:23.799 --> 00:15:25.720 it and presented it in their meetup later. 285 00:15:26.399 --> 00:15:30.840 Is that what's called framework discrimination? And maybe I'll give 286 00:15:30.879 --> 00:15:33.840 that a delayed Sure, there we go. 287 00:15:35.360 --> 00:15:38.200 We know that certain you know, in a different context, 288 00:15:38.240 --> 00:15:43.200 certain models have certain political orientations that can be amusing anyway, 289 00:15:43.320 --> 00:15:47.000 going back to tech, So we have a situation where 290 00:15:47.440 --> 00:15:51.559 we have a certain component in a certain framework, let's say, 291 00:15:52.080 --> 00:15:55.240 despite a lot of the you know, let's say the 292 00:15:55.279 --> 00:15:59.000 rest even of the application being a different framework, maybe 293 00:15:59.039 --> 00:16:02.200 because it's leg the code that we don't want to touch, 294 00:16:02.799 --> 00:16:07.000 maybe because we it's two companies merged and one was 295 00:16:07.240 --> 00:16:10.399 standardized on one framework and another on a different framework, 296 00:16:10.840 --> 00:16:14.240 or maybe like you said, because I Vibe coded it 297 00:16:14.279 --> 00:16:17.039 and that's what the LLM gave me. Whatever the reason 298 00:16:17.200 --> 00:16:21.519 I've got, I need to connect code us that implement 299 00:16:21.679 --> 00:16:25.960 a component implemented in one framework into an app web 300 00:16:25.960 --> 00:16:30.720 application implemented in using a different framework. Okay, what do 301 00:16:30.799 --> 00:16:31.039 I do? 302 00:16:31.240 --> 00:16:34.159 So the things that we found the most effective is 303 00:16:34.480 --> 00:16:37.480 again to mix and match, mix and match solutions, and 304 00:16:37.519 --> 00:16:41.080 you mentioned most of them, like you maytion the IPRAM 305 00:16:41.360 --> 00:16:46.440 which is limitation, which is the communication and the fact 306 00:16:46.519 --> 00:16:51.000 that you cannot pass non serializable object there because you 307 00:16:51.039 --> 00:16:54.120 need to use the post message API. And you mentioned 308 00:16:54.159 --> 00:16:58.559 the web component right, which up until recently like here, 309 00:16:58.799 --> 00:17:02.440 here andF or something like that, what's really really limited, 310 00:17:02.759 --> 00:17:06.200 Like React didn't fully support it. View just supported it 311 00:17:06.599 --> 00:17:09.880 fully even a half ago. By the way, Angela was 312 00:17:09.920 --> 00:17:13.400 pretty good in it. But today with the release of 313 00:17:13.960 --> 00:17:19.200 a React nineteen, all the three major frameworks are support 314 00:17:19.359 --> 00:17:24.039 web component really well. Like you can really easy take 315 00:17:24.200 --> 00:17:27.799 your existing component and wrap them most of the time 316 00:17:28.000 --> 00:17:32.799 with the framework Helper View publish their own and Angular 317 00:17:33.880 --> 00:17:37.480 theirs to wrap it as a web component. Then you 318 00:17:37.519 --> 00:17:40.799 are eliminated a lot a lot, a lot of USSEL 319 00:17:41.079 --> 00:17:45.720 because you are talking with pre bundled assets. We're taking 320 00:17:45.799 --> 00:17:49.319 care of all the loading, all the styling, all the isolation. 321 00:17:50.039 --> 00:17:52.440 You can define and we can deep dive into it 322 00:17:52.559 --> 00:17:56.799 into the different modes. Right, we shadowed on without shadowed, 323 00:17:57.319 --> 00:17:59.880 open shadow dome, closed shadow doome. But once you run 324 00:18:00.160 --> 00:18:03.359 this component, you can pass props in and out. The 325 00:18:03.440 --> 00:18:07.880 components still a reactive and can manage its own state. 326 00:18:08.039 --> 00:18:11.039 And once you write a component as a pure component 327 00:18:11.240 --> 00:18:14.200 and not mess with global object or global states, you 328 00:18:14.279 --> 00:18:16.119 good to go and mix and match between them. 329 00:18:16.240 --> 00:18:20.079 So you're suggesting, if I understand it correctly, to take 330 00:18:20.240 --> 00:18:22.880 let's say an existing Let's say I want to embed 331 00:18:22.960 --> 00:18:28.279 an Angular component inside of a React web application. What 332 00:18:28.319 --> 00:18:32.720 you're suggesting is I take the Angular component, wrap it 333 00:18:32.839 --> 00:18:38.559 inside a web component, and then host that web component 334 00:18:38.640 --> 00:18:42.240 within the React application. Is that what you're suggesting. 335 00:18:42.359 --> 00:18:45.440 I'm saying it's a good way to start. Like, first 336 00:18:45.480 --> 00:18:49.759 of all, let's take your scenario. Angular support like wrapping 337 00:18:49.799 --> 00:18:54.960 it for you. You shouldn't do much Angular just expose 338 00:18:55.000 --> 00:18:58.400 a helper function called a web component. Then just give 339 00:18:58.440 --> 00:19:02.880 it your component existing Angular component with a string attached 340 00:19:02.880 --> 00:19:05.799 to it. To define the new tag name, bundle this 341 00:19:06.559 --> 00:19:10.559 application into a JavaScript. Once you load it, the component 342 00:19:10.599 --> 00:19:14.640 will appear every time that this custom tag will append 343 00:19:14.640 --> 00:19:17.200 to the dome. It's not a bullet proof solution, and 344 00:19:17.240 --> 00:19:21.200 we can deep dive into the limitations and edge cases, 345 00:19:21.240 --> 00:19:23.400 but it's a good way to start. 346 00:19:23.599 --> 00:19:25.799 I was going to ask what are the trade offs, 347 00:19:25.839 --> 00:19:28.200 because yeah, it sounds like you get some isolation and 348 00:19:28.400 --> 00:19:29.200 nice stuff out of it. 349 00:19:31.039 --> 00:19:32.079 Yeah, so what. 350 00:19:34.799 --> 00:19:37.319 So the downsuns that out of the box, you're not 351 00:19:37.480 --> 00:19:41.480 getting any model sharing, right because if you wrap some 352 00:19:41.680 --> 00:19:45.039 component with the Angular so it came, it's coming with 353 00:19:45.079 --> 00:19:48.279 the Angular. So the bundle includes the framework that it 354 00:19:48.319 --> 00:19:52.359 depends on. If you're loading only one bundle, it's maybe okay. 355 00:19:52.440 --> 00:19:55.359 But if you're trying to build like a robust system 356 00:19:55.480 --> 00:19:58.880 with a lot of sources for components, you may ended 357 00:19:58.960 --> 00:20:02.359 up by loading on seoul Are multiple times or loading 358 00:20:02.480 --> 00:20:05.839 React multiple times. Right, So this is one thing that 359 00:20:06.000 --> 00:20:09.759 is not coming out of the box. Second thing that 360 00:20:10.079 --> 00:20:14.079 pop into my mind is that you need to dip 361 00:20:14.119 --> 00:20:17.559 a bit into in order to pass like complicated props, 362 00:20:17.599 --> 00:20:22.559 which is not strings because web components is domb elements 363 00:20:22.720 --> 00:20:26.400 dom and HTML is string based, so if you are 364 00:20:26.880 --> 00:20:30.559 passing string let's say name, last name, phone number, you okay, 365 00:20:30.640 --> 00:20:33.279 you just define it and pass it in the HTML. 366 00:20:33.440 --> 00:20:37.440 Once you want to pass functions, objects, call backs, things 367 00:20:37.480 --> 00:20:40.079 like that, you need to start and understand how the 368 00:20:40.119 --> 00:20:43.599 mechanisms work behind the scenes. But again it's a gaps 369 00:20:43.640 --> 00:20:48.480 that those frameworks closed and covered in the past few months. 370 00:20:48.519 --> 00:20:52.000 To be fair, you can pass like you said before, 371 00:20:52.119 --> 00:20:57.480 you can pass serializable objects by serializing the object into 372 00:20:57.519 --> 00:21:01.400 a JSON string. But yes, it certainly does limit you 373 00:21:01.480 --> 00:21:04.279 in what you're able to pass back and forth. If 374 00:21:04.319 --> 00:21:06.680 you want to pass some sort of a callback, which 375 00:21:06.759 --> 00:21:10.720 often you do because you usually want that particular application 376 00:21:10.880 --> 00:21:14.920 to somehow impact its container, that becomes tricky. 377 00:21:15.079 --> 00:21:18.559 Yeah, first of all, totally right. When you're trying to 378 00:21:18.599 --> 00:21:21.519 press functions, stringify will not help you. And on top 379 00:21:21.599 --> 00:21:24.160 of that, with a large object you are not You 380 00:21:24.200 --> 00:21:27.720 don't want to always serialize them as a string and 381 00:21:27.720 --> 00:21:31.279 then de serialize them because you're going to harm the performance. Right, 382 00:21:31.359 --> 00:21:35.960 you want to pass the real object. So again it's possible, 383 00:21:36.319 --> 00:21:38.720 but it's something that you need to understand the mechanism 384 00:21:38.759 --> 00:21:41.079 behind the scenes. Like it's a few lines of cod 385 00:21:41.240 --> 00:21:44.079 but you need to understand it, how React did it, 386 00:21:44.119 --> 00:21:46.720 how Angular did it, how View did it. And if 387 00:21:46.759 --> 00:21:49.759 you want it to be seamless, like I'm in React 388 00:21:49.839 --> 00:21:53.200 hosting Angular components and I just want to pest props 389 00:21:53.440 --> 00:21:56.519 in my J six, you need to understand like the 390 00:21:56.599 --> 00:21:58.480 mechanism behind the top. 391 00:21:58.799 --> 00:22:00.599 Then so go Chuck. 392 00:22:00.920 --> 00:22:02.519 I was just going to say, you know, so let's 393 00:22:02.519 --> 00:22:04.920 say that I do this right. And so I start 394 00:22:04.960 --> 00:22:08.079 setting this up and I start sprinkling some Angular in 395 00:22:08.160 --> 00:22:12.640 my React or you know whatever, and I start seeing, okay, 396 00:22:12.680 --> 00:22:15.640 you know, it loads the Angular six times because I've 397 00:22:15.640 --> 00:22:18.319 got six components in here, or I start seeing some 398 00:22:18.359 --> 00:22:21.519 of these other trade offs start to rear their heads. 399 00:22:21.720 --> 00:22:23.759 How do I start to mitigate that so that it's 400 00:22:23.799 --> 00:22:26.160 not so heavy on my application? 401 00:22:27.119 --> 00:22:27.519