Fullstack TanStack! The Scoop with Tanner Linsley

Welcome to Syntax today. We are live at GitHub Vercel, and we have Tanner Lindsley in the box of yes. Look who we have here. In the floor. Hello. Hello. Taking all the merch, drinking all the drinks.

I don't have that low you know that low range you've Scott? Yeah. Yeah. I do. I don't have that either. I'm jealous. What's up? Now I got the Hey. Hey, guys. You like your JavaScript? Yep. Hey. I got got some cool JavaScript tips for you.

Wow. That's great, guys. Yeah. Oh, shit.

So Tanner, is the creator of TanStack Everything.

You've probably used TanStack Query Almost everything. Of TanStack Almost everything. This is the first year that libraries are out that I didn't create. That you haven't even touched before. Yeah. Wow. It's,

it's more of a Tanstack team now. Right? Yeah. Absolutely.

You guys got, like, lots of lots of fun. We had Corbin on the podcast, what, maybe a year, year and a half ago, and he was telling us about how you write libraries to work with multiple things. Yeah. Yeah. It's hard. Funny. Yeah. When I talked to Corbin at the thing, I was like, I think it was about, like, four years ago we had you on the pod. I looked it up. It was 2024. I'm like, oh, okay. Four years ago. Yeah. Time flies. Yeah. Right. Since we've last talked, I know that you're cooking on stuff right now, and we're gonna have you on for our proper podcast. Well, we thought we would just grab you ESLint to chitchat. But, like, you've been you've been cooking. Right? Like, do you've, what have you been working on? Yeah. We've been cooking some fun stuff. I have been heads down on

pnpm sec start Yeah. And and router lately. Me and Manuel Schiller have mostly been working on that. Sam Willis and Kyle Matthews from Electric have been putting a ton of work into 10 StackDB.

Oh, that's so that's your, like, sync engine local

Yeah. Local first. Scott absolutely loves this stuff. Oh, yeah. We were talking about it last night. Yeah. Like like, if I wasn't doing router and start, like, I would be working on that because I'm just so excited about it. Tell us about about, like, what that is. So it it is like a sync engine, but it's only it's only the client part of it. So you you set up what we call collections.

Yep. And they're basically tables.

And you can you can then query those collections using, like, a queries and text that you're used to from, like, Drizzle or ESLint, it's it's a first class query engine. You Node, you can do joins. You can do where clauses.

You can do really fun tricky things. And that's all powered by this differential data flow system behind the scenes in the browser.

So it's really, really fast to run these queries on these collections. Okay. But those collections can be powered agnostically.

So you could shove data into those from React Query, from a WebSocket, from IndexedDB.

So you can you can push data into these collections from anywhere. Okay. So it's like you get to start building your own sync engine Yeah. Which is what makes it incrementally adoptable Yeah. Which is very important. That's what we were talking about with Xero Yeah. Which is what I'm using for everything.

You are have to have either your Postgres ESLint up already, and and be committed to that, or you have to build from scratch. Yeah. So that incremental adoption piece is much more difficult.

Oh, man. With the syntax side, it wouldn't be possible because we're not on Postgres unless Yeah. Yeah. We move to Postgres.

One of the benefits if we we peel back, one of the benefits to to a 10 stack query is that, like, you just Node an an async function.

You know? And you didn't it's not like it had to be a fetch call. Not like it had to be this, like, weird signature or whatever. It just needs to be in a synchronous function, and and past that, you don't give a shit how what happens. Is that the same thing with the sync engine? Same spiritual

idea. Yeah. You do need a little bit more. Okay. So, yes, you need async functions to you know, you need to be able to push your data into the collection. Yep. And that can happen through a Wes call setup you've got. Like, you can use React Query to push data in there. Okay. Or you can set up a a socket or a live stream of events coming in. So that's the first thing you need Node to be able to push data in. The second thing you need is it it is schema based because you need to be able to have strict type Sanity, but not just that. You need to be able to query this stuff like a table and do joins on IDs and joins on things. So Oh, yeah. It takes a schema. So it's it's not relational, but you can treat it like that. So let's see. Data, schema,

that's really it. That's all you need. Man, and I think one thing that people really don't realize is just how transformative the speed can be. When you're working in these local cash systems, it is so fast. And I I feel like I'm always constantly talking about this. Yeah. And, like, a year from now, people are gonna be like, this is the I feel like you've been so early to this stuff, and not everyone realizes how good it is. So shockingly fast. That's why I'm excited for the TanStack DB. I'm excited for this incremental adoption. I would love to use it on syntax, and, like, just know that, like, that that speed in which you're able to load things from your local data cache with with syncing happening behind the scenes or whatever that process is is transformational.

What does the actual syncing look like? You know? Like, I I understand, like, querying, you're pulling data down, but, like, what happens when you need to, like, have a mutation or whatever? So the transaction

there's there's a transaction framework built into it. Okay. And a lot of that is automatic. So when you work with individual collections, you know, you're doing an insert or a deletion or or an update. A lot of those transactions are managed for you around kinda these common actions you can take. Yeah. Yeah. And all you have to do is supply the implementation details of those common actions. And you can also create your own, but, like, insert, update, and delete, you you just supply the implementation details for those. So you may have a collection that's powered by a really old crappy Wes API. Yep. And when you call those three functions, you gotta go in and actually make a fetch call with the data and do the thing. Right? But once you set that up one time, you can then go back to your your business logic, your application layer, and you can interact with that collection as if it's synchronous. You can just mutate properties. You can delete and add things. And behind the scenes, it's batching and doing all those fetch calls for you. And that gives

you easy control over permissions and stuff like that because you're you're not changing your API. Right? Right. Yeah. Yeah. That that's a problem that I know Xero has been trying to solve in different ways of permissions of which if you're not having to adopt a whole new thing, right,

you're just using your API. Which and and I got a rep, Electric, which is where Kyle and and Sam are from. Yeah. Kyle's been on that for a while now. Yeah. But by using, long polling. Right? Mhmm. Yeah. You get to you to reutilize all your normal authentication flows because it's just Wes. It's just it's HTTP.

Right? Yeah. So you don't have to invent something new for sockets and and go through Beautiful. Kind of that charade. I'm excited to try that out. Let's switch gears a little bit. Next. Wes,

last week, launched Next. Js 16 launched a workflow with the use workflow directive, which is a little bit magic. Right? I haven't really caught up with what everybody's saying about it, but I know I know you've had some thoughts on it. Can you give us the scoop as to what you think about that? The workflow stuff itself is actually really exciting. Yeah. Like, we we've gotta be honest with ourselves that, like, durable execution is really exciting Yeah. No matter what you're using. So, like, maybe pause just for a second. Like, the idea with the for the audience listening, the idea with a a workflow is that you can, like, you can have an async function, and you can just, like, pause that function for forty two days. Yeah. Or you can have, like, multiple steps, or you can say, like, come back and sleep for thirty minutes and and come back and check if this thing and it's really cool. Like, I'm I've used Cloudflare Durable Objects and their workflow. Big fan of that. And, like, all of your memory, all of your variables, all of that sort of just, like, is reinstated.

Yeah. There's, like, ingest. There's a couple of, like, other Scott ups in that space. So it's it's great, especially for for agents Wes you're like, come back in in half an hour, but you don't have to, like, save your variables to database or anything like that. So it just, like, seals it up. But It's a hot space. Yeah. And it's useful. It's really cool to do that. Yeah. And if you want to see all of the errors in your application,

you'll want to check out Sentry at century.i0/syntax.

You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on over to century.i0/syntax.

Again, we've been using this tool for a long time, and it totally rules. Alright.

I think the interesting part that kinda Wes trending a lot on Twitter and social media these the last few days has been around their usage of directives Yeah. For kinda setting that up. And on on one hand, you look at it, and it's like, it it does look really innovative and cool to be like, oh, look what you had to do with these other APIs and nesting things and functions and and setting them up to to be resilient. Yeah. We've replaced all that with just these kind of magic directives. So on one hand, it does look really great, and and, man, it sells well. Even when I saw it, I was like, oh, wow. That looks really cool. Yeah. But for me personally, I I I think that we kind of have a directive problem.

Just we're getting a little obsessive about using them for everything. Yeah. So I I decided to collect some of my thoughts on directives in general, not just about use workflow, but just about all the directives that we've kind of chosen to adopt over the last couple years and Mhmm. And put them into a little blog post that I did. So yeah. And, like, give us the the cliff notes of that. Like, what should we be using instead of these magic directives? So from my perspective, people are saying that magic directives are the way to indicate that some kind of transformation is happening under the hood by a compiler. Okay. And I I would say that we've actually been doing that for a long time without directives Yeah. With just functions and and other things and Just just Yeah. JSA. Yeah. Right. Yeah. And for me, I'd say, you know what? Let let's use yeah. Sure. Let's invent ways to do compiler tricks because it's all tricks. Yeah. None of it's real JavaScript. So if we're gonna invent tricks, my opinion is that they should at least be, future proof for type safety Yep. And especially room to grow because I I actually messaged this to David Kirshid today, and I said, hey. I actually thought of you because directives are kind of like the use state Boolean Oh. Of comp of compilers. Right? And I know that he would be like, oh my gosh. Use state Boolean. Right? That's that's David k Piano. You say anything about state machines Yeah. Right. He arrives. But in the same spirit, a directive is kind of just like this Boolean. You only have the one choice. It's either there or it's not. Yeah. And and if if anybody wants to try and expand that into, okay, well, now we have this special colon syntax. And Node there now there's directives, but there's also magic functions that change how those directives warp. Directive arguments. Right. Yeah. Right. Okay. We're starting to invent JavaScript again. Right. And in in that case, I would just say, well, why don't we just use wrappers? Maybe they're not pretty, and and maybe they'd maybe they don't scream, hey. A compiler is doing something here. Yeah. But at least they're type safe. They're traceable. They have an import. You can follow them back to a spec, hopefully. You know? Even JSX looks pretty magical. You know? But but you can you can go and say, oh, what's the pragma being used here? Yeah. You can trace that pragma back to, oh, here's the actual transforms that are happening under the hood. So, you know, there's been a lot of talk about creating standards and wanting to share work across the ecosystem, and I and I love that. And there's there's some leeway in personally, like, for things like use server and use client.

You know, I like the spirit of that, like, trying to share, and make it as useful as possible for everybody. Yeah. At the same time, I'm building a meta framework, and I'm not using use server. I mean, we we support it. Yeah. We support it, but I don't want to use it because I want type Sanity, and I want all this nice stuff. So, you know, I'm kind of on the on the team of, like you know, if you wanna try and create standards, that's great. Let's make them open and and make them easy to customize and safe. But I just feel like going down this directive route is gonna create a lot of standard proliferation.

Yeah. And I don't like that. Yeah. Yeah. Yeah. That that tracks for sure. Cool. Well, we'll link up the blog post below, and people can check it out. But love hearing that. What other what other spicy takes you got?

You know, we're we're working on React Vercel component support for for ten SecStart, and we're gonna support the normal flavors of server components, how everybody wants to use them. But we have kind of a a special take on server components that I think is gonna be a little bit unique. I'm not gonna share too much because we're still in the prototype stage. Okay. We we know that it it works, but we just don't have it ready to show off. But the teaser is that, we've been talking about server components for a long time now. Yeah. But in reality, what they really are or what we've seen is server elements.

And when you think about, like, returning a server component from Next or wherever these days, you're not returning a component to the client or or, you know, to render. You're returning an element that's been rendered. Yeah. And I've I've always had this dream of being able to actually send a component back to the client and and render it with slots and inversion of control.

That inversion of control is so important to me because I don't like to assume that the server knows how to do everything.

Yeah. I want to be able to send it a task to do this thing on the server that only it can do on the server, but then come back to me and let me continue to do things on the client that I wanna do. Okay. Fill in the little Yeah. Fill in the client presence. Gaps. Yeah. Just from what I said there, you can probably put the pieces together, what we're working on. But, it's it's gonna be a a different a different implementation of server components than I think a lot of people have are used to. Yep. And it opens up a path to using server components that doesn't require, the use client directive for a majority of use cases. There's still use cases for that. That. Yeah. Yeah. But yeah. Man. Yeah. And and it does feel like there's so much momentum behind you and your projects

right now. Does that feel is it is it reaching you in that same way that there is a lot of

heat on what you're doing, positive heat? Yeah. And it's exhausting because a lot of it I mean, I I know that we've written some blog posts, and and we've put some new projects out there, you know, but a lot of it is is feels like it's being thrown at us from social media, in the community.

Like, I'd say 95% of the stuff that I've been reading on Twitter is just coming from random people that we've never met or anything. They're just they've just decided to use TanStack as this podium to to speak their thoughts, which is really cool. You know? Yeah. In in some regards, they're they're doing our marketing work for us. Yeah. On the other hand, it makes me nervous. You Node? I wanna make sure that it's a positive spin that people people are being nice and kind and upholding

what I would call, like, the tan stack tenets Yeah. Of, you know, always making sure we're we're being nice and and being positive. That's great. I like that. What else, tan stack? What else would you is Tansac CMS one day? What what what are what are the areas that you would love to touch and something that you will never want to touch? We I don't I do not wanna make a CMS or

or or an ORM. I we do not wanna Tansac ORM? Okay. No. Wes do have one more library that we're prototyping right now. It's in the very

early alpha like, pre alpha stages. Okay. But I I cannot say anything about it. What what area is it in? Me and Scott are gonna guess. I can't even hint to it. Somebody in the comments will know. Could please go in the comments below, drop what you think it is, and then find the ones and upvote the most ones. But I I will say that we Kazakh icons.

We are working with a lot of people in the community. So usually, we'll just build something internally Yeah. First, and then we'll just like, here, we built something new. This project has big scope. A lot of a lot of people are behind it from outside of the TanStack community. So we've got a huge working group channel in our Discord with a bunch of people who have been invited to this work group. Interesting. Yeah. Yeah. Stack format,

tan stack

v plus plus. But but we think it's we think it's gonna be very foundational, something that I think people have asked us even saying, we would like you to have this. We would like you to build this, and I ask them why. And a lot of it some of it comes down to ownership. They just trust us to do the right thing.

It's gotta feel good. With with software.

And some of it is technical. A lot of it is technical Wes it's just like, hey. We're using this tool, and it gets the job Deno, but it's kinda the only choice we have, and it it could be better. And we think that the 10 stack

It's a bundler. Yeah. It's a text editor. We're just gonna yeah. 10 stack code. I'm just gonna say sure to all of that so that there's a bunch of tag agent. So that there's a red herring there basically everywhere. It's gotta be a a bundler with AI built into it. A bundler? Sparkle.

Yeah. It's a it's sparkle. Tanzanck sparkle is coming.

Cool. Well, I'm really looking forward to that. Alright. Well, thank you so much for coming in. Appreciate it, and we'll have you back on the show, once you got some more to say. You bet. Thanks so much, Tanner. Yep.