Supper Club × Ryan Florence of Remix

I sure hope you're hungry.

Cool. I'm starving.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Talinsky and Wes Boss attempt to use human language to converse with and pick the brains of other developers. I thought Thought there was gonna be food, so buckle up and grab that old handle because this was going to get wide eyed as old.

This is the Syntax Supper Club.

Welcome to Syntax. Today, we have Brian Florence Of, so many different themes out there. Most notably probably React Router Remix.

So we are gonna have them on today to talk about Remix And using the web platform and whatever else pops up, maybe React and JSX and all that. Welcome, Ryan. Thanks for coming on. Hey. Thanks for having me. Hey. You're welcome. So, You just just moved into a new house. Looking pretty sweet?

Yeah. The my wife designed everything else, so all the other rooms look amazing. And she's like, you're on your own for your office, and so I'm, like, I guess I'll put a couch in there and some nerd toys from Final Fantasy. I'm all We're having a a couch in the office. I got one over there. My wife is like, are you sure you want this couch taking up all this bait? I'm like, yeah. I'm gonna lay in this couch. It's gonna be great. Sometimes you just gotta lay there and think about how stupid your function is that you just wrote and be like, why is it so dumb?

Therapy couch. It's actually Very good for audio as well. When Scott got a couch in his office, his audio was, like, way out. Soaked it up. Yeah. Soaked it up.

Lots Some soft things is good. How's how's the collarbone doing?

Oh, man. You guys wanna see the scar or the wound?

The wound. Yeah.

So what happened for for those Oh, yeah.

So it goes from here Oh, yeah. Up to there. Oh, yeah. I think I'm getting a little bit of infection in the middle of it too. That's gross. Love it. Oh, man.

Do you know what the FlowRider is Unlike cruise ships and stuff like that? Yes. I don't. Oh, is that is that like a fake wave thing? Is that what it is? It's a surf simulator. So they basically have, like, a a a padded surface that, like, curves up like a wave, and then they shoot water across at 30 miles an hour, and then they give you basically, like, a skate deck without wheels.

I mean, it's not a skate deck, but it's about that size, a little bit bigger. If they made skate decks for, like, Shaquille O'Neal, that's about what it is.

And then you just kinda surf it. And, I was having a blast. I was doing well. I mean, I've I grew up skating, snowboarding. I was really good at wakeboarding. I do a lot of wake surfing.

It feels mostly like snowboarding, actually, like your balance and the way that you, do it. Not so much surfing, but, anyway, I was pretty good at it doing spins and stuff like that, and then I was just doing a little doing a little Mhmm. Switch 180, a little half cab, and, Caught the front edge, and I've gone down plenty of times.

But this one, I just, like, went down fast right on my shoulder, like, just perfectly. Just the right way. Just the right way, and then and then you have, like, this, like I don't know what to call it. This, like, the the the water push of shame Happy to record it, like, shut you up over the hump.

And I've and I've so when I hit when I hit, I just I just it it was almost, like, Gratifying, like satisfying, like, cracking a knuckle when it's bugging you. Mhmm.

It was kind of that feeling. I just felt like this click.

Oh, no. And I get pushed over the hump, and then stand up and I stick my hand on my, collarbone,

and it just felt like Lego bricks underneath there. Oh. Yeah. Because that's one of those bones you can really feel how nice and Secure and solid it is all the time. So putting your hand there and not feeling that would I I felt 3 distinct, like,

lumps, like, Oh, over the top of each other. Right? So, like, not, like, separate. Like, they were, like, in a line how they shouldn't be.

So, actually, I busted it into 5 pieces.

Great.

Oh, great. Anyway, I am So how do they fix that? They just glue it back together?

You so They don't wanna do surgery. Like, it's best to, like, let the bone just heal itself, because surgery, you gotta cut through nerves and muscle and All that kind of crap, but when it's busted in 5 pieces, you definitely have to do surgery because it's not gonna, like, reconnect. I I would just have, like, this healed bone that's just Floating around in a bunch of pieces. Yeah. So, yeah. They just put a they put a plate on there and then screw it all together in, like, a nice line. You can go on my Twitter account, And I've got pictures of the X-ray before and after. It's it's pretty gnarly.

Yeah. Sometimes, man, that it's like It's like one little thing like that, and next thing you know, my wife and I, one of our it was like our our 2nd month dating. We hadn't been dating for very long, And I took her snowboarding, and she'd fallen a number of times. And then just one time, fell the right way, wrist broken a 1000000000 pieces, had to get the bar put in, and, you know, it's Dislike.

All it takes is 1 little

1 little slip up, and you're in big trouble. So what's stupid is I busted my wrist 2 months earlier.

So moving under these conditions. Yeah. Not not too bad, but still, it had been busted. And so now I'm, like, having to put all my weight on that wrist now as my left collarbone's a mess. So that started getting, like, hurting again. So I put my wrist brace back on, and I'm I'm in a sling, and then I've been doing some work about some, Anyway, some other health stuff where I needed to go get an EEG. Mhmm. So I'm sitting there with a sling on 1 arm, a collarbone in 5 pieces, a wrist brace, And I have, like, this giant EEG thing on my head, and I'm just thinking, like, so this is what post 40 is. Yeah. Totally. Yeah. Yeah.

Yeah.

Oh, man. I'm I'm a member of the, never broke a bone club, and I get the you guys talking about this? I'm, like, half passed out right now. It's just it makes me get so easy. It makes me I get the we call it the melts where, like, I can't grip Anything. When people start talking about, like, bleeding or breaking bones, I just get so queasy and, like, It's, I don't know what would ever happen if I could feel a bone in my shoulder like that. Wow. Cool. I had something removed, Wes. And they asked me if I wanted to

look away because I would get nauseous if I didn't look away. And I was like, no, I'll watch it. And they're like, are you sure? I was like, yeah. And I I straight up passed out. They're like, you should've why why did you choose to look at it? It's like I I can't even look when people give me shots or anything, or it's like drawing blood. I'm just like, can't look or else I will totally faint. Oh, man. Alright. Well, let's, So let's talk about JavaScript for for a bit as well. Boom. I know. Let's remix this conversation.

Yeah.

So Give us a quick rundown for for those who aren't familiar of what Remix is and kind of the whole ethos behind it.

We have described Remix as a server and compiler for React Router.

So, React Router has been around Long time now. 8 years? 9 I don't even know. I think it's 8 years. That's insane. I need a Yeah. I need a I need a new job. Yeah. Yeah.

But, but we just, my Michael and I, found ourselves where we were, like, ready to build an app. We're bouncing around ideas, like, hey, let's let's build let's build a new company.

And, we just started poking around, and we didn't really like most things. And so, like, anyone with a big ego like us, We're, like, fine. We'll build a framework.

We already got, like, 80% of it with React router. Mhmm. Let's just make a server for it.

And to do that, we needed to make a compiler.

Yeah. So, 2020, we launched it, And, yeah. It was just our take on on, on the framework space there. I think the most interesting there there's 2 things that I think We're most interesting about Remix when it was launched, but they're now kind of commonplace now with the new frameworks is, The first, it was deploy anywhere. So, what we did is we in a note environment, we polyfilled some web APIs like the request and response and, the the the fetch API. Like most people, like, 3 years ago Yeah. They would make a fetch, and then they would just say, like, res equals fetch and not even know what that res thing was, and then just say, oh, wait. Res.json. And, like, That was it. Their that was their whole interaction with that response API. Yeah.

And they didn't realize that they were creating a request instance either, just kinda hidden through the fetch, signature, but the 2nd argument to fetch is what's called a request init.

And you could pass that to new request, and then the very same thing that you, the very same arguments as Fetch. It just doesn't do anything. It just makes, makes an instance.

And you could pass one of those to Fetch.

But, yeah. So so we we've used that API.

We both had done Rails stuff in the past.

And, in the Ruby world, there's this thing called Rack, which is, the the goal there was that all the request response network interface stuff, could be shared across different frameworks and libraries like Sinatra and Rails and whatever else.

Sorta like Connect in Node, if people are not remember that. Right? It was, like, oh, you can just build it on top of Connect.

So it's that kind of it it for us, we're, like, oh, we can actually just use these standard web APIs, for our network interface, and if we build Remix to strictly operate on those, nothing from Node, no, like, HTTP from Node or Any special node stuff, just use the web API, then we can deploy this everywhere.

Serverless environments. CloudFlare workers, they didn't have pages at the time, because CloudFlare we we actually we borrowed this idea from CloudFlare because that's what they did with their workers, was used the WebFetch API, which happens to be the same API as, service workers in browsers as well. Yes.

Yeah. We've eventually got plans to run Remix in the browser like that. Have a your server In the server's browser.

Yeah. And then you could, like, just talk to IndexedDB and then, like, sync with, like, With a Replicash or something. Right? But but you gotta keep the same the same model. Like, you you know how to have a server and a client when they can just put that stuff in a browser. I'm so glad

that you're saying this because we literally just got done recording an episode Moments ago. On this, where I was, like, guys, Fetch, request, response, web streams. These are the building blocks of the modern web, because they are Standard across, like, both frameworks like Remix, but also deployment targets. You wanna throw a thing on Deno. You wanna throw it on Cloudflare Workers.

It just works. Yep. Yep. And there there's more too. There's, there's buffers, because you gotta buffer stuff over the network. There's crypto, because, you know, you gotta have secure stuff going over the wire. And and there's all there's web APIs for all the all these things are in your browser. Like, you can build a full on HTTP server, not just client. Most of us have build been building clients for a long time in the browser without realizing it, but you can actually build servers with this, stuff too. And that was I think that's the first thing that we did in Remix that was, the first time I'd seen it in the front end framework space.

We borrowed it from CloudFlare And, I think had a hand in popularizing it, to the point of where we have things like winter CG now, where, and Dino did it too independent of us.

And, so it's just kinda cool to see everybody, like, hey, why don't we just use this for the network layer on web things in JavaScript? I'd say the second thing that I think made Remix pretty interesting at the time that now you see in more places is our server actions.

Mhmm. We just call them actions, and, we're just not as good at marketing as Vercel. And so they called it server actions, and suddenly people understood it better. Yeah. So that's what we call them now, server actions.

But, yeah, in in Remix so so what happened was, we finished Remix or at least we thought, And so then I built the website, and, we didn't have actions. And if you've used Remix, our our form And our fetchers and that kind of stuff, the the mutation API is basically. Right? Like, they're like bookends. You've got the way to load data and then a way to change data. You have props and you have set state.

You have post and you have get. Right? Like, any API you look at, there's always, like, The read API and the write API.

I'm probably the wrong API.

Yeah.

But we finished remix, and we only had a read API. We only had loaders. And so I built our our our first website, and we were selling licenses, so I had to, like, make teams and users, and you'd have these tokens so you could download the code. So we had this whole dashboard, and I finished the app. I looked at the code, and I was like, I barely used Remix.

Like, I built the 1st remix app ever, and it was, like, 20% of my code, maybe less.

And then the rest of the time, I was over goofing around in, Firebase functions, making tokens, sending JSON responses, and then I'm, like, doing all this junk in the client. Like, everyone's used to this in SBAs to, like, Set state, update, make fetches, and then I had, like, this whole folder that had, like, wrappers for the client for every single function that I had on Firebase. So it's like, I just sat back, and I'm like, what the heck is missing here? And I noticed every single one of those, mutations started with an HTML form.

Mhmm. Mhmm.

And I said on submit, event prevent default.

Stop stop the standard. And there's Yeah. Actually, don't do what the browser already knows how to do. Yeah. I wanna I wanna try. I wanna see if I can do this.

Heaven forbid someone clicks that button 4 times real fast. Yeah.

Then then who knows what'll happen? So I I we just And then I brought Michael in. I'm like, hey. Look at this. Like, I built the 1st remix app, and I'm not happy with this. Like, this is not interesting Enough.

And so we jammed on this idea of, like, well, let's get back to basics. What do forms do? Yeah. What does HTTP post mean? What happens before JavaScript shows up and you submit a form? Well, you change some data. Maybe you redirect. Maybe you just render something, But then you go fetch new data.

And so this whole this whole section of remix that made it super unique at the time, emerged where it started with a form. You just did normal HTML forms in there, and then Remix would go and communicate with The back end server, just like a browser would, we do manage all the network, like, cancellation the same as the browser does.

And then, and then when the action completes, we go and revalidate any data that you fetched on the page previously so that the UI And your data on the back end stay in sync automatically.

And so it gave this really old school PHPS, development workflow, but with a modern implementation where it was just all fetches in the background, you're not redownloading assets or, updating the whole page or re like, Repainting the whole thing. Right? You gotta then use React for what it's really good at. Yes. I think that's the second thing, that made the Remix pretty unique at the time was these these server actions, Forms and revalidation.

And now you see those kinds of API straight in React itself Oh, yeah. With the experimental stuff that they're doing with Next. I I actually,

even wanna latch on to something else that was like quite unique about it. That is a non code thing was you'd mentioned this briefly was like the licensing part of it, Which I understand is is kind of, gone away. Right? So Yeah. Like, what was the maybe the history around the licensing idea And, like, what happened to it? I can't speak for Michael,

but for me, I was just sick of open source. Yeah.

Yeah. Totally.

And, COVID COVID kinda it didn't completely destroy our business, React Training. React Training's still around. It's doing great now.

Brad You guys were doing a lot of traveling for that. Right? Yeah.

But, but COVID made that a lot harder of a business to run. It it couldn't support all the people that it used to, especially during COVID.

And so we were like, let's build a new new company, and, like I like I mentioned earlier. And that's what led to remix, and we're like, well, why don't we just we we looked at, it's a delayed jobs library in the rails ecosystem.

Sidekick? Is that right? Is there a delayed jobs thing? I think it's called sidekick.

Anyway, this guy was making Gajillions of dollars every year selling this, like, freemium kinda thing where I was, like, here's sidekick free, and then here's a bunch Cool features that you can buy. Yeah. Yeah. And, and Tailwind also, watching Adam do that, with the templates. So it's like Tailwind's free, and now here's Tailwind in the UI, and he's making gajillions of dollars doing that. And we're, like, why don't we just do it with React Router? So I I was I was looking at I don't follow, like, the GitHub star stuff. I've never asked anyone to star one of my repos.

I'm barely aware of any of that kind of stuff.

But while we were just sitting there thinking about things, I I went to GitHub and they had it was new back then that showed, like, used by, like this little little Yeah. Like the dependencies Is there yeah. So they can look at, I guess, the package JSON of other things on GitHub and see who's depending on you. Right? Yeah.

That's more interesting than stars or Yeah. Right? And download charts or any of that. Right? It's like someone actually put this in their code.

And at the time, if I remember right, it was, like, 1,600,000 or something. Oh my gosh. Yeah. That just blew my mind. Wow. Yeah.

And now it's, like, 3 or 4. Like, It's I don't know. It's like like I said, I don't check it.

But, that's the first time I'd ever seen that or really even wondered how many people use React Router. And,

And how many $1,000,000,000 companies?

Yeah. Yeah. Right. Yep. Yeah. They it remind me a lot of, like, CMSs that I do, like ExpressionEngine or was it, like, Craft, CMS, some of those that had come out were they're good products and, like, you were willing to pay Yeah. License fee to use the good product knowing that you'd get their support

or be like a little bit more buttoned up experience. Yep. So so I did the math that everybody's brother-in-law does when they pitch you an idea, And it's like, well, if I just get 1% of 1% Exactly. Yeah.

It was gazillions of dollars. Yeah. Boom. Like, if we just got a sliver of all those React Router users to buy something that added to it, you know, server rendering and all these mutations and stuff, maybe they'd buy it. So, yeah, we did that. Sold licenses for 2.50 a pop, recurring, like, every year, so it's like a Stripe thing.

And, we got up to in, like, 6 or 7 months, we got up to 200,000 ARR.

Wow. Which is ramen profitable. I mean Yeah. Totally. 100 k each. We both got gaggle of kids and, and a lifestyle we gotten used to, so that wasn't that wasn't enough.

But it was It was something. Right? So, yeah, we're we're pretty stoked about that, but we always knew it was gonna be open source.

The plan was to build something some sort of, like, service or something like that or multiple services on top and sell that instead. Like, maybe an image service, like, go and compete with, any of those I don't know. Any of them. But you're cloud and area that's the one you that kind of stuff. Maybe the translation service, maybe, You know, just we had a handful of ideas. Maybe pull a Vercel and try to, like, do full on infrastructure.

That's what all the VCs wanted us to do. Yeah. And, we didn't ever really wanna do that though, because we wanted to deploy everywhere, not just dog. Yeah.

Yeah. So, anyway, the VCs the VCs were all sitting there with, like, cash that they hadn't invested. So all their principals are like, what are you doing? Because of COVID.

It's like, go put my money somewhere. It's not gonna make me anything just sitting in your bank. And so, VCs were, like, banging our doors down to talk to us, and we were mostly just like, yeah.

We're just gonna do our own thing.

I'm really glad I'm partners with Michael because he always thinks bigger than me, and, he was like, I think we should talk to him. So, and I was like, no. I just want a mom and pop shop,