WEBVTT 1 00:00:06.040 --> 00:00:09.320 Hello everybody, and welcome to another episode of React Roundup. 2 00:00:09.439 --> 00:00:11.519 My name is TJ. Van Told and with me on 3 00:00:11.560 --> 00:00:15.199 the panel today is Jack Herrington. Hello, and our special 4 00:00:15.199 --> 00:00:19.320 guests today are Mark Story and Priscilla Alivera. Hopefully I 5 00:00:19.320 --> 00:00:24.359 pronounced her name correctly. Yeah, welcome, excellent, welcome to React Roundup. 6 00:00:24.359 --> 00:00:27.039 Why don't you introduce yourself and tell us who are 7 00:00:27.079 --> 00:00:29.480 what you do while you're famous those sorts of things. 8 00:00:30.879 --> 00:00:34.520 I don't think I'm n okay okay 'all, thanks for 9 00:00:34.560 --> 00:00:37.840 having me. My name is Priscilla. I'm a software engineer 10 00:00:37.920 --> 00:00:40.880 based in Vienna, and I'm a grank To employee That's 11 00:00:40.960 --> 00:00:45.039 Sanctuary work on the user interface of our application, so 12 00:00:45.479 --> 00:00:47.560 I'm more like a front end engineer. 13 00:00:48.439 --> 00:00:51.079 I'm Mark Story. I also work at Center It's Prisona. 14 00:00:51.359 --> 00:00:53.240 I work partially on the front time and then also 15 00:00:53.280 --> 00:00:54.960 a lot on the back end on their building system. 16 00:00:55.280 --> 00:00:56.840 And I'm in Toronto, Canada. 17 00:00:57.000 --> 00:00:59.039 All right, So looks at y'all have an article out 18 00:00:59.119 --> 00:01:02.640 on converting from javascripts to typescript for your application and 19 00:01:02.679 --> 00:01:04.879 what the advantages work, and you kind of give us 20 00:01:04.920 --> 00:01:06.560 a bit of a high level synopsis on that. 21 00:01:06.799 --> 00:01:08.879 Yeah, so the high level synopsis is we converted the 22 00:01:08.920 --> 00:01:12.840 application from JavaScript to typescript. To Typescript is a statically 23 00:01:12.920 --> 00:01:15.760 analyzed language that compiles that a JavaScript if you've not 24 00:01:15.920 --> 00:01:17.599 used to it before. And so over the coross of 25 00:01:17.599 --> 00:01:19.920 eighteen months, we converted the whole applicate, the whole front 26 00:01:20.000 --> 00:01:24.920 end application for Century from JavaScript from JavaScript into typescript, 27 00:01:25.280 --> 00:01:27.200 and then we wrote a blog post around how we 28 00:01:27.239 --> 00:01:29.640 did it and some of the challenges we had and 29 00:01:29.840 --> 00:01:31.040 some of the benefits of that. 30 00:01:31.239 --> 00:01:33.680 So, what were some of the challenges you had. 31 00:01:33.879 --> 00:01:37.359 Big code bases take a long time to migrate. I 32 00:01:37.480 --> 00:01:41.400 bet so for scale like Centuries, around ninety thousand lines 33 00:01:41.439 --> 00:01:43.799 of code in JavaScript, and yeah, it just took a 34 00:01:43.799 --> 00:01:46.959 really long time because we weren't allowed to stop delivering features. 35 00:01:47.239 --> 00:01:50.200 So yeah, the process we kind of documented was doing 36 00:01:50.200 --> 00:01:52.480 that without stopping. Because there's kind of like two approaches 37 00:01:52.480 --> 00:01:54.400 you can take with converting a large CUD base. You 38 00:01:54.439 --> 00:01:56.799 can like try and freeze the earth and do everything 39 00:01:56.840 --> 00:01:58.840 at once and then not do any future work. And 40 00:01:58.879 --> 00:02:00.560 the other one is like do a re right, which 41 00:02:00.599 --> 00:02:02.799 is also very dangerous, and the other one is that 42 00:02:02.799 --> 00:02:04.959 we approach we took, which is like you modify the 43 00:02:05.000 --> 00:02:08.120 code in place and then incrementally kind of change things over. 44 00:02:08.400 --> 00:02:11.120 I guess maybe we could start with what precipitated this change, 45 00:02:11.240 --> 00:02:15.039 like where you internally sold and typescript and decided it 46 00:02:15.199 --> 00:02:18.280 was the right move, because obviously putting in that whole effort, 47 00:02:18.280 --> 00:02:20.520 you must have saw some value in doing the work. 48 00:02:20.680 --> 00:02:23.080 Yeah, I can answer that. I guess the impetus was 49 00:02:23.080 --> 00:02:27.159 we were having we had several kind of production incidents happened, 50 00:02:27.280 --> 00:02:30.039 customer facing pression incidents that were caused by front end 51 00:02:30.039 --> 00:02:33.159 problems and the after like in the retro for like 52 00:02:33.280 --> 00:02:35.599 why did we have this incident? A lot of the 53 00:02:36.159 --> 00:02:38.240 like paths forward where you know, if we had better 54 00:02:38.280 --> 00:02:41.400 tooling or static analysis, then we would be able to 55 00:02:41.400 --> 00:02:43.599 prevent these kinds of problems. And so that was kind 56 00:02:43.599 --> 00:02:46.080 of that happened multiple times, and the solution came up 57 00:02:46.159 --> 00:02:48.280 multiple times was to you know, if we had better 58 00:02:48.319 --> 00:02:52.400 linting support or better static analyzation that could come from 59 00:02:52.520 --> 00:02:54.639 a tool like touch script, then we would be able 60 00:02:54.639 --> 00:02:56.639 to prevent these kinds of problems because they would be 61 00:02:56.680 --> 00:02:59.360 compiled tim errors versus runtime aerrors that we catch in production. 62 00:03:00.000 --> 00:03:02.000 So that kind of came through and then a century 63 00:03:02.000 --> 00:03:04.080 overy year has like a hack week, like many companies 64 00:03:04.400 --> 00:03:06.960 and a bunch of engineers took the time to kind 65 00:03:06.960 --> 00:03:10.319 of start the genesis of touch script conversion and make 66 00:03:10.360 --> 00:03:12.919 it possible to incre mentally move the application over as 67 00:03:12.960 --> 00:03:15.000 part of their project, and then so we have kind 68 00:03:15.000 --> 00:03:17.479 of a proof of concept, and then from there we 69 00:03:17.479 --> 00:03:19.919 were able to get buy in on converting the rest 70 00:03:19.919 --> 00:03:20.719 of the application over. 71 00:03:20.960 --> 00:03:24.000 I'm curious the setup because I sort of agree with 72 00:03:24.039 --> 00:03:26.919 your how you laid it out, Like when you're tackling 73 00:03:26.919 --> 00:03:29.759 something big like this, I think very often, at least 74 00:03:29.759 --> 00:03:33.639 in my experience, freezing everything, like for a big rewrite 75 00:03:33.759 --> 00:03:37.840 is almost never an option, just because like, if you 76 00:03:37.840 --> 00:03:40.639 have an app that's that much code, chances are it's 77 00:03:40.680 --> 00:03:44.639 doing something important, and chances are you have to keep 78 00:03:44.759 --> 00:03:48.719 updating and working on it. And also, like business users 79 00:03:48.719 --> 00:03:50.719 don't tend to like things of like, yeah, we're going 80 00:03:50.759 --> 00:03:53.560 to spend two three months on this and you'll notice 81 00:03:53.599 --> 00:03:56.199 no changes. Hopefully you'll notice no changes because we might 82 00:03:56.199 --> 00:03:59.719 break something too, right like those those arguments don't go 83 00:03:59.759 --> 00:04:03.400 over so well. But I am curious, like because I've 84 00:04:03.639 --> 00:04:07.560 absolutely never attempt this with Typescript specifically, I'm very curious 85 00:04:07.560 --> 00:04:10.560 of the architecture you came up with to make this possible, 86 00:04:10.560 --> 00:04:14.319 because I'm assuming like you were pushing out typescript files 87 00:04:14.360 --> 00:04:17.040 like or at least I'm assuming it's a mechanism where 88 00:04:17.040 --> 00:04:20.040 you could like convert one file the typeescript, push it up, 89 00:04:20.079 --> 00:04:22.639 push it to production or whatever, and then just like 90 00:04:22.839 --> 00:04:25.839 keep on working. So I'm curious, like, how like technically 91 00:04:26.079 --> 00:04:28.000 you set that up to work. Is it just like 92 00:04:28.519 --> 00:04:31.480 some fancy webpack canfig or what was going on to 93 00:04:31.480 --> 00:04:32.319 make that possible? 94 00:04:32.639 --> 00:04:38.439 Oh? Yes, So we decided on converting our files incrementally 95 00:04:38.519 --> 00:04:41.959 to type script, and so every day we were pushing 96 00:04:42.040 --> 00:04:45.560 files to production and we used our own. 97 00:04:45.399 --> 00:04:47.399 Application to monitor errors. 98 00:04:47.879 --> 00:04:51.439 Yes, and so we had to use some webpac confix 99 00:04:51.519 --> 00:04:54.439 some configuration to be able to do that. But this 100 00:04:54.600 --> 00:04:57.920 is something nice in type script. You don't need to 101 00:04:57.959 --> 00:05:01.000 convert the whole code base at once. You can do 102 00:05:01.040 --> 00:05:05.000 it incrementally. So this was also one of the reasons 103 00:05:05.000 --> 00:05:07.360 we decided to introduce typescript. 104 00:05:07.680 --> 00:05:10.920 So how many developers are on your team and how 105 00:05:11.000 --> 00:05:15.639 did they fare in terms of learning pypescript And you 106 00:05:15.720 --> 00:05:19.040 mentioned in the articles some educational stuff. How did that work? 107 00:05:19.399 --> 00:05:24.439 So I think we are twelve developers. Some of some 108 00:05:24.519 --> 00:05:25.879 of our colleagues. 109 00:05:25.439 --> 00:05:28.319 They only work on the front end, and some of 110 00:05:28.360 --> 00:05:32.360 our colleagues they are FULLD stech. So the education was 111 00:05:32.399 --> 00:05:37.480 the key in this process because some colleagues they didn't 112 00:05:37.600 --> 00:05:41.519 know much about typescript and we would like to. First 113 00:05:41.959 --> 00:05:46.279 we created a documentation. In terms of documentation, we also 114 00:05:47.160 --> 00:05:51.480 tried to motivate the colleagues to adopt a typescript and 115 00:05:51.600 --> 00:05:56.079 once they saw the benefits, they started to use typescript 116 00:05:56.439 --> 00:05:59.680 by themselves. So we never used the tooling to block 117 00:05:59.759 --> 00:06:03.920 some on of pushing JSX COLDE to our code base. 118 00:06:04.199 --> 00:06:07.560 This was naturally. This happened naturally. 119 00:06:08.040 --> 00:06:11.759 So what were the big like aha, benefits for these 120 00:06:11.800 --> 00:06:15.480 front end developers on like, oh, now, yes, typescript, that's awesome. 121 00:06:15.720 --> 00:06:17.600 You know, it's so much better than JSX. Now I'm 122 00:06:17.600 --> 00:06:18.800 never going to do JSX again. 123 00:06:19.120 --> 00:06:21.959 So auto completion for example. 124 00:06:22.480 --> 00:06:25.600 Yeah, yeah, I would say like autocompletion and compile time 125 00:06:25.800 --> 00:06:30.160 checks were the two big ones. Also, like improved code navigation, 126 00:06:30.319 --> 00:06:32.279 so instead of having to get your editor to go 127 00:06:32.360 --> 00:06:34.600 up and find the symbol ref like most editors, when 128 00:06:34.639 --> 00:06:37.399 you have the language server setup, you can jump to 129 00:06:37.480 --> 00:06:40.920 symbols or like preview symbols in line with like little 130 00:06:40.959 --> 00:06:46.519 floating windows. And so because the editor ecosystem, the touch 131 00:06:46.519 --> 00:06:48.160 script team spent a lot of time making like the 132 00:06:48.199 --> 00:06:51.279 dev experience really well. It was that like improved developer 133 00:06:51.319 --> 00:06:54.279 experience that really kind of like helped convert people over. 134 00:06:54.639 --> 00:06:56.600 Just a quick follow up, so for editor we're talking 135 00:06:56.759 --> 00:06:59.720 vs code, we're talking web the Storm or what. 136 00:07:00.360 --> 00:07:02.879 Yeah, so we have of the twelve to twenty people 137 00:07:02.879 --> 00:07:04.360 that work on the front end, there's a mix of 138 00:07:04.360 --> 00:07:06.720 people in bs CO. There's some Vim users and then 139 00:07:06.759 --> 00:07:09.160 there's some like web Storm or like pie Storm pie 140 00:07:09.240 --> 00:07:13.000 chterm users as well. So getting it to helping people 141 00:07:13.040 --> 00:07:15.399 get set up with vs cod is pretty straightforward. And 142 00:07:15.439 --> 00:07:17.720 then the VIM users have their own like flag channel 143 00:07:17.720 --> 00:07:22.560 where they all share a vimscript and you just hang 144 00:07:22.639 --> 00:07:23.279 out over there. 145 00:07:23.560 --> 00:07:27.199 I don't know what you all are doing, hu, I 146 00:07:27.199 --> 00:07:32.040 imagine you a specially invite to and it's I'm. 147 00:07:31.959 --> 00:07:33.839 One of those Vim people as well. So it was, yeah, 148 00:07:33.879 --> 00:07:36.759 we all work together to get it all working nice. 149 00:07:36.879 --> 00:07:39.120 So yeah, once once everyone had their editors set up, 150 00:07:39.160 --> 00:07:41.759 then the benefits become a lot more visible and a 151 00:07:41.800 --> 00:07:45.079 lot more tangible. And through that and like a code 152 00:07:45.079 --> 00:07:47.920 review like Priscilla was mentioning we're able to kind of 153 00:07:47.959 --> 00:07:50.399 like a guide and educate people forward. And then there 154 00:07:50.480 --> 00:07:52.920 was also some pair programming along the way, like you 155 00:07:52.959 --> 00:07:55.120 should do this in in the persons I don't know, 156 00:07:55.120 --> 00:07:56.439 and then we're like, okay, well we can just sit 157 00:07:56.480 --> 00:07:59.720 with you and help you or like video chat with 158 00:07:59.759 --> 00:08:04.079 you sitting. But yeah, that's the kind of approach we took. 159 00:08:04.079 --> 00:08:06.160 It's impressive that you did it over a pandemic, that's 160 00:08:06.199 --> 00:08:06.600 for sure. 161 00:08:06.959 --> 00:08:11.560 Yeah. That affected the timelines. Yeah. When we started the project, 162 00:08:11.759 --> 00:08:14.120 the timelines were like RMVP was like, well when do 163 00:08:14.160 --> 00:08:16.000 you think you'll be finished? And we gave a timeline 164 00:08:16.079 --> 00:08:20.680 which was complete rubbish. The pandemic came and then the 165 00:08:20.680 --> 00:08:23.079 timelines were very much rubbish, and then we were dealing 166 00:08:23.079 --> 00:08:25.680 with like team burnout. So yeah, just like trying to 167 00:08:25.759 --> 00:08:28.279 keep people motivated was one of the harder parts. I 168 00:08:28.279 --> 00:08:28.800 would say. 169 00:08:28.959 --> 00:08:31.160 One kind of nice thing or fun thing I see 170 00:08:31.160 --> 00:08:34.720 in your article is you have on here that it's 171 00:08:35.039 --> 00:08:37.639 certain points, like certain messier points. You would just leave 172 00:08:37.679 --> 00:08:40.320 in comments that were like to do use like tackle 173 00:08:40.360 --> 00:08:43.879 this later, And personally I kind of like that because 174 00:08:44.360 --> 00:08:47.679 it's like you're talking about like using the typescript like any, 175 00:08:47.799 --> 00:08:51.759 which is like the get out of jail free typescript trick. 176 00:08:52.200 --> 00:08:55.039 But I'm curious about that approach. I think I actually 177 00:08:55.159 --> 00:08:58.000 kind of like it because I'm guessing your point was 178 00:08:58.080 --> 00:09:01.279 you want to get this conversion done right, like addressing 179 00:09:01.320 --> 00:09:06.240 some of the messier type script aspects would potentially break 180 00:09:06.279 --> 00:09:08.960 your code unnecessarily, when really you just wanted to get 181 00:09:08.960 --> 00:09:11.120 things changed and get things out there. Presumably. 182 00:09:11.799 --> 00:09:14.679 Yeah, I would say we tried to use any sparingly. 183 00:09:15.200 --> 00:09:17.840 We tried really hard to do the proper typing, but 184 00:09:17.879 --> 00:09:21.080 there are some places, especially where our type striped interfaces, 185 00:09:21.080 --> 00:09:23.759 where with React, where you can't type it all properly. 186 00:09:24.120 --> 00:09:26.399 I think it's like create ref as the one that 187 00:09:26.559 --> 00:09:29.159 is really annoying, Like you can't put generics through create 188 00:09:29.240 --> 00:09:31.679 create ref it drops them. So we had we had 189 00:09:31.720 --> 00:09:33.120 a few things like that, And we have a lot 190 00:09:33.120 --> 00:09:35.639 of like higher order components because Century is a long 191 00:09:35.679 --> 00:09:38.240 lived REACT applications, so there's many different patterns. There's a 192 00:09:38.240 --> 00:09:40.720 lot of higher artwork components, and we had a lot 193 00:09:40.720 --> 00:09:43.120 of problems with like default props not being able to 194 00:09:43.120 --> 00:09:46.200 tunnel their way through through a higher ardor component. So 195 00:09:46.240 --> 00:09:48.279 those are some of like the Typeescript challenges we kind 196 00:09:48.279 --> 00:09:48.840 of like had. 197 00:09:48.679 --> 00:09:52.360 To hack around, yes, and we used to do so 198 00:09:52.639 --> 00:09:55.559 we can now after the conversion, we are doing that. 199 00:09:55.960 --> 00:09:59.679 Now we are checking those places, those places where we 200 00:09:59.720 --> 00:10:03.200 added to do, and we are trying to find a 201 00:10:03.200 --> 00:10:06.480 better type and yeah and remove to. 202 00:10:06.399 --> 00:10:07.360 Do with the correct tack. 203 00:10:07.799 --> 00:10:09.919 And we were using libraries that had some like not 204 00:10:10.080 --> 00:10:13.559 ideal typing support. So we're using create react class and 205 00:10:13.600 --> 00:10:15.320 some of the types get kind of squidgy when they 206 00:10:15.360 --> 00:10:18.320 go through create react class. So we went back and 207 00:10:18.360 --> 00:10:20.679 like removed all of create react class and like tried 208 00:10:20.679 --> 00:10:23.320 to simplify some of the higher components. And we still 209 00:10:23.320 --> 00:10:25.720 have a budget to Doo's love to do. So while 210 00:10:25.799 --> 00:10:28.759 we're while we're done, we're not like one hundred percent 211 00:10:29.320 --> 00:10:31.039 no any anywhere. There's still some. 212 00:10:31.240 --> 00:10:33.159 So when just typescript it was it was kind of 213 00:10:33.159 --> 00:10:37.480 more generalized. Repass it with the whole system and refactor 214 00:10:37.559 --> 00:10:40.480 some of the old cruft it was stuck around in 215 00:10:40.519 --> 00:10:41.320 there kind of thing. 216 00:10:41.879 --> 00:10:44.519 Yeah, we tried to try to focus, like when you're 217 00:10:44.519 --> 00:10:46.440 converting a file to type script or converting a module 218 00:10:46.440 --> 00:10:49.519 to typescript, like just do the typescript conversions, don't make 219 00:10:49.559 --> 00:10:53.039 too many run time changes unless the typing becomes really 220 00:10:53.039 --> 00:10:56.279 really challenging, because conflating the run time changes with the 221 00:10:56.840 --> 00:10:59.360 with the type changes kind of sets you up for 222 00:10:59.519 --> 00:11:02.919 more problem BOMs than what you you'd want to take 223 00:11:02.960 --> 00:11:04.159 on at this point in time. 224 00:11:04.559 --> 00:11:05.600 Oh loo could go wrong. 225 00:11:08.360 --> 00:11:12.159 Yeah yeah. Another thing that helped us make progress was 226 00:11:12.200 --> 00:11:14.120 to kind of put like a moratorium on any like 227 00:11:14.240 --> 00:11:17.360 other large scale refactoring. So another thing that we've been 228 00:11:17.559 --> 00:11:21.000 battling with is is enzyme is no longer being maintained 229 00:11:21.120 --> 00:11:22.879 as well as we would like to have, and we 230 00:11:22.919 --> 00:11:26.360 want to like be upgraded to REACT seventeen, and enzyme 231 00:11:26.840 --> 00:11:29.320 required some workarounds to make that work. So we also 232 00:11:29.440 --> 00:11:31.919 wanted to shift off of enzyme for testing, but we 233 00:11:31.960 --> 00:11:34.759 didn't want to start that until the typescript was finished 234 00:11:34.799 --> 00:11:37.120 because we'd have too many like inflight projects, and you 235 00:11:37.159 --> 00:11:40.000 get everything half done and then everything is just awful 236 00:11:40.200 --> 00:11:41.600 for a long long period of time. 237 00:11:42.000 --> 00:11:45.679 Yes, we also we agreed that we wouldn't. 238 00:11:45.600 --> 00:11:50.440 Use reacted hooks before the conversion, before the conversion was complete. 239 00:11:50.759 --> 00:11:53.759 So this was one of the things that's motivated MEATS 240 00:11:53.799 --> 00:11:55.360 to convert to even more fires. 241 00:11:55.480 --> 00:11:58.279 I think not only be but to many many other colleagues. 242 00:11:58.759 --> 00:12:02.240 So finally, now after the conversion, we can use react 243 00:12:02.240 --> 00:12:03.519 to hooks. 244 00:12:04.159 --> 00:12:05.440 Yay much better. 245 00:12:06.240 --> 00:12:09.279 Yeah, all right. I mean it's only been a couple 246 00:12:09.320 --> 00:12:12.360 of three years since React Hooks came out. I think 247 00:12:12.440 --> 00:12:15.559 something like that two years. It's been a while. Yeah, yeah, 248 00:12:15.600 --> 00:12:20.960 it's nice. That's a long time. So interesting A question 249 00:12:21.039 --> 00:12:22.759 for you about the educational side of the house. I've 250 00:12:22.759 --> 00:12:25.840 actually done a lot of Typescript education and written, done 251 00:12:25.840 --> 00:12:27.759 a bunch of videos on it and all that, and 252 00:12:27.919 --> 00:12:30.360 a lot of questions that I get are around the 253 00:12:30.399 --> 00:12:33.000 misconception that Typescript has a run time to it, that 254 00:12:33.039 --> 00:12:34.919 it's going to bloat your code because it's going to 255 00:12:35.000 --> 00:12:37.279 do all this type checking and things like that. And 256 00:12:37.759 --> 00:12:39.879 I find it challenging to kind of get through to 257 00:12:39.879 --> 00:12:43.240 folks that Typescript is just at compile time only. There 258 00:12:43.279 --> 00:12:47.320 is no run time version of Typescript. How how much 259 00:12:47.360 --> 00:12:49.080 of a challenge was that for you to get that 260 00:12:49.159 --> 00:12:51.759 across to your team members and what do you say 261 00:12:51.879 --> 00:12:53.480 or do to make you get them to kind of 262 00:12:53.519 --> 00:12:54.000 grock that. 263 00:12:54.320 --> 00:12:57.000 I don't remember that coming up as a big problem. 264 00:12:57.000 --> 00:13:00.039 We're fairly conscious of or bundle signs, so like just 265 00:13:00.080 --> 00:13:04.200 comparing bundle size from the code that webpacker's generating from, 266 00:13:04.240 --> 00:13:06.799 like the down compilation from like Yes six down to 267 00:13:07.080 --> 00:13:10.240 or whatever version we were on, but Yes current down 268 00:13:10.279 --> 00:13:13.440 to Yes five, and then comparing the typescripts compiled down. 269 00:13:13.759 --> 00:13:16.600 We'd be able like it was pretty easy to demonstrate, 270 00:13:16.639 --> 00:13:20.000 like there's no significant runtime cost on bundle size. So 271 00:13:20.480 --> 00:13:22.120 I think that was the way to end that argument, 272 00:13:22.240 --> 00:13:24.639 was like the bundle size is actually the same or smaller, 273 00:13:24.720 --> 00:13:28.440 so it doesn't matter why typrip is doing it right. 274 00:13:28.919 --> 00:13:31.519 Well, I think there's also things like like, for example, 275 00:13:31.639 --> 00:13:34.720 if you put it an interface around where you're saying, okay, 276 00:13:34.720 --> 00:13:36.360 this is what we expect from the server, right, and 277 00:13:36.360 --> 00:13:38.879 then you get a response from the server and it 278 00:13:38.919 --> 00:13:42.000 doesn't match the payload although the type that you have 279 00:13:42.039 --> 00:13:44.480 in the interface, and people kind of expect that. Oh wait, 280 00:13:44.519 --> 00:13:47.039 I thought typeseop was going to validate what was coming 281 00:13:47.039 --> 00:13:49.080 back from the server. And you're like, no, that's not 282 00:13:49.200 --> 00:13:51.519 the way that No, that's not type peop's not going 283 00:13:51.559 --> 00:13:53.679 to do that for you. So is that something That 284 00:13:54.480 --> 00:13:56.879 kind of thing is something that I find challenging. 285 00:13:57.480 --> 00:14:02.320 Yes, yeah, so we are fortunately actually don't we don't 286 00:14:02.360 --> 00:14:05.960 have our payload to type it. So many times we 287 00:14:06.039 --> 00:14:10.080 have to cast it or we already know what data 288 00:14:10.200 --> 00:14:14.080 we are going to get, so we we we add 289 00:14:14.080 --> 00:14:16.559 in the front end the correct type. 290 00:14:17.000 --> 00:14:18.440 But that's that's what we do. 291 00:14:20.279 --> 00:14:22.080 That's what everyone has to do, though, Like there has 292 00:14:22.080 --> 00:14:23.720 to be at the network boundary, you have to be like, 293 00:14:23.759 --> 00:14:25.200 this is what's coming in. I promise. 294 00:14:25.559 --> 00:14:29.399 I think you swear, I promise. That's the thing, right. 295 00:14:29.440 --> 00:14:32.360 I think I think people have this understanding misunderstanding like oh, 296 00:14:32.480 --> 00:14:35.120 type that actually going to be like a joy or 297 00:14:35.120 --> 00:14:37.759 a yup which actually goes through and literally checks to 298 00:14:37.799 --> 00:14:39.600 make sure that like oh there should be an idea 299 00:14:39.639 --> 00:14:42.000 here and there's not that kind of thing. But it's 300 00:14:42.039 --> 00:14:46.639 not gonna do that. Yeah, no, it doesn't do that. 301 00:14:46.639 --> 00:14:47.080 That's her. 302 00:14:47.679 --> 00:14:50.639 Are there any other learning guides you would recommend, like 303 00:14:50.759 --> 00:14:55.600 any like you know, courses or books or anything that 304 00:14:55.919 --> 00:14:58.480 you use for for learning or teaching others that you 305 00:14:58.559 --> 00:15:03.519 might recommend teach typeescript. Yeah, and if not, that's okay too. 306 00:15:03.559 --> 00:15:05.519 It's just so I. 307 00:15:05.480 --> 00:15:07.919 Think in my face. For example, I learned it on 308 00:15:07.960 --> 00:15:10.759 a daily basis. I needed to do something, so I 309 00:15:10.840 --> 00:15:14.279 googled it and then I found a solution. I tested 310 00:15:14.360 --> 00:15:17.679 and tried some things out, and yeah, I think it's 311 00:15:17.720 --> 00:15:23.039 pretty much it. That are a lot of materials on internet. Yeah, 312 00:15:23.080 --> 00:15:24.840 but I don't know one specific. 313 00:15:25.639 --> 00:15:28.320 Yeah, I think we gave people like some links to 314 00:15:28.559 --> 00:15:31.320 like learning typescript guides, Like there's a couple of well 315 00:15:31.320 --> 00:15:34.679 published webbooks that are good. The official docs are really good, 316 00:15:35.039 --> 00:15:36.360 and there's a lot of like if you want to 317 00:15:36.440 --> 00:15:39.320 learn it, just like like message one of us on Slack, 318 00:15:39.360 --> 00:15:41.159 we'll sit with you and talk you through it, or 319 00:15:41.240 --> 00:15:43.000 like work with you on it. And that was a 320 00:15:43.000 --> 00:15:44.799 lot of how we did it. And like I learned 321 00:15:44.799 --> 00:15:47.240 to strip through this commersion. I never used typescript before, 322 00:15:47.879 --> 00:15:50.320 so for me, it was just like learn on the job, 323 00:15:51.759 --> 00:15:54.600 how do I do this? Like, Yeah, a lot of 324 00:15:54.679 --> 00:15:56.519 a lot of that and my reading other people's code 325 00:15:56.639 --> 00:15:57.639 stealing ideas. 326 00:15:57.960 --> 00:16:00.320 When I joined at the Center, the typescript convey ession 327 00:16:00.440 --> 00:16:04.960 was already happening, So I was happy because I had 328 00:16:05.159 --> 00:16:08.679 typescripts and knowledge, and I was glad they could help 329 00:16:08.720 --> 00:16:12.720 the team consequently speeding up the process so then we 330 00:16:12.759 --> 00:16:14.279 could use hooks for example. 331 00:16:17.480 --> 00:16:21.799 Yeah, so I'm curious now that you have typescript out 332 00:16:22.000 --> 00:16:25.519 in production. Well, I guess, first of all, has it 333 00:16:25.720 --> 00:16:28.559 helped stop some of the random bugs that you got 334 00:16:28.600 --> 00:16:31.960 in with the first question? And I'm also curious, like, 335 00:16:32.000 --> 00:16:34.600 now that you have a complete typescript code base, are 336 00:16:34.639 --> 00:16:37.799 there any things that came up with typescript specifically that 337 00:16:37.879 --> 00:16:41.200 you maybe didn't think about early on. 338 00:16:41.639 --> 00:16:45.000 I would say the promise of, you know, solving some 339 00:16:45.039 --> 00:16:48.200 of the runtime errors that could be caught by compilers 340 00:16:48.519 --> 00:16:51.440 has come true. We haven't had a front end code 341 00:16:52.039 --> 00:16:54.919 production incident that could have been caught by a compiler 342 00:16:55.000 --> 00:16:58.399 that wasn't anymore, so we still have like people still 343 00:16:58.399 --> 00:17:01.120 make mistakes. Type script is not a panalcya to solve 344 00:17:01.200 --> 00:17:04.720 all bugs and prevent all problems. Doesn't do that, But 345 00:17:04.839 --> 00:17:06.880 what it does do is stop you from like accessing 346 00:17:06.960 --> 00:17:10.200 nulls and accessing undefines. So I would say those kinds 347 00:17:10.240 --> 00:17:13.319 of like very visible customer problems have not been happening, 348 00:17:13.720 --> 00:17:17.279 and it's forced people to think about types a little 349 00:17:17.319 --> 00:17:19.640 bit better. So I feel like it helps design a 350 00:17:19.720 --> 00:17:22.720 little bit ask for like things we didn't expect to happen. 351 00:17:23.039 --> 00:17:26.400 Bill times have gotten longer just because the compiler. We 352 00:17:26.480 --> 00:17:28.559 have a lot of Typescript, not a lot of touchcrip code, 353 00:17:28.559 --> 00:17:30.880 but we have a sizeable chunk of Typescript codes, so 354 00:17:30.920 --> 00:17:33.640 there is some added compile time. So we've tried to 355 00:17:33.720 --> 00:17:35.920 mitigate that by like keeping as current as we can 356 00:17:36.000 --> 00:17:38.960 with Typescript so that we always get the fastest compiler. 357 00:17:39.119 --> 00:17:39.960 I guess how. 358 00:17:39.920 --> 00:17:42.440 Much longer are we talking? How long does it take 359 00:17:42.440 --> 00:17:46.599 the typescript compiler and your year app a couple of minutes? Okay, 360 00:17:46.799 --> 00:17:49.960 and that's something you only experience. Like dev time is fine, 361 00:17:50.039 --> 00:17:52.240 right because it's like compiling as you go, But just 362 00:17:52.440 --> 00:17:55.480 when you build for like a release or whatever, I. 363 00:17:55.400 --> 00:17:58.839 Think there's well, building for releases happens, like you merge 364 00:17:58.880 --> 00:18:01.720 to master and then holding stuff happens, and then Docker 365 00:18:01.720 --> 00:18:03.759 images have to be built, and like that whole Docker 366 00:18:03.799 --> 00:18:06.240 image build process is the is a long part. I 367 00:18:06.240 --> 00:18:09.920 would say the CI and local dev is the slower part, 368 00:18:09.960 --> 00:18:13.160 where like spinning up webpacks, it has a like an 369 00:18:13.200 --> 00:18:16.279 initial lead time of about a minute for it to 370 00:18:16.279 --> 00:18:19.039 get started, and then in CI, like the linting and 371 00:18:19.039 --> 00:18:21.680 type scripting checking takes a couple of minutes. 372 00:18:22.240 --> 00:18:26.160 Interesting, Okay. I'm playing a lot with es build and 373 00:18:26.319 --> 00:18:30.759 SWC lately, which are like Rust and go jsts compilers, 374 00:18:30.799 --> 00:18:34.480 and in the right context, they can make a significant 375 00:18:35.079 --> 00:18:36.960 difference in those compiled. 376 00:18:36.599 --> 00:18:39.400 Times good time. That's the thing I would like to do. 377 00:18:39.440 --> 00:18:40.759 We have a lot of we have a couple of 378 00:18:40.839 --> 00:18:44.279 custom webpac module like custom web pack plugins, which makes 379 00:18:44.279 --> 00:18:48.119 it hard because we're deeply entwined into Webpack. I've used 380 00:18:48.200 --> 00:18:51.599 VTA on our fight on a little side project and 381 00:18:51.640 --> 00:18:55.519 it was awesome. The compile times completely go away. But yeah, 382 00:18:55.559 --> 00:18:57.400 we were kind of deep in the webpack pool. 383 00:18:59.079 --> 00:19:02.279 Yeah, VAT is amazing. So I've heard a lot of 384 00:19:02.400 --> 00:19:05.880 issues around a typescript and just kind of naysayers like 385 00:19:06.400 --> 00:19:08.559 I just don't want to do typescript when it comes 386 00:19:08.599 --> 00:19:12.000 to more comfortable jobascript. One of another complainert here is 387 00:19:12.160 --> 00:19:16.119 that it makes code ugly. So is that something that 388 00:19:16.279 --> 00:19:18.720 you had any resistance on folks saying I just don't 389 00:19:18.720 --> 00:19:19.480 like the look of it. 390 00:19:20.000 --> 00:19:25.359 Yes, Yes, the CTO was very much like typescript just 391 00:19:25.400 --> 00:19:28.519 makes code ugly and hard to read, But we did it. Anyways. 392 00:19:28.759 --> 00:19:32.200 I would say that like we also, like Century is 393 00:19:32.240 --> 00:19:34.839 a is a mixed shop. So we have something we 394 00:19:34.880 --> 00:19:37.000 have a lot of JavaScript, we have Python, and then 395 00:19:37.000 --> 00:19:39.400 we also have Rust, and so typescript is not nearly 396 00:19:39.440 --> 00:19:42.240 as ugly as rust, so it's quite. 397 00:19:42.119 --> 00:19:48.400 Palatable fighting words right there. 398 00:19:48.680 --> 00:19:51.559 It's funny. It's all in the idea to beholder, because 399 00:19:51.720 --> 00:19:54.119 I worked for a company that was a long time 400 00:19:54.200 --> 00:19:57.279 dot net shop, and they considered typescript like the height 401 00:19:57.319 --> 00:20:00.680