T
TanStack•2mo ago
like-gold

Help needed! I'm writing a blog post comparing nine frameworks

Last month I wrote a blog post "React Won by Default", and I am now writing a follow up post. In the new post, I've built a kanban app in nine frameworks for comparison purposes. One of the apps is built with Tanstack Start. I did the best I could, but I'm not an experienced Tanstack Start dev. I'm hoping someone will be willing to review my Tanstack Start code to make sure I'm using framework conventions and optimizations correctly. One of my goals is small bundles, so if anyone can improve the app on that metric that would be great. If there are any takers, I can invite you to the repo. Thanks y'all!!
21 Replies
adverse-sapphire
adverse-sapphire•2mo ago
Yeah, we'd be happy to take a look How much time do you anticipate a review taking? Is the app large?
like-gold
like-goldOP•2mo ago
Thank you so much Tanner. Here is the repo: https://github.com/lorenseanstewart/kanban-comparison The app isn't too big, but it's not a tiny demo either. Homepage to create kanban boards, then a board page to manipulate the board (create cards, drag and drop,etc)
GitHub
GitHub - lorenseanstewart/kanban-comparison: Comparing front end fu...
Comparing front end fullstack frameworks. Contribute to lorenseanstewart/kanban-comparison development by creating an account on GitHub.
like-gold
like-goldOP•2mo ago
Any takers? I'm hoping to publish the post on Monday. I think I did an okay job with Tanstack Start, but I haven't worked in React daily for several years now
unwilling-turquoise
unwilling-turquoise•2mo ago
so kanban-tanstack is react, not solid? why not add a solid version of that? why do you use a custom server impl? not sure if this streams correctly? what are you evaluating btw? 
 tanstackStart({
      srcDirectory: "src",
    }),
 tanstackStart({
      srcDirectory: "src",
    }),
src is the default, so can just be omitted what is this doing? 
rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
unwilling-turquoise
unwilling-turquoise•2mo ago
why not perform the validation in the inputValidator here? https://github.com/lorenseanstewart/kanban-comparison/blob/development/kanban-tanstack/src/utils/api.tsx#L118
GitHub
kanban-comparison/kanban-tanstack/src/utils/api.tsx at development ...
Comparing front end fullstack frameworks. Contribute to lorenseanstewart/kanban-comparison development by creating an account on GitHub.
unwilling-turquoise
unwilling-turquoise•2mo ago
same here https://github.com/lorenseanstewart/kanban-comparison/blob/development/kanban-tanstack/src/utils/api.tsx#L179
GitHub
kanban-comparison/kanban-tanstack/src/utils/api.tsx at development ...
Comparing front end fullstack frameworks. Contribute to lorenseanstewart/kanban-comparison development by creating an account on GitHub.
like-gold
like-goldOP•2mo ago
yeah, it's the second (better!) version of a React app. the other is Nextjs. I'm using SolidStart instead... I already have nine apps going so I'm hoping his is enough bundle size, FCP, LCP mostly. Basically mobile performance do you mind sending a PR?
unwilling-turquoise
unwilling-turquoise•2mo ago
well if you compare bundle size. solid should be considered for tanstack start as well as react itself is ... "massive" is there a reasong you dont use react-query?
like-gold
like-goldOP•2mo ago
It surely is! The comparison I'm making with Tanstack is that even though it's def better than Next on all metrics, it still has the react problem react query is larger thant the entire bundle size of some of the other apps I'm trying to keep dependencies to an absolute minimum
unwilling-turquoise
unwilling-turquoise•2mo ago
hmm ok
conscious-sapphire
conscious-sapphire•2mo ago
wow this looks a awesome. Excited to read when it comes out
like-gold
like-goldOP•2mo ago
if anyone wants to add a kanban-tanstack-solid app, I would be extremely grateful but I understand it's a big ask
conscious-sapphire
conscious-sapphire•2mo ago
I can try to do it
like-gold
like-goldOP•2mo ago
you are amazing hopefully the code in kanban-solidstart will help I've had that reviewed by a couple solid maintainers
conscious-sapphire
conscious-sapphire•2mo ago
I got it mostly converted outside of the drag and drop. Not sure if you wanna finish off the last little bit or just leave it its still using ternaries and .map which isn't great either
like-gold
like-goldOP•2mo ago
I can finish it up. Thank you so much for doing the heavy lifting! This is going to make Tanstack really shine! I'll merge and add code once the PR is up @brenelz
conscious-sapphire
conscious-sapphire•2mo ago
i actually got ai to add some drag and drop haha so i think its pretty good https://github.com/lorenseanstewart/kanban-comparison/pull/8 Wow this is a great breakdown https://github.com/lorenseanstewart/kanban-comparison/blob/development/TANSTACK_COMPARISON.md
like-gold
like-goldOP•2mo ago
oops, no one was supposed to see that!! 😂 those are some ideas to incorporate into the post
conscious-sapphire
conscious-sapphire•2mo ago
lol
unwilling-turquoise
unwilling-turquoise•2mo ago
i have some feedback/questions about that.
A detailed performance comparison examining how TanStack Start performs with different UI libraries (React vs Solid) compared to their native meta-frameworks (Next.js vs SolidStart).
calling next.js react's "native meta-framework" is an interesting wording for sure.
The Framework-Agnostic Router Tax
TanStack Start's framework-agnostic architecture comes with a measurable cost: +117 kB raw compared to Next.js App Router (React)
where does this number come from? i looked at the numbers, nextjs seemed to be larger for both pages?
+67 kB raw compared to SolidStart router (Solid)
what makes you think that those 67kb originate from " TanStack Start's framework-agnostic architecture" instead of the fact, that TanStack router has a lot of features that SolidStart's Router simply does not have?
SolidStart Wins on Bundle Size: Native SolidStart router produces 30-44% smaller bundles
the overhead is constant so percentages don't make much sense IMO.
When using the same router (TanStack), Solid produces ~50% smaller bundles than React with identical perceived performance. This demonstrates Solid's compiler advantage over React's runtime approach.
i am not sure this comes from the "compiler", rather that solid's runtime is tiny compared to react's?
Stick with native frameworks if: You're optimizing for absolute minimum bundle size
if you are optimiziing for ABSOLUTE MINIMUM you should not use a framework at all but hand roll everything.
You want the most optimized Solid experience
what's not "optimized solid experience" when it comes to TanStack Start Solid? overall the application does not really make use of router features so that's a bit of a bummer.
like-gold
like-goldOP•3w ago
I agree with a lot of this. those were Claude generated notes, rather than my own. But thanks for reading. Comments like "the overhead is constant so percentages don't make much sense IMO." are very helpful Hey y'all. I'm doing a complete re-write of the "10 apps" article. I've deployed all the apps to vercel and am now using playwright to gather metrics. I'm including a lot of emphasis on CSS optimization bc that is a huge factor in LCP and FCP. Each framework has it's own optimization capabilities and I should have paid more attention to that in the original article

Did you find this page helpful?