Stop your fake imagination. There was not good old days. JQuery was introduced to deal with the bad old days. Later, the vanilla JS caught up and absorbed some good ideas from JQuery into the in-built functionalities. Even if eventually React failed, the vanilla JavaScript likely will absorb some of its ideas and try to construct something better. There is a JavaScript signal proposal if you wonder. It might or might not be passed.
The libraries from the TanStack collection have ALWAYS felt intuitive. But this! A collection of my favourite tools and a bunch of cool new patterns. I'm sure it's gonna be a magical experience working with this. Super hyped!
I'd usually make a JS framework joke, but after using TanStack Query and Table for so long I have high hopes for this. These guys know how to have a crazy good DX while also making an extremely flexible library. The only concern I have about this is the amount of abstraction that is going on. Its hard to even tell what is doing what unless you're already deep in the weeds, If something broke in an unexpected way, it would surely be debugging hell.
Playing with this for a couple days, Tanstack router DX is just too good. I feel like it's a much better experience by a long shot than either remix or nextJS, looking forward to the future with this one. Tanstack is the goat of react DX
I think the last need for this is some form of request batching. Many web apps will make requests from each component that needs data. If we could pre-render the react tree, figure out what data is needed, batch those requests into a single api all, then send it back in one response. We would save some transfer time on headers. The other place I see benefit is that now we don’t have to call the API from within our own App to get the data. Cool stuff
And Vinxi which Tanstack Start is built in. It's so powerful and such a great design choice for Tanstack Start. You can set your deployment target (e.g. cloudflare, azure, gcp, vercel etc etc) and it then it sorts out the rest
the new framework shouldn't scare you or make you anxious, it is not ready yet to be a job requirement. so we have a lot of time to play with it. and if you really know how to use react, using it wouldn't be hard but you may have to change the way you think of apps
Your explanation of the RPC you were creating is exactly what I just went through. I tried Telefunc, Phero, tRPC, RSC, ect but they were all missing 'something'. I just wanted a way to keep my client and server in sync without all the boiler plate and loose coupling (of something that is inherently tightly coupled). RSCs were cool but not what I was looking for. I even started on a proof of concept and had planned to spend this quarter building out a type safe RPC that hooks in to SWR/tanstack query. I thought I was real clever too but apparently you were three years ahead of me and this is why I watch your videos. I scrapped this idea once I saw tanstack start a couple weeks ago and am really excited to see you covering it! "let me know if i should do another video when [new server functions] ship" - YES all the followups
@ good, I don’t need the cache features though. If you can keep all state in the url it shines. File based routing is optional but without it you need more code. Server/client type safety and url editing with type safety is amazeballs
Except 1 none of those work in react. Not sure how they're even a competitor to next. Also see SO survey, Nextjs is more widely used than Angular, Vue, or any other UI framework. Not betting on Tanstack Start. But a real competition to nextjs needs to be more popular than these other UI framework to be even conversation.
Really inspring story about how it all started with the "homework" assignment! I wish I had more people to nerd out about full stack universal app development with but it's still quite a small niche even though it's grown immensely over the past 3 years or so.
31:39 that's such a cute geek moment aww I hope I can have a moment like that somewhere in my career too, whether it is making someone feel the way tanner made theo feel or vice versa
I think createServerFunction is probably the better way of doing colocation. It's an extremely explicit way of marking your function as an endpoint. So you'd hopefully be less likely to accidentally leak an internal function to the client compared to nextjs
Love TanStack and love Vinxi. Not only is it nice to have actually robust self-hostable options for JS stacks, but their very existence will keep the big players honest and discourage any major rug pulls.
All this co-location always feels so good when you have simple pages, but once you reach a certain threshold, it gets to be too much and you start to yearn of separation of concerns
probably just have multiple files in the same folder? I use styled components anyways so I have one styles file and 1 with the actual component, sometimes another for a custom hook to group some complex logic, could have 1 more for createServerFunction.
then make another file and just import them? This is JS, modules are singletons, it's really not hard to split up logic unlike other language ecosystems.
22:55 I'm almost certain is Gist (soft G, like Giraffe) not Gist (hard G like Gift)... Gist (soft g) literally means "the main point or part : essence" and gists on github are specific points/parts used to build larger projects.
My first thoughts: OH NO, ANOTHER ONE :D JS Frameworks are popping like shrooms after rain :) Your ads are so funny! :) If you do a good job with ads, you do not need to apologise for them being inside your video :) But do not slack! Keep the good quality going up!
I didn't even finish JS basics 😭 I just learned about Spread Operator And another freamwork released Js → react → node → next → deno → and this shxt 😭😭😭
Colocation = MAJOR footgun. fs will not be available in clientside js. Separate server and client code to have a CLEAR mental model, of what code is really going to be run on server/client.
I will admit I don't know a lot to frameworks but I really don't get what other frameworks do better than Astro. If it already can implement React, what makes other people use another framework going forward?
I have only ever used next.js. Can someone explain what is meant by "TanStack Start stays true to the client-side first developer experience, while providing a full-feature server-side capable system that won't make you compromise on user experience." What compromises are made by using next.js instead of TanStack Start for example?
At this stage I'm just wondering what is so crazy about Router that everyone wants to make one in few months. All devs should get a chill pill and rethought where they spend their time. Rather than wasting time to build another router which doesn't bring anything significantly new to the table spend ur time building something useful.
i'm struggling with create t3 new api in trpc v11 and trying to implement auth with clerk but its awful. no good resources on internet to learn new patterns in trpc v11 i'm completely new to trpc
I really don't like that the entirety of the markup gets rendered both on the server and client no matter what. That's analogous of making every component a client component in a Next app and taking away server components altogether. Create server function is fun and cool initially to have it coexist with inter-mingled imports, but when things become serious and you are dealing with thousands of line files, it becomes a blur to understand where the boundary is. Imagine at the top of the component you have dozens of functions consisting of server functions, helpers, other inner components, it could get out of hand really fast. I like to be able to move my server logic not only to a different file, but to an entirely different root directory to avoid any confusion where these files are run. And to import server-only in there for good measure. This way these server endpoints can be reused in many places. Co-location is not the dream in my opinion.
does it have shadcn cuz thats the only reason i picked nextjs. that dudes a wizard them hiring him and that Deb girl who makes great tutorials is the best marketing they coulda done.
I don't understand what is the big difference between this and Remix. What makes this framework a better competition than remix. It is the small abstraction over http primitives ? Because that is the only difference I can find
Hmmm. Looks quite complicated, and so much more different in form of DX compared to React, isn't it? Still love Vue for it's simplicity. Come to the Vue side Theo :D
You guys remember the good old days vanilla JS, now it's vanilla React 😭
Stop your fake imagination. There was not good old days. JQuery was introduced to deal with the bad old days.
Later, the vanilla JS caught up and absorbed some good ideas from JQuery into the in-built functionalities.
Even if eventually React failed, the vanilla JavaScript likely will absorb some of its ideas and try to construct something better. There is a JavaScript signal proposal if you wonder. It might or might not be passed.
Soon it will be just vanilla Next.js
🤣🤣 to be fair vanilla JS used to suck donkey balls... jquery rescued us
You're right, it's all rubbish... and this React too
jQuery days 😊
The libraries from the TanStack collection have ALWAYS felt intuitive. But this! A collection of my favourite tools and a bunch of cool new patterns. I'm sure it's gonna be a magical experience working with this. Super hyped!
Another day, another JS Framework
What is more saturated, fitness influencers or JS frameworks?
Red pill bros
Another day, the same boring joke.
Repeat it with me yall: “if you don’t like it, don’t use it”
Metaframework*
😂
Tanstack Start Senior - 7+ years of experience.
Here comes the Zero to Mastery Tanstack udemy courses haha.
Junior role requirement: 12 years of experience with TanStack Start
I'd usually make a JS framework joke, but after using TanStack Query and Table for so long I have high hopes for this. These guys know how to have a crazy good DX while also making an extremely flexible library.
The only concern I have about this is the amount of abstraction that is going on. Its hard to even tell what is doing what unless you're already deep in the weeds, If something broke in an unexpected way, it would surely be debugging hell.
waiting your next comment "Why i left TransStack"...
Yep, the problem with useX=doMagic
Happy that people finally discover Tanstack router
it is new 😂
Playing with this for a couple days, Tanstack router DX is just too good. I feel like it's a much better experience by a long shot than either remix or nextJS, looking forward to the future with this one. Tanstack is the goat of react DX
Is it me or Theo's ads are becoming one of the best parts of each video? 😆
Which one, the clerkjs one, or the "I was there at the beginning, self promotion one" ? 😂
def a better part of the videos now for sure.
detoxvercelification
lol the full videos you mean
Been using it for a couple of weeks. Nothing like it, best in class by far
Its basically SolidStart for React. Loving SolidStart, will going to test this too!
I think the last need for this is some form of request batching. Many web apps will make requests from each component that needs data. If we could pre-render the react tree, figure out what data is needed, batch those requests into a single api all, then send it back in one response. We would save some transfer time on headers.
The other place I see benefit is that now we don’t have to call the API from within our own App to get the data. Cool stuff
Your delivery is so good, that I even watch all of your ads, keep up the good work!
The real enabler is tanstack router. The rest is a logical followup with some very clever ideas.
And Vinxi which Tanstack Start is built in. It's so powerful and such a great design choice for Tanstack Start. You can set your deployment target (e.g. cloudflare, azure, gcp, vercel etc etc) and it then it sorts out the rest
the new framework shouldn't scare you or make you anxious, it is not ready yet to be a job requirement. so we have a lot of time to play with it. and if you really know how to use react, using it wouldn't be hard but you may have to change the way you think of apps
Your explanation of the RPC you were creating is exactly what I just went through. I tried Telefunc, Phero, tRPC, RSC, ect but they were all missing 'something'. I just wanted a way to keep my client and server in sync without all the boiler plate and loose coupling (of something that is inherently tightly coupled). RSCs were cool but not what I was looking for. I even started on a proof of concept and had planned to spend this quarter building out a type safe RPC that hooks in to SWR/tanstack query. I thought I was real clever too but apparently you were three years ahead of me and this is why I watch your videos. I scrapped this idea once I saw tanstack start a couple weeks ago and am really excited to see you covering it!
"let me know if i should do another video when [new server functions] ship" - YES all the followups
death, taxes and a new js framework
Unavoidable.
hahaha ok... you win, an actually good "new js framework" post
The three inevitable things in life
Dude, the ads are sooo good. Such a great new arc
I’m 10 days into tan stack start and it’s amazing. Finally type safe across without layers of bloat
tell me more bby
how about now tobi ? is the stack okay-ish ? good enough ?
@ good, I don’t need the cache features though. If you can keep all state in the url it shines. File based routing is optional but without it you need more code. Server/client type safety and url editing with type safety is amazeballs
Weren't Nuxt.js, SvelteKit, Remix and SolidStart no "real competition" for Nuxt so far?
Except 1 none of those work in react. Not sure how they're even a competitor to next.
Also see SO survey, Nextjs is more widely used than Angular, Vue, or any other UI framework.
Not betting on Tanstack Start. But a real competition to nextjs needs to be more popular than these other UI framework to be even conversation.
Well, they don't use react
Check your sentence rq
@TheAlexLichter You're absolutely right. It's just clickbait for Theo at the end of the day.
Find it funny you’ve made a typo
i think i will stick to next for the time being
Really inspring story about how it all started with the "homework" assignment!
I wish I had more people to nerd out about full stack universal app development with but it's still quite a small niche even though it's grown immensely over the past 3 years or so.
As for Clerk, there was some misleading information as it does not work with React Native as a whole and only with expo.
Next js already had big competition with Solid Start
No one uses solid js, I tried it and it feels incredibly underdeveloped.
@@pokefreak2112 then you haven't tried enough
Solid is niche. Next competition is mean to be popular.
31:39 that's such a cute geek moment aww I hope I can have a moment like that somewhere in my career too, whether it is making someone feel the way tanner made theo feel or vice versa
RakkasJS has pretty great inline RPC for quite a while now, always surprised how little kudos it gets 😢
Man not having to deal with leafing client components and having true collocation between server & client is a fucking gift
As a Next veteran, seeing colocation like that blow my mind, i'm a little bit worried about lots of stuff with his approach though. Have to test this.
I think createServerFunction is probably the better way of doing colocation. It's an extremely explicit way of marking your function as an endpoint. So you'd hopefully be less likely to accidentally leak an internal function to the client compared to nextjs
Love TanStack and love Vinxi. Not only is it nice to have actually robust self-hostable options for JS stacks, but their very existence will keep the big players honest and discourage any major rug pulls.
I just love anything tanny puts out
U have the best fashion sense among all of the dev influencers
All this co-location always feels so good when you have simple pages, but once you reach a certain threshold, it gets to be too much and you start to yearn of separation of concerns
Yes i think they are suitable for five page application with few reuseable components
probably just have multiple files in the same folder? I use styled components anyways so I have one styles file and 1 with the actual component, sometimes another for a custom hook to group some complex logic, could have 1 more for createServerFunction.
then make another file and just import them? This is JS, modules are singletons, it's really not hard to split up logic unlike other language ecosystems.
I think I’ve come full circle as a frontend dev where I just want to build regular web components and then just everything over a regular node server.
22:55 I'm almost certain is Gist (soft G, like Giraffe) not Gist (hard G like Gift)... Gist (soft g) literally means "the main point or part : essence" and gists on github are specific points/parts used to build larger projects.
My first thoughts: OH NO, ANOTHER ONE :D JS Frameworks are popping like shrooms after rain :) Your ads are so funny! :) If you do a good job with ads, you do not need to apologise for them being inside your video :) But do not slack! Keep the good quality going up!
I love React Query but React Router v7 merge with Remix made me fall the hype for Tanstack Start
Cool! In 2030 I will give it a try.
Since the break up with Vercel. I've been enjoying these Ad skit a lot.
sentry can be a huge pain at times
Oh yes, love having everyday a new tool to solve a non-existing problem
Don't be sorry, I loved the clerk's comercial 😂
i seem to remember calling server function from the client in MeteorJS (Meteor methods). Fun to see them again.
love the tanstack, query is the shieeeet
We are now at 0️⃣ days since a new JS/TS framework
use all tanstack libraries all together right now and you basically already have a meta framework with ssr support
I might try this tonight. Build a little fullstack tanstack stack app
"It does not have server components yet." *closes video"
Love the quiet Ghostty flex, Theo 😆
Also, "gist" with a hard G? C'mooooon
I didn't even finish JS basics 😭
I just learned about Spread Operator
And another freamwork released
Js → react → node → next → deno → and this shxt 😭😭😭
getting remix vibes. Im loving it.
i just started actually learning nextjs lmao
Wake up babe, a new react framework just dropped
Astro is real competition for NextJS if you want it to be and want to use it that way, and so much more if you don't.
0 days since… all kidding aside, this is another one I can be excited about
If there would be a support of CLI commands as any other full stack framework has, it would be a blast. (hosted on a custom VPS/own hardware)
Colocation = MAJOR footgun. fs will not be available in clientside js. Separate server and client code to have a CLEAR mental model, of what code is really going to be run on server/client.
I will admit I don't know a lot to frameworks but I really don't get what other frameworks do better than Astro. If it already can implement React, what makes other people use another framework going forward?
for me next.js is the best react framework ever
I specifically waited for the A/B thumbnail where the stack isn't hidden. I wanna know what I'm clicking on...
I have only ever used next.js.
Can someone explain what is meant by "TanStack Start stays true to the client-side first developer experience, while providing a full-feature server-side capable system that won't make you compromise on user experience."
What compromises are made by using next.js instead of TanStack Start for example?
18:26 Isn’t this exposing server code by stubbing even if i don’t actually call it in the client side?
Nitro mentioned! That’s cool!
9:54 you can rename file in macos vs code, using return key
I'm curious to see how it does file uploads because Remix is kind of a pain
Seems this is going a lot into Spring Boot direction ...
Yes, we have JavaScript frameworks inflation unfortunately.
The inly router that i know who manage correctly the different type of params in the url is the one from Angular.
gov should start taxing new js frameworks
All of this is already in Nuxt as stable 😂
Didn’t add POST method to the form
I saw you in a commercial the other day, but it wasn't you, it was just a guy stealing your likeness.
Wake me up when it reaches 1.0
me too
Ah, a new JS framework. That time of week.
Goddamnit, why didn't you finish the 4 bullet points before the add
First exposure to tamarack router. Seems interesting
At this stage I'm just wondering what is so crazy about Router that everyone wants to make one in few months. All devs should get a chill pill and rethought where they spend their time. Rather than wasting time to build another router which doesn't bring anything significantly new to the table spend ur time building something useful.
Another day, Another framework.
How is this significantly different or better than remix?
Type safe routing
TanStack-Start doesn't use the .config/ pattern? Why no .config/app-config.json?
There's app.config.ts 🤷♂️
should've added Taner to the stream lol
Really wish it had any other name other than “TanStack”
I’ll let you call it React Start if you insist.
Browser native full stack web framework when?
I thought Remix could run with no JS
i'm struggling with create t3 new api in trpc v11 and trying to implement auth with clerk but its awful. no good resources on internet to learn new patterns in trpc v11 i'm completely new to trpc
Can I send JSX from the route loader?
Loving these sponsor skits 😏
here we go
I really don't like that the entirety of the markup gets rendered both on the server and client no matter what. That's analogous of making every component a client component in a Next app and taking away server components altogether. Create server function is fun and cool initially to have it coexist with inter-mingled imports, but when things become serious and you are dealing with thousands of line files, it becomes a blur to understand where the boundary is. Imagine at the top of the component you have dozens of functions consisting of server functions, helpers, other inner components, it could get out of hand really fast. I like to be able to move my server logic not only to a different file, but to an entirely different root directory to avoid any confusion where these files are run. And to import server-only in there for good measure. This way these server endpoints can be reused in many places. Co-location is not the dream in my opinion.
But would @theo actually use TanStack in his next project? That’s the only thing that matters
Dang about to start remix.wtf
does it have shadcn cuz thats the only reason i picked nextjs. that dudes a wizard them hiring him and that Deb girl who makes great tutorials is the best marketing they coulda done.
Why do you hate MUI and like ShadCN/Tanstack copy/pasta and at the same time hate the code gen in Rails or Laravel?
Tanner is the GOAT
I don't understand what is the big difference between this and Remix. What makes this framework a better competition than remix. It is the small abstraction over http primitives ? Because that is the only difference I can find
Hmmm. Looks quite complicated, and so much more different in form of DX compared to React, isn't it? Still love Vue for it's simplicity. Come to the Vue side Theo :D
why is Vercel a partner though ?
love the sponsor!
I think it's pronounced like "Vinci" just the x for the edgy credits
It definitely is pronounced like Leonardo da Vinxi. I feel like Theo is trolling us with some of these pronunciations haha
I am sticking with remix tho.
Would've loved to see more about vinxi
alpha status, but will monitor this closely