Show notes
Listen to devtools.fm: https://devtools.fm/episode/19 (23mins)My livestream going thru Remix docs (ft Lee Robinson): https://www.youtube.com/watch?v=HZV1pT-qMqgRemix's blogpost today: https://remix.run/blog/react-server-componentsTranscriptAndrew: I've heard the core of remix referenced as that compiler. Can you explain that a little bit? What's it compiling? Is it kind of like Vite where it's more in browser? So what's happening there.Michael: Yeah, that's a great question. So, um, the way I kind of think about remix is it's a compiler for react router, compilers, it might seem funny to somebody that, to sort of think about it this way, because if you're new to web development, you might think, well,haven't we always just compiled our web apps?And the answer is no, we didn't, that's, that's actually pretty new. I remember when I, when I worked at Twitter, we used to have, we had a file. Uh, that we, we just sort of cargo culted into our app from some other team that was working at Twitter, it was called T w T T R dot JS.And it was like, that file was just sort of like making its way around. And if you needed something, some shared thing, you would just go and add it to that file and then you just commit it. And then like the next team would come along and they would be like, oh, we need a, we need a thing in there too.Like, we'll just add it to the file. And then, and that file just was huge. And I remember opening it up one time and thinking like, I remember, uh, cause we, it, it had existed in the days before ES five. And so it had like, it had like a lot of the array pro prototype methods, like reduce and filter and like basic stuff in there.Except they had it like five or six times, because the file was so long that like people didn't take the opportunity to like go back further in the moment. So w why, why am I saying this? Well, that was a decade ago, that was a decade ago at a high-tech company in downtown San Francisco. We were not building our apps.We were not using, modules, uh, and, and a compiler like Webpack and all that stuff. We were, we were literally just like writing JavaScript. Uh, we certainly didn't have TypeScript, uh, or, or, you know, uh, CSS in JS, or a lot of the stuff that people nowadays are, are using compilers for it.Um, and, and honestly, it wasn't even a popular thing back then to pull code off of NPM. Like if you were doing note, it was, but I remember the first time I saw installed jQuery off of NPM, I was like, Like jQuery off npm? Like, why don't I just go to the website and download jQuery? Why am I installing it from NPM?Nowadays if you're a JavaScript developer, it's like, why would you go to somebody's website and download a file? Why don't you just NPM install it, right? Like that is the way we get code. Right? So, so the whole model of consuming front-end code has dramatically changed over the last eight or nine years. And, um, and, and so, compiling for the web is now the thing and installing dependencies, and that's how you share code that is now also the way to do things.And so as a front end team, the front end development team, uh, your job, has, has ballooned in the last 10 years. You used to just write JavaScript and HTML and CSS, and like there's already enough there for you to know how to do right. When you're talking about semantically sound HTML, like building accessible app.And performant apps. There's a lot to discuss with those technologies, but now you, you also are moving further back in the stack. And so you now also have to understand compilers and build pipelines and even things like code splitting, how are you going to do that?And, and, dynamic importing and loading the bundles that sort of run time. And, um, th th there are just so, so many concerns as a front end developer, now that you have, that you didn't use to have. It used to be pop the script tags on the page and go. And so, uh, so yeah, so, so that's kind of how I tend to think about remix is, react router is one piece of it.You can take react-router or you can serve a render it, you can not server render it You can do code splitting with it. You get ignore code splitting. You can build a static site with it. You could build a fully dynamic site with it. It's not opinionated at all. You can build whatever kind of a site that you want with react-router remix comes along and says, Hey, you know, that, that cool router that we built, uh, we're actually going to build a framework for you to take full advantage of that router. So, uh, so we're going to give you TypeScript compiling right out of the box. Uh, we're going to give you things like a strategy for loading data right out of the box.And we're going to give you a strategy for a mutating data right out of the box. And by the way, how do you keep that data fresh on the page? As you do things as you, as you do mutate data, how do you keep other other routes, data fresh, um, how, how do you do things like, transitioning gradually or gracefully between.And so react router or sorry, remix is, uh, it, it really is this a compiler that, your, your input into remix is basically your routes on the file system. Um, and then your output is this, this code, split server rendered app that, uh, yeah. That we can run and we can run on node, we can run it in the browser. We can also run it in places like cloudflare workers. So that's something that I don't think we've we've even hit on yet. But, um, you, you mentioned, I think Justin, before, before we started, you said node was not an option for the app that you're working on. Um, and I totally totally get that.Nowadays we have multiple JavaScript runtimes, so the, you know, the cloudflare workers people. Uh, they just have these V8 isolates with this kind of custom runtime that's based on server work service workers. And they're saying, Hey, we'll run that at the edge for you. Right. So that is, that is not node.Um, and I'm not speaking specifically to your, your use case because a lot of other people are, have that same case, but yeah, they're, they're building, uh they're building something that is not node and they're saying, "Hey, it's still JavaScript. You might maybe want to run your app here." And so one conscious decision that we made early on in the, in the design for remix was this thing is not going to be dependent on node.Uh, we've also got Dino or Deno. I'm not sure how to pronounce it. That's that's out there, right? That is also a not node. Definitely not node and node has been forked in the past. You know? So like, I, I just anticipate that the future is going to be a proliferation of, of runtimes for JavaScript that are not node. Node is going to be a big popular choice for a long, long time, but I think that we're going to see see more and more options for developers going forward. Uh, and so remix is not coupled to node. We actually run natively on CloudFlare workers and our server runtime is completely generic.We actually borrowed the idea for our server runtime from them that I said they, they based their whole thing on the service worker model, which of course includes, uh, the fetch API requests, response headers. We took that and we ran with it.And so our entire server runtime is generic and just runs on the...