TanStack Introduces New Meta-Framework Based on Its Router
Tanner Linsley didn’t intend to name the TanStack after himself. But what began as a joke by a friend just kind of stuck. And it didn’t begin as a stack — or an open source solution, for that matter.
TanStack began as a way to build tables for large data sets. The startup Linsley co-founded, nozzle.io, was using Angular at the time and that didn’t offer a lot of options. nozzle.io is a tool for gathering and displaying analytics using large data sets that are based off Google search results; it’s used by enterprises to track individual key word campaigns.
“I originally built [TanStack] because I needed those tools for a startup that I was building,” Linsley said, referring to nozzle.io. “We needed to be able to display that data based on the client and communicate between client and server. … We needed a data grid in React and at the time, there weren’t that many choices.”
“One of my friends at the time, Shaun Wang, he was just joking around that I was building my own stack and called it the TanStack. At first it was a little cringy, and then I thought, ‘You know what? That’s not too bad because it kind of sounds like Jamstack.'”
– Tanner Linsley, developer of the TanStack
After that, he built React Query because nozzle.io was managing big data sets using Redux and “they were more like just glorified caches,” he said. React Query helped him manage all of his data fetching with React.
He knew at the time that nozzle.io could not maintain the projects, so he decided to open source them.
“They took off — React Query got really, really popular; React Table is pretty popular, and with enough attention and enough time, those libraries needed to grow beyond what they were and at that time it was React,” he said. “A lot of people wanted to use them in other frameworks.”
He decided to make them agnostic and extract out the React-specific parts so it could work anywhere.
But there was that awkward problem of their name. No one in Vue, Angular or other non-React frameworks would want to install React Query. The tools needed a different name.
“One of my friends at the time, Shaun Wang, he was just joking around that I was building my own stack and called it the TanStack,” Linsley said. “At first it was a little cringy, and then I thought, ‘You know what? That’s not too bad because it kind of sounds like Jamstack.’ So I just kind of leaned into it and went with it, and it turned out OK. It’s great SEO.”
It also doesn’t hurt to build up his brand a bit, he added.
‘First Fully Type-Safe Router That’s Existed in Frontend’
Linsley is still building out TanStack, but coming soon, he’ll release TanStack Start, a full-stack React framework powered by the TanStack Router. The router directly competes with routers from React, Next.js and Redwood.
Frameworks are intricately tied to routers, Linsley explained. To understand his framework requires understanding TanStack Router.
A router is a JavaScript object that maps URLs to functions; the router calls a function based on the URL, according to this tutorial on building a router by civil engineer Nancy Maina. In other words, in single-page apps, routers “organize the states of the application, switching between different views,” explained software engineer Esteban Sastre, who was the CTO and cofounder of an app called Thegoodpsy when he wrote about routers. For example, a router renders the login screen first, and when the login succeeds, it will perform the transition to the user’s welcome screen, he wrote.
via TanStack.com
While all JavaScript routers have a lot of overlapping core features, they differentiate in small ways, Linsley said.
“The thing that sets my router apart is that it’s very heavily directed towards TypeScript users,” he said. “A lot of other libraries and routers are written in ‘TypeScript’ — I’m air quoting here — but they don’t utilize the type system to its full extent. They’re not inferring as much as they can. They’re not carrying through the types that you give it to the rest of the system.”
He contended that Tan Stack router is unique in that it is a routing library that uses TypeScript to enforce type — meaning the expected format and structure of data involved in routing — safety on routes and the related data.
“Tan Stack router is the very first fully type- safe router that’s existed in frontend,” he said. “There have been a couple others that have come close and some prior [work] in that area, … but none of them really came as a holistic experience for a TypeScript engineer wanting to have a router. So that’s its big strong suit.”
Chicane is a recent entrant in that space.
Safety Nets for Developers
But what does that do for developers?
“It provides you static analysis of your code that can catch many, many types of bugs before they even happen; in fact, before you even build or submit your code to your application,” Linsley said.
In practical terms that means a new link to a new page won’t inadvertently go to a page that doesn’t exist, he explained.
“Up until now, those parameters that are in that URL have been wild, wild west — they could be anything,” he said. “What TanStack Router does with its type safety is makes it so you’re never going to be writing to those URL parameters or reading from them without knowing strictly what’s possible and what’s not possible, which reduces a large amount of bugs that can happen in production by attempting to read parameters that may not be there or attempting to write a parameter that is a typo or doesn’t exist.”
This creates a “giant safety net around the experience of routing,” as well as improving productivity and creating a better developer experience, because if a developer renames a variable in one spot, it will rename it everywhere, he added.
There are also refactoring safety nets, he said. If a developer wants to change an application, it may require changing or refactoring a large portion of code.
“Normally, in just JavaScript, you would have to go through the rest of your app and test it and look for the side effects that you just caused with this big change,” he said. “With TypeScript, you make those changes, and TypeScript will tell you where the rest of your code now is either incompatible or needs to be updated to work with those changes. So it’s extremely helpful during development.”
Coming Soon: Meta-Framework TanStack Start
The TanStack Start meta-framework gets those attributes because it’s based on the router, Linsley added. And while he is trying to build the framework so that it won’t require TanStack Router, in reality, that doesn’t work very well, he said.
“Frameworks are routers; routers are frameworks,” Linsley said. “They are what make the building block of convention that a framework needs to offer higher levels of productivity. If you were to swap out the router to a framework, you’ll likely lose a lot of those proactive things that are going to give you lots of productivity and speed and safety. I’m keeping it in mind for the potential for people to use other routers, but for right now it’s based on TanStack Router.”
“All of these meta frameworks have ways to do client-side things, but you author your applications from the perspective of usually — in fact, most of the time — having a server involved, and I didn’t like that, mostly because I come from the world of building client-side applications.”
But the router is only part of the meta framework, he added.
“The other missing pieces to that are a deployment strategy — how do we actually bundle this code for production and deploy it elsewhere?” He said. “For a framework, we need to have that bundling story down. Then we also need to have the story around server-side rendering and everything that happens on the server and the handoff between server and client. And [that’s] usually why they call it a full-stack meta-framework.”
TanStack Start is being used and tested internally by the TanStack team, but is not available for wider use yet. He did not provide a release date for it. Lindsey said it’s most similar to the new meta-framework Solid Start, which launched in May. In fact, Linsley and the creator of SolidStart and Solid.js, Ryan Carniato, collaborated a bit on how the two frameworks would work.
Solid Start and TanStack Start don’t attempt to move all of the code to the server, which is what a lot of frameworks are doing that right now, Linsey said, pointing to React Server Components.
“Next.js is a very much a server-first framework. Remix is very much a server-first framework, and so is Redwood,” he said. “All of these meta frameworks have ways to do client-side things, but you author your applications from the perspective of usually — in fact, most of the time — having a server involved, and I didn’t like that, mostly because I come from the world of building client-side applications, not distributing content through content sites and e-commerce.”
Lindsey is primarily focused on building highly interactive experiences that are usually behind some a login. He’s more focused on getting users into the application and then providing the features, workflows and interactivity to be productive.
That’s different than, say, an e-commerce website where the goal is fast page loads and getting users to add to cart. To support websites, other frameworks focus on simplifying server-side-first applications and only dip into the client for things when interactivity is required. SolidStart and TanStack Start flip that script.
“You measure those things completely differently, which is why I believe that there needed to be a framework built around this experience of writing client-side applications, and Solid Start and Tan Stack Start very much embody that experience,” he said. “We’re trying to model this developer experience around continuing to write your applications as if they are single-page apps, client-side applications. Then, when you need the server for these things, we make it extremely convenient to cross over into the server to do those things.”
