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:04.359 Thank you for tuning in. Let's jump into the episode. 16 00:01:07.920 --> 00:01:10.359 Welcome to React ground Up. I'm Jack Harrington and I'm 17 00:01:10.400 --> 00:01:13.719 here with my co host TJ Van Tool everybody, and 18 00:01:13.840 --> 00:01:17.280 Page Nadering House. Hello everyone, and today we're talking to 19 00:01:17.400 --> 00:01:18.239 Eric Simons. 20 00:01:18.599 --> 00:01:19.400 Hey, how's it going. 21 00:01:19.560 --> 00:01:22.239 Thank you for having me, Thank you for showing up, 22 00:01:22.319 --> 00:01:24.840 and what do you have to talk about? Today React 23 00:01:24.879 --> 00:01:25.280 ground out. 24 00:01:25.480 --> 00:01:27.640 Well, I think probably probably a couple of things, but 25 00:01:27.640 --> 00:01:30.799 I think probably the most interesting thing is some stuff 26 00:01:30.840 --> 00:01:33.680 that we've been working on with the next js team 27 00:01:33.760 --> 00:01:36.599 and Google Prome team that lets you like run no 28 00:01:36.760 --> 00:01:38.959 JS in your browser, which might sound like a really 29 00:01:38.959 --> 00:01:42.079 weird idea, but it's actually very awesome. I mean, especially 30 00:01:42.120 --> 00:01:45.480 with the kind of the current trend of you know, 31 00:01:45.560 --> 00:01:47.799 React is really kind of you know, blurring the line 32 00:01:47.840 --> 00:01:50.799 between what is server code of what is front and code, right, 33 00:01:51.200 --> 00:01:53.120 and so this actually kind of this allows you to 34 00:01:53.159 --> 00:01:56.000 actually have a much faster and better development and debugging 35 00:01:56.000 --> 00:01:57.000 experience for that, and. 36 00:01:57.000 --> 00:01:57.879 We can kind of dig into that. 37 00:01:57.920 --> 00:02:00.239 But I think that's probably the most interesting thing called 38 00:02:00.280 --> 00:02:02.799 webt containers, the technology we made for it, and so 39 00:02:02.840 --> 00:02:04.359 I don't know, maybe sat on Twitter. 40 00:02:04.120 --> 00:02:06.200 At some point, maybe it didn't, but you know, being 41 00:02:06.280 --> 00:02:07.519 kind of being kind of dig into it. 42 00:02:07.879 --> 00:02:10.879 No, it's super cool. And so you can run next 43 00:02:10.960 --> 00:02:12.639 js in the browser. 44 00:02:13.199 --> 00:02:16.599 Yeah, yeah, and so and it's actually so it's like basically, 45 00:02:17.120 --> 00:02:18.719 well I can kind of back up, I kind of 46 00:02:18.719 --> 00:02:20.759 give the context of why the how we ended up 47 00:02:20.800 --> 00:02:24.000 doing this thing and so for it, so back five 48 00:02:24.120 --> 00:02:27.560 years ago now as of this month. Actually, my co 49 00:02:27.639 --> 00:02:29.960 founder of the company's names Albert. He and I actually 50 00:02:30.039 --> 00:02:31.840 grew up down the street from each other. Literally here, 51 00:02:32.439 --> 00:02:33.840 I guess people can't see the video, but I'm in 52 00:02:33.879 --> 00:02:36.240 Chicago my parents house right now, visiting them. And Albert 53 00:02:36.240 --> 00:02:38.400 grew up like literally ford of houses down his parents 54 00:02:38.400 --> 00:02:40.639 are still there. And so we grew up and you 55 00:02:40.800 --> 00:02:42.520 learned how to go together when we were in high school, 56 00:02:42.560 --> 00:02:44.319 and we ended up going out Stillicon Valley and starting 57 00:02:44.360 --> 00:02:47.199 some companies. But five years ago, I guess about six 58 00:02:47.280 --> 00:02:49.960 years ago, we had the realization that browsers were like 59 00:02:50.240 --> 00:02:53.319 getting really powerful, and at the time, we were actually 60 00:02:53.400 --> 00:02:56.319 teaching people how to do web development, and we kept 61 00:02:56.439 --> 00:02:58.840 running into this problem where like students who were learning 62 00:02:58.879 --> 00:03:01.680 would get stuck on like setting up stuff locally on 63 00:03:01.719 --> 00:03:04.000 their computer, and so we're trying to teach React and 64 00:03:04.039 --> 00:03:06.479 they'd be like, hey, reacts says amount of file launchers. 65 00:03:06.759 --> 00:03:10.080 We're like, that is not React. That is just stuff 66 00:03:10.120 --> 00:03:13.199 that broke on your computer for like no good reason. Right, 67 00:03:13.680 --> 00:03:15.319 So we're like, Okay, well, how do we how do 68 00:03:15.400 --> 00:03:17.240 we solve this problem because like we were, we can't 69 00:03:17.240 --> 00:03:20.120 even teach react, right, And we ended up like having 70 00:03:20.120 --> 00:03:22.520 this realization of you know, all these build tools like 71 00:03:22.599 --> 00:03:26.280 webpack and et cetera are just like they're written in JavaScript, right, 72 00:03:26.639 --> 00:03:29.159 and so theoretically, would it be possible to like copy 73 00:03:29.240 --> 00:03:32.199 pasta webpack and then slap it into a browser tab 74 00:03:32.280 --> 00:03:35.479 and like just kind of have it work right and 75 00:03:35.639 --> 00:03:37.560 and so the answer is, like, it's possible. It's just 76 00:03:37.759 --> 00:03:39.840 it's an incredible amount of work to do that. But 77 00:03:40.199 --> 00:03:42.080 Albert and I have always been suckers for a good challenge, 78 00:03:42.120 --> 00:03:44.400 and so we sat down for six months and built out. 79 00:03:44.599 --> 00:03:46.599 Essentially it's kind of like a code pen plus plus 80 00:03:47.039 --> 00:03:49.400 where it had MPM built into it, it had like 81 00:03:49.479 --> 00:03:51.800 web packloaders, you could you know, do all this cool stuff. 82 00:03:52.120 --> 00:03:53.520 So we launched it and kind of like took off 83 00:03:53.599 --> 00:03:55.960 like a rocket. And so that's stacked with dot com 84 00:03:56.080 --> 00:03:58.360 is effectively it's like it's online ide that actually runs 85 00:03:58.520 --> 00:04:01.439 entirely in your browser. It's not using servers. And so 86 00:04:01.560 --> 00:04:04.639 this is different than things like get up code spaces 87 00:04:05.000 --> 00:04:08.039 or like code sandbox run stuff on servers. If you 88 00:04:08.120 --> 00:04:09.840 ever used those things, you know you might notice they're 89 00:04:09.840 --> 00:04:12.120 like pretty slow. You have to be signed and use them. 90 00:04:12.240 --> 00:04:15.039 That's because they're actually provisioning a server for you to 91 00:04:15.159 --> 00:04:18.240 write your code on, which costs them money, and there's 92 00:04:18.240 --> 00:04:20.399 a lot of latency, et cetera. So usually the experience 93 00:04:20.480 --> 00:04:22.839 is worse than your own local environment than when you're 94 00:04:22.920 --> 00:04:24.800 using what of these online. But anyways, so the short 95 00:04:24.839 --> 00:04:26.040 of it is that we end up figuring out, like 96 00:04:26.399 --> 00:04:30.240 a couple of years ago after having launched that it actually, well, 97 00:04:30.319 --> 00:04:32.240 the web has been progressing at a really rapid rate, 98 00:04:32.600 --> 00:04:35.480 and we realized that it was actually theoretically possible at 99 00:04:35.560 --> 00:04:38.000 least to write a new type of operating system and 100 00:04:38.040 --> 00:04:40.079 web assembly from the ground up where you could actually 101 00:04:40.120 --> 00:04:43.000 run no JAS entirely in the browser, which then opens 102 00:04:43.079 --> 00:04:46.279 up the ability to run next, JSS, fight all these 103 00:04:46.319 --> 00:04:49.000 different tool chains and you can just MPM install them, 104 00:04:49.120 --> 00:04:51.279 MPM run start and it's running all on your computer, 105 00:04:51.399 --> 00:04:54.000 so it actually works offline, et cetera. And so we 106 00:04:54.079 --> 00:04:56.519 actually that's that technology is called web Container, and so 107 00:04:56.600 --> 00:04:58.600 we actually rolled that out back in May, and so 108 00:04:58.680 --> 00:05:01.000 stack with the effect that ma you know, Stack, that's 109 00:05:01.079 --> 00:05:04.360 just like the fastest most secure ID on the planet 110 00:05:04.360 --> 00:05:07.079 because it's all being done inside the browser security sandbox, 111 00:05:07.120 --> 00:05:09.399 et cetera. So that's kind of like that's like probably 112 00:05:09.439 --> 00:05:11.279 information overload, but that's kind of the short of like 113 00:05:11.360 --> 00:05:13.360 kind of how we started off and kind of how 114 00:05:13.399 --> 00:05:15.439 we got here today on stuff or building. 115 00:05:15.639 --> 00:05:17.839 Yeah, I think this is kind of crazy to me 116 00:05:17.959 --> 00:05:20.120 because like it took me a while, and maybe I 117 00:05:20.160 --> 00:05:22.360 can talk through this too because it might help others. 118 00:05:22.439 --> 00:05:24.879 Because when I first saw the announcement, my first thought 119 00:05:24.959 --> 00:05:26.879 was like, oh cool. Then my second thought was like, wait, 120 00:05:26.959 --> 00:05:29.600 what does this do again? Right, because it's it's like 121 00:05:30.079 --> 00:05:33.319 oh because and what made it click for me is, 122 00:05:33.800 --> 00:05:35.800 you know, I write a lot of just like really quick. 123 00:05:36.040 --> 00:05:37.720 The main thing I use note for is like writing 124 00:05:37.839 --> 00:05:40.439 little scripts to do things like I need to mess 125 00:05:40.480 --> 00:05:42.879 with some files or something. But my workflow for that 126 00:05:43.000 --> 00:05:45.279 is while I write some script locally and I run 127 00:05:45.319 --> 00:05:47.839 it locally because Node is a local thing, because that's 128 00:05:47.879 --> 00:05:50.199 how it always like works in my brain. It either 129 00:05:50.399 --> 00:05:52.759 runs in my computer, it runs on some server somewhere, 130 00:05:53.319 --> 00:05:57.000 And the idea of going out to a browser and 131 00:05:57.160 --> 00:06:01.639 writing something with Node and runrunning it is kind of like, 132 00:06:01.959 --> 00:06:04.439 at like the very simplest level, what this sort of 133 00:06:04.480 --> 00:06:07.639 thing makes possible. And that sort of blows my mind 134 00:06:08.040 --> 00:06:11.040 a little bit because I still like the part that 135 00:06:11.120 --> 00:06:13.920 still doesn't totally run in my brain or that I 136 00:06:14.000 --> 00:06:17.240 don't totally compute, is like, how is this possible? Because 137 00:06:17.319 --> 00:06:21.639 node is Node is big, right, Like it's fairly complex, 138 00:06:21.959 --> 00:06:25.120 and so are you somehow like loading that are like 139 00:06:25.240 --> 00:06:28.360 people downloading node when they go to like step flits 140 00:06:28.360 --> 00:06:31.439 dot com site web containers or whatever, or like how 141 00:06:31.600 --> 00:06:34.759 exactly are you like injecting that environment to make it 142 00:06:34.959 --> 00:06:38.360 possible to develop with these this sort of tech. 143 00:06:38.600 --> 00:06:40.639 Yeah, it's a that's a really good question. 144 00:06:40.800 --> 00:06:42.240 And then so to kind of add to the to 145 00:06:42.639 --> 00:06:44.199 and I think I kind of I missed the punchline, 146 00:06:44.199 --> 00:06:47.600 which is actually that running no jass in stacklets dot 147 00:06:47.639 --> 00:06:51.600 com is faster than your local environment. Like execution speeds 148 00:06:51.600 --> 00:06:53.680 are twenty percent faster. When you go to stackts dot 149 00:06:53.720 --> 00:06:55.680 com and like start an extrass project, you can kind 150 00:06:55.680 --> 00:06:58.240 of get you can actually literally see how fast it runs, right, 151 00:06:58.560 --> 00:07:01.160 and the FPM installs are like five faster, And so 152 00:07:01.240 --> 00:07:02.879 it's like, how is that even possible? 153 00:07:02.959 --> 00:07:03.079 Right? 154 00:07:03.120 --> 00:07:04.920 How is it even possible that you could like take 155 00:07:05.000 --> 00:07:06.839 node put it in a browser and it's like faster 156 00:07:07.279 --> 00:07:09.199 inside of your browser than it is outside of your 157 00:07:09.199 --> 00:07:11.519 browser on local And so the answer is actually it 158 00:07:11.600 --> 00:07:13.000 was like, this is kind of the key realization that 159 00:07:13.079 --> 00:07:15.600 we had was that, you know Node, Like, if you 160 00:07:15.680 --> 00:07:18.160 go back to the origins of Node, they pulled V 161 00:07:18.319 --> 00:07:21.279 eight out of Chrome to bring it to local, right, 162 00:07:21.639 --> 00:07:23.959 But Google Chrome and all these other browsers they have 163 00:07:24.040 --> 00:07:26.079 their own jobs pretention, whether it's V eight or spider 164 00:07:26.120 --> 00:07:28.839 Monk or whatever. And so if you can actually write 165 00:07:28.920 --> 00:07:32.680 like a compiling tool chain that can take NOJS from 166 00:07:32.759 --> 00:07:37.000 source rip out va and actually use the existing JavaScript 167 00:07:37.079 --> 00:07:39.720 engine right in your browser, you don't have to drag 168 00:07:39.759 --> 00:07:43.160 along a lot of the gigantic stuff that usually comes 169 00:07:43.160 --> 00:07:45.279 along with that because it's already included. And the other 170 00:07:45.439 --> 00:07:48.519 benefit of that is that your browser is continually updating, 171 00:07:48.600 --> 00:07:50.959 getting faster and more secure while you sleep. 172 00:07:51.199 --> 00:07:54.319 Right local. With Node, they use. 173 00:07:54.199 --> 00:07:57.040 A specific pinned version of V eight with every release 174 00:07:57.120 --> 00:08:00.160 of Node, and so if you're using Node eight, you're 175 00:08:00.240 --> 00:08:02.240 using a version of the eight that is incredibly old 176 00:08:02.279 --> 00:08:04.839 and has lots of security vulnerabilities at this point. But 177 00:08:05.079 --> 00:08:08.439 by actually coupling it, you're with stack blitz, right, your 178 00:08:08.519 --> 00:08:11.439 environment actually gets faster and more secure while you're sleeping. 179 00:08:11.600 --> 00:08:13.079 And so what that actually kind of gives you, right 180 00:08:13.240 --> 00:08:15.040 is like with one copy of V eight. There's actually 181 00:08:15.040 --> 00:08:17.199 a huge inefficiency on local because if you think about 182 00:08:17.240 --> 00:08:19.240 web development, like what does it kind of look like? 183 00:08:19.360 --> 00:08:22.879 Usually you have no JS processes running, webpac or whatever 184 00:08:22.959 --> 00:08:24.680 have you, some end number of let's call it like 185 00:08:24.800 --> 00:08:26.920 five to ten processes that are running. 186 00:08:26.920 --> 00:08:28.439 So that's five to ten copies of the eight. 187 00:08:28.480 --> 00:08:31.800 There you have vs code open, which is Electron, which 188 00:08:31.920 --> 00:08:34.600 is therefore Chrome and has its own copy of the eight, 189 00:08:34.919 --> 00:08:37.879 and then you have Chrome open previewing your web app. Right, 190 00:08:38.440 --> 00:08:40.879 so all in all we're talking about a dozen plus 191 00:08:41.240 --> 00:08:44.960 copies of the eight running, which is hugely inefficient, and 192 00:08:45.039 --> 00:08:47.360 so by actually collapsing it all into save one in 193 00:08:47.399 --> 00:08:49.759 the browser, there's a there's a gigantic performance game you 194 00:08:49.879 --> 00:08:52.200 get from doing that. And so that's actually the main 195 00:08:52.279 --> 00:08:54.799 thing that that allows stack up to be faster than 196 00:08:54.840 --> 00:08:56.879 you than your local machine is that it's using one 197 00:08:56.960 --> 00:09:00.200 copy of V eight instead of dozens kind of all 198 00:09:00.279 --> 00:09:03.240 across these different processes or applications on your computer. 199 00:09:03.799 --> 00:09:07.080 So that is that brings me to a good question 200 00:09:07.240 --> 00:09:10.320 because typically when I'm using node it's because I have 201 00:09:10.559 --> 00:09:13.600 maybe like a create React app front end, a Node 202 00:09:13.679 --> 00:09:17.120 Express server back end. Can I build that in stack 203 00:09:17.200 --> 00:09:20.440 Blitz as well, something that serves up different files and 204 00:09:20.600 --> 00:09:23.919 routes to APIs and does all the typical things that 205 00:09:23.960 --> 00:09:26.360 you'd expect a UI to be able to do. 206 00:09:26.879 --> 00:09:28.600 Oh yeah, absolutely absolutely. 207 00:09:28.720 --> 00:09:31.480 So that's in our first market we're really going after 208 00:09:31.559 --> 00:09:33.759 with this technology is web development, and you can do 209 00:09:33.960 --> 00:09:36.799 all of that. So you can run pre react app 210 00:09:36.919 --> 00:09:39.440 with a separate because if you actually go to stack 211 00:09:39.480 --> 00:09:41.919 lis dot com, you don't because it's running on your computer. 212 00:09:42.120 --> 00:09:44.600 We don't make you log any So you can literally 213 00:09:44.639 --> 00:09:46.879 go there now start an next gs app or start 214 00:09:46.919 --> 00:09:49.080 a graph ql app and you actually see a terminal 215 00:09:49.399 --> 00:09:51.639 that pops ups. You can actually run multiple processes at 216 00:09:51.679 --> 00:09:53.639 the same time, just like you would on local and 217 00:09:53.679 --> 00:09:55.639 so you can be running create React app, Andi graph 218 00:09:55.679 --> 00:09:57.559 Cil server where they're like talking to each other and 219 00:09:57.639 --> 00:10:01.840 everything entirely inside of your brain and so like all 220 00:10:01.919 --> 00:10:04.519 of the sort of common workflows that you would be 221 00:10:04.639 --> 00:10:07.960 doing about development. Absolutely, like that's exactly what this thing 222 00:10:08.080 --> 00:10:08.600 is designed for. 223 00:10:08.919 --> 00:10:11.519 Yeah, it's I mean, this is super fascinating because it's 224 00:10:11.679 --> 00:10:14.759 just it enables a lot of stuff. Because you had 225 00:10:14.799 --> 00:10:16.919 said you'd worked with the next Jass team, if you 226 00:10:17.000 --> 00:10:18.879 talked with them at all, because I could totally see 227 00:10:19.120 --> 00:10:23.679 like embedible demos, like because like right now with next JSS, 228 00:10:23.799 --> 00:10:26.200 if you want to learn how something that has some 229 00:10:26.240 --> 00:10:28.679 sort of server component into it, like server rendering or 230 00:10:28.679 --> 00:10:31.519 something like that, like you can't they can't share a 231 00:10:31.600 --> 00:10:33.960 live example of that, right, Like they could share a 232 00:10:34.000 --> 00:10:37.440 GitHub repo, but the that's always a pain, right to 233 00:10:37.480 --> 00:10:39.559 download a get the hub repo, and like sometimes that 234 00:10:39.679 --> 00:10:42.399 involves some setup. Anytime there's a server, there's some sort 235 00:10:42.399 --> 00:10:45.519 of setup. But like I could totally see just embedded 236 00:10:45.559 --> 00:10:49.399 in their docs like here's here's the stack blitz instance, 237 00:10:49.720 --> 00:10:52.960 here's the like almost like here's your client sites code, 238 00:10:53.000 --> 00:10:55.799 here's your server side code, much like you'd embed like 239 00:10:56.120 --> 00:10:58.360 a code pen that shows how to make a dropdown 240 00:10:58.399 --> 00:10:59.279 work or something like that. 241 00:10:59.679 --> 00:11:02.120 Yeah, yeah, absolutely again and they so I think in 242 00:11:02.200 --> 00:11:04.879 there they've actually adopted this for their kind of the 243 00:11:04.960 --> 00:11:08.080 official examples in the next JS repo and docs whatever 244 00:11:08.159 --> 00:11:10.080 have you. So I think you if you actually browse 245 00:11:10.120 --> 00:11:12.840 to those and get up there's a lot of them. 246 00:11:12.879 --> 00:11:15.080 They have like these open and stackplts buttons where you 247 00:11:15.080 --> 00:11:17.320 can actually pop them open and then you can actually 248 00:11:17.320 --> 00:11:18.240 embed this stuff too. 249 00:11:18.440 --> 00:11:21.799 And so I think that the no JS documentation site. 250 00:11:21.840 --> 00:11:24.519 Actually I think just they've started embedding this, you know, 251 00:11:24.559 --> 00:11:27.679 like stack flitz projects because again, like compared to like 252 00:11:28.000 --> 00:11:31.360 there's these other online things that use vms like rappolit 253 00:11:31.440 --> 00:11:33.720 or Glitch, but sandbox, the problem is that when you 254 00:11:33.799 --> 00:11:36.600 actually embed them, they typically don't let you edit the 255 00:11:36.720 --> 00:11:38.600 code because they don't want to provision a VM for 256 00:11:38.679 --> 00:11:41.080 every person who's just browsing by the page, right because 257 00:11:41.080 --> 00:11:43.720 it's going to be way too expensive. And so with 258 00:11:43.879 --> 00:11:45.759 this model, like we can actually really give this out 259 00:11:45.799 --> 00:11:48.320 for free to everyone, which has been kind of an 260 00:11:48.320 --> 00:11:50.879 important thing from our perspective is that like this is 261 00:11:51.120 --> 00:11:52.759 coming back to the origins of why we did this. 262 00:11:53.480 --> 00:11:55.039 This is a huge upgrade from. 263 00:11:54.879 --> 00:11:57.679 The learning experience, right, and so we don't want this 264 00:11:57.759 --> 00:12:00.320 to be something that is payballed or like you have 265 00:12:00.440 --> 00:12:01.840 a whole bunch of hoops you have to go through 266 00:12:01.919 --> 00:12:03.159 to try and use it. That you should be able 267 00:12:03.159 --> 00:12:04.840 to just be able to be browsing. If I want 268 00:12:04.840 --> 00:12:06.200 to learn no JAS, I should be able to browse 269 00:12:06.240 --> 00:12:09.840 their documentation and have a live environment that's booting inside 270 00:12:09.879 --> 00:12:13.399 of my browser, right like without running into file watcher issues. 271 00:12:13.559 --> 00:12:15.360 Like that's twenty twenty one. 272 00:12:15.480 --> 00:12:18.200 This should be fixed by now, right, So that's that's 273 00:12:18.279 --> 00:12:20.480 actually a really a really key thing that you like. 274 00:12:20.559 --> 00:12:22.960 The learning angle, I think is a huge area where 275 00:12:23.120 --> 00:12:26.799 this technology actually really improves the experience substantially. 276 00:12:27.080 --> 00:12:30.080 I think that that's fantastic. One question that I have 277 00:12:30.320 --> 00:12:32.960 is how how do people like Because I haven't used 278 00:12:33.000 --> 00:12:36.600 it myself, but how do people like the environment set up? 279 00:12:36.639 --> 00:12:39.200 Because I know that everybody who has their vs code 280 00:12:39.240 --> 00:12:42.639 instance has like you know, they're prettier formatting their es 281 00:12:42.840 --> 00:12:46.759 lant setup, their kid ignore, get lens or all the 282 00:12:46.879 --> 00:12:49.240 stuff that they've got plugged in, So how do you 283 00:12:50.279 --> 00:12:53.879 handle that and all the particulars that people like to 284 00:12:54.279 --> 00:12:57.440 kind of tweak and set for their own own development. 285 00:12:57.960 --> 00:13:00.159 No, really, it's a very good question. That's actual what 286 00:13:00.200 --> 00:13:03.240 we're working on now. So basically today we've got kind 287 00:13:03.240 --> 00:13:05.720 of this script down version of vs code. This is 288 00:13:05.759 --> 00:13:07.480 that it we designed to be very fast from the 289 00:13:07.559 --> 00:13:09.480 get go, and this is actually the same editor we've 290 00:13:09.519 --> 00:13:11.759 launched with like five years ago, and so this is 291 00:13:11.799 --> 00:13:13.159 before we had the ability to. 292 00:13:13.279 --> 00:13:16.399 Just execute arbitrary and no JS programs in the browser. 293 00:13:16.639 --> 00:13:19.519 Right now, Actually, what's what's kind of cool is that 294 00:13:20.000 --> 00:13:22.120 if you can run no JS in a browser when 295 00:13:22.120 --> 00:13:24.519 you actually look at bs code and what like what 296 00:13:24.720 --> 00:13:27.759 makes vs code extension Like technically like what is a 297 00:13:27.799 --> 00:13:29.919 bs code extension? They're all actually just no JS pro 298 00:13:30.200 --> 00:13:33.120 And so what we're actually drilling into right now, I 299 00:13:33.159 --> 00:13:35.559 think we're it's looking like cloud this out sometime in 300 00:13:35.600 --> 00:13:38.240 the next quarter, is that you're at we actually able 301 00:13:38.279 --> 00:13:42.039 to run vs code wholesale inside of the browser, including 302 00:13:42.120 --> 00:13:45.559 running just arbitrary extensions. And so so I think the 303 00:13:45.639 --> 00:13:48.000 ultimate solution we see to exactly what you're describing, because 304 00:13:48.000 --> 00:13:51.000 that is totally a really important point for us to nail. 305 00:13:51.000 --> 00:13:52.840 It's like, actually, you'll be able to install all the 306 00:13:52.879 --> 00:13:55.440 same extensions that you use today and configure it exactly 307 00:13:55.519 --> 00:13:57.720 how you want. And what's kind of cool about is like, 308 00:13:57.919 --> 00:14:00.399 because this is it is a cloud networked idea. It's 309 00:14:00.440 --> 00:14:02.840 it's using your brows to do the work. But that 310 00:14:02.919 --> 00:14:05.480 will sink automatically whether you use you're on your iPad 311 00:14:05.639 --> 00:14:08.519 or your laptop at your mom's house or whatever. Right like, 312 00:14:08.679 --> 00:14:10.759 it'll actually just kind of work out of the box 313 00:14:10.840 --> 00:14:13.120 because it's it's just like any other just like Big 314 00:14:13.200 --> 00:14:14.799 More or Google Docs. You know, your setting is just 315 00:14:14.879 --> 00:14:16.639 kind of by the fall, they're going to persist across. 316 00:14:17.080 --> 00:14:19.080 So yes, that's kind of that. That's that's how we're 317 00:14:19.200 --> 00:14:22.200 trying to address that stuff, and it's actually working. It's 318 00:14:22.200 --> 00:14:24.320 actual pretty cool. We actually literally just got vis code 319 00:14:24.399 --> 00:14:26.120 kind of fully mounted, like I think it's like last 320 00:14:26.159 --> 00:14:27.879 week or something on top of web continue. 321 00:14:27.879 --> 00:14:30.639 We haven't announced that yet, but like, but that's like 322 00:14:30.720 --> 00:14:32.039 so sneak sneak peak. 323 00:14:34.600 --> 00:14:37.639 Exactly exactly. That's really cool. 324 00:14:37.679 --> 00:14:41.480 How do you get around the browser security limitations? I mean, 325 00:14:41.519 --> 00:14:44.159 if you're going to open up a port for your 326 00:14:44.279 --> 00:14:46.000 next chain, and how does that actually work? 327 00:14:46.200 --> 00:14:48.360 Yeah, it's so that was actually kind of one of 328 00:14:48.399 --> 00:14:49.919 the key things that we had to figure out is 329 00:14:50.240 --> 00:14:52.159 so to be clear, it actually doesn't break out at 330 00:14:52.159 --> 00:14:54.559 the security sandbox at all, which is actually a big feature, 331 00:14:54.799 --> 00:14:57.799 right because there's actually to just do kind of a 332 00:14:57.879 --> 00:14:59.759 quick as side on that. It's like security is actually 333 00:14:59.759 --> 00:15:02.440 on the big things that we see as the benefit 334 00:15:02.600 --> 00:15:05.279 of this approach, right because what's what's going on in 335 00:15:05.320 --> 00:15:07.960 the market right now is that we actually have nation 336 00:15:08.159 --> 00:15:13.360 states that are attacking US and other companies countries and 337 00:15:13.679 --> 00:15:16.799 actually the weakest link right now because they previously they 338 00:15:16.799 --> 00:15:18.840 would try and brute force into your database or something 339 00:15:18.879 --> 00:15:21.399 like that. But that stuff's gotten pretty secure. The weakest 340 00:15:21.440 --> 00:15:23.679 link now is actually the developers who are writing the 341 00:15:23.799 --> 00:15:28.000 software for your bank's website, right because if you can actually, 342 00:15:28.159 --> 00:15:30.639 if you can actually get them to download a malicious 343 00:15:30.679 --> 00:15:33.840 package and then run that on their computer, then you 344 00:15:33.919 --> 00:15:36.080 have access to everything. So you actually have to brute 345 00:15:36.080 --> 00:15:39.000 force into the into the database whatever you usually had, 346 00:15:39.080 --> 00:15:40.519 you know, get one of the devs to install. You 347 00:15:40.519 --> 00:15:43.159 think about an MPM install, You're talking about thousands of dependencies. 348 00:15:43.200 --> 00:15:45.000 So how hard is it to actually do that? 349 00:15:45.039 --> 00:15:47.320 Well, the answer is not hard, and that's exactly what's 350 00:15:47.320 --> 00:15:49.279 happened with solar ones and all these other things going on. 351 00:15:49.679 --> 00:15:52.919 So but in stacklets, because it's actually not breaking out 352 00:15:52.919 --> 00:15:56.240 of the security sandbox, it actually gives this step function 353 00:15:56.360 --> 00:16:00.399 upgrade security because you can install the worst virus ever MPM, 354 00:16:00.840 --> 00:16:02.919 and is all you have to do is just hit 355 00:16:02.960 --> 00:16:05.519 command W and close your browser tack like they cannot 356 00:16:05.600 --> 00:16:08.360 go and scrape it can't go anywhere, it can't go 357 00:16:08.440 --> 00:16:11.440 and scrape your SSH keys. Because of the browsers built 358 00:16:11.480 --> 00:16:13.720 in network restrictions, you're you're not going to be able 359 00:16:13.759 --> 00:16:17.080 to like upload that to some random endpoint, right, So 360 00:16:17.159 --> 00:16:20.039 it actually gives you a really really amazing security guarantee. 361 00:16:20.039 --> 00:16:22.559 And this is actually stacklets as a business. What we 362 00:16:22.759 --> 00:16:25.440 sell is we actually sell stacklets that runs behind the 363 00:16:25.480 --> 00:16:29.559 firewall at these gigantic banks, fintech, government, healthcare, et cetera, 364 00:16:29.639 --> 00:16:32.000 that are the subject of these sorts of attacks right now, 365 00:16:32.480 --> 00:16:35.000 right and so anyways, so and so like how that's 366 00:16:35.039 --> 00:16:37.000 possible that we don't break out the standbox. And so 367 00:16:37.120 --> 00:16:40.600 for networking specifically, what we actually ended up building was 368 00:16:40.679 --> 00:16:44.799 this TCP networking, virtualized TCP networking stack inside of the 369 00:16:44.879 --> 00:16:47.240 browser where it actually maps the like no. 370 00:16:47.519 --> 00:16:50.679 Just TCP calls to the service worker API. 371 00:16:51.039 --> 00:16:53.639 So like when you actually spin up a server in stacklts, 372 00:16:53.879 --> 00:16:56.080 what's actually going on is that there's this virtualized TCP 373 00:16:56.200 --> 00:16:59.200 network stack that's actually translating that into service work or 374 00:16:59.240 --> 00:17:02.279 requests response, right, and so it actually what's kind of 375 00:17:02.320 --> 00:17:04.880 cool about that again from a security angle, like that 376 00:17:05.119 --> 00:17:08.400 is only accessible to that browser instance. So if I 377 00:17:08.720 --> 00:17:10.799 if you go to stacklets and you start an next 378 00:17:10.880 --> 00:17:13.240 JSS project, you take the URL of the dev server 379 00:17:13.319 --> 00:17:16.039 and put it into like Safari or Firefox, you can't 380 00:17:16.079 --> 00:17:19.759 actually access that server right, And that's another attack factor 381 00:17:19.799 --> 00:17:22.359 where people will actually when they install something on your computer, 382 00:17:22.400 --> 00:17:25.359 they'll actually start scraping your local host URLs to try 383 00:17:25.400 --> 00:17:27.920 and grab crudentials from your development life cycle. And so 384 00:17:28.000 --> 00:17:30.119 that's it's just like another angle of like by running 385 00:17:30.160 --> 00:17:33.160 it in the browser, it's faster, it's more secure, it's 386 00:17:33.200 --> 00:17:36.960 way more affortable. It's just like a much better development experience. 387 00:17:37.400 --> 00:17:39.839 Yeah, yeah, it's funny. I used to work at a 388 00:17:39.960 --> 00:17:43.720 hosting company and we had we we didn't do our 389 00:17:43.759 --> 00:17:48.400 development and our actual machines for those exact same security considerations. 390 00:17:48.440 --> 00:17:52.279 We would ssh into these Linux boxes where all our 391 00:17:52.359 --> 00:17:55.400 development stuff would run, just because it was an isolated layer. 392 00:17:55.839 --> 00:17:59.319 But obviously constantly having s sh into everything is also 393 00:17:59.440 --> 00:18:02.880 not the world's greatest experience. So I could see like 394 00:18:03.519 --> 00:18:06.839 some value of having like a standard sort of environment 395 00:18:06.920 --> 00:18:10.599 built in to get the security benefits and the developmental 396 00:18:10.640 --> 00:18:11.359 benefits as well. 397 00:18:11.559 --> 00:18:13.640 Yeah, when I think about like onboarding to a new 398 00:18:14.240 --> 00:18:16.759 like into a new gig, it's like usually three days 399 00:18:16.839 --> 00:18:18.480 or whatever to like get up on the code base 400 00:18:18.559 --> 00:18:21.480 but also get the development environment set up. And some 401 00:18:21.599 --> 00:18:24.759