This looks really cool. Theo always seems to be the first to introduce stuff like this to me, then Jack Herrington does a tutorial - "How cool is that!?"
This Tanner guy is literally Godsent for devs like me. 😂 Thank you, Tanner for building things that makes web development much much more interesting and intuitive.
Sure, if you ignore the need for co-location, vertical slicing, domain-driven development, and being able to find things in the docs, then Tanstack Router "sounds" great. When you actually try to use Tanstack Router, it sucks. Here's why: 1. File-based routing groups don't work as expected (The tree generator includes the brackets in the newly generated routes). 2. You need to have a layout file outside of every same-named folder containing components wrapped in that layout (pretty dumb). 3. The route tree generation is buggy as hell and you have to manually fix the mistakes it made (sometimes it stops working completely). 4. The type safety of routes is directly tied to the route tree generation's ability to do it's job (which it fails at a lot as explained). 5. Co-location is a legitimate concern and it's good practice to use vertical slicing to keep projects managable as they scale. Tanner doesn't care about this at all. The docs are pretty bad. As an example, the configuration file docs for the CLI (tsr.config.json) is located under "File-based routing'... just fantastic. Overall, Tanstack Router effectively forces you to use Horizontal Slicing (project structure) which causes the time to implement new features (or simply new routes) to increase as the project grows in size. This is where Vertical Slicing comes in, which implements co-location to solve this very issue, which is an issue for literally every project you'll ever work on. Unless the File-based routing caters for this (which Tanstack Router's most definitely doesn't), it's a shit router. Don't fall for the flashy neon colors. Tanstack Router V1 is still buggy as hell. React Router and Remix have been battle tested. Remix solves for co-location in their version of file-based routing.
I started out as a Vue developer when I used to learn web dev as a hobby. I kinda hated React (this was when React still had class components, eww) Stylistically, Vue 2 was way better to work with and very pleasing. Then came compose API with Vue 3 and it had started to resemble React. Fast forward to now, I work for a company and Vue is completely useless here. I'd say, if you're looking to earn money as a dev, React is where it's at whether you like it or not
@@RexGalilae it's not all about money. and you can make money with Vue / Nuxt if you really want to, there are jobs available. It may not be as easy as finding a React job but it is possible.
Yep 😅 the funniest thing is seeing people react to query Params for the first time on twitter like this hasn’t been in web development for over 20 years
I built a router on top of a router to add params and such to the Inertia router because the inertia link really just sucks. And then on top of that, I ABSOLUTELY hated doing breadcrumbs in complex systems where going back to and keeping context is just such a pain - so I simplified it so my links have a "backTo" which just takes a text prop. It stores it in the SPA's state, and then captures the link to the previous page automatically. If one is defined the breadcrumbs just work from wherever the user came from. If none is defined, it uses the breadcrumbs component's pre-defined back link and text. Easy way to solved a really complex problem.
Tanstack router gives you a useMatches() hook that gives you the array of matched routes by descending hierarchy! Making it pretty easy to build breadcrumbs now :)
Bro, (please don't kill me) but I feel like we're just going back and forth between folder spaghetti and code spaghetti. For example, I really don't understand how having a different debugging tool for every dependency in my project is a win... It's a freaking router! I don't want to have to debug my router, I just want it to freaking work 😢
is the Ctrl+/ or Cmd+/ is so far from you reach in your keyboard, you can just comment out those devtool which you don't want to use and they are not necessary. It is as simple as that.
RapidOS uses internal URL as well as its core system libraries and classes, URLs can of course have parameters and it has the ability to use JSON or normal URL parameters somewhat interchangeable, if you want to call it routing you can, but I would call it dynamically loading and calling the constructor of a component...which is file based, but there is nothing to stop you using the same file for multiple purposes if you want. One of our goals was to ensure minimum memory usage on the client and server because some android devices at the time only had 256mb RAM and that can host the server for up to 20 users with good performance, of course there is a client on such a server also. The biggest issue with React is that it doesn't allow dependency injection or mocking of itself, so if you want to replace react easily, you are screwed.
How about you make a video presenting some features of react aria components? This library is just stunning, we no longer need downhshift and 30+ other libraries for all the types of inputs we use.
You look like an iPhone user who's happy about that cool new iOS feature (that existed in android since the beginning of time). I believe Nuxt (Vue-based framework) has had typed router (and more of these features) for a couple of years now
This is dope. As much as people love to hate on codegen, I would die on the codegen hill. I've written a custom file-based type-safe router with Zod, Cloudflare Workers, and a boatload of generics. You could not pay me to do it again. I don't think the issue lies within the "TypeScript sees everything as a system" concept; it's trivial to overwrite types for a certain file route (if you're doing some form of file-based routing, custom or not). I think the issue likes within "who is going to write these types?" and DX. Codegen solves both of those issues. I'd love to find something like TanStack router that could be used in more generic JS projects.
I think the major downside of codegen is not the code generation itself, it's that each tool provides their own codegen rather than having some standard way to do it; like with LSP. Would be cool if you only had to install a single tool/plugin that every package can interface with to provide consistent experience in editor and CI, and provide immediate feedback.
This year I started using Orval to generate all the types and all the Tanstack Query services to work with my api, its so good, its ridicules, codegen is a perfectly legitimate tool for some use cases.
I've been waiting for this as well, ever since first hearing about this. Never thought about putting it into next as a [...] route, which is a great idea. I'll play with it at some point for sure.
yeah, it is actually quite interesting to see that Angular router already has many of the same patterns being shown in this video. Still amazing work by Tanner, and there are things that Angular router can adopt like Suspense/Error boundary, etc
I'm not sure about this at all. What if react router goes fully type-safe tomorrow because of the competence? Right after we all migrate to tanstack router? That doesn't make sense. There should be a huge overkill set of features that are really important to consider migrating.
I tried to hook this up at a slug within a nextJS project, and find a way to automatically look through links, without the autocomplete breaking. It did not go well
I've been wanting to know what the browser you use is for a while but I haven't seen you mention it in any videos (I could have ended up missing you casually mentioning it in a video but I _have_ tried to find it). Could you add an entry on your website's FAQ page with what browser you're using? If it's chromium-based, I'll still probably not use it, but I have friends that I think would love the UI/UX of that browser. I've also seen someone else ask about the browser in the comments here, so it's not just me who wants to know lol
Arc browser from the Browser Company AFAIK, just on Mac. Definitely chromium based. They want to redesign what a browser means. Main thing they do is close your tabs unless you proactively mark them as 'should not discard'. Really want to try it out once it releases on other platform. Doubt I will actually end up using it, but trying it sounds nice. (As for just vertical tabs by themselves, out of the major browsers you can just right click on your tab bar in Edge to turn them on).
I LOVE LOVE LOVE tanstack table. We're using it for multiple purposes on our application. We have a pretty complex dashboard that is using searchParams from next based on all kinds of different filter drop downs. I would love to see you do a video on what you mentioned, implementing tanstack router in a next.js application for at least the complex dashboard use case. Thanks for doing a video on this.
Not a dumb question at all! At the moment, it's very tied to the url and browser specific behaviors, but I could see React Native compatibility through adapters in the future
"Memory Routing" in TanStack Router docs looks promising: "Memory routing is useful in environments that are not a browser or when you do not want components to interact with the URL"
trying to implement it. stuck on the part where i need to make two modals (as routes) into children of the index component (the "/" route). code-based case is alright, i can do it. but the file-based - have no clue. in react-router its just nesting, but the file thing is not so clear. if somebody somehow has the answer - i would appreciate some help, thanks
All the examples were Vite based. Next js and Vite are somewhat similar in what they do but Vite works with Astro, Vue and other frameworks in addition to React. It was created by Evan You that also made Vue :)
Yes, but not on the level of TanStack Router. It doesn't have type generation, which means you'll still need to manually define props to your route components. Although, Expo router could solve this with its tooling (and also based on React Navigation)
They're problems. Tanner work on a app that need a lot of query params, and he need to keep track of all of them all the time, making typesafe query params he ensure that he or u clients never use a query param wrong.
certain problems only come to you at certain scales. Having a dev team of 500 engineers of various dev skills maintaining a single repo is another story. sure, you can educate the engineers and help them grow, but dev velocity = time, and time = money. so having a type-safe routing solution sets up the lower boundary and guardrails the outcome
I want to learn vue but have been using php so long I when I do come up with a server side project I struggle with not just doing it in php and am bad at dev in general [ i understand that you can't help me with that though] ...
I was hoping this would be about a hardware device to route traffic on a network, but I guess a thing for managing projects to ensure links are kept up to date is cool too. Of course, things like this make it even more difficult to get devs to abandon all the old tech to wipe the slate clean and start fresh. If only we could fix the flaws in the current tech without wiping everything away.
I mean, this is awesome, but just so you know expo has the same link functionality* (route name autocomplete & typesafe params) but for React-Native obviously
I'm a college student and at this point, I'm a pretty good web developer, but i am just using these tools.. i wanna know what it'll take to get there and build such tools? Ten's of years of experience?
Tanner is insane. I've used the alpha a lot of this project and found 3 bugs, all have been fixed within 12 hours from me reporting it :)
This looks really cool. Theo always seems to be the first to introduce stuff like this to me, then Jack Herrington does a tutorial - "How cool is that!?"
then Prime screams about how it's not written in Rust
And Josh tried coding would over hype it 😂😂😂
then web dev simplified would tell why josh tried coding made a mistake 😂
And then Ben Holmes reimplements it from scratch
such an incredible thread
This Tanner guy is literally Godsent for devs like me. 😂
Thank you, Tanner for building things that makes web development much much more interesting and intuitive.
yea I think once the store comes up I can ditch redux for 100% tanner experience
exactly
Sure, if you ignore the need for co-location, vertical slicing, domain-driven development, and being able to find things in the docs, then Tanstack Router "sounds" great.
When you actually try to use Tanstack Router, it sucks. Here's why:
1. File-based routing groups don't work as expected (The tree generator includes the brackets in the newly generated routes).
2. You need to have a layout file outside of every same-named folder containing components wrapped in that layout (pretty dumb).
3. The route tree generation is buggy as hell and you have to manually fix the mistakes it made (sometimes it stops working completely).
4. The type safety of routes is directly tied to the route tree generation's ability to do it's job (which it fails at a lot as explained).
5. Co-location is a legitimate concern and it's good practice to use vertical slicing to keep projects managable as they scale. Tanner doesn't care about this at all.
The docs are pretty bad. As an example, the configuration file docs for the CLI (tsr.config.json) is located under "File-based routing'... just fantastic.
Overall, Tanstack Router effectively forces you to use Horizontal Slicing (project structure) which causes the time to implement new features (or simply new routes) to increase as the project grows in size. This is where Vertical Slicing comes in, which implements co-location to solve this very issue, which is an issue for literally every project you'll ever work on. Unless the File-based routing caters for this (which Tanstack Router's most definitely doesn't), it's a shit router.
Don't fall for the flashy neon colors. Tanstack Router V1 is still buggy as hell.
React Router and Remix have been battle tested. Remix solves for co-location in their version of file-based routing.
@@gustavstreicher4867 what would you recommend as a reliable router library? React-router-dom still?
Oh man, I was looking for an angular-like routing for react and then this video pops in my recommendations, this is awesome
TanStack Router 1.0 is so good that it feels like a mature 6.0. He really took his time to get it right before shipping it.
Vue and Nuxt has had a typed router for a while now.
Vue is amazing. It get passed over so much it’s sad
I started out as a Vue developer when I used to learn web dev as a hobby. I kinda hated React (this was when React still had class components, eww)
Stylistically, Vue 2 was way better to work with and very pleasing. Then came compose API with Vue 3 and it had started to resemble React.
Fast forward to now, I work for a company and Vue is completely useless here. I'd say, if you're looking to earn money as a dev, React is where it's at whether you like it or not
@@RexGalilae it's not all about money. and you can make money with Vue / Nuxt if you really want to, there are jobs available. It may not be as easy as finding a React job but it is possible.
React is becoming more and more its's own Rails framework😂🔥
Yep 😅 the funniest thing is seeing people react to query Params for the first time on twitter like this hasn’t been in web development for over 20 years
I built a router on top of a router to add params and such to the Inertia router because the inertia link really just sucks. And then on top of that, I ABSOLUTELY hated doing breadcrumbs in complex systems where going back to and keeping context is just such a pain - so I simplified it so my links have a "backTo" which just takes a text prop. It stores it in the SPA's state, and then captures the link to the previous page automatically. If one is defined the breadcrumbs just work from wherever the user came from. If none is defined, it uses the breadcrumbs component's pre-defined back link and text. Easy way to solved a really complex problem.
Underrated comment
Tanstack router gives you a useMatches() hook that gives you the array of matched routes by descending hierarchy! Making it pretty easy to build breadcrumbs now :)
imagine being so excited about this
I love how React is catching up to Vue now
What a great video. After watching the og stream, holly editing Phase. Even changed the BGM of tanner's (cool) lauch promo.
the word, tanstack always brings joy to my ears
Bro, (please don't kill me) but I feel like we're just going back and forth between folder spaghetti and code spaghetti.
For example, I really don't understand how having a different debugging tool for every dependency in my project is a win... It's a freaking router! I don't want to have to debug my router, I just want it to freaking work 😢
Facts
same here alan i don't understand why do we keep reinventing the wheel just stick with the present one
is the Ctrl+/ or Cmd+/ is so far from you reach in your keyboard, you can just comment out those devtool which you don't want to use and they are not necessary. It is as simple as that.
With Vinxi now gaining serious traction, I think we’ll see a tanstack router Next alternative very very soon.
I have tried it and its very useful.
Now I dont need to create a CONSTANT map of URLs to type safe the redirect links.
100% this pretty much eliminates all the custom crap I had to build on top of React Router to accomplish this.
Starting to feel like we're only a few steps away from the TanStack ***FRAMEWORK***
Hopefully, in some years we'll be able to build on TanStack
Lmfao look at Tanstack Start
so its angular routing
RapidOS uses internal URL as well as its core system libraries and classes, URLs can of course have parameters and it has the ability to use JSON or normal URL parameters somewhat interchangeable, if you want to call it routing you can, but I would call it dynamically loading and calling the constructor of a component...which is file based, but there is nothing to stop you using the same file for multiple purposes if you want. One of our goals was to ensure minimum memory usage on the client and server because some android devices at the time only had 256mb RAM and that can host the server for up to 20 users with good performance, of course there is a client on such a server also. The biggest issue with React is that it doesn't allow dependency injection or mocking of itself, so if you want to replace react easily, you are screwed.
This is all amazing stuff!!!! Well at least until v2 where half of it will be presented as wrong and something that had to re-write :)
Anything tanstack is usually a great choice. Im excited for this!
Seems cool I just wish people would stop doing file based routing I hated having files or folders named [id]
How about you make a video presenting some features of react aria components? This library is just stunning, we no longer need downhshift and 30+ other libraries for all the types of inputs we use.
Tannet should get a noble price❤
You look like an iPhone user who's happy about that cool new iOS feature (that existed in android since the beginning of time). I believe Nuxt (Vue-based framework) has had typed router (and more of these features) for a couple of years now
Hes aint a dev anymore, just an influencer.
This is dope. As much as people love to hate on codegen, I would die on the codegen hill. I've written a custom file-based type-safe router with Zod, Cloudflare Workers, and a boatload of generics. You could not pay me to do it again.
I don't think the issue lies within the "TypeScript sees everything as a system" concept; it's trivial to overwrite types for a certain file route (if you're doing some form of file-based routing, custom or not). I think the issue likes within "who is going to write these types?" and DX. Codegen solves both of those issues. I'd love to find something like TanStack router that could be used in more generic JS projects.
I think the major downside of codegen is not the code generation itself, it's that each tool provides their own codegen rather than having some standard way to do it; like with LSP. Would be cool if you only had to install a single tool/plugin that every package can interface with to provide consistent experience in editor and CI, and provide immediate feedback.
This year I started using Orval to generate all the types and all the Tanstack Query services to work with my api, its so good, its ridicules, codegen is a perfectly legitimate tool for some use cases.
and It is FREE and up to date.. Everything u can imagine in a Router libary is available in this Magnificent package..
Haskell has had typesafe routers for a decade or more - glad to see it's catching on in other ecosystems too!
Hahahah😂
"or, god forbid, an admin panel" 😂
this is damn good, I better start using this on my pet projects
Do you think it could be added to create-t3-app as optional part?
I'd actually want to hear the rant about query params 😭
it's So crazy. Thanks to tanner
I've been waiting for this as well, ever since first hearing about this. Never thought about putting it into next as a [...] route, which is a great idea. I'll play with it at some point for sure.
Now I wanna know if we still need Nextjs or not?
It's like React is turning into Angular.
Except react isn’t a pile of shit
yeah, it is actually quite interesting to see that Angular router already has many of the same patterns being shown in this video. Still amazing work by Tanner, and there are things that Angular router can adopt like Suspense/Error boundary, etc
@@vutruong4164 wait, is Angular router now typesafe?
I'm not sure about this at all. What if react router goes fully type-safe tomorrow because of the competence? Right after we all migrate to tanstack router? That doesn't make sense. There should be a huge overkill set of features that are really important to consider migrating.
i cant wait to replace my router lib again
Works this with next js good ?😊
Having used Django a lot, this feels fairly familiar
Tanstack Framework coming soon 👀
Can you introduce how to use tanstack router with i18n for multiple languages for website
I tried to hook this up at a slug within a nextJS project, and find a way to automatically look through links, without the autocomplete breaking. It did not go well
I really don't like file system based routing for server components so this is very promising for me
lets abstract an already abstracted layer further; great idea.
Everyone is just rebuilding rails
This can also work with NextJS?
tanner is a reptiloide 😆. is my god
Can it be used without codegen?
I've been wanting to know what the browser you use is for a while but I haven't seen you mention it in any videos (I could have ended up missing you casually mentioning it in a video but I _have_ tried to find it). Could you add an entry on your website's FAQ page with what browser you're using? If it's chromium-based, I'll still probably not use it, but I have friends that I think would love the UI/UX of that browser. I've also seen someone else ask about the browser in the comments here, so it's not just me who wants to know lol
It's called Arc. It's currently Mac only but they are just releasing a Windows version this year.
Arc browser from the Browser Company AFAIK, just on Mac. Definitely chromium based. They want to redesign what a browser means. Main thing they do is close your tabs unless you proactively mark them as 'should not discard'. Really want to try it out once it releases on other platform. Doubt I will actually end up using it, but trying it sounds nice. (As for just vertical tabs by themselves, out of the major browsers you can just right click on your tab bar in Edge to turn them on).
What editor are you using Theo?
Final Cut
@@GratuityMedia I mean code editor
This is my biggest problem with astro that you can make dead links very easy
You should do an example of what you were talking about with interoping next and tanstack
Ia it Next.js?
Can this work together with NextJS
I LOVE LOVE LOVE tanstack table. We're using it for multiple purposes on our application. We have a pretty complex dashboard that is using searchParams from next based on all kinds of different filter drop downs. I would love to see you do a video on what you mentioned, implementing tanstack router in a next.js application for at least the complex dashboard use case. Thanks for doing a video on this.
I know this is a stupid question but can i use this in React-Native for mobile apps?
Not a dumb question at all! At the moment, it's very tied to the url and browser specific behaviors, but I could see React Native compatibility through adapters in the future
"Memory Routing" in TanStack Router docs looks promising: "Memory routing is useful in environments that are not a browser or when you do not want components to interact with the URL"
I just want symfony style routing 😔
But is it BLAZINGLY FAST?
so we're back to doing SPAs now? 😆/s
sorry, what browser is being used? thank you
Arc
trying to implement it. stuck on the part where i need to make two modals (as routes) into children of the index component (the "/" route). code-based case is alright, i can do it. but the file-based - have no clue. in react-router its just nesting, but the file thing is not so clear.
if somebody somehow has the answer - i would appreciate some help, thanks
Ok; watching it makes me feels like angular is really the way to go to build spa apps.
How does Tanner work on all this stuff and release it for free?
I clicked because I thought this was about a network/internet router 😅
Nuxt already does this
at 18:44, "examples were ? based" What was said there? Unfamiliar with what he said.
All the examples were Vite based. Next js and Vite are somewhat similar in what they do but Vite works with Astro, Vue and other frameworks in addition to React. It was created by Evan You that also made Vue :)
@@philipstray Thank you so much! Very helpful!
So ... basically, Angular's router sibling?
Is dat juiciest Javascript drama?
React Navigation has typesafe routes with autocompletion :-)
Yes, but not on the level of TanStack Router. It doesn't have type generation, which means you'll still need to manually define props to your route components. Although, Expo router could solve this with its tooling (and also based on React Navigation)
I think "type-safe" router is solving non existing problem kinda thing and only over complicates stuff
Yes, but the autocomplete is cool
They're problems. Tanner work on a app that need a lot of query params, and he need to keep track of all of them all the time, making typesafe query params he ensure that he or u clients never use a query param wrong.
certain problems only come to you at certain scales. Having a dev team of 500 engineers of various dev skills maintaining a single repo is another story.
sure, you can educate the engineers and help them grow, but dev velocity = time, and time = money. so having a type-safe routing solution sets up the lower boundary and guardrails the outcome
Solves as many problems as any other type safe feature solves - lots
Typesafety is a big problem, scalability, ease to refactor, onboarding new people, etc...
1:08 - you don't know about expo router :)
I want to learn vue but have been using php so long I when I do come up with a server side project I struggle with not just doing it in php and am bad at dev in general [ i understand that you can't help me with that though] ...
I don't see the problem, you can use vue and PHP together; its actually rather easy with laravel!
Pretty sure dioxus router has most of this
I like generouted.
Wait aren't params and searchparams just strings ?
I was hoping this would be about a hardware device to route traffic on a network, but I guess a thing for managing projects to ensure links are kept up to date is cool too. Of course, things like this make it even more difficult to get devs to abandon all the old tech to wipe the slate clean and start fresh. If only we could fix the flaws in the current tech without wiping everything away.
I mean, this is awesome, but just so you know expo has the same link functionality* (route name autocomplete & typesafe params) but for React-Native obviously
first nah 😍😍😍😍😍
will next.js have it own AI assistant in the future, Theo?
They arguably do: v0
would love to hear more of your thoughts on remix
Nuxt has all of this 😅
"Since all your route definitions exist as files..."; Remix provides config based routing 🤨am I missing something here?
Remix is whole framework while the tanstack router is a library
File based routing is a toy made to make feel better the dumbest kids in the classroom.
I hate UX with modern routing when page just swaps. Like in vercel website and other react stuff. It is so unfriendly IMHO
Damn Tanner, nice router.... you single? 😉
hmm very nice
I'm a college student and at this point, I'm a pretty good web developer, but i am just using these tools.. i wanna know what it'll take to get there and build such tools? Ten's of years of experience?
Remix is where React Router went to die. RIP begging them to add APIs necessary for auto tracing.
vc companies get all this money to let a solo developer out do them
Bruh! You have to be an AI at this point. How do upload everyday
Omg 😨
THAT MODULE DECLARATION FOR THE ROUTER!!!! WHAT!?!?!?! Why does tRPC not use that?!
most average router. Except in frontend dev💀
At first I was like, meh, react router is ok enough. But when the self fixing stuff happened in 5:45 I was like WHAT?
react-router is the worst routing library, and it only got worse and worse over the years and releases
What's is the deal with type-safe router? I have no idea what is this trying to solve.
misspelling route urls and thus broken links
like what they built a whole new framework
good morning Theo
It's a friday afternoon LOL
@@simpingsyndrome he is in EU
@@simpingsyndromebro has not heard of timezones
space-time singularity@@simpingsyndrome
🤣🤣🤣🤣@@simpingsyndrome
This is monstruosity. React-Router is a mess, but this is no better. Vue has better, way simpler routing
The beginning and end of this video were great. The middle felt frantic and I could barely follow.
Why are you posting videos at ungodly hours