Why Remix [Michael Jackson]
The King of pop() talks about his new framework.
- 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-qMqg
- Remix's blogpost today: https://remix.run/blog/react-server-components
Andrew: 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.
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?
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.
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 these requests and response objects, uh, that conform to that exact same API. So, you know, we've already talked about how we'd love standards. I love standards We're actually building on these web standards on the, on our server layer as well.
Which allows it to be portable across any runtime that supports that standard, which is really cool.
Justin: Was this, something that would generally run on what we would traditionally consider a serverless platform. So like AWS lambda are you specifically targeting like service worker, like APIs, like CloudFlare or even the browser service workers I guess?
Michael: So we, we sometimes need a little bit of a translation layer depending on where we're running. Right. So we have these things called adapters. Um, so our, our server runtime is generic, right. We just, we just deal with request and response objects with the fetch API or the service worker API. Um, but yeah, but if we are running on node, then we need a little bit of help, right.
Cause node doesn't have those things. So we can install node fetch, and now we can get those primitives running on node. We already get them running on CloudFlare workers, which is nice. They're already on Dino, which is nice as well. So, you know, whatever platform that we're on, if we're running on AWS Lambda, um, or, Google cloud functions, like what, wherever remix is running.
Um, if they have support for the web fetch API. Great. If they don't, we'll polyfill it and remix will run there to.