1 00:00:04,324 --> 00:00:07,864 Eddie: Welcome to episode 23 of the web joy podcast. 2 00:00:08,254 --> 00:00:12,634 I'm your host Eddie in this podcast, we interview guests about their origin 3 00:00:12,634 --> 00:00:16,954 story and what makes them excited and joyful to be part of the tech community. 4 00:00:17,584 --> 00:00:19,324 I hope you enjoy today's episode. 5 00:00:19,504 --> 00:00:22,254 It's nice to build for the future with Zach Jackson. 6 00:00:25,279 --> 00:00:25,639 Awesome. 7 00:00:25,639 --> 00:00:27,949 Well thank you for joining us today, Zach. 8 00:00:28,009 --> 00:00:29,569 I really appreciate you making the time. 9 00:00:29,719 --> 00:00:30,709 Zack: Yeah, absolutely. 10 00:00:30,799 --> 00:00:31,669 Uh, thanks for having me. 11 00:00:32,089 --> 00:00:32,719 Typically, I like 12 00:00:32,719 --> 00:00:35,239 Eddie: to start out by just kind of having you introduce yourself, you 13 00:00:35,244 --> 00:00:36,949 know, who are you, what do you do? 14 00:00:36,979 --> 00:00:37,849 Where do you work, the 15 00:00:37,849 --> 00:00:38,449 Zack: basics. 16 00:00:38,989 --> 00:00:39,439 Yeah. 17 00:00:39,769 --> 00:00:43,249 I'm a principal engineer at Lululemon, based out in Seattle. 18 00:00:43,519 --> 00:00:47,749 Pretty much work on, you know, anything involving the web there. 19 00:00:47,839 --> 00:00:52,939 So from platform product features, what we're gonna do in the future, all of. 20 00:00:53,629 --> 00:00:54,019 What's 21 00:00:54,019 --> 00:00:55,759 Eddie: your kind of story, right? 22 00:00:55,759 --> 00:00:57,199 How did you get involved in tech? 23 00:00:57,289 --> 00:01:00,709 How did you end up as a principal at Lulu 11? 24 00:01:01,039 --> 00:01:01,249 Yeah. 25 00:01:01,249 --> 00:01:02,419 What's that journey look like for. 26 00:01:03,214 --> 00:01:07,204 Zack: I was always interested in computers and networking and stuff 27 00:01:07,204 --> 00:01:11,704 like that, and I ended up writing code, I think when I was about 13 or 14. 28 00:01:11,704 --> 00:01:15,454 Started writing software, didn't do very well in high school. 29 00:01:15,724 --> 00:01:19,444 Finally graduated and just went into software cuz that's what I knew. 30 00:01:19,714 --> 00:01:19,954 Yeah. 31 00:01:19,954 --> 00:01:22,384 You know, it kind of just snowballed from there, you know, 32 00:01:22,384 --> 00:01:23,824 no formal training or anything. 33 00:01:24,504 --> 00:01:25,344 Just, I dunno. 34 00:01:25,344 --> 00:01:27,894 If you google enough of it, know how to find answers, then you 35 00:01:27,894 --> 00:01:29,004 can get everything that you need. 36 00:01:29,454 --> 00:01:31,074 So that's more or less what I did. 37 00:01:31,134 --> 00:01:35,800 And then finally I kind of started to run out of, um, I dunno. 38 00:01:35,805 --> 00:01:38,539 I feel like if you're in like the front end space, at some point you 39 00:01:38,539 --> 00:01:40,999 start to feel like you've seen it all. 40 00:01:41,239 --> 00:01:45,829 And at that point it's either you kind of pivot into back end or into another 41 00:01:45,834 --> 00:01:48,049 language, or you go deeper into the stack. 42 00:01:48,109 --> 00:01:50,419 And so that's really what I started doing. 43 00:01:50,509 --> 00:01:53,659 The thing I picked up on, or the thing that really caught my interest 44 00:01:53,664 --> 00:01:55,939 was like compilers and architecture. 45 00:01:56,389 --> 00:02:01,369 And so most of everything that I pivoted over to was working on compilers, 46 00:02:01,369 --> 00:02:02,629 working on architecting these. 47 00:02:03,359 --> 00:02:06,329 After building several myself, I had seen you. 48 00:02:06,964 --> 00:02:11,734 What pretty much ends up happening to just about every application and I 49 00:02:11,734 --> 00:02:16,474 kind of wanted to move into the space of solving that industry wide instead 50 00:02:16,474 --> 00:02:18,214 of just kind of doing the same thing. 51 00:02:18,544 --> 00:02:21,604 And that's, yeah, that's kind of where I made a bit of a name for myself, 52 00:02:21,754 --> 00:02:25,954 started contributing to Webpac and um, that's ultimately how I ended 53 00:02:25,954 --> 00:02:28,804 up coming to principal engineer was just make something scale. 54 00:02:29,799 --> 00:02:31,689 And that's easier said than done. 55 00:02:31,869 --> 00:02:33,219 Eddie: That definitely will do it though, right? 56 00:02:33,219 --> 00:02:38,049 Like if you're working on big enough scales, on big enough things, then yeah. 57 00:02:38,659 --> 00:02:41,289 You end up in a pretty nice position, 58 00:02:42,469 --> 00:02:42,799 . Zack: Yeah. 59 00:02:42,799 --> 00:02:47,359 The one thing I also found, like I enjoy open source quite a bit and 60 00:02:47,719 --> 00:02:51,769 especially working on say something like Webpac, The one nice thing I found of 61 00:02:51,769 --> 00:02:55,399 it is usually the complexity there is. 62 00:02:55,989 --> 00:02:58,149 I mean, it's the most complicated thing that I've worked on. 63 00:02:58,149 --> 00:03:02,949 So anything that I do professionally is generally quite trivial in comparison. 64 00:03:02,949 --> 00:03:06,849 So it does make kind of the professional side of things a lot easier to kind 65 00:03:06,849 --> 00:03:11,289 of go through the the ladders, just because most companies don't need 66 00:03:11,289 --> 00:03:15,999 something that complicated, but that awareness of something more complex. 67 00:03:16,314 --> 00:03:19,404 Really does help bolster day to day what you would do. 68 00:03:19,674 --> 00:03:22,434 Eddie: No, that makes complete sense, cuz, Yeah, like if you're having to 69 00:03:22,434 --> 00:03:26,904 operate at this level in the open source community and then your day job is kind 70 00:03:26,904 --> 00:03:31,704 of at this level, like it's kind of relaxing to work on your day job because 71 00:03:31,704 --> 00:03:34,824 you're really having to use a lot of mental energy on the open source stuff. 72 00:03:35,214 --> 00:03:35,514 Zack: Yeah. 73 00:03:35,574 --> 00:03:38,844 You know, I mean it's like how do we deal with, say, some state management, not how 74 00:03:39,084 --> 00:03:42,024 do we parse as s t and A compiler for. 75 00:03:42,844 --> 00:03:44,074 At scale and at speed. 76 00:03:44,074 --> 00:03:47,944 So different class of issue, but you know, there's a lot of tie overs that 77 00:03:47,944 --> 00:03:51,364 you can get, especially like around good API design, like if you think 78 00:03:51,369 --> 00:03:52,954 of platforms and things like that. 79 00:03:52,984 --> 00:03:53,524 Yeah. 80 00:03:53,614 --> 00:03:55,714 And then to kind of where, I don't know, at least for me, what I got 81 00:03:55,714 --> 00:03:59,644 into was, okay, well how much can I make the compiler do so that I don't 82 00:03:59,644 --> 00:04:02,944 have to say, write rappers or write abstractions or anything like that. 83 00:04:03,664 --> 00:04:07,534 Bake it all into the platform similar to what next has kind of done, you 84 00:04:07,534 --> 00:04:09,004 just use it and it kind of works. 85 00:04:09,364 --> 00:04:11,614 Try to extend that out to the business cases as well. 86 00:04:11,619 --> 00:04:15,214 So custom plugins for the, for Webpac alleviates a lot of the 87 00:04:15,214 --> 00:04:17,854 engineering challenges from day to day. 88 00:04:18,334 --> 00:04:20,674 Eddie: Yeah, no, that makes complete sense and definitely 89 00:04:20,914 --> 00:04:23,914 Webpac is how I came to know you. 90 00:04:23,974 --> 00:04:28,714 Um, you know, I was looking into what to do with these module things and ran 91 00:04:28,714 --> 00:04:30,904 across your talk on Module Federation. 92 00:04:31,724 --> 00:04:35,024 All that stuff and that's kinda how I found you on Twitter and then 93 00:04:35,174 --> 00:04:39,644 thought, hey, you'd be a, a fun guest to have on the, the podcast. 94 00:04:39,644 --> 00:04:45,374 So your open source work continues to kind of be your primary thing there, . Awesome. 95 00:04:45,374 --> 00:04:46,394 Well, yeah. 96 00:04:46,394 --> 00:04:49,244 What kind of keeps you excited and interested working as a 97 00:04:49,244 --> 00:04:50,024 Zack: software engineer? 98 00:04:50,114 --> 00:04:55,634 I would say I'm definitely a bit biased, but you know, I mostly work on this stuff 99 00:04:55,634 --> 00:04:58,304 all the time, so distributed architecture. 100 00:04:58,844 --> 00:05:02,924 That's probably what I'm most interested in and a lot of the things that I do 101 00:05:02,924 --> 00:05:07,754 revolve around around that, like in particular like, so there's Federation, 102 00:05:07,759 --> 00:05:11,924 which I had a part in building and I focus a lot of time on that. 103 00:05:11,929 --> 00:05:14,444 But things that kind of keep me excited inside of there is. 104 00:05:14,824 --> 00:05:16,264 Expanding what it can do. 105 00:05:16,414 --> 00:05:19,684 The biggest one is being able to do the server side, so it's not just a browser 106 00:05:19,684 --> 00:05:23,374 side tech, but the same kind of capability being able to say server side render 107 00:05:23,374 --> 00:05:26,914 something, or high density computing, where the way I always think of it is 108 00:05:26,914 --> 00:05:28,654 like what serverless was supposed to be. 109 00:05:28,714 --> 00:05:31,924 So instead of, you know, you upload a zip file to the Lambda and it's 110 00:05:31,924 --> 00:05:35,674 serverless, it's still your, your code is bound to compute primitive, 111 00:05:35,734 --> 00:05:39,124 and the only way to update that code is to tear down the compute primitive 112 00:05:39,124 --> 00:05:41,044 and bind new files to a different one. 113 00:05:41,164 --> 00:05:43,684 Or if I wanna say roll back, I need to have another lambda. 114 00:05:44,284 --> 00:05:45,964 To reroute traffic too. 115 00:05:46,294 --> 00:05:50,344 So what's been very interesting is getting rid of that and just saying, 116 00:05:50,704 --> 00:05:54,034 find a CPU on the internet and compute anything that I want it to. 117 00:05:54,334 --> 00:05:57,814 At any point, I can hit this, this Lambda, and it can be ssr. 118 00:05:57,814 --> 00:06:01,264 I can hit it again, it can be GraphQL or SSR can call itself 119 00:06:01,264 --> 00:06:02,824 and become a GraphQL endpoint. 120 00:06:03,179 --> 00:06:07,259 In the same kind of loop through not having all the files bound 121 00:06:07,259 --> 00:06:08,969 to the compute primitive. 122 00:06:08,969 --> 00:06:12,899 So that ability to, you know, just stream software into any machine and 123 00:06:12,899 --> 00:06:16,409 it become whatever you want, has been really interesting just to play with. 124 00:06:16,409 --> 00:06:19,259 But from a scale standpoint, it's also been really interesting to 125 00:06:19,259 --> 00:06:21,779 think about for disaster recovery. 126 00:06:21,989 --> 00:06:26,699 If this API isn't working or if something doesn't work, I could just catch 127 00:06:26,699 --> 00:06:30,299 it and say, Okay, stream a previous deployment of the one thing that didn't 128 00:06:30,299 --> 00:06:32,389 work, and then rerun that part of the. 129 00:06:32,854 --> 00:06:36,844 Without having to say, reroute it to another Lambda or anything like that. 130 00:06:36,844 --> 00:06:38,434 So that's what I found super interesting. 131 00:06:38,434 --> 00:06:41,194 Instead of having to deploy, say, a mountain of Lambdas, I can just put up 132 00:06:41,194 --> 00:06:43,504 one and I just have everything else on s3. 133 00:06:43,894 --> 00:06:47,794 And Webpac is just pulling down what I need as I need it, and because I have 134 00:06:47,794 --> 00:06:51,364 access to that run time and nothing's bound to the machine, if any error 135 00:06:51,364 --> 00:06:54,754 comes up or I need to roll back or do anything personalized, I can hot 136 00:06:54,754 --> 00:06:58,534 reload the production servers and just pull in pretty much any piece of 137 00:06:58,539 --> 00:06:59,744 code across the company that I need. 138 00:07:00,254 --> 00:07:00,884 Eddie: That's cool. 139 00:07:00,884 --> 00:07:05,204 I remember seeing a tweet you did probably a couple weeks or a month or two ago 140 00:07:05,204 --> 00:07:08,474 or something, but I don't remember what website it was, but one of the websites 141 00:07:08,474 --> 00:07:12,704 you were running, like had like crashed or the, like, one of the servers had crashed 142 00:07:12,704 --> 00:07:17,834 and like you hadn't even realized because it was like kind of auto recovered itself. 143 00:07:17,894 --> 00:07:20,384 And that was, that was an interesting tweet. 144 00:07:20,384 --> 00:07:20,924 I was like, Wait, 145 00:07:20,924 --> 00:07:21,464 Zack: what? 146 00:07:21,794 --> 00:07:25,574 Yeah, so that was like, I had planned to build something 147 00:07:25,574 --> 00:07:27,104 like more official for that. 148 00:07:27,849 --> 00:07:31,059 I haven't like gotten around to like making it an easy thing 149 00:07:31,059 --> 00:07:34,599 to do, but just how I had kind of designed the architecture. 150 00:07:34,839 --> 00:07:37,509 It hap like, it accidentally ended up self-healing. 151 00:07:37,514 --> 00:07:41,319 So when I would see an error come across, the only way I noticed something might 152 00:07:41,324 --> 00:07:45,219 be wrong is it took like an extra 200 milliseconds to respond and that was 153 00:07:45,219 --> 00:07:46,709 cuz the server would completely crash. 154 00:07:47,234 --> 00:07:51,134 The dependency tree would renegotiate mid-flight and then rerun it and 155 00:07:51,134 --> 00:07:52,664 then respond with the correct thing. 156 00:07:52,934 --> 00:07:56,834 It's very cool considering that would usually be a 500 error for it to just be 157 00:07:56,834 --> 00:08:02,144 an extra hundred milliseconds, and I still only had one Lambda ever deployed, so it 158 00:08:02,144 --> 00:08:04,274 was just one branch and it always worked. 159 00:08:04,754 --> 00:08:08,684 And that ability to try and make something that's extremely hard to knock off line is 160 00:08:09,104 --> 00:08:10,904 it's really cool just to see it in action. 161 00:08:11,374 --> 00:08:12,574 Eddie: Self-healing server. 162 00:08:12,574 --> 00:08:15,964 What you're telling me is you basically built Skynet and it's 163 00:08:15,964 --> 00:08:17,914 gonna destroy the world now, . Well, 164 00:08:17,914 --> 00:08:21,334 Zack: it's still, uh, and we need the, we need the machine learning portion of it, 165 00:08:21,334 --> 00:08:23,134 so you don't have to try catch everything. 166 00:08:23,194 --> 00:08:24,784 But I mean, , that's true. 167 00:08:25,024 --> 00:08:27,574 It would be very cool to have a Skynet type system. 168 00:08:28,504 --> 00:08:32,284 At least not the one that destroys the world, but from a it fixes itself 169 00:08:32,284 --> 00:08:33,874 kind of standpoint runs itself. 170 00:08:34,084 --> 00:08:34,594 Yeah. 171 00:08:34,714 --> 00:08:35,224 Eddie: Nice. 172 00:08:35,314 --> 00:08:35,824 That's awesome. 173 00:08:36,964 --> 00:08:41,254 One of the things that we do as we talk in these podcasts is kind of 174 00:08:41,254 --> 00:08:46,294 talking about, hey, like what brings us joy in the tech industry and stuff. 175 00:08:46,294 --> 00:08:49,054 And so just wanted to ask, what's something that brings 176 00:08:49,054 --> 00:08:50,704 you joy that you'd like to talk? 177 00:08:51,624 --> 00:08:56,044 Zack: I would say so something new that I've, that I've started to dive into has 178 00:08:56,044 --> 00:09:02,104 been recoil and that has actually been quite refreshing compared to, I mean, 179 00:09:02,104 --> 00:09:04,804 I've mostly just kind of stuck with Redux cuz I kind of did what I need, 180 00:09:05,104 --> 00:09:07,624 but working in say, distributed systems. 181 00:09:08,404 --> 00:09:12,814 We start to get into this weird space of if any piece of software 182 00:09:12,814 --> 00:09:16,804 can change at any point in time without redeploying the host layer. 183 00:09:17,074 --> 00:09:19,744 How do you make it stay reliable? 184 00:09:19,924 --> 00:09:22,594 Usually, you know, if it's redux, you kind of hydrate the store up front. 185 00:09:22,594 --> 00:09:24,784 It's a monolith, so it's not gonna change out from under you. 186 00:09:24,789 --> 00:09:28,924 But if I have an inventory component and I can deploy that at any point in. 187 00:09:29,689 --> 00:09:31,699 And put it anywhere on an application. 188 00:09:31,939 --> 00:09:34,369 How do I ensure that it can always fetch inventory? 189 00:09:34,459 --> 00:09:36,889 So this idea of, okay, well I need it to fetch its own data. 190 00:09:37,189 --> 00:09:39,829 That's great until every component's fetching its own data. 191 00:09:40,159 --> 00:09:43,339 Now you've got your DDoS and your backend or something like that. 192 00:09:43,339 --> 00:09:47,329 So trying to figure out, okay, how can I say, whoever needs it first, get it. 193 00:09:47,329 --> 00:09:51,259 Everybody else reference it and trying to build something where I 194 00:09:51,259 --> 00:09:53,299 don't, there's no binding to the page. 195 00:09:54,154 --> 00:09:57,244 When you put multiple things on the page, they will work together without any 196 00:09:57,244 --> 00:10:00,814 like strict coupling and can communicate between each other without needing to 197 00:10:00,814 --> 00:10:04,174 go and say, alter the page and say, We'll wrap these two in context, or 198 00:10:04,414 --> 00:10:08,659 create a callback between A and B, but just, um, Some kind of atomic layer 199 00:10:08,659 --> 00:10:11,659 where I could just broadcast, Hey, this is gonna change and something 200 00:10:11,659 --> 00:10:14,719 else can respond to it without other parties having to be aware of it. 201 00:10:14,929 --> 00:10:18,169 And so that challenge was quite tricky until I kind of came across 202 00:10:18,199 --> 00:10:22,099 recoil and it seems to solve a lot of the concerns that I'd had about 203 00:10:22,339 --> 00:10:26,149 making something self-sustaining and making it efficient as well. 204 00:10:26,149 --> 00:10:29,809 So Recoils been a big relief for me in the past couple weeks. 205 00:10:30,199 --> 00:10:30,589 That's really 206 00:10:30,939 --> 00:10:31,139 Eddie: interesting. 207 00:10:31,139 --> 00:10:33,769 I actually haven't heard of Recoil, um, hasn't come across. 208 00:10:34,579 --> 00:10:36,559 Kind of timeline or anything yet. 209 00:10:36,769 --> 00:10:39,949 So I was just looking it up cuz I'm like, Oh, this sounds new, 210 00:10:39,949 --> 00:10:41,919 but that's looks pretty cool. 211 00:10:42,394 --> 00:10:45,124 Zack: The best way that, like, I'd never really heard of it 212 00:10:45,124 --> 00:10:47,464 until someone on my team was like, Hey, have you checked this out? 213 00:10:47,464 --> 00:10:48,394 And I'm like, Lemme go. 214 00:10:48,454 --> 00:10:49,264 Lemme go check it out. 215 00:10:49,714 --> 00:10:53,074 And the way they kind of described it to me was, it's kind of as if 216 00:10:53,074 --> 00:10:57,214 you were to take the React render and instead of html, it's state. 217 00:10:57,544 --> 00:10:59,434 And so it's got like the ding engine. 218 00:10:59,434 --> 00:11:02,374 It even uses the react internals for scheduling and stuff like that. 219 00:11:02,374 --> 00:11:05,854 So it's almost like having another render tree that just does JSON 220 00:11:05,854 --> 00:11:08,224 state for updating the application. 221 00:11:08,224 --> 00:11:10,234 Then you have your HTML tree, which is reacting. 222 00:11:10,239 --> 00:11:12,544 You have recoil, which is the same thing, but for state. 223 00:11:12,764 --> 00:11:16,784 So now only if I change this state down here, re render that subsection 224 00:11:16,874 --> 00:11:19,454 and don't, you know, repaint the whole application or rerun it. 225 00:11:19,814 --> 00:11:21,224 But it's really, really neat. 226 00:11:21,254 --> 00:11:24,704 I must admit it's, it's like if you were to make React for State, 227 00:11:24,704 --> 00:11:26,204 that's kind of what recoil is. 228 00:11:26,504 --> 00:11:27,634 There's a couple like other. 229 00:11:28,299 --> 00:11:29,079 Things that are similar. 230 00:11:29,079 --> 00:11:31,479 I think like you might have heard of Zest Stand or Joy Tie. 231 00:11:31,539 --> 00:11:34,239 Those are some other state libraries that have come out. 232 00:11:34,239 --> 00:11:34,389 I think 233 00:11:34,389 --> 00:11:36,279 Eddie: Joy Tie sounds familiar. 234 00:11:36,279 --> 00:11:36,819 The first one 235 00:11:36,824 --> 00:11:37,709 Zack: didn't, but yeah. 236 00:11:37,714 --> 00:11:37,719 Yeah. 237 00:11:37,719 --> 00:11:41,499 Joy Tie's, uh, from developer Dehi have him on Twitter. 238 00:11:41,504 --> 00:11:44,799 He, he makes a couple really interesting things, but they all seem to be 239 00:11:44,799 --> 00:11:46,599 doing kind of like a similar concept. 240 00:11:46,899 --> 00:11:49,629 But yeah, recoil, joy ties us stand. 241 00:11:49,989 --> 00:11:54,869 Any of those, I think would kind of, A similar kind of need, but it is really 242 00:11:54,869 --> 00:11:58,079 nice when you're looking for something that's more efficient and more modular. 243 00:11:58,289 --> 00:12:02,849 We always are talking about trying to make things modular, but that only goes so far. 244 00:12:02,849 --> 00:12:07,649 And then as soon as you hit context, it's like, well, it's modular until I need a 245 00:12:07,654 --> 00:12:09,329 side effect from higher up in the tree. 246 00:12:09,569 --> 00:12:12,389 And you have to know, well, if I don't wrap in context, it's not gonna work. 247 00:12:12,419 --> 00:12:12,599 Mm-hmm. 248 00:12:12,989 --> 00:12:15,539 . So it'd be great to say, Well, all I have to do is wrap it 249 00:12:15,539 --> 00:12:17,009 and say like the recoil route. 250 00:12:17,339 --> 00:12:18,299 So put that in the app. 251 00:12:18,299 --> 00:12:19,169 Shell, everyone has. 252 00:12:19,759 --> 00:12:23,599 Put anything anywhere you want and it'll either get or create the data bindings 253 00:12:23,599 --> 00:12:27,709 that it needs, which is, um, a nice pattern for keeping things truly modular. 254 00:12:28,159 --> 00:12:29,089 Eddie: No, this sounds really interesting. 255 00:12:29,089 --> 00:12:32,869 I'm definitely gonna have to dive into this more, um, when I have the 256 00:12:32,869 --> 00:12:36,889 time because this looks, uh, looks pretty cool and looks really easy too. 257 00:12:36,889 --> 00:12:39,919 Like, I mean, it's, it feels very natively. 258 00:12:39,919 --> 00:12:41,869 React doesn't feel like anything's being bolted on. 259 00:12:41,869 --> 00:12:41,929 I. 260 00:12:42,649 --> 00:12:48,499 You literally replace use state with use recoil state, and like the API is 261 00:12:48,499 --> 00:12:50,299 the exact same as a use state hook. 262 00:12:50,299 --> 00:12:51,649 So that's sweet. 263 00:12:52,069 --> 00:12:55,309 Zack: The nice thing about it, it's, uh, suspense friendly. 264 00:12:55,549 --> 00:12:58,279 So you can put a promise as one of the, yes. 265 00:12:58,549 --> 00:13:02,569 Like say if I wanna go get price, that's an async method and it'll just return. 266 00:13:03,169 --> 00:13:06,829 The price statically, like if I cons log right under the hook, it's not a 267 00:13:06,829 --> 00:13:08,929 promise, it's the resolved promise. 268 00:13:09,169 --> 00:13:14,329 And there's a, We use something called service side effect, which is pretty 269 00:13:14,329 --> 00:13:17,919 much like suspense for React 17 or 16. 270 00:13:18,514 --> 00:13:21,874 It's a way to like say, okay, double render the app on the first render. 271 00:13:21,874 --> 00:13:25,834 Collect all these promises, take those side effects, load them in somewhere, 272 00:13:25,834 --> 00:13:29,134 await that set of side effects, come back, fill up context, and then 273 00:13:29,514 --> 00:13:30,724 actually let the real render happen. 274 00:13:30,994 --> 00:13:34,714 Bit of a hack, but it's really great cuz we could start developing say 275 00:13:34,834 --> 00:13:39,034 component level data fetching that's works on the server side while waiting 276 00:13:39,034 --> 00:13:41,074 for say next Gs to fully support it. 277 00:13:41,074 --> 00:13:43,894 Or you know, if you can't move to 18 yet you could build an 278 00:13:43,894 --> 00:13:46,234 application based on suspense pattern. 279 00:13:46,579 --> 00:13:49,609 And when you move to suspense, you just get rid of service side effect and replace 280 00:13:49,609 --> 00:13:53,869 it with like, use, fetch or whatever the, the normal suspendable hook would be. 281 00:13:54,109 --> 00:13:57,319 And so with recoil, you can either support it right out the box, 282 00:13:57,324 --> 00:13:58,999 or if not, there's two setters. 283 00:13:59,004 --> 00:14:02,809 One of them's like a suspendable setter, and another one will be the hook 284 00:14:02,809 --> 00:14:04,429 will immediately return the promise. 285 00:14:04,724 --> 00:14:08,054 And so what I usually do is I'll say, Cool, like, you know, get recoil state. 286 00:14:08,114 --> 00:14:10,934 I get back the async operation right below it. 287 00:14:10,934 --> 00:14:14,624 I have a use server side effect, and I just take from the state into the server 288 00:14:14,624 --> 00:14:16,724 side effect and return the recoil state. 289 00:14:16,964 --> 00:14:20,654 And now that will force the application to pause during a synchronous render, wait 290 00:14:20,659 --> 00:14:23,744 for all the data to fill out, and then it'll actually continue rendering the app. 291 00:14:23,744 --> 00:14:28,724 So I just have to remove one hook and then my whole application is back on suspense. 292 00:14:28,724 --> 00:14:33,394 But I can build that out ahead of time, which is really, really, That's huge 293 00:14:33,394 --> 00:14:35,584 Eddie: because so much is frustrating. 294 00:14:35,584 --> 00:14:39,544 If you like, like you said, you're stuck in a certain version, say React 295 00:14:40,024 --> 00:14:43,904 17 or whatever, but you're building something new and you wanna be able to 296 00:14:43,909 --> 00:14:45,454 build, like with a new architecture. 297 00:14:45,634 --> 00:14:48,274 I've run into that so many times on teams where it's like, well, we can't 298 00:14:48,279 --> 00:14:50,734 move yet because we're in a big company. 299 00:14:50,914 --> 00:14:54,724 We have all these dependencies, but instead, like we don't really wanna 300 00:14:54,724 --> 00:14:59,554 build with the old pattern and then have to rewrite it in six months or a year 301 00:14:59,554 --> 00:15:01,714 when we actually get to the new version. 302 00:15:02,539 --> 00:15:07,519 That seems like a huge, a huge deal to be able to write the suspense pattern 303 00:15:07,519 --> 00:15:12,949 in 17 and then just kind of make small updates to when you get to 18. 304 00:15:13,309 --> 00:15:15,949 Zack: If you were to say, take the two hooks and abstract it out, 305 00:15:15,949 --> 00:15:17,389 and compose a new hook that has. 306 00:15:17,734 --> 00:15:21,934 Use service side effect recoil state or something like that. 307 00:15:21,934 --> 00:15:25,084 And you just have that hook be cool, recoil state, and then right 308 00:15:25,084 --> 00:15:26,614 below it, service side effect. 309 00:15:26,854 --> 00:15:29,404 Then you could just pull that in and it automatically suspends it. 310 00:15:29,404 --> 00:15:32,074 So all you have to do is change your abstraction and say, well drop off the 311 00:15:32,074 --> 00:15:36,694 use suspense and change it from like use state to use suspendable effect or 312 00:15:36,694 --> 00:15:40,114 whatever it's called in, in recoil and that's the only change you would make. 313 00:15:40,114 --> 00:15:41,614 And automatically everything would work. 314 00:15:41,614 --> 00:15:43,714 But we've been doing component level data fetch. 315 00:15:44,449 --> 00:15:47,329 With this pattern for probably like a year now. 316 00:15:47,689 --> 00:15:51,469 So, you know, 18 just came out and it's still not fully supported next, 317 00:15:51,469 --> 00:15:55,369 but we've already got a good portion of the application built where the 318 00:15:55,369 --> 00:15:58,429 components fetch their own data and fulfill everything that they need to. 319 00:15:58,434 --> 00:16:01,009 So the only piece we really had to figure out was, well, how do 320 00:16:01,014 --> 00:16:02,689 we do efficient state management? 321 00:16:02,694 --> 00:16:06,079 So we're not hitting those APIs a lot, but the way I always look at it is, 322 00:16:06,079 --> 00:16:07,819 well, this is an inevitability anyway. 323 00:16:07,819 --> 00:16:10,999 If we have a way to just double end with the app, thanks to how 324 00:16:10,999 --> 00:16:12,799 React is and how memory management. 325 00:16:13,609 --> 00:16:15,589 Double rendering a server app. 326 00:16:15,829 --> 00:16:19,249 I mean it's like an extra, I think 20 milliseconds to do the final 327 00:16:19,249 --> 00:16:20,869 render cuz it's the first render. 328 00:16:20,869 --> 00:16:21,919 That's the slow one. 329 00:16:21,924 --> 00:16:24,079 It has to require everything, it has to do all of that. 330 00:16:24,379 --> 00:16:27,799 If I just go render to string again, it's like 10 to 20 milliseconds. 331 00:16:28,009 --> 00:16:31,729 So I'd much rather just say, Okay, let me make it 20 milliseconds slower. 332 00:16:31,909 --> 00:16:35,239 And I've enabled, you know, the next two and a half years or so of 333 00:16:35,449 --> 00:16:39,589 my application's life cycle a year ahead of when suspense is even gonna 334 00:16:39,594 --> 00:16:41,479 come out or when React 18 is even a. 335 00:16:42,264 --> 00:16:44,664 Back on React 16, we were building with that pattern. 336 00:16:44,724 --> 00:16:47,454 So by the time 18 comes out, it's just dropping shms. 337 00:16:47,784 --> 00:16:50,874 But it's nice to build for the future and not kind of be stuck with what you have 338 00:16:50,874 --> 00:16:54,864 right now, but be able to design and as long as it's still, it's just, you know, 339 00:16:55,044 --> 00:16:58,854 we always try to think of it is, it should happen to work today, but it's really 340 00:16:58,859 --> 00:17:02,934 designed for what's not yet available because when it is, you're already set. 341 00:17:03,589 --> 00:17:05,269 Eddie: I love that building for the future. 342 00:17:05,899 --> 00:17:07,099 That's a great set of tools. 343 00:17:07,099 --> 00:17:11,689 I'm gonna definitely include like links to all the different tools that 344 00:17:11,689 --> 00:17:13,399 we talked about in the show notes. 345 00:17:13,519 --> 00:17:16,849 So if any of these things stood out to you all, feel free 346 00:17:16,849 --> 00:17:18,049 to check out the show notes. 347 00:17:18,319 --> 00:17:18,979 Links are there. 348 00:17:18,984 --> 00:17:19,819 You can click on 'em. 349 00:17:20,049 --> 00:17:22,149 Check out whatever is interesting to you from that. 350 00:17:22,329 --> 00:17:27,369 And yeah, I mean, before we wrap up here, Zach, as a community, we love to 351 00:17:27,369 --> 00:17:31,399 support each other and we just wanted to see, is there anything you're involved 352 00:17:31,404 --> 00:17:34,449 in or anything you've been working on that you'd like to just share with the 353 00:17:34,449 --> 00:17:36,009 community that they might find helpful? 354 00:17:36,679 --> 00:17:40,429 Zack: Yeah, so I've been doing a couple things recently, some of 355 00:17:40,429 --> 00:17:43,969 these things like in various stages, but we just dropped a beta for 356 00:17:44,119 --> 00:17:46,819 remote type support for federation. 357 00:17:46,879 --> 00:17:50,869 So if I'm pulling in federated code that can be deployed at any time, everybody 358 00:17:50,869 --> 00:17:52,309 always asks, Well, what about the types? 359 00:17:52,459 --> 00:17:55,129 You know, I still have to npm install the types and you know, you don't 360 00:17:55,129 --> 00:17:57,499 know when the other deployment is gonna happen, so you don't really 361 00:17:57,499 --> 00:17:58,609 know when those types are gonna. 362 00:17:59,389 --> 00:18:04,009 So we wrote a plugin that will pretty much federate your types in. 363 00:18:04,009 --> 00:18:07,120 So as soon as you start a Webpack build it synchronizes the 364 00:18:07,125 --> 00:18:08,539 types with the deployed types. 365 00:18:09,049 --> 00:18:12,409 And now, you know, every time when you're in development, you always have the types 366 00:18:12,414 --> 00:18:15,769 that are currently in production for any of this federated code that's coming in. 367 00:18:16,099 --> 00:18:19,399 Another one that we are like, I'm pretty sure the type 368 00:18:19,399 --> 00:18:20,899 script plugin is like good now. 369 00:18:20,899 --> 00:18:24,589 So what we're starting to do is look at how can we apply federated unit. 370 00:18:25,504 --> 00:18:26,374 To do the same thing. 371 00:18:26,374 --> 00:18:28,744 One, I could do liability testing. 372 00:18:28,744 --> 00:18:32,004 So if you're gonna say, if checkout's gonna deploy a new add to cart, 373 00:18:32,374 --> 00:18:37,024 Capability during their deploy, they could pull in the product pages, unit 374 00:18:37,024 --> 00:18:42,094 tests and verify that when they do the deploy, because the product page uses 375 00:18:42,094 --> 00:18:45,814 that functionality, it's not gonna break the product page and vice versa. 376 00:18:45,814 --> 00:18:48,424 When the product page is about to deploy, it could pull in the 377 00:18:48,424 --> 00:18:51,664 unit tests from checkout and confirm added bag still works. 378 00:18:51,904 --> 00:18:55,054 On top of that, it would finally give us support to not have to do end-to-end 379 00:18:55,054 --> 00:18:56,764 tests, to test federated code. 380 00:18:57,004 --> 00:19:00,184 But now cuz it's all bs, so it's gonna see, I don't know what this import. 381 00:19:00,809 --> 00:19:05,609 You know, it's some non-existent import, so this process should allow it. 382 00:19:05,609 --> 00:19:10,139 So if you have federated modules inside of your react tree, it will actually load 383 00:19:10,139 --> 00:19:13,799 the code similar to how it would on the browser, on the server, can load the code. 384 00:19:13,804 --> 00:19:17,459 So you can actually perform unit tests against other federated modules just to 385 00:19:17,459 --> 00:19:22,169 confirm things don't go wrong, which is, it's a big quality of life improvement. 386 00:19:22,169 --> 00:19:23,849 Cause I think that's been one of the concerns. 387 00:19:24,584 --> 00:19:28,034 This is, it's really great that we can pull software in at runtime, but 388 00:19:28,034 --> 00:19:31,814 it does make it trickier to test and you have to lean on end to end test. 389 00:19:31,814 --> 00:19:35,144 So we're trying to make it just adapters so that it'll just work 390 00:19:35,144 --> 00:19:37,304 the same way you would expect it to. 391 00:19:37,634 --> 00:19:39,494 We've got our type script plugin out now. 392 00:19:39,704 --> 00:19:43,154 One of the commercial ones that I've got out is service side 393 00:19:43,154 --> 00:19:44,894 rendering support for N js. 394 00:19:45,104 --> 00:19:47,804 So if anybody is interested in that, it is available. 395 00:19:47,804 --> 00:19:51,284 It's currently a release candidate, so probably a bug or two still. 396 00:19:52,029 --> 00:19:54,699 It's been really nice to say, you know, you don't have to say, use like next 397 00:19:54,699 --> 00:19:59,374 JS zones or something like that, but I could just say, Here's a Lambda. 398 00:19:59,374 --> 00:20:02,704 Deploy all the pages and the whole app works as a single page app, 399 00:20:02,704 --> 00:20:06,754 even though it's maybe 15 next JS independent deployments, but no page 400 00:20:06,754 --> 00:20:08,884 refresh at all service side renders. 401 00:20:08,884 --> 00:20:12,154 It's just as efficient as a single monolithic application in 402 00:20:12,154 --> 00:20:14,164 terms of script tags get loaded. 403 00:20:14,404 --> 00:20:16,774 Everything gets loaded the way you would expect it to. 404 00:20:17,104 --> 00:20:20,014 And then, yeah, one that will keep on the radar is we're working on 405 00:20:20,374 --> 00:20:22,154 service discovery for the front. 406 00:20:22,699 --> 00:20:26,119 So with all these distributed things, it would be great if, or 407 00:20:26,119 --> 00:20:29,839 in micro fronts in general, how do I know who's using what and where? 408 00:20:30,079 --> 00:20:33,979 And that's a huge problem just to discover, well, what's the dependency of, 409 00:20:33,979 --> 00:20:39,679 say the homepage who, Or if I go to Megan Ave, where's Megan Ave is being consumed. 410 00:20:39,979 --> 00:20:42,259 That's really hard to trace across multiple repos. 411 00:20:42,649 --> 00:20:48,319 So we're finalizing a product called Medusa, which will come with a plug. 412 00:20:48,949 --> 00:20:53,419 That will pretty much upload the webpac graph of every individual build. 413 00:20:53,659 --> 00:20:56,179 And then we can parse that all and we can figure out, here's 414 00:20:56,179 --> 00:20:59,449 all the dependencies you're using across your entire organization. 415 00:20:59,629 --> 00:21:03,259 Here's who's using what from where, and we'll add on the ability to 416 00:21:03,259 --> 00:21:04,729 say, control the versions of it. 417 00:21:04,734 --> 00:21:07,459 So you could do an instant rollback by just changing. 418 00:21:07,749 --> 00:21:12,039 The Webpac runtime at runtime through this, so you wouldn't have to redeploy 419 00:21:12,039 --> 00:21:15,879 to say roll something back or to pin to a certain version or roll forward. 420 00:21:16,179 --> 00:21:19,629 You just log in, change it from the dropdown, and it instantly changes 421 00:21:19,629 --> 00:21:22,919 how the Webpac Graph operates, which is, Which is pretty neat. 422 00:21:23,524 --> 00:21:26,044 Eddie: Wow, that seems like magic. 423 00:21:26,134 --> 00:21:26,524 You know what I mean? 424 00:21:26,524 --> 00:21:28,774 Like click, move. 425 00:21:28,774 --> 00:21:31,474 The module that's being pulled in. 426 00:21:31,479 --> 00:21:32,554 That's live. 427 00:21:32,559 --> 00:21:32,824 That's 428 00:21:32,824 --> 00:21:33,364 Zack: crazy. 429 00:21:33,664 --> 00:21:37,054 The demo that I put up on YouTube was a little while ago, but the one I put up 430 00:21:37,059 --> 00:21:41,164 on YouTube was I have a design system and it's built of five independent 431 00:21:41,164 --> 00:21:45,814 repos, and each repo is gonna use button version one is red, version 432 00:21:45,814 --> 00:21:47,704 two is green, version three is blue. 433 00:21:47,704 --> 00:21:48,574 And I could go to the. 434 00:21:49,294 --> 00:21:52,414 Like the search bar and I could say, Okay, use the previous 435 00:21:52,414 --> 00:21:56,014 version of the design system and I reload the page and it's now red. 436 00:21:56,134 --> 00:21:58,984 So I could have like four or five different ver colors of the 437 00:21:58,984 --> 00:22:02,824 button on the page each from their own design system without having 438 00:22:02,824 --> 00:22:04,474 to npm install or do anything. 439 00:22:04,474 --> 00:22:07,144 And the meantime to update was two seconds. 440 00:22:07,234 --> 00:22:09,694 So within two seconds you can update Wow. 441 00:22:09,724 --> 00:22:11,974 Any part of your dependency tree, just with a click of a 442 00:22:11,974 --> 00:22:13,534 button, which is really great. 443 00:22:13,534 --> 00:22:16,774 If we think about big enterprise things where resilience and 444 00:22:16,774 --> 00:22:18,584 recovery is, is extra, I. 445 00:22:18,944 --> 00:22:19,964 So definitely is 446 00:22:19,964 --> 00:22:20,444 Eddie: useful. 447 00:22:20,654 --> 00:22:21,584 That's really awesome. 448 00:22:21,614 --> 00:22:25,304 So if someone you know is interested in all this stuff, is there 449 00:22:25,304 --> 00:22:28,334 somewhere they can go to kind of find out more, follow along? 450 00:22:28,364 --> 00:22:30,254 Is there a website or Twitter account? 451 00:22:30,254 --> 00:22:30,464 What? 452 00:22:30,584 --> 00:22:31,814 What would be best for them to 453 00:22:31,814 --> 00:22:32,084 Zack: do? 454 00:22:32,354 --> 00:22:33,794 Scripted alchemy. 455 00:22:34,124 --> 00:22:36,524 My Twitter account, that would be probably where like the stream 456 00:22:36,524 --> 00:22:37,994 of consciousness flows out of. 457 00:22:38,264 --> 00:22:42,194 I also own the module federation org on GitHub, so just 458 00:22:42,194 --> 00:22:44,804 github.com/module-federation. 459 00:22:45,074 --> 00:22:48,254 That's where all, you know, the public things are that, that we put out there. 460 00:22:48,494 --> 00:22:51,794 And there will be a website to come along for something like 461 00:22:51,794 --> 00:22:53,234 Medusa or things like that. 462 00:22:53,234 --> 00:22:56,594 But in general, if, if you're looking for anything, I would say the module 463 00:22:56,594 --> 00:22:58,514 federation org is a good place to start. 464 00:22:58,724 --> 00:23:01,214 We have a big repo called Module Federation examples. 465 00:23:01,699 --> 00:23:04,969 On that read, I usually put there like, you know, here's some examples. 466 00:23:04,969 --> 00:23:08,629 Here are the companies that are using this type of tech, and I will go and update 467 00:23:08,629 --> 00:23:11,989 it to say, here's all the like products and things that we own, or Here's all 468 00:23:11,989 --> 00:23:15,709 the things we built for the ecosystem, just so it's easier to find what's 469 00:23:15,709 --> 00:23:16,159 Eddie: out there. 470 00:23:16,579 --> 00:23:17,029 Awesome. 471 00:23:17,149 --> 00:23:18,289 No, that sounds perfect. 472 00:23:18,289 --> 00:23:23,179 So if you all are interested in some of the more module federation stuff, 473 00:23:23,179 --> 00:23:26,779 especially like I'm a big type script person so you know, if you've been kind 474 00:23:26,779 --> 00:23:31,009 of holding out cuz of types or different things like that, follow Zach on Twitter. 475 00:23:31,129 --> 00:23:34,219 Go check out the GitHub page repo. 476 00:23:34,279 --> 00:23:36,499 And uh, thank you for coming on Zach. 477 00:23:36,499 --> 00:23:40,489 It's been great chatting and uh, hope you have a great day. 478 00:23:40,759 --> 00:23:41,509 Zack: Yeah, you too. 479 00:23:41,509 --> 00:23:42,259 Thanks for having me. 480 00:23:43,499 --> 00:23:46,319 . Eddie: Thanks for joining us for episode 23. 481 00:23:46,499 --> 00:23:49,229 It's nice to build for the future with Zach Jackson. 482 00:23:49,829 --> 00:23:52,259 You can find out more about Zach on his Twitter. 483 00:23:52,829 --> 00:23:54,209 At scripted alchemy. 484 00:23:55,109 --> 00:23:59,009 You can find links to everything we talked about in this episode, as well as a link 485 00:23:59,039 --> 00:24:00,359 to Zack's Twitter in the show notes. 486 00:24:01,439 --> 00:24:03,959 And if you enjoyed this episode, help others discover it as 487 00:24:04,979 --> 00:24:08,729 Why don't you give us a shout out on Twitter, maybe tag a friend or coworker, 488 00:24:08,789 --> 00:24:12,749 if you think they'd enjoy And don't forget to follow us on Twitter, to stay 489 00:24:12,749 --> 00:24:18,719 up to date at web joy, F M thank you for listening and have a great day.