Brooks - AUDIO EDIT
===

Noel: [00:00:00] Hello and welcome to Pod Rocket O Web Development Podcast, brought to you by Log Rocket. I'm Noel, and today we have Brooks Live Brandand developer relations manager for remix and React router. ~Uh, ~he's here to talk about react router, react router, V seven, kind of everything that's going on there, the migration, the community.

We're hoping to ~kind of ~dig into stuff ~and, and, ~and, ~you know, ~tear this apart a little bit. ~Um. ~So we're gonna jump right in. ~Uh, ~I guess to start off with, can we like, ~kind of, kind of set the, ~set the scene a little bit on why there's been a little bit of ~like ~a community shift on React router and some of the dialogue that's going on there.

Brooks: Sure. Yeah. ~How, ~how far ~do, ~do you want me to go back? There's ~quite a, ~quite a history with this project for sure.

Noel: ~Um, I think like, I don't know, folks on the last couple, it's,~ it's ~kind of ~tricky because ~the, ~the transition to seven has been ~a little bit,~ kinda long, I think. But I don't know, maybe like what's been going on in the last six months maybe

Brooks: ~yeah, set it up there..~ 

Yeah. We can start with ~like ~the happy place of, we got React Rider seven over the line. ~Um, ~and so the preface of that is, is. Basically what we were doing with remix, what we were building with ~like a, ~a React framework that had,~ um, you know, ~server side rendering was ~kind of the, ~the default and was built on,~ uh,~ web standards and we added all sorts of other features to that.

~We, uh, we got,~ that was always built on top of [00:01:00] React router. React Router was always like ~the, ~the underlying,~ uh, like~ router system. So it was React, then React Router, and then Remix was built on top of that. Those things got so close to being just the exact same thing that,~ uh,~ we just figured ~it was, ~it was ~kind of ~better to put everything back into React Router.

We also thought that would be good for the community 'cause that would give this like framework mode to anyone using React router if they ever wanted to add it. ~Um, ~and then it also ~kind of ~freed us up to do something a little bit different with remix and that was ~kind of ~the piece ~we. ~We couldn't really talk about as much.

Six months ago,~ we,~ we already knew that us putting everything in remix back into React Auto was going to be kind of enough for people to, to digest and to ~uh, just, ~just try and move forward with that. We kind of wanted to wait to be able to talk a little bit more about the future. We also wanted to figure out exactly what we wanted to say,~ um,~ before we got to that point.

And so that's, ~that's kind of ~where we're at now, where we've recently announced our plans with Remix V three. ~It's a, ~it's a departure from React. ~Um, ~it's gonna be much, much more like. Full framework ~in, ~in the way that maybe,~ uh,~ the Laravel and the Rails people mean the word framework versus what we mean in the React community as a framework being more this meta framework.

And it's basically [00:02:00] react,~ uh,~ with extra enhancements.

Noel: ~Yeah. Yeah. I think, I think especially for people that,~ especially for people that aren't super ~in,~ in the ~kind of~ react head space, it can be ~a little bit, ~a little bit confusing. Especially when there's this world where ~it's like, do I,~ am I still just assuming that I'm reaching for next? What's its relationship with router now?

Like how does that work with ~the like, kind of ~the remix migration into this thing? Can you kinda ~like. Set that,~ paint that picture a little bit for

Brooks: ~Yeah. Yeah, it's a great question. Um, sorry, hold on.~

Noel: ~No, you're good. Yeah, yeah.~

Brooks: ~I'm like almost done with this cold, but just a little bit~

Noel: ~It's that time of year where I feel like, yeah, the, the spring colds always linger~

Brooks: ~Yeah.~

Noel: ~forever. They're just like, they never totally go away.~

Brooks: ~For sure. Um, yeah, it's a great question. Uh, and, and~ so the way that, that we want to think about it is,~ uh,~ basically ~with, ~with React router,~ that's,~ that's a 10-year-old, I think 11-year-old project at this point. So that is very much like our React solution. Our team is going to continue developing it.

We've shifted our governance around it. So we have an open governance model now instead of just like Michael and Ryan, our founders leading everything. So instead ~we, ~we have more of a voting system, more of a proposal system that kinda matches TC 39 or is heavily inspired by it. ~Um, ~because we want it to continue, we want it to continue ~to, ~to develop.

React Router has been a great, just ~like, ~Hey, I just need a simple, ~you know, ~declarative router for React for my spa. It's really great for that. ~Uh, ~but maybe you want to ~like ~build your own framework and you don't wanna reinvent the routing piece. We have data mode, and it's [00:03:00] really great for that too. ~Um, ~or maybe you are like, Hey, I~ I want something like a Next JS or an Astro, or, or maybe Astro is not a good example.~

I want something like Next JS or,~ um,~ like Tant Stack Router or whatever. React Router has a framework mode and ~it's, ~it's really great for that too. ~Um. ~In my opinion, it's the best, but I'm also super, super biased. ~Um, ~but all these are great and so it very much fits into that space and we have lots of features we're continuing to add, like react server component support and ~uh, ~middleware,~ um,~ all those sorts of things.

So that's very much the React router story. So if you are in React world, you really like React, you like what the React team is doing, we've got a great solution for you that we'll continue developing. ~Then on the other side, oh, go ahead. No. Yeah.~

Noel: ~Continue. Continue.~

Brooks: ~Um, ~and then on the other side you have a remix, which ~is, ~is more So what if we actually did build a JavaScript,~ uh,~ framework, maybe like a Rails or a Laravel,~ uh,~ just ~from, ~from sups to nuts, like from end to end,~ um,~ from your data layer all the way up to like your actual component library.

~Uh, ~what would that look like? And that's really ~kind of ~where Remix is heading. And I wish I could say a lot more than that, but honestly we are like ~actively, ~actively developing it. ~Uh, ~right now, remix is more a spec,~ um, on a, ~on a Google doc than it is anything. But,~ um,~ it's something that, that Ryan and Michael and even the whole [00:04:00] team has been building pieces of for ~years and ~years and years, separate and together.

~Um, ~and so ~the, ~the challenge we have now is not so much coming up with ideas, but rather just taking things we've built over and over again and putting it all into,~ uh,~ one cohesive thing.

Noel: ~Nice. That makes sense. So on, on this, ~on this React router piece, ~you're probably as as, as good a. As good a person to speak to this as any,~ you talked about the different modes here. ~When you,~ when using those different like setups, ~does it feel like, are, do they, ~do they feel pretty independent? ~Like ~if you're doing, ~you know, ~one or the other, does it still feel like you're using React Router or is it ~kinda like each is it's, it's, it's~ such a separate mental concept that they're almost entirely different in how you interact with them as a developer.

Brooks: ~Yeah, that's a,~ that's actually a really great question, and it's definitely more the first thing that you said. ~Um, ~we have a diagram. ~I don't, ~I don't think we published it, but we're going to try and include this at some point where ~it's, it's more, um,~ it's not so much Venn diagrams, but more concentric circles.

So at your root layer, you have ~your, uh, like~ your declarative mode, your're, just your spa, uh, router. It doesn't really care about data, it doesn't really care about server side rendering. If you wanna do that, you go set it up yourself. And that is like the very core of it. It's like your link component, your nav link component.

~Um, ~it's got like these routes,~ uh,~ components as well. And so that is ~kind of ~the crux of it. [00:05:00] And you're gonna be using those pieces pretty much with everything. And then you have the next layer, which is ~the, ~the data mode. And so it uses all those same things except ~your, ~your actual setup for the router.

Is ~a, ~a data router instead of like a browser. Router instead of these route components. And the reason we do that is because your router's now,~ uh,~ responsible or can be responsible for your loaders and your actions. ~And, ~and what happens when a user hits a page for the first time? What kind of data do you load?

If the user submits a form, what do you do? ~What do you, ~what do you,~ uh,~ send off as a mutation and what,~ uh,~ actually should be updating on the page? And so it's the same exact components as you had before, but. Added functionality and added components. And then framework mode is basically ~if you, ~if you took data mode, but then you made a Veep plugin for it so that everything is ~kind of ~set up cohesively.

You have ~like ~these route modules and you have these special exports that automatically map into things, so it's a lot less fiddling around and setting up all those different things. And you can just export function loader and it automatically works and it's automatically codes, but the way you'd want it automatically runs just on the server instead [00:06:00] of.

~Uh, ~on the client. And so that's really the concentric circles. They all feel very much the same. You're just getting more and more,~ uh,~ powers as you go, basically.

Noel: ~Yeah. Yeah, that makes sense. Who, who are you guys? It, ~it sounds like you kinda had ~different, ~different,~ uh,~ use cases in mind ~than like, for~ like letting users plug in at the various depths here of the concentric circle, if we'll continue ~our,~ that kind of analogy. ~Um, ~or that framework is ~there, like when.~

~Who,~ who did you picture when you were ~kind of ~setting up the abstractions for data mode? ~Like ~who? Who was that kind of middle tier really for? 'cause I think ~both, ~both of the outside edges make sense. I'm curious

Brooks: Yeah,

Noel: the middle one. ~Yeah.~

Brooks: ~that's actually a really great question. Um, ~so the origin of how it came about ~is, ~is basically because of how we developed remix. ~So, ~as I understand it, I wasn't on the team when they started. But this is the story as I've gathered it, is when they built Remix, they ba, they more or less forked React router and just ~kind of took, ~took all the pieces they wanted and built Remix.

~Uh, ~but then they realized ~like, ~actually we've made ~some, ~some really useful things.~ We basically have made like. ~We've made a toolkit for building your own framework. ~Um, ~so we should actually put that back into React Router and then just rebuild remix on top of it. So this kind of started that journey to where these, the Remix Project and the React Router project started getting closer and closer.

So first it was built for them. It was [00:07:00] actually built for our developers. That was the intended audience. And so then for anyone else who is like, Hey, I don't, I like remix. I like what they're doing, but honestly they've made some decisions that I maybe don't like or I wanna add features that ~they're, ~they're not adding.

I wanna build my own framework. ~Um, ~but I don't wanna reinvent this whole, the whole data layer piece. 'cause the data layer is really simple. It's just saying. When you're at a route, yeah. ~What do you, ~what do you load? What does your GI request do? And then what do your posts put, delete all the other requests do.

~Um, ~and that's pretty much it. ~And, ~and nested routing, I guess you get that for free as well. And so that's really who data mode is for. It's really for that middle piece. It was also meant as a bridge. ~Um, ~'cause initially ~we wanted to get people,~ we wanted to encourage adoption from react router to remix.

~Um, that, ~that definitely was a goal early on. Less so a goal. Now we ~kind of ~just want people to use whatever they want. So it's definitely made as a bridge if you are trying to move. To the framework mode now. ~Um, ~it definitely acts as a bridge to, to get there ~if, ~if that works for you and that's in line with your goals.

Noel: ~Gotcha. That. Yeah, that was kind of my next, my next question here is, I know like, ~I'm sure people who are down in the weeds ~can, ~can ~like ~Google this and look this up, but ~what, ~what is the~ kind of, um,~ migration path now as these ~like, you know, ~like people from remix, people from old versions of router. ~Like ~is there [00:08:00] specific modes that those are typically targeting or like where are you guys ~pushing, ~pushing

Brooks: Yeah, that is a great question. And I will say ~if, ~if you actually actively are trying to do a migration, we do have migration docs on our website for all these different entry points. ~So, ~so please do reference those and if they suck, reach out to me because I wrote them. ~So, uh, ~I just have more work to do.

That's all that means. ~Um. We're, it's a really good question. ~We're not trying to necessarily push anyone to use any different mode. ~We, ~we actually think all modes are,~ uh,~ legitimate. But we do want people to be aware of the different modes. So we have ~like ~a one pager that explains, Hey, these are all the different modes.

~This is kind of, ~if you're trying to build this app, this is probably what you want. If you're trying to build like your own framework, this is probably what you want. If you're just like, Hey, just give it all to me. I don't want to like make all these decisions about bundlers and all that kind of stuff, then yeah, you probably wanna use framework mode.

~Um, ~and so as far as the migration story though, I. React router V six to V seven,~ um,~ was like just about non braking. It was ~very, ~very straightforward upgrade. ~There were a couple, uh,~ we have ~this, ~this system called Future Flags, which a lot of other people have this too. This isn't necessarily just us, but for new ~and, ~and breaking,~ um,~ APIs, we would add like a future flag.

And then you, would you turn that on, in V six to be able to get ~the, the, ~[00:09:00] the new feature? We have a page on the, I think the V six docs and potentially the V seven of everything that needs to be updated. It's pretty simple ~for a, ~for a React router V six app. So you just turn all those on and then you can update ~your, uh,~ your dependencies to V seven and then turn all those off.

And now you are on version seven. Now, if you wanna move to framework mode,~ um,~ that's a little bit of a different story, but we have ~like ~a migration guide all about what it looks like if you're already using loaders and actions. That's pretty easy. ~You just, ~you just rewrite your routes to look like route modules and then ~you're, ~you're really close to framework mode already.

So it's really just gonna be shifting to that,~ uh,~ v plugin. If you're using our declarative routing, just like those routes components,~ um, that, ~that ~middle, ~middle layer,~ uh,~ you can pretty much mount it as ~a, ~a route. ~I'm, ~I'm pretty sure is what we recommend you just one route in your framework. You mount that as your like little small router and then you just migrate over routes one by one as you want to.

Then if you're coming from remix V two, see we made this really complicated. We're trying to simple this. ~Um, ~if you're coming from remix V two, that's actually one of the easiest paths,~ um,~ because it looks. So similar,~ the,~ the framework mode for V seven is the same as the framework mode for [00:10:00] V two. It just has more features.

And we also similarly had ~feature, uh,~ feature flags. The biggest challenge is like, all your imports change, right? They go from remix to react router, but we have a code mod that I have not heard complaints yet. So if people find issues where it doesn't do what they want, please let us know. But~ it, you know, ~I've seen huge code bases,~ uh,~ just, you know, like that, just all get converted, all get updated ~to the, ~to the correct imports.

Noel: ~Nice. Yeah. You, you mentioned having, having seen huge code bases there. I'm curious, again, I'm not, I'm not completely sure on the timeline or where you were involved here, but just kind of to, to your knowledge, um, was there like. guess it's, I,~ I feel like we kind of ~been, kind of been,~ have been in this era where ~there's been a lot of, ~a lot of frameworks, tools like this have gone through these like rather large migrations, ~like in ~in general, like next React view.

Like we've all gone through just these like large things over the past, I dunno, three or four years. ~Um, was, is there, like, I guess~ did you guys have any fear with ~kind of ~where, ~um. ~Remix was coming from,~ like,~ I, I don't wanna say it's ~kind of like a, like a, ~like a incumbent or anything, but just ~these, these, like this, this kind of~ the place it was in and trying to get people to migrate while also shifting to something that isn't just ~like the kind of, you know, the, ~the typical react flow.

Was there any kind of concern that~ this would be,~ there'd be like a fracturing here that may be ~kind of ~tricky to, to wrangle?

Brooks: ~Yeah, I think, ~I think if I understand what you're saying,~ I,~ I think it actually ties into ~like ~a really good reason why we did the whole remix to React router instead of react router to remix [00:11:00] thing. So back in last,~ uh,~ may, so like a year ago from when we're talking now is when we announced that ~we were, ~we were going this direction.

That was like the first level of the announcement. We. ~Um, ~what precipitated that was basically Michael and Ryan showing us what they wanted remix V three to be at the time. At the time it actually looked very different than what we're talking about now. It was basically, we were code naming it reverb. ~Um, ~so if you've ever, if anyone has heard of ~that, ~that's what it is.

~Um, ~and the idea was it was very React server component. Forward. It was very much ~like, ~like next JS app, router built, react server components first. Definitely some different things than what they were doing. ~Um, ~we had a lot of really cool ideas. We're gonna rebuild the router. It was gonna be incredibly type safe,~ um,~ not just like type gen, but type safe.

And so we built this really cool system. We had ~prototypes of, uh,~ aspects of it, at least working. ~Um, ~and we really, it was really exciting. We thought it was super cool, but the reality is like our team looked at it, our team was looking at it ~and, ~and some folks at Shopify as well got ~a, ~a preview of it. We basically were just like, ~this is, ~this is cool, but this is so different.

~Like ~this is an Angular two moment. People joke about us having one now, but it was like, that straight up would've been just a completely different [00:12:00] project. And we're like, I don't know how we can go from Rex V two to V three. We always talk about upgrade paths. There's no upgrade path here. ~Um, ~this is a completely different thing.

And so that's when we actually had the idea. I think it was. I think multiple is like very much conversion evolution. Multiple people on the team ~kind of ~had this idea at different points where we said ~like, ~actually ~this,~ what we have now is way closer to React router. Why don't we just pull it into React router?

And so that was ~the, ~the initiation of that idea. Then we worked to have ~like ~a working example of the RSC demos that was really important. ~Um, ~way back a year ago. ~Um, ~development moves a lot slower than I'd like it to. And so that's when we announced what we were doing,~ um,~ with merging re remix into React router.

And giving what we had done with remix a home in the reactor router,~ uh,~ space. Then we launched it last October,~ uh,~ V seven. That's when that came out. And since then we've been developing it, adding new features,~ um,~ cleaning up things ~that, ~that were kind of broken. And now ~we're, ~we're ready to start telling the rest of the story.

Noel: ~Yeah. Nice, nice. Did you, I,~ I mentioned earlier that ~there was,~ there's ~kind of ~some divisiveness here. I think, ~you know, ~vocal people will be vocal people forever, and you'll always hear about the people that are having problems or have strong opinions. Did you guys ~kind of ~anticipate some of ~this, this, ~this backlash a little [00:13:00] bit?

I guess, would you agree that there's been a little bit of like ~kind of ~divisiveness in the community and is that something you anticipated?

Brooks: Yeah. I think,~ uh,~ honestly,~ it's, it's,~ it was reversed from what I expected, which there's probably a lesson in that. ~Um, ~so ~with, ~with,~ uh,~ the remix to, to react router one,~ um,~ we got the most pushback and I expected it the least. ~Um, ~with this one, we expected people to be like, oh, they're doing it again.

And we definitely have gotten that. ~Um, ~but ~it's, it's very much like. ~It's like Reddit, which already, like people in Reddit kind of hate us anyway. ~Um, I, yeah,~ I definitely want to take their feedback, but ~I, ~I take it with ~a, ~a large grain of salt. ~Um, ~but we actually got a lot more positive. Like, oh, cool, you guys are trying something different.

~Um, ~you're trying something apart from React that's really exciting versus just like our status quo, which has been trying to work with React and then like maybe be getting frustrated or complaining and feeling like ~we're, ~we're being blocked from something we wanna do. ~Um, ~so I think people have actually got that story.

~Um, ~but how we've. How we've dealt with that feedback. ~Um, ~it, honestly, it's kind of two pieces. One,~ it's,~ it's if people are upset,~ um,~ obviously you kind of have to try and filter ~the, the, ~the signal from the noise. Personally, I try to, whenever we're getting a lot of negative feedback, I just try to turn off all social media,~ um,~ just give myself a little bit of a break from it, ~let it, ~[00:14:00] let it all sit,~ um,~ and then ~kind of ~come back,~ uh, with, ~with a fresh perspective.

~And, ~and that allows me, at least personally, to hear that signal from that noise. ~Um, ~but yeah, the fact that people are still a little bit confused about our whole story just means ~we're, ~we're not doing a good job making ~the, ~the story clear,~ um,~ in our own like materials. Like our website should just make the story really clear.

~Um, ~we shouldn't have to link people to a tweet. People shouldn't have to listen. I want them to listen to this podcast, but I, they shouldn't have to go listen to this podcast to understand what we're doing. So that's definitely ~a, ~a failure of communication. I think there's also though a reality of like our organization,~ um,~ our team of eight.

~Uh, ~the way we feel is,~ and,~ and the way that we're communicating is going to leak out ~to the, ~to the broader just,~ uh,~ narrative and the broader community. So I don't, we've never been in like huge conflict, but I don't think we are a hundred percent aligned on what we are doing with our projects. And I think that kind of showed, I think people could feel that tension of like, where is React rather going, where's remix going?

~Uh, ~about a month ago, this is when we started. ~Well, we, ~we've been talking for a while, but that's when we really solidified, okay, we're going to move React router to an open governance model, and we're gonna let ~these, ~these [00:15:00] five developers on the team be the ones. To start as the steering committee and we may invite others from the community into it.

And then Ryan and Michael, the founders, are going to start the process of building what they want remix to be and then bring us in as they're excited about specific features that they think different ones of us can help. So it allows us as one team to continue pursuing both of these projects in a way that everybody actually feels really excited about and really,~ uh,~ really energetic about.

And I think that's already started to show,~ um,~ our cohesion, our. Unity on that has already started to show, I think, in the community, that the community is excited about both these initiatives. So that's been my perspective so far. But watching people's feedback, of course.

Noel: ~Yeah, no, I, I, I was trying to kind of think of other, like~ I mentioned some other projects and there've been a bunch of large projects that have gone through like similar kind of big, ~you know, ~paradigm shifts. But ~I, I, ~I do think ~that, ~that your guys' situation ~is, ~is unique in that there, there was ~kind of ~like ~a, a, ~a layer shift where like there was a tier swap and then you also ~like ~changed the thing beneath it out, like in short succession.

Not that there's anything wrong, but ~like. I,~

Brooks: it, yeah, you're right.

Noel: is confusing for users, and I'm sure that was like, ~kind of ~was super tricky for you guys [00:16:00] too,~ like, you know, ~like ~kind of ~figuring out ~how, ~how to navigate that. So ~I don't, ~I don't envy that position. ~Um.~

Brooks: that's totally fair.

Noel: ~When you guys, when you guys set out, like, did you like, this is kind of what, what led to my prior question of like, you, you had to anticipate this being like a tricky thing to like get people.~

~I, I guess ~I think the difficulty here is just like the data is not all yours. Like ~when, ~when you have one of these projects, there's stuff in ~like ~Stack Overflow and Reddit comments and like, all this stuff just isn't gonna be updated anymore. Like, how did you,~ like,~ were you guys kinda looking at that and was there like a little bit of anxiety?

What was the, what was that temperature like?

Brooks: Yeah, it's a good question because ~I mean, ~and ~the, ~the biggest problem we're still gonna have going forward,~ uh, is, ~is like remix B two and remix B three will be completely different things. So much so that most people are saying like, you really should name it a new project. And ~I, ~I definitely respect that.

Honestly, if I were doing it, I probably would, but ~I'm, ~I'm not in charge and so ~I'm, ~I'm gonna go with ~what, what, you know, ~what the people in charge want and I'm gonna be happy with it. Plus I just launched a store, ~you know, ~that sells remix merch, so we're gonna, we're gonna keep that going. That at

Noel: has always been really good. I get it. Like

Brooks: Yeah, exactly. And so there's ~kind of ~this funny thing though, like I, it is really legitimate and there's also ~this, ~this weird thing where like with the advent of AI and LLMs and all that training, it's almost ~like ~exacerbated that problem of like old [00:17:00] stuff. And I feel like for me at least personally, it's almost pushed me over the edge to where it's ~like, ~okay, I can either worry about that forever and we can never innovate.

Or we can just say ~like, ~yep, that's what it is. And how do we work with these things? How do we provide people tools? How do we communicate our best to,~ um,~ to people? Because if we're communicating well to people, we're communicating well to the LLMs. ~Um, ~'cause they actually will read your stuff, which is what's nice.

~So for example, I I, this past week, um, actually no wait, sorry. This week, uh, I, I just wrote up some like cursor rules and I used cursor to write it for me. Honestly. Um, that helps you like if you are starting a a, a React router V seven project. Let me step back actually.~ If you're starting React Router V seven project and you just try to ~like ~one shot vibe code, something like, Hey, make me a contacts page with ~like ~an edit form for the, for different contexts and an omnipresent list on the side of all the contacts.

It will try and pull in remix,~ uh, you know, ~all the remix packages. It will try and pull in React router dom, which like still exists, but you don't need to use that package. We're gonna, it's not gonna go to V eight because it's just a mirror ~of, ~of V seven. ~Um, ~so it'll do all these things that are completely wrong.

With ~like a, ~like a few hundred line cursor rule that I'm pretty sure I can condense even more. ~Um, ~it can completely one shot that and do all the type gen stuff and do ~like ~some of the ~latest, ~latest stuff that is like the model has not been trained on. I did this with actually ~like, uh, ~Claude, no, wait, which one was it?

~Um, ~I think it was, yeah, 3.5. I did it with an older [00:18:00] model basically that for sure has not been trained on the newest stuff and ~it, ~it gets it. You just tell it what you want and it'll do it. So I feel very confident that ~like. ~We have to figure out how to keep innovating. We have to figure out how to do things better.

If we're just gonna let, like the reality of stack overflow and ~like, ~what does chat, chat, GBT know, dictate what we can do, then,~ like, what, ~what are we doing? We're not engineering, we're not trying new things. ~We're just, ~we're just being stuck and letting computers tell us what we can and can't do.

Noel: ~Yeah. Yeah. The, yeah, like, I, I hadn't, ~I hadn't spent much time chewing on ~the, like what is in the, ~what is in the context of a model's like understanding for updating these things. And I don't know if that's a future I want to be in, where every time there's an API change of some kind that's ~like, ~oh, we've gotta make sure that when prompted.

The models all put,

Brooks: Yeah, exactly. Yeah.

Noel: Yeah. It's like at least with Stack Overflow, you can go in and edit and cross out and slap a link on the bottom.

Brooks: Yeah. You have a little more control. ~These, ~these things are unfortunately, pretty closed boxes that,~ uh,~ other people are doing, but we've run into this before. ~You know, ~SEO was a version of this. This is just a much more, ~uh. It just, I don't know, ~overreaching ~and, ~and fast spreading kind of thing that we're dealing with.

So we're all learning in it, but I, yeah, ~if we, ~if we stop innovating, we stop trying new things, I [00:19:00] feel like ~that's, ~that's how we lose an open source.

Noel: Yeah, ~this is, ~this is a complete aside, not where I anticipated this conversation going, but I've also found that ~this, ~this problem ~kind of ~exists in that ~like ~there is an increasing number of like dev work and support requests and stuff being shifted to these like walled gardens. ~Like ~Discord is the first one that comes to mind.

~Like ~there's so much stuff happening in Discord and it's hard to extract. And I think maybe ~this is a, like there's,~ this actually is ~kind of ~a counterpoint to this problem and that I feel like that stuff isn't ~like ~exposed online anywhere. So people tend not to get outdated information because they just go and ask the same question a million times in

Brooks: Yeah. Oh

Noel: servers and stuff.

Brooks: You're absolutely right.

Noel: Yeah. Yeah. Have you guys, do you guys have ~like ~any support channels like that where you've ~kind of ~had this,~ like,~ ongoing discussion? Or are you using ~kind of ~this the more open source,~ um, you know, ~standard, ~like get~

Brooks: No. Yeah,~ you're, you're, ~you're correct. ~Uh, ~we have a discord. ~I, ~I really love our discord 'cause it is so active, but it absolutely,~ that is like, ~that is the heel to it that ~I, ~I absolutely hate is that~ It is. ~There's so much good information that doesn't get out there. But also there's a lot of like discord because it's so rapid and with humans, hopefully,~ um, it is, ~it is very much like information gets outdated very quickly.

[00:20:00] So there's a weird thing to where it's nice that it can correct people in the moment. ~Um, ~and so ~it's, ~it's just an interesting thing, even like Twitter with how, or now it's x how it's all gotten so locked down. It is not a good source ~of, ~of information either, because you have to have a super expensive API and you can't, ~you know, ~scrape it if you're not logged in and all those sorts of things.

~So. It's, it's,~ there's pros and cons for sure. ~I, ~I don't love it though. I personally would like to get ~more, um,~ more of the good findings that come from our discord and even Twitter back into our communication. I think we over index on. Like small wins. You get one person to understand what you're saying and you feel good about that, then ~it, ~it's really easy to forget, oh, there's probably like a few hundred or a few thousand other people who have that person's exact same problem.

And if we don't have a ready, searchable,~ uh,~ indexable, trainable,~ uh,~ version of whatever we just explained, that's ~kind of ~a miss on our part where we're where Yeah. We should just turn that into an artifact.

Noel: ~No, I think, ~I think that that's a problem across the board ~and like, yeah, it, it's, it's a bummer that that isn't, I, I, I think, ~I think the thing I'm lamenting here is that,~ like by ~historically, by default, the artifact was there because it's ~like, ~oh, there's ~like, ~it was like a GitHub issue or it was in Stack Overflow or whatever, right?

So like ~the, ~the question was just there. And ~in the, ~in the, in [00:21:00] some old forum for PHP developers, right? I was like, you could find it all. And now it's ~like, ~oh, it's not happening. And. ~The immediacy of those of those platforms or the old or the new, sorry.~ The immediacy of the new platforms is like really nice.

And again, like it, it tends not to be as outdated 'cause it is immediate, but like having that manual triage step that we're putting on already busy maintainers be like, what are the questions that are commonly being asked? ~Like, ~is this truly a one-off question that this person's in a unique situation?

Or is this the one of, and there's a thousand of these people that only, ~you know, ~there's one, there's only one of them. Jumping in is a tricky problem.

Brooks: it is a tricky problem. Yeah. I don't have a solution,

Noel: Yeah,~ I'm,~ I'm optimistic that ~like, ~somebody will figure this out. I think it's tricky because ~like ~the, like Discords, TOS is pretty ~like ~locked down and stuff like that, but I,~ like, I, ~I think that there's probably a world, and I think there was even a couple products that did this where it was like, they're like Discord likes, but they're like fully, like everything can be open and there's like GDPR implications and all that stuff there.

But, ~um. Like, ~yeah, it's a,~ it's, it's, ~it's an interesting one. I guess I, I have you found that there is much kind of difference in the tone of those conversations and questions and [00:22:00] complaints in like your guys' discord versus ~like ~what's happening on GitHub versus what's happening on Reddit? I.

Brooks: ~Yeah. Yeah, definitely. Uh, that's a good question. ~Yeah, I don't know if ~I, ~I wanna categorize every single one 'cause they all definitely have different flavors, but ~it's, ~it's true. So our discord ~is, ~is typically pretty, pretty friendly. There's certainly people get, ~you know, ~frustrated or upset or whatever.

~Um, ~I get it. People are trying to do their job and where the thing blocking them in that ex ~uh, ~moment, discord, ~we have some, ~we have some amazing,~ uh,~ moderators. ~Um, ~and even just. Unofficial mods really, who just answer questions very quickly. So there is that nice reality of discord has ~that, ~that kind of fast paceness.

~Um, ~GitHub, ~we do,~ we encourage all questions to just go to discussions. That's been a great feature of GitHub recently. And honestly, that really does help with ~the, ~the stuff is searchable, it's indexable, it's trainable, et cetera. ~Um, ~and so we push people to the discussion so that we don't. Litter,~ uh,~ issues with what are just questions.

Not actual, ~like ~this is a bug. ~Um, ~that's really what we want issues to be. ~Um, ~or maybe a feature enhancement. Even those actually are supposed to be discussions. ~Uh, ~feature enhancements should first be a discussion, so that certainly helps as well. ~Um, ~and we have pretty good responsiveness there. ~Um, ~Twitter,~ it's,~ it's different.

People wanna be spicy, people wanna get retweeted. So there's,~ uh,~ [00:23:00] there's a little bit more of maybe ~the, ~the egging on,~ um,~ Reddit. We, our team really just doesn't engage with I, ~uh. ~I would like to more, but I just, I don't know. I've, most people don't seem ~to, ~to have much good faith in us. ~Uh, ~pretty much no matter what is launched, ~like ~there's one YouTuber,~ uh,~ who's not on our team alum, who,~ uh,~ loves making YouTube videos about what we do, is really excited about it.

He also works in the open source space. He built,~ uh,~ the React router dev tools. ~Um, he'll post, ~he'll post like videos on Reddit. Just about something he's excited about,~ like,~ Hey, middlewares out. And the first comment is always, oh, I bet they broke the API again. And it's just ~like, ~not even,~ like,~ not even wanting to engage.

This guy's not even on the team. He's just excited. And it's just ~like, I, ~I get it. I get it. If you've been burned before by open source,~ um,~ but ~like, ~hey, that was six years ago that Michael and Ryan broke that a p on you. ~Like, ~you don't even use this project. Maybe just let this guy like share what he's excited about.

~And, ~and if you wanna go a step further, maybe watch it first

Noel: ~yeah, ~yeah.

Brooks: you can comment. ~So,~

Noel: Yeah. ~It's like, ~it's like the, it's like the Twitter, Twitter thing, but maybe worse. Maybe better.

Brooks: I don't, yeah, I don't know. And ~I, ~I don't wanna,~ like,~

Noel: or sorry, Reddit is a weird place. Like

Brooks: Reddit is a very weird place, and ~that's, ~that's great if people like it. I just, it's for us. ~It, ~it, it adds more stress and anxiety to my life ~than, uh,~ than needed. And it doesn't help [00:24:00] me do a better job. I already get ~the, ~the feedback that Reddit gives in a much more constructive way,~ um,~ through our Discord and through GitHub and even sometimes through Twitter and Blue Sky.

Noel: ~Yeah. Yeah. Um. Yeah, I love Blue Sky. I, I feel like, um, blue Sky is still like, is great, but I, I've found the people that have migrated to Blue Sky, everyone's like very good faith, like Blue Sky. Everyone's very happy about everything. There's like, there's always, you~

Brooks: ~There's a lot more positivity~

Noel: ~yeah, the, the, it's just like, I don't know, people seem to go to Blue Sky when they don't wanna be being pulled, pulled through garbage and stuff, so it's like,~

Brooks: ~Yeah.~

Noel: ~yeah, yeah, this is, this is nice.~

~I guess this kind of brings up an interesting, an interesting point in that a lot, a lot of these decisions,~ I think the. The original justification for a lot of routing,~ um,~ decisions, and especially like how that interfaced with large teams. And they were working on large front end projects wherein people would typically reach for a routing tool to help them.

Was ~kind of ~in like inter-team dynamics, right? ~Like the comm, like how do, ~how do people decide how we break up pieces of our app? How does data move between those pieces? And I think a lot of that factors into ~like. ~What do we want out of a router? Like ~how, how, how, how, ~how does data flow through the app?

~Um, ~can you speak a little bit to ~kind of ~how that factored into ~your guys' or to the decision? I know like you were not involved in all of it, but to~ the decision to ~kind of ~do this migration ~and, ~and the new mode in which data should flow ~kind of ~through router.

Brooks: ~Yeah, that's a fantastic question. I, ~I really wish I had like more context on it. On the whole history of React Router, 'cause this isn't really the first time they ~kind of ~allowed React router to, to care about your data. ~Um, I, ~I started doing React ~and, ~and really web development and ~like ~20 16, 20 17,~ um,~ I think React Router had moved to ~like ~V four and so it was very much the declarative [00:25:00] routing routes were like written via JSX.

~Um, ~and so there wasn't like this way to hook in. ~Um, ~so I ~kind of ~got ~that, ~that post experience. ~Um, ~so the reason though. From talking to Michael and Ryan, the reason they went with that, with like version four was because,~ um,~ react was promising a data solution for a really, really long time. ~It was, ~it was promising a solution to handle your data.

So then they felt ~like, ~okay, we don't need to worry about that. The router doesn't need to worry about these things. ~Um. You know, ~fast forward ~like ~three or four years,~ we,~ we learn about RSC and we get the first,~ um,~ RFC for React server components and then fast forward another four or five years and here we are and they exist ~and, ~and we have ~like ~a preview of them.

We'll continue developing,~ um,~ what we think is the best version of React server components, but it hasn't. Been exactly what we wanted it to be. ~Um, ~but ~even, ~even going back, we basically, Ryan and Michael were ~kind of ~done waiting for React to have a solution. ~Um, ~and like you just said, it's, the router is actually a really great place to do all that coordination of data.

If you think about a traditional, ~you know, uh, ~multi-page app and MPA. That's how it works. You go to the URL, it requests things,~ it,~ it builds a page for you, and then it gives you that. And then [00:26:00] you submit a form, and that's actually just a navigation. It could be a gi, like a,~ uh,~ like a search box, or it could be like a post, like you actually,~ like,~ submitted some information and then it redirects you or refresh the page or whatever it does.

And so taking that model of ~like, ~this is how the web works and ~let's just, ~let's just build it into ~the, ~the spa experience, the single page app experience,~ um,~ and make those two things feel very similar. But ~the, ~the spa version just to be an enhanced. Version of that MPA version. That's really what led them to want to do what Remix was back in 2020 and then build that back into React router.

~Um, ~'cause they felt like, Hey, this is actually a pretty good model and ~we, ~we really like it. People seem to be resonating with it. Let's build this lower level version of it so people can build their own frameworks with it or use it in their existing React router apps if that's an easier upgrade for them.

So that, that's a bit of the motivation.

Noel: ~Cool. Yeah. Nice. Have you guys found, this is kind of a specific, and I'm not sure to what extent you can speak details here, but like, have you found, ~have you been working with many people who are ~kind of ~plugging in at the ~uh, ~like data mode layer?

Brooks: Yeah. ~Um, that's a good question.~ I think one of the bigger apps I can think of off the top of my head would be linear. ~Um, ~that's how they kind of work. ~Um, so it's a, it's a lot of people who, who, yeah. Basically, I'm trying to think of the exact ones. It's, it's, ~it's people who already had React router. I. ~Um, ~and then ~they wanted, yeah,~ they wanted all those capabilities and then remix was just a bit too far for them, especially because for a while Remix had a closed compiler [00:27:00] built on ES build.

We didn't have the V plugin, so it was much harder to, yeah, to plug in, to add any sort of,~ uh,~ like post-processing or pre-processing ~of, ~of different modules ~or, ~or all sorts of stuff. ~Um, ~adding ~your, ~your specific flavor of CSS and JS was much, much harder back then. ~Um, ~in a lot of ways that made the remix core simpler, but in a lot of ways it also made it.

Just a non-starter ~for, ~for teams. Honestly, the previous company I was at was so heavily like reliant on Webpac. There just was no way. ~We were, ~we were moving to remix as it was at that time. ~Um, ~so ~it's, ~it's a lot of ~those, ~those kind of companies that, that we ~kind of ~see doing it.

Noel: ~Yeah. Yeah.~ It's interesting you bring up linear. Yeah. ~Like, ~would you say ~it's, ~it's the case that ~those more, I don't wanna say like app like, but like, I don't know what other term to use. ~Those like web apps that feel very like appy, ~like they, you know, ~the way data moves through them is ~kind of, ~maybe I.

Non-typical,~ like they're very concerned with the, like ~the UX is maybe not, it's not a typical web app, right? It's like the way in which you navigate around and filter and like columns and stuff ~aren't, ~aren't typical. ~Is that, ~is that typically where you guys ~kind of ~see people reach for data mode?

Brooks: Yeah,~ I,~ I would definitely agree that it, that is very much it, and even ~like ~going layer lower of that, like declarative mode, that's also what we see. ~Like ~take,~ uh,~ T three chat,~ um,~ theos like chat,~ uh, it, ~it uses an [00:28:00] xts but it actually uses react router declarative mode on top of it, which is very interesting.

Be just for the fast. Spa navigations. 'cause you're absolutely right if you have that app experience, if you are, you're flipping around in lots of different ways and you have modals popping up and all those sort of things, react router's really great for that. It's very battle tested. It's been there for years.

~Um, ~and then data mode is exactly what you're saying. It's ~like, ~okay, we both have the very app-like experience and we also have very heavy data dependencies and we wanna make sure those are coordinated in one place and not strewn about in all your different components being loaded. Various places and we can't keep track of the network tab and all that kinda stuff.

That allows you to push that back then,~ uh,~ back there, and then you can go one layer deeper if you want to server side render,~ uh,~ certain pages or all of your pages for the initial thing and then pass it off and just do spawn navigations. ~Um, ~it makes it really easy to do that, which is great. And then at that point you've built remix framework mode or react better framework mode.

So yeah.

Noel: yeah. Yeah. Very cool. Cool. I wanna, I want to flip us to our,~ uh, quick round, ~quick round questions here and dig into some stuff. Is there anything else though, you ~kind of ~want to, you want to touch on Brooks ~before we, ~before we jump into ~some, ~some rapid fire questions?

Brooks: ~Um, ~no, ~I~

Noel: We've been ~kind of ~all over the place. It's kind,

Brooks: No, this is great. I love

Noel: jumping us [00:29:00] around ~so.~

Brooks: This is good.

Noel: Cool, cool. Yeah, no sweat. So we'll,~ uh,~ we'll jump right in. ~Um, ~so yeah, ~these are, ~these are still like, we're ~kind of when we, ~when we were going off the old outline before, but I think these are still ~mostly, ~mostly applicable here.

Brooks: Okay. Yeah.

Noel: gonna, I'm gonna roll out, roll with them. ~Um, ~if you had design routing from scratch for ~like ~a new JS framework today, or a new setup,~ like, you know, ~integrating it ~with, ~with React directly or something, what non-obvious feature would you prioritize?

Brooks: Ooh, that's so fascinating. ~Uh, I don't, ~I don't know if I can think of a non-obvious one. I think the. It feels obvious, but like TypeScript support from the ground up feels like ~a ~a must have. We're just at that point where TypeScript is expected, so you really need the type safety to be built in.

Noel: Yeah. Yeah, ~I think, ~I think it's as good an answer. ~Good, ~good. An good of answer as any, and maybe, yeah, it's like one of those things where you don't want any non-obvious features. 'cause you're only gonna, people are only gonna use what is obvious, like

Brooks: Yeah, honestly, it's a great point. Yeah, I think ~like, I, ~I would say actually like getting ~the, ~the route pattern ~really, ~really,~ uh, like just~ easy to understand. ~Like it should be writing. It should just feel like, oh, of course that's what you do. Or~ reading it ~rather~ should feel like, oh, of course that's what you do.

I think that's important. Don't make like bespoke, like your own magic little strings and stuff. Follow conventions where they exist and ~like, you know, ~make things better where [00:30:00] it is a consistent problem you've seen before.

Noel: Yeah. ~No, ~no. Magic ~is probably, ~is

Brooks: No magic. Yeah.

Noel: ~Yeah, ~yeah, for sure. ~Um, ~what do you think routing will look like in five years? I.

Brooks: ~Uh, that's a great question. I, I don't, ~I don't know if it's gonna like change ~too, ~too much.~ I do think that,~ I think as more l people are using like LLMs and AI and agents and all this stuff to work with the web, I do think we're gonna see a lot more ~of like. Of, ~of the agent kind of interacting with the web and with ~the, the, ~the router level.

~Um, ~so I think at most we're maybe going to use routers to expose more tools to AI ~as it's, ~as it's navigating an app for you. We already are seeing this in like the Shopify admin. There's ~a, ~a tool called Sidekick, and it is like a chat bot. ~Um, ~but ~it's, ~it's more than just ~like. ~Asking it questions and it gives you back answers.

'cause it did something, it does a lot of,~ like,~ for instance, I'm like, oh, I wanna set up ~my, ~my domain. I wanna connect my domain to the store. It will pull up the link to navigate to the domains,~ um,~ directly, and ~it'll, ~it'll embed like links and so it knows how to route and it knows what,~ uh,~ pages and routes have, what actions.

So I think that we're gonna see that,~ uh,~ a lot more kind of drive how routing,~ uh,~ works in the next five years.

Noel: ~Nice. You're one of, ~one of those prior two answers may also be the answer to this question, but if you could [00:31:00] convince framework authors of just one thing about routing today, what would it be?

Brooks: ~Uh, ~yeah, definitely what I said, but also I'll step back and say, ~uh. ~With file-based routing, like you, you have to have a base layer. You can't just have file-based routing, you have to have ~like ~a config underneath that. I've just seen it just, everyone hates file-based routing. ~No matter. No matter what it,~ no matter how you design it, you cannot design it perfectly.

It is ~like, ~it's an impossible problem in my opinion. So whatever your system is, it's going to grow to a point where people eventually hate it or are frustrated or it's clunky in some way. So always give people that escape hatch lower down to where they can then define their own routing. Or if they need to migrate to a different route, ~they can, ~they can separate everything into its own kind of section and then they can start building new routes in their new way or whatever.

But yeah, give people ~that,~ that escape patch,~ uh,~ it's the dangerously set HTML,~ uh,~ but for routing, essentially.

Noel: ~Yeah. Do you, um, I guess, ~is there one routing convention you wish had never existed?

Brooks: Yeah, remix V two actually is like ~my, ~my most frustrating one because I actually, I think it's better than the V one, but I think it was just, it wasn't clearly enough better, and it just added churn. We did add backwards compatibility. You could [00:32:00] still use the V one, but the fact that we called it V two routing, just, it always is going to imply in people's mind, no matter what you tell them.

This is better and the old one is going to be deprecated someday. ~We still,~ you can still use B one routing, even in React router B seven. We really try to have the backwards compatibility as strongly as we can, but it just doesn't matter psychologically, we just still think ~it, it, it's, you know, ~it's not as good.

So I don't think we should have built that. I think we should have made it a separate package and encouraged people to use it if they want,~ um,~ and called it like flat routing or something. But yeah,~ I,~ I really wish that we didn't do that, but that happened before I joined the team, so I can always say that it wanted to happen under my watch.

Noel: ~yeah, of course, of course. Um, ~is there something in particular you think React router V seven gets right, that most frameworks, routing tools maybe don't.

Brooks: ~Yeah, that's a great question. Um, I, ~I really love our routes convention. Like I think ~that's, ~that's been ~so, ~so helpful in such a breath of fresh air ~and, ~and ~other, ~other,~ uh,~ solutions definitely do have a config base. Like I think Tans Stack Router added that after they saw our own, I. So that ~off, ~off the top of my head, just 'cause we're talking about that, I really like our routes ts ~for, ~for framework mode.

~Um, ~I think that's one nice thing that ~I, ~I would love to see ~like, ~like next Js I would love to see them steal that and add it. I think people would be ecstatic.

Noel: Nice. Nice. Cool. ~Well, we can,~ [00:33:00] we can ~kind of end it, ~end it on a positive note there. ~Um, ~thank you so much for coming online and chatting with me, Brooks. It's ~uh, ~it's been a pleasure.

Brooks: ~Thanks So.~

Noel: ~Yeah, take it. ~