WEBVTT 1 00:00:00.200 --> 00:00:03.399 Welcome to React Roundup, the podcast where we keep you 2 00:00:03.480 --> 00:00:07.080 updated on all things React related. This show is brought 3 00:00:07.080 --> 00:00:11.080 to you by Void and top End Devs. Unvoid provides 4 00:00:11.160 --> 00:00:14.839 high quality design and software development services on a client 5 00:00:14.880 --> 00:00:20.239 friendly business model. Unlike all other software agencies, Unvoid allows 6 00:00:20.239 --> 00:00:24.120 clients to only pay after the work is delivered and approved. 7 00:00:24.600 --> 00:00:28.079 Visit unvoid dot com to learn more and reach out. 8 00:00:28.199 --> 00:00:30.679 If you know a company that needs more professionals to 9 00:00:30.760 --> 00:00:36.000 help with design and software development, that's u n void 10 00:00:36.479 --> 00:00:39.840 dot com and top end Davs helps you stay up 11 00:00:39.840 --> 00:00:44.320 to date with cutting edge technologies like JavaScript, Ruby, Elixir, 12 00:00:44.520 --> 00:00:48.799 and AI. Visit topandevs dot com to join their AIDV 13 00:00:48.880 --> 00:00:54.159 boot camp, weekly community meetups and access expert tutorials. I'm 14 00:00:54.240 --> 00:00:58.079 Lucas Paganini, founder of Onvoid and host of this podcast. 15 00:00:58.439 --> 00:01:05.599 Thank you for tuning in. Let's jump into the episode. 16 00:01:07.719 --> 00:01:11.159 Hey everyone, welcome to another episode of React Round Up. 17 00:01:11.400 --> 00:01:13.799 I am your host to Dave Paige nee Gringhouse, and 18 00:01:13.840 --> 00:01:16.799 I am joined by our panel as TJ Vantol everybody, 19 00:01:17.040 --> 00:01:19.719 and our special guest today is Florian Raffle. 20 00:01:19.920 --> 00:01:20.359 Welcome. 21 00:01:20.599 --> 00:01:24.359 Hi, So Florian, tell our audience a little bit about yourself. 22 00:01:24.519 --> 00:01:25.840 And why you're famous. 23 00:01:26.120 --> 00:01:29.599 Oh, I would say I'm famous, but yeah, thanks for 24 00:01:29.959 --> 00:01:33.319 fine words. Yeah, my name is John. I'm a solution 25 00:01:33.439 --> 00:01:37.120 architect from Unique, Germany. If you know me, you may 26 00:01:37.159 --> 00:01:42.159 know me from my work in the web community, specially typescript, React, 27 00:01:42.599 --> 00:01:46.480 microphone and these days especially you may also maybe know 28 00:01:46.599 --> 00:01:49.359 me because of my work in the dotnet t shop community. 29 00:01:49.519 --> 00:01:52.239 I am a Microsoft MVP since and more than ten 30 00:01:52.319 --> 00:01:55.680 years now now dependsen say what they do with accounting. 31 00:01:58.239 --> 00:02:01.840 Then let's say of ceremony there it was always a 32 00:02:01.840 --> 00:02:03.840 full year and it's now i'd say in the mid 33 00:02:03.920 --> 00:02:06.359 of the years, so they always make it let's say 34 00:02:06.879 --> 00:02:08.759 four years. I don't know, but anyway, it should be 35 00:02:08.759 --> 00:02:11.680 ten years now either way. So this is also where 36 00:02:11.680 --> 00:02:15.439 I spend, of course, most of my time. I write articles, 37 00:02:15.479 --> 00:02:18.560 I write blog posts. I wrote a book recently, so 38 00:02:18.840 --> 00:02:21.960 it was a big achievement for me. So a lot 39 00:02:21.960 --> 00:02:25.439 of work shouldn't be underestimated. And I'm very happy that 40 00:02:25.919 --> 00:02:28.400 finally got released. I guess the 'll talk a little 41 00:02:28.400 --> 00:02:32.280 bit about that too, And yeah, decides that I'm contributing 42 00:02:32.319 --> 00:02:36.319 to open source and on my professional work, I always 43 00:02:36.400 --> 00:02:40.360 do well architecture review a lot of implementation work and 44 00:02:41.599 --> 00:02:43.960 working together which is a lot of different themes and 45 00:02:44.080 --> 00:02:47.039 a lot of different clients, and always having fun, just 46 00:02:47.120 --> 00:02:50.879 staying on top of the say, technology advancements. And it's 47 00:02:51.960 --> 00:02:56.000 quite some interesting time that you're living in. So let's 48 00:02:56.039 --> 00:02:57.479 me in a natcha so to speak. 49 00:02:58.719 --> 00:03:00.960 Wow, that's quite a list of items. I'm not sure 50 00:03:00.960 --> 00:03:03.120 when you find the time to sleep with everything that 51 00:03:03.240 --> 00:03:04.759 sounds like you've got going on. 52 00:03:05.360 --> 00:03:08.919 Yeah, my rings are Yeah. The good thing is, I 53 00:03:08.919 --> 00:03:12.120 mean I have two little daughters, so sleep is pretty 54 00:03:12.159 --> 00:03:16.960 much off the table anyway. So and then yeah, I 55 00:03:17.000 --> 00:03:20.759 mean it just always goes yeah, one step further, one 56 00:03:20.759 --> 00:03:24.280 step further. And since it's all so much fun, let's say, 57 00:03:24.879 --> 00:03:28.199 writing all these these great react projects, working with microphone 58 00:03:28.280 --> 00:03:31.639 and always of course being interested and everything that's happening 59 00:03:31.680 --> 00:03:34.840 out there, it's just well all too exciting to sleep, 60 00:03:34.840 --> 00:03:38.800 I would say. Yeah. Sometimes. The rest, of course, let's 61 00:03:38.800 --> 00:03:43.479 called vacation is the vacation with kids' date, I guess, 62 00:03:43.560 --> 00:03:49.159 but at least so they're growing older. The vacation days 63 00:03:49.159 --> 00:03:53.159 are also, my experience, a little bit expanding, right, So 64 00:03:53.319 --> 00:03:56.000 starting with zero, now we are maybe a week of 65 00:03:56.120 --> 00:03:58.159 vacation per year, accumulated. 66 00:04:00.520 --> 00:04:01.759 I love the enthusiasm. 67 00:04:02.000 --> 00:04:05.000 So one article that really caught our eye was one 68 00:04:05.000 --> 00:04:07.479 that you wrote for log Rocket, which we will link 69 00:04:07.520 --> 00:04:09.639 to in the show notes, and it's called react as 70 00:04:09.639 --> 00:04:12.479 a black box. And why does this matter? Do you 71 00:04:12.520 --> 00:04:15.120 think that you could give our audience, if they haven't 72 00:04:15.120 --> 00:04:17.319 read it, a little bit of insight into it and 73 00:04:17.680 --> 00:04:18.600 your opinion on that. 74 00:04:18.879 --> 00:04:22.040 Sure? Yeah, I mean, please read the article everyone, but 75 00:04:23.000 --> 00:04:26.399 let's say summarize it in two or three sentences. If 76 00:04:26.399 --> 00:04:30.720 you're using reacts, you're mostly well not using it very 77 00:04:30.759 --> 00:04:34.240 much directly. Of course, you're writing let's say react components 78 00:04:34.240 --> 00:04:37.319 and all that, which are pretty much only functions these days. 79 00:04:37.879 --> 00:04:40.519 Most of the things that does for you, it does 80 00:04:40.600 --> 00:04:43.360 under the hooks, which means you don't explicitly interact with 81 00:04:43.439 --> 00:04:46.000 its API. And it's really just a black box. So 82 00:04:46.040 --> 00:04:48.879 you just throw something in and you expect it to work. 83 00:04:49.079 --> 00:04:52.920 Your components being efficient, re rendering just happening very fast. 84 00:04:53.040 --> 00:04:54.639 We have a lot of stuff going on, but you 85 00:04:54.839 --> 00:04:58.120 just expected to work, right, and there, of course pros 86 00:04:58.160 --> 00:05:01.079 and constant is approach there. I mean, there's a reason 87 00:05:01.079 --> 00:05:03.720 why react is successful, and one of that reasons is 88 00:05:03.720 --> 00:05:05.759 certainly that the black box. You don't need to care 89 00:05:05.800 --> 00:05:09.319 about what makes the decisions or what really goes on 90 00:05:09.439 --> 00:05:12.000 behind the curtain. But on the other hand, of course, 91 00:05:12.439 --> 00:05:15.439 sometimes you're wondering, why is my component slow? Why is 92 00:05:15.439 --> 00:05:17.600 it not really behaving the way I think it is? 93 00:05:18.000 --> 00:05:20.519 And this is where the black box really comes from 94 00:05:20.560 --> 00:05:22.839 the other side, right in terts you because you can't 95 00:05:22.879 --> 00:05:25.879 really see what's going on and debugging this can be 96 00:05:27.160 --> 00:05:29.480 I mean, I don't know how much time I spent 97 00:05:29.600 --> 00:05:33.600 debugging real components that don't behave the way I imagine 98 00:05:33.639 --> 00:05:36.959 they should behave. And personally, of course, I mean you 99 00:05:37.000 --> 00:05:39.319 can already see that I have both sides. In the years, 100 00:05:39.439 --> 00:05:42.079 I'm a little bit torn apart. I think, I mean, 101 00:05:42.120 --> 00:05:46.480 the really great achievement and what makes functional programming also 102 00:05:46.480 --> 00:05:48.720 created that the run time is doing a lot of 103 00:05:48.720 --> 00:05:51.240 stuff for you, and you get a lot of guarantees 104 00:05:51.319 --> 00:05:54.240 and on your let's say programer side that you don't 105 00:05:54.279 --> 00:05:57.480 need to take care of, right, you just say, okay, 106 00:05:57.839 --> 00:06:00.360 I always have my state here. I can be that 107 00:06:00.439 --> 00:06:02.680 no one else is filing the step because it's immutable 108 00:06:02.759 --> 00:06:05.160 for instance, and all that, and you just work with 109 00:06:05.199 --> 00:06:07.279 it and you say, well, all these that say what 110 00:06:07.480 --> 00:06:11.160 makes the decisions is under the hood and it just works. 111 00:06:11.360 --> 00:06:14.040 And I think there will always be this straight off 112 00:06:14.199 --> 00:06:17.800 so it shouldn't be too problematic in react case. And 113 00:06:18.279 --> 00:06:21.040 my personal point of view is, well, you can't have 114 00:06:21.160 --> 00:06:24.839 the let's say perfect thing here that just does everything 115 00:06:24.879 --> 00:06:26.800 for you and you will never complain about it. There 116 00:06:26.800 --> 00:06:30.480 will always be these educses and you will then of 117 00:06:30.519 --> 00:06:33.959 course pay the price in some debugging let's say, sessions 118 00:06:34.000 --> 00:06:37.000 that you would have wanted to avoid. But yeah, that's 119 00:06:37.000 --> 00:06:39.879 a surprice we pay. Doesn't mean it's perfect, doesn't mean 120 00:06:39.920 --> 00:06:42.439 we shouldn't try to improve it, and doesn't mean we 121 00:06:42.480 --> 00:06:45.279 can't criticize it. It just means that I think it's 122 00:06:45.319 --> 00:06:47.600 a good model after all, but we should be aware 123 00:06:47.639 --> 00:06:50.120 of it. And that's that's my personal point of view. 124 00:06:51.120 --> 00:06:53.160 Yeah, it's it's interesting in a way. 125 00:06:53.199 --> 00:06:56.439 This is like the classical software paradigm, like how much 126 00:06:56.560 --> 00:07:00.000 you trust a black box versus how much you control 127 00:07:00.240 --> 00:07:03.879 on your own. I feel like it's somewhat at least 128 00:07:03.879 --> 00:07:06.319 somewhat new to the front end world, at least because 129 00:07:06.879 --> 00:07:09.399 back in the day, I feel like the jQuery days 130 00:07:09.439 --> 00:07:11.920 like Jquerry. I mean, obviously it's a bit of a 131 00:07:11.920 --> 00:07:14.879 black box, it's got APIs that abstract things for you, 132 00:07:14.959 --> 00:07:18.079 but you could sort of fundamentally know what JQuery's doing 133 00:07:18.160 --> 00:07:20.480 under the hood, Like the code get a little bit gnarly, 134 00:07:20.560 --> 00:07:23.480 but you know they're like abstracting browser APIs for you. 135 00:07:23.519 --> 00:07:26.759 They're doing some basic things. And if jQuery didn't do 136 00:07:26.800 --> 00:07:29.160 exactly what you wanted, it's like, okay, you at least 137 00:07:29.160 --> 00:07:30.839 had a rough idea of what was wrong or how 138 00:07:30.879 --> 00:07:34.040 to work around it. Whereas I feel like nowadays with 139 00:07:34.360 --> 00:07:37.160 stuff like React, and this isn't really specific to React, 140 00:07:37.160 --> 00:07:40.000 because you could make the same argument for other frameworks 141 00:07:40.000 --> 00:07:42.560 as well, but there really is a lot more magic 142 00:07:42.639 --> 00:07:45.240 going on than there used to be. So if something 143 00:07:45.240 --> 00:07:47.839 went wrong in Jquerry, like I could probably go into 144 00:07:47.879 --> 00:07:49.959 the domin at least get a high level over you 145 00:07:50.040 --> 00:07:55.160 of what's going wrong. But if like reacts doesn't reconcile 146 00:07:55.399 --> 00:07:59.839 my JSX like correctly in some situations, I mean, I 147 00:08:00.079 --> 00:08:03.519 certainly ran into and this is rare, but sometimes I've 148 00:08:03.560 --> 00:08:05.680 run into React situations where it's like, oh man, like 149 00:08:05.759 --> 00:08:08.600 unless I unless I google it and find somebody that 150 00:08:09.079 --> 00:08:11.360 ran into the same problem that has like some ideas 151 00:08:11.360 --> 00:08:13.160 of what I can do, Like it can be I 152 00:08:13.160 --> 00:08:15.160 can be at a loss because it's just there's a 153 00:08:15.199 --> 00:08:17.319 lot more complexity in the front end world than there 154 00:08:17.439 --> 00:08:17.920 used to be. 155 00:08:18.639 --> 00:08:22.680 And there's just some use cases that React doesn't have 156 00:08:22.720 --> 00:08:25.800 a solve for. And this I think this came about 157 00:08:25.879 --> 00:08:30.079 earlier and reacts life cycles, like when it was still 158 00:08:30.199 --> 00:08:32.399 using a lot of class based components. But there were 159 00:08:32.440 --> 00:08:35.000 some situations where if you, like you wanted a model, 160 00:08:35.080 --> 00:08:37.600 for instance, to just pop out and sit on top 161 00:08:37.639 --> 00:08:40.679 of everything else that you could then either interact with 162 00:08:40.799 --> 00:08:43.840 or just close and go back, it was really really 163 00:08:44.039 --> 00:08:47.840 hard or darn near impossible to make that happen in 164 00:08:47.879 --> 00:08:51.360 a way that made sense or was as easy as 165 00:08:51.879 --> 00:08:54.799 some of the other JavaScript frameworks like Angular made it. 166 00:08:55.320 --> 00:08:57.360 So there was a lot of at least for me 167 00:08:57.440 --> 00:09:00.000 when I was getting familiar with React and starting to learn, 168 00:09:00.000 --> 00:09:02.159 but there were a lot of really frustrating moments where 169 00:09:02.200 --> 00:09:04.360 I couldn't do things that I would have been able 170 00:09:04.399 --> 00:09:08.960 to do pretty easily in other JavaScript frameworks. But at 171 00:09:08.960 --> 00:09:12.200 the same time, it's funny that you make that comparison 172 00:09:12.320 --> 00:09:15.919 of it being a black box, because that's almost something 173 00:09:16.000 --> 00:09:19.120 that I haven't heard React described as in a very 174 00:09:19.200 --> 00:09:23.200 long time. It seems like Angular really took that and 175 00:09:23.240 --> 00:09:25.759 got hammered a lot with it because of all their 176 00:09:25.799 --> 00:09:29.679 specific syntax and components and the way that they wanted 177 00:09:29.720 --> 00:09:33.559 everything built and styled. But everybody's like, oh, react, you 178 00:09:33.600 --> 00:09:37.279 can do anything with it. But you're very right in 179 00:09:37.360 --> 00:09:40.399 that if it's something under the hood that we don't 180 00:09:40.440 --> 00:09:44.720 have either access to or any understanding of that's in 181 00:09:44.799 --> 00:09:48.960 their source code, yeah, we're limited in that regard. 182 00:09:49.360 --> 00:09:51.639 I mean the Angle that example is a good one, 183 00:09:51.720 --> 00:09:54.559 because that is I mean, if you look at angle 184 00:09:54.600 --> 00:09:56.799 and that's right, it a couple of times saying I mean. 185 00:09:56.799 --> 00:10:00.000 There may be some folks in the audience who completely 186 00:10:00.080 --> 00:10:02.759 disagree with me, but for me though, it felt wrong 187 00:10:02.840 --> 00:10:06.559 because they pretty much reinvented everything and you couldn't even 188 00:10:06.679 --> 00:10:10.399 use other stuff from you, I mean the plane JavaScript ecosystem, 189 00:10:10.919 --> 00:10:12.879 because I mean you first had to wrap it in 190 00:10:12.960 --> 00:10:16.919 some angle, a specific notion of a service or you know, 191 00:10:17.399 --> 00:10:20.399 following all their terminology and what they I mean that 192 00:10:20.440 --> 00:10:22.919 they made a great thing, but it was in my 193 00:10:23.080 --> 00:10:26.200 opinion always why do you need to re engineer that 194 00:10:26.120 --> 00:10:29.240 that's already there? Browdlary ships? Is that why? But you 195 00:10:29.279 --> 00:10:31.320 need to wrap it just to bring it to your framework, 196 00:10:31.759 --> 00:10:34.960 and so I mean Angler maybe on the run time, 197 00:10:35.279 --> 00:10:39.519 people may disagree with me, less complex, and then what reacted. 198 00:10:39.639 --> 00:10:42.159 Certainly there are other areas like injection for instance of 199 00:10:42.200 --> 00:10:44.080 what it does with me that day, the reflection and 200 00:10:44.159 --> 00:10:46.519 song where it is certainly more complex. But if you 201 00:10:46.559 --> 00:10:50.120 look at the chorretit right, the reconciliation algorithm. Here what 202 00:10:50.279 --> 00:10:53.120 really makes reacts special. So this is a lot of 203 00:10:53.120 --> 00:10:57.159 complexity that's completely hidden from you doing let's say your work. 204 00:10:57.240 --> 00:11:00.720 Usually whereas Reacted, Angler was always on this change detection 205 00:11:00.799 --> 00:11:03.039 algorithm and so in this case a little bit more 206 00:11:03.080 --> 00:11:06.480 lads weight. But then it brought all these complexity also 207 00:11:06.480 --> 00:11:08.440 in form of all what you could call a black box, 208 00:11:08.440 --> 00:11:10.840 because it was also just throwing terminology at you and 209 00:11:11.000 --> 00:11:13.840 use everything from our framework and we then do something 210 00:11:13.879 --> 00:11:17.320 under the hood which goes back to basic browser APIs right, 211 00:11:17.600 --> 00:11:19.480 So you could look at it from two angles, and 212 00:11:19.559 --> 00:11:24.320 certainly in some perspective Reacted was very open and Angler 213 00:11:24.440 --> 00:11:26.799 was a black box. But from other perspective and this 214 00:11:26.879 --> 00:11:28.559 is really where we look at the core run time, 215 00:11:28.799 --> 00:11:31.039 it's the other way around. And then of course you 216 00:11:31.039 --> 00:11:34.679 can ask, well, what is the better way personally, I mean, hey, already, 217 00:11:35.360 --> 00:11:38.039 I guess we gave enough things. I think the React 218 00:11:38.120 --> 00:11:41.200 way is quite good, even though, and this is great 219 00:11:41.279 --> 00:11:44.919 that you mentioned the model. React always tried to then, 220 00:11:45.279 --> 00:11:49.200 let's say find solutions. So they introduced from the portal API, 221 00:11:49.279 --> 00:11:51.960 which is a great API in my opinion. But in 222 00:11:52.000 --> 00:11:54.720 the last two three four years we got a lot 223 00:11:54.840 --> 00:11:57.440 of new APIs. I mean, starting with hooks. You've got 224 00:11:57.480 --> 00:11:59.879 all these things that you certainly now use from Reactor. 225 00:12:00.120 --> 00:12:04.279 Previously we're only using i mean create elements unknowingly, but 226 00:12:04.679 --> 00:12:07.919 the class component knowingly. And now it's it's really a 227 00:12:07.919 --> 00:12:11.000 lot of things like lazy you should use I guess 228 00:12:11.399 --> 00:12:13.919 all the hooks of course, because they're awesome, even though 229 00:12:13.960 --> 00:12:16.759 highly debated. And so now you have this whole zoo 230 00:12:17.159 --> 00:12:19.600 and I'm not even starting the strict mode and all 231 00:12:19.600 --> 00:12:22.559 that stuff, so that they also should know. So also here, 232 00:12:22.919 --> 00:12:26.320 I mean suddenly complexity goes into the API comes that 233 00:12:26.440 --> 00:12:28.600 the user and you now need to make decisions. So 234 00:12:29.159 --> 00:12:32.519 it's it's not as severe as the Angular but it 235 00:12:32.639 --> 00:12:35.720 starts also to shift. Here are the worst cases. Of course, 236 00:12:35.759 --> 00:12:39.279 if you have the API complexity like angular class, you 237 00:12:39.320 --> 00:12:42.559 have the internal complexity because suddenly you need to know 238 00:12:42.600 --> 00:12:44.399 a lot of things to use it, and then you 239 00:12:44.440 --> 00:12:46.159 need to look to know to know a lot of 240 00:12:46.200 --> 00:12:48.759 things to debug it. And it's just like, oh, I 241 00:12:48.759 --> 00:12:51.799 don't know. I mean, let's hope it doesn't go in 242 00:12:51.840 --> 00:12:54.600 that way. If it goes X will not be as 243 00:12:54.679 --> 00:12:56.919 successful anymore. I suppose, I don't know. 244 00:12:57.080 --> 00:13:00.080 I'm serious, Like, based off this, like what advice you 245 00:13:00.120 --> 00:13:04.480 have for like the just the average React developer, like 246 00:13:04.559 --> 00:13:07.799 building their their apps. Is this something you think people 247 00:13:07.840 --> 00:13:10.799 should just be aware of? Is this a reason to 248 00:13:11.039 --> 00:13:14.080 like avoid React or use it only when you need it? 249 00:13:14.159 --> 00:13:17.279 And I'm curious what advice you to have people? 250 00:13:17.279 --> 00:13:18.639 Do you still reach for it? 251 00:13:20.519 --> 00:13:22.679 I mean I always reach for it even though I'm 252 00:13:22.799 --> 00:13:25.639 very let's say open for alternatives. There are these days, 253 00:13:25.679 --> 00:13:28.240 I mean a lot of what I would call lightweight 254 00:13:28.279 --> 00:13:32.639 alternatives to React, things like solid chats, for instance, which say, okay, 255 00:13:33.039 --> 00:13:35.799 what React brought to the table, how you write components? 256 00:13:35.919 --> 00:13:39.000 This is really great, but maybe what other frameworks bring 257 00:13:39.039 --> 00:13:41.600 to the table. Let's pick for instance, swells Swelter in 258 00:13:41.639 --> 00:13:44.960 my opinion, also an awesome framework, is also good. So 259 00:13:45.000 --> 00:13:48.000 how can we combine these to make for instance, the 260 00:13:48.039 --> 00:13:51.399 amount of JavaScript that we ship to the user. Yeah, 261 00:13:51.919 --> 00:13:55.720 less heavy, and I mean this was always one concern 262 00:13:55.840 --> 00:13:58.919 with these let's say more bloaded frameworks, I mean React. 263 00:13:58.919 --> 00:14:01.559 It is certainly not in that when when Angler started, 264 00:14:01.759 --> 00:14:04.279 I don't really want to that they bash Angler, and 265 00:14:04.320 --> 00:14:07.879 please forgive me for always mentioning it. I'm just an Angler, 266 00:14:07.879 --> 00:14:11.360 and you always think of theven I thought so anyway, 267 00:14:11.440 --> 00:14:14.000 I was always shipping. I saw at least the guy 268 00:14:14.039 --> 00:14:16.600 shipping for Hello worlds six hundred and seven and eight 269 00:14:16.679 --> 00:14:20.360 hundred kilobytes of JavaScript Mini Fight. Of course, jesuits a 270 00:14:20.399 --> 00:14:23.799 little bit less, but nevertheless, it's nearly a megabyte. And 271 00:14:23.919 --> 00:14:26.720 all you did was I don't know, using HTP service 272 00:14:26.759 --> 00:14:28.799 in there, and it really some elementary stuff but not 273 00:14:28.840 --> 00:14:30.759 really a lot of pages, just you know, one one 274 00:14:30.799 --> 00:14:34.399 simple page. It was just fetching something. And of course 275 00:14:34.440 --> 00:14:37.559 in reactually could have that a lot more lightweight, but 276 00:14:37.559 --> 00:14:39.759 you still would ship I don't know, one hundred fifty 277 00:14:39.840 --> 00:14:42.799 one hundred and twenty something. That's that still three digits 278 00:14:42.919 --> 00:14:46.000 amount of javascripts for all you do is catch maybe 279 00:14:46.039 --> 00:14:50.000 one resource and display a little string on the on 280 00:14:50.039 --> 00:14:52.240 the screen. Now, of course, one could argue, I mean 281 00:14:52.279 --> 00:14:54.639 this is not what REEC was built for. You should 282 00:14:54.720 --> 00:14:57.799 then build a real single page application, and suddenly if 283 00:14:57.840 --> 00:15:00.879 you have I don't know, one of the half megabytes 284 00:15:00.879 --> 00:15:04.159 of javascripts, hopefully lazy loaded in chunks and so on, 285 00:15:04.399 --> 00:15:07.759 then it suddenly makes sense you can afford bringing React 286 00:15:07.799 --> 00:15:10.120 and React on, especially react on. I mean, React is 287 00:15:10.240 --> 00:15:14.240 still white weights to the end user. But then we 288 00:15:14.320 --> 00:15:16.559 have now these other frameworks like solid and they're really 289 00:15:16.559 --> 00:15:19.639 aim for let's pick this small use case apart. We 290 00:15:19.679 --> 00:15:23.039 can still help you make you productive, and then we 291 00:15:23.240 --> 00:15:25.759 just shift the minimal amount. So what is my recommendation? 292 00:15:26.240 --> 00:15:28.639 If all you want to do is write with something 293 00:15:28.679 --> 00:15:32.200 really simple, one screen, just look around. You will find 294 00:15:32.240 --> 00:15:35.240 something that will suit you from how you approach the 295 00:15:35.320 --> 00:15:39.240 thing as a developer, with a community, also enough documentation, 296 00:15:39.720 --> 00:15:42.279 and maybe also being efficient and white weight. If you 297 00:15:42.360 --> 00:15:45.799 say you're building a full single page application, a tool 298 00:15:45.960 --> 00:15:49.240 like experience I always call it, we'll say you're building 299 00:15:49.240 --> 00:15:52.000 the next Photoshop in the browser something I mean, React 300 00:15:52.000 --> 00:15:55.399 is certainly a good choice. You can certainly afford shifting 301 00:15:55.399 --> 00:15:59.879 this one hundred one hundred twenty kilobytes. Additionally, which Jesus, Jesus, 302 00:16:00.159 --> 00:16:02.799 maybe I don't know fifty forty KO pipes. I don't 303 00:16:02.840 --> 00:16:05.279 know something in that range, so that certainly doesn't make 304 00:16:05.440 --> 00:16:08.759 a great difference, but that would be my recommendation. There 305 00:16:08.759 --> 00:16:10.879 are a lot of great frameworks, and I mean the 306 00:16:10.960 --> 00:16:14.159 principles and the parading that reacts to the table you 307 00:16:14.200 --> 00:16:16.759 can find now in a multitude of frameworks, and there 308 00:16:16.759 --> 00:16:19.360 are really some great ones. Just because they don't have 309 00:16:19.600 --> 00:16:22.360 so many stars or not take by by Facebook doesn't 310 00:16:22.399 --> 00:16:25.559 mean they're worse. Just look around, make sure that they 311 00:16:25.559 --> 00:16:28.720 are properly maintained, and not just stop tomorrow. 312 00:16:29.200 --> 00:16:29.399 Yeah. 313 00:16:30.159 --> 00:16:33.519 Well, and I think it's just decent software development advice 314 00:16:33.559 --> 00:16:37.080 in general. Right, Like, abstractions in themselves are not bad. 315 00:16:37.159 --> 00:16:40.039 Black boxes are not bad, but you have to accept 316 00:16:40.360 --> 00:16:42.080 a certain amount of trade offs. You have to make 317 00:16:42.120 --> 00:16:45.480 sure if you need the abstraction, if you need that complexity, 318 00:16:45.519 --> 00:16:48.480 if you're dealing with that level of problem, then great, 319 00:16:48.600 --> 00:16:50.799 Like that's a trade off, it's probably good for you. 320 00:16:50.879 --> 00:16:55.519 But if you're solving a much simpler problem, you could 321 00:16:55.519 --> 00:16:58.039 probably reach for a much simpler tool at least to 322 00:16:58.080 --> 00:16:58.559 start with. 323 00:16:59.720 --> 00:17:03.679 Right, right, And I mean, discussion with obstruction is also 324 00:17:03.759 --> 00:17:07.559 not newer, but I'm surprised that these days, it seems 325 00:17:07.559 --> 00:17:10.519 like obstructions, well, at least there is a little bit 326 00:17:10.559 --> 00:17:13.359 of let's say, a trend in articles to say obstructions 327 00:17:13.400 --> 00:17:17.400 are bad becauseous here, and I mean, of course they're right. 328 00:17:17.440 --> 00:17:21.599 There's no simple solution to say, oh, I mean always 329 00:17:21.599 --> 00:17:25.720 obstruct a way we've seen any angular example story. Again, 330 00:17:26.000 --> 00:17:28.839 it will be a theme that I guess that too 331 00:17:28.920 --> 00:17:31.039 much obstruction will just hurt you because you need to 332 00:17:31.119 --> 00:17:34.680 learn all these things too, right. So it firstly starts simple, oh, well, 333 00:17:34.720 --> 00:17:39.000 just one obstruction, I can save these three linns. But suddenly, oh, oh, 334 00:17:39.160 --> 00:17:41.960 which obstruction did I use to abstract these three lines? 335 00:17:42.039 --> 00:17:44.400 I need to find it? And suddenly you're more concerned 336 00:17:44.400 --> 00:17:47.759 about finding the right function that you extracted formally than 337 00:17:47.960 --> 00:17:51.359 just to do the coding right. And so there's always 338 00:17:51.359 --> 00:17:54.559 this straight off and there's certainly no one site fits 339 00:17:54.559 --> 00:17:57.000 some all solutions here, like with everything right. So this 340 00:17:57.119 --> 00:17:59.799 is one of the things that are always criticize many 341 00:17:59.839 --> 00:18:02.599 art because only say oh this is good or everything 342 00:18:02.599 --> 00:18:07.519 else is bad. Yeah, I mean there's always a reason why. 343 00:18:07.559 --> 00:18:10.920 For instance, why exists, even though why is now bad 344 00:18:10.960 --> 00:18:13.880 and excess the new thing to do, right, there was 345 00:18:13.920 --> 00:18:16.839 a reason for that and we shouldn't forget that reason. Maybe, 346 00:18:16.880 --> 00:18:19.480 of course technology advanced and maybe why is really not 347 00:18:19.559 --> 00:18:21.880 the thing to do anymore, but maybe there was a reason, 348 00:18:22.119 --> 00:18:25.319 and that reason just well, in this context is not 349 00:18:25.400 --> 00:18:29.279 valid anymore, or something else should be, let's say, considered too. 350 00:18:29.519 --> 00:18:31.799 And it's always good to know the tradeoffs and what 351 00:18:31.880 --> 00:18:34.839 other things exist and in what context that makes sense, 352 00:18:34.920 --> 00:18:37.759 because yeah, I mean there is in my opinion, there 353 00:18:37.799 --> 00:18:40.119 is no real black and white always it's just great 354 00:18:40.240 --> 00:18:42.839 and you need to find which shade of prey you 355 00:18:43.440 --> 00:18:48.000 fits to your particular problem. And I guess, yeah, we 356 00:18:48.039 --> 00:18:50.079 can discuss it in the REACT context, but I just 357 00:18:50.119 --> 00:18:53.039 said it's all in soft I mean, I guess also 358 00:18:53.240 --> 00:18:57.240 generations of what we knew that and we also learn 359 00:18:57.279 --> 00:19:00.759 it again, at least I do. And it's always a 360 00:19:00.799 --> 00:19:03.720 little bit of this cycle that that goes around, and 361 00:19:03.799 --> 00:19:05.839 we just need to see right where we end up, 362 00:19:05.880 --> 00:19:07.920 is where we are currently, and what we can do 363 00:19:08.000 --> 00:19:11.119 to just yeah, not make the same mistakes again. I mean, 364 00:19:11.160 --> 00:19:13.839 I think this is the only thing to really go forward, 365 00:19:13.880 --> 00:19:17.640 to reflect a bit and to find let's say, a 366 00:19:17.680 --> 00:19:20.680 better way forward, and to not forget why we picked 367 00:19:20.680 --> 00:19:23.559 that one. The why is quite often really crucial. 368 00:19:24.599 --> 00:19:27.039 Yeah, I feel like that the EBB and flow is 369 00:19:27.039 --> 00:19:29.079 an interesting way of putting it, because I feel like 370 00:19:29.119 --> 00:19:31.720 that's we've had cycles like that before, even in the 371 00:19:31.720 --> 00:19:34.079 front end world, Like I remember there was a time 372 00:19:34.160 --> 00:19:38.519 where pretty large JavaScript frameworks were quite popular. There are 373 00:19:38.519 --> 00:19:42.680 things like Dojo and Sencha, things that were fairly fairly 374 00:19:42.720 --> 00:19:45.640 heavy that got popular for a while, and then there 375 00:19:45.720 --> 00:19:49.240 was the push towards jQuery and like smaller things, and 376 00:19:49.279 --> 00:19:51.559 then now we started to creep back up again with 377 00:19:51.720 --> 00:19:55.279 some of these JavaScript frameworks. And I almost feel like 378 00:19:55.319 --> 00:19:57.440 this is true in the bill tools world as well, 379 00:19:57.519 --> 00:20:00.680 Like there's I mean, there was a while where Webpack 380 00:20:00.720 --> 00:20:03.400 had like a monopoly and everybody was totally cool with it, 381 00:20:03.440 --> 00:20:06.960 and now it's like cool to be like counter webpack 382 00:20:07.000 --> 00:20:10.960 and to be using all these hip, new, strangely named 383 00:20:11.480 --> 00:20:15.839 tools that are like different and smaller and faster, and 384 00:20:16.279 --> 00:20:18.359 it's like we can just as an industry, we can't 385 00:20:18.400 --> 00:20:19.799 make up our mind, Like as soon as we go 386 00:20:19.839 --> 00:20:21.279 too far in one direction, we come. 387 00:20:21.200 --> 00:20:21.839 Back in the other. 388 00:20:22.599 --> 00:20:26.160 Yeah, it's very much a pendulum of popular opinion. But 389 00:20:26.519 --> 00:20:29.640 one thing that I remember from a senior developer telling 390 00:20:29.680 --> 00:20:32.519 me once, which I liked a lot was that if 391 00:20:32.559 --> 00:20:36.559 I could explain to him why I had chosen a 392 00:20:36.599 --> 00:20:40.240 particular way to solve a problem or style or whatever, 393 00:20:40.759 --> 00:20:43.480 he was fine with it. He just wanted a reason 394 00:20:43.680 --> 00:20:46.920 for why I was choosing to solve a problem other 395 00:20:47.000 --> 00:20:49.000 than well it was like this and the rest of 396 00:20:49.039 --> 00:20:51.319 the code, or I saw somebody online do it, or 397 00:20:51.359 --> 00:20:55.720 somebody told me if I had a valid viewpoint. He 398 00:20:55.839 --> 00:20:58.319 was totally good with it. It was just have a 399 00:20:58.440 --> 00:21:01.480 reason for why do you think to do it this way? 400 00:21:02.720 --> 00:21:05.240 I think there's a good attitude. But I mean cod 401 00:21:05.240 --> 00:21:09.480