Replacing Create React App: Why Create TS Router App Is the Future of React Development - JSJ 675 - podcast episode cover

Replacing Create React App: Why Create TS Router App Is the Future of React Development - JSJ 675

May 02, 20251 hr 31 min
--:--
--:--
Download Metacast podcast app
Listen to this episode in Metacast mobile app
Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more

Episode description

We’ve been diving into the evolving landscape of React app development and why tools like Create TS Router App (CTA) are stepping up to fill the gap left by the deprecation of Create React App (CRA). What we’ve learned is that SSR (server-side rendering) isn’t one-size-fits-all—e-commerce sites need it for SEO and performance, but internal tools and dashboards often don’t. That’s where CTA shines. It gives us a fast, modern, Vite-powered setup with TanStack Router built in, so we can start small and scale up without committing to heavy frameworks like Next.js from day one.

What we love about CTA is how it keeps things familiar (same structure as CRA) while giving us type safety, file-based routing, and the flexibility to add only the features we need—like Clerk, Sentry, or even SolidJS support. Whether we’re building a simple prototype or a full-featured app, CTA makes the experience smoother, more intuitive, and future-friendly.

Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

Transcript

Speaker 1

Hey, welcome back to another episode of JavaScript Jabber. This week, on our panel, we have Dan Shapier.

Speaker 2

Hello from still Cold tel Aviv. Cool.

Speaker 1

I just went for a walk in like thirty degree weather.

Speaker 2

So it's relatively cold. I mean it's a fifty degrees fahrenheit or so, so you know that's really cold.

Speaker 1

That's like cross what Okay, fine, all the snow hasn't melted.

Speaker 2

Here.

Speaker 1

I'm Charles Maxwood from Top End Depths and we have a special guest this week. We have Jack Harrington. Jack, it's been a while.

Speaker 3

Yeah right, wow, you know we used to do a podcast together and yeah, now've my own podcast and there you go.

Speaker 4

But it's great being here. It's so nice to see you guys again. And yeah, it's great, great to be here. And here it's weirdly very sunny. We've had a lot of rain lately where.

Speaker 3

I'm over in Portland and it's like fifty which to us is shorts weather. Right, yeah, that's like bombing.

Speaker 4

Let's go.

Speaker 1

Yeah, you can have humidity there too, so.

Speaker 3

Like crumbling my fingers and stuff.

Speaker 4

I moisturize all day.

Speaker 1

Well compared to hear it's humid. Yeah, we live in this desert anytimes. I don't know.

Speaker 4

The skiing is good, Yeah, there you go.

Speaker 1

But yeah, Dan Dan said that great react as going away? Is that right?

Speaker 2

Yeah, it's gone away. It's gone officially.

Speaker 3

Well we can still use it, but it gets a big warning about deprecations deprecated.

Speaker 1

So to me, that's going away.

Speaker 4

But oh no, it's definitely going I mean, yeah eventually.

Speaker 2

Well look things well stuff like that. I don't know, maybe one day it will be officially e weld. But from my perspective, when it's deprecated, you really shouldn't be using it for new stuff.

Speaker 1

Yeah, I agree.

Speaker 3

Yeah, there's been better alternatives for a while. But I think the big difference is that, like the problem with that they were we have is that there's a lot of old tutorials and stuff that use create react app. There's still as valid as they were back then. Now you know they're talking about like maybe you stay and basic hooks and stuff like that, and you know those are going to last for a while, and just because they use create react app in the demo doesn't like

distract from that. So you know, that's kind of the problem that folks are having, which is they deprecated this thing into now learners, folks who just want to like try out stuff, you know, they what are their alternatives? And the alternatives they were given were like the next.

Speaker 2

Before we go to alternatives. Maybe it's worthwhile. I'm guessing everybody knows, probably our entire audience, but I still think it's worth while to mention what create react app was or is it still is, why it was actually needed, what it does for you.

Speaker 3

Sure, so create React ap is interesting, it won The most salient thing to me is that it creates React apps, right, and those are SPA applications.

Speaker 4

This was done in the very early days.

Speaker 3

I mean SSR was around, But this is not creating SSR applications. This is creating the kind of stuff that you'd build. You create a disc file, you put that off on S three or some CDN, and you'd have yourself a site and very simple stuff, you know, SPA single page application type stuff.

Speaker 4

And the other thing that.

Speaker 3

Interesting about create React app that I had actually forgotten was that it remains a dependency in your application. It doesn't just create the app. It actually like remains a dependency in your application.

Speaker 2

Yeah, gets injected into your package jsone.

Speaker 3

Oh yeah, and then it actually maintained like it will rev your React versions and everything like that going forward. And that was the original promise of Create React App was to give you like it was an actual platform, kind of like next JS. And the idea was you get on create React app and you can just keep reving that and you always keep up to date with React. And that kind of stumbled I don't know, like zero point or sixteen kind of that and that time.

Speaker 2

So it would literally whenever a new React version would come out, would automatically update your package Jason to use that you were version without even asking you.

Speaker 3

No, no, no, no, I mean it's it's dependencies. It would handle the React dependency for you, so you'd bump.

Speaker 2

Your I don't remember, I just I don't remember that.

Speaker 3

Yeah, that's that was what I believe it did. And that was what that was what folks were complaining about when we talked about like, oh, we we've got this drop in replacement, They're like, oh, well, are you actually replacing that that functionality in create React ap.

Speaker 4

Are you going to hand all of that? It's like, no, no, no, that we don't. They don't do that. We just make an app.

Speaker 2

It seems weird. I mean, NPM exists so that it does that stuff for you. Why would you need something else to do that for you on top of NPM.

Speaker 3

What's handling all the other things like Webpack and everything else.

Speaker 4

Oh yeah, no, I'm talking about consistencies right.

Speaker 2

No, No, I'm putting Webpack aside for a minute. I'm talking just about what you said about keeping you up to date with reacts.

Speaker 4

Yeah.

Speaker 1

I would imagine that it, you know, is things get released that it has some internal, you know, way of tracking dependencies. So it's not just React, it's all the other stuff.

Speaker 4

It's all theilary extra things.

Speaker 1

So when you update it, it's saying, we know this stuff plays nice together, and so it updates everything.

Speaker 2

Oh okay, yeah yeah, Still what seemed to be stuff that should be handled via the package manager rather than something ideally Yeah.

Speaker 3

Yeah, And I think that that's where it kind of like, that's I mean, this thing came out like a decade ago, and I think back then they were trying to compete against an Angular and Angular was starting to have that cl I, and the cl I was doing that kind of thing where it's taking care of all that that funky business for you.

Speaker 1

So it did a lot of other things for you too.

Speaker 3

But yeah, yeah, so this is a nice way, you know, for them to like kind of compete against that. But in the modern context, nobody, I mean, at least for me. I mean, nobody wants that. Everybody just wants to maintain their own package of stuff and do the reving themselves and have granio control over it.

Speaker 2

I always thought that it was primarily about getting the Webpex stuff right, that, you know, getting properly configuring webpack.

Speaker 4

Oh my god.

Speaker 2

Yeah, yeah, that's.

Speaker 3

Not trivial, right, And when you eject, well, that's the thing, right, there's this whole thing about ejecting from create react ap and so why do you need to eject from create react app unless it's actively maintaining stuff for you. Well, you know what you do when you eject from create react ap is it actually gives you access to all of the stuff that it's maintaining, including like the webpack and fig and everything else.

Speaker 4

And if you look at the whypack and fig, it's it's shockingly complex. It was, it was huge. It's crazy.

Speaker 1

I quit having nightmares about webpath and now you're bringing it back.

Speaker 2

So basically, we had this command line tool that people who wanted to start playing around with React and maybe didn't have a lot of experience in single page applications either way, Yeah, could get up to speed, and as you said, it would configure the bundling for you, that is webpack, It would download the necessary stuff. It might even keep you up to date on some of the things, and it would create a simple project for you. To be honest, it's been a very long time since I've

actually used create and React ap myself. Most of the projects that I've been working on did that a while ago.

Speaker 4

Right, yeah, exactly. Yeah, but it was funny.

Speaker 3

I saw it again for the first time and I was like, oh, I remember this, the spinning React logo.

Speaker 4

On the homepage. You know, wow, that's what that was.

Speaker 3

And yeah, so we did kind of a riff on that when when we did our thing.

Speaker 2

Okay, so talking about your thing, so we said that it's going away.

Speaker 1

I guess here, I'm gonna pop a comment that somebody threw our way, he says the professor. His professor still uses create React app for teaching React, and he suggested vite And it sounds like you've got some other idea of what to.

Speaker 4

Do no, I agree.

Speaker 2

Actually, be honest, before we go there, I have to say that I'm kind of shocked that a professor teaches react really.

Speaker 3

I mean a couple of years ago, I wouldn't I would be shocked, But nowadays, like I my kid just went through Oregon State and yeah that the web the courses were has some you know, kind of recent stuff, and I think there was an actual course on web development in particular.

Speaker 4

And yeah, sure they react yeah money man, practical skills.

Speaker 1

In high school, we're doing web development. But I think they were teaching him just the general web APIs for JavaScript.

Speaker 4

That's a good idea.

Speaker 2

It's just the universities tend to be elitist in these sort of things, Ivory Tower and whatnot. And it's not about the practical skills. It's about expanding your mind. So they teach you Java. Yeah, because that expands your mind.

Speaker 1

When I went to college.

Speaker 2

I won't tell you what they talked when I went to university. Yeah. Anyway, we digress, Uh, going back to the topic at hand. So, like that commenter stated, isn't vat kind of a replacement for create react up these days? What's missing? Uh?

Speaker 4

Okay?

Speaker 3

So, as an educator, I think every little bump in the road from what I'm seeing in my tutorial versus what I'm actually like.

Speaker 4

Getting as as part of the setup is a problem.

Speaker 3

And because I'm seeing people people would say, oh, you know, your tutorial says change this one line and this one line is different from what I expect because it's now I do my great React app or whatever, and I get something else. Right, And so when I'm thinking about folks who are going to take those tutorials and would normally be doing, like create React app. If you say them, cool, just use VAT. Well one, what VAT command do you use?

Because there, if you just run VAT, you'll actually create vat app or whatever it is you'll get, like I think, I don't even know if there is a default, but the defaults probably view and so you need to like specify a template and the temple would be React or React tosh ts and that will give you React or React typescript. And then once you get the app, I'm pretty sure the files are in different locations. Certainly the

content is entirely different. And now, as a as a potential learner, right, I've got this huge disparity between where the tutorial is and where this this VAT app that I just created is. It looks like an entirely different thing, you know, And it only gets worse if you look at next jas because now next jas it's like it's not even really a SPA anymore. It's now an actual like SSR app and that's a whole thing.

Speaker 2

Yeah, it's a SPA.

Speaker 4

It's not though.

Speaker 3

I mean, you've got to use used client one and that's been in an old school tutorial.

Speaker 4

It's not going to tell you to do that.

Speaker 3

And even if you do use use client, well, it's going to render on both the server and the client, and so you're going to need to do stuff like checking against window and document and all the rest.

Speaker 2

It's a yeah, no, I agree, I was just nitpeaking. It's still a spot, it's not a it's not client rendered, it's not the side.

Speaker 4

Yeah.

Speaker 2

So so it's still a single page application because at the end of the day, even with the with next jays, you can, I guess, kind of make a multi page application out of next Gas, but it's not really meant for that. It's meant for single page applications. But it definitely involves a server yeah.

Speaker 3

By the way, and actually you can build next jas fairly, and you can build next jays and build it.

Speaker 4

To static and all that and that.

Speaker 3

In fact, it actually if you don't make any request to get service side props or in the app rout or if you don't make any fetches or any of that or do anything dynamic, it will actually just build you a static app.

Speaker 2

Right. So so yeah, we actually had Rob Lee from Versaill on Monday, Yeah Gus on the show, and I literally asked him, like, you know, creat react app is going away, what's in what's your answer when people don't want like the full stack experience? And he basically said, what you said, that you that that server that reacts server components can actually execute a bill time and then you can take the output of that build and deploy it to let's say an S free bucket and have

it sthetically served that way. I'd be really surprised though, if if people are really using that style of set up in Anger with with next gs, I'd be I'd be really surprised. I mean, if you're buying into next JS, you're going to actually use the next JS way, I guess.

Speaker 3

Yeah, you're probably there for SSR to some degree more or less. I mean the cool thing with with the app writer, and I'm not dissing the app writer. I mean the ap riightter is an amazing piece of work. And I've got course on the app writer and it's it's incredible, right, But there's all kinds of options around it. You know, components can be dynamic, can be you know, static, and it can define route by route what's going to be static when it's going to be dynamic. And it

is it's an amazing piece of work. But if you are somebody who's just trying to like learn React or just put together a SPA, like, it's a lot of stuff that's entirely different from what you've experienced in the past. Building out a SPA like it did.

Speaker 1

Yeah, it's crazy. I think I think a lot of this is is kind of where people are looking, right, because I think in a lot of cases, yeah, people are so as an experienced developer, right, Yeah, if I'm going to go and build something mission critical, yeah, I'm going to go evaluate and am I going to use next? Am I going to use this? Am I going to use that? Right? You know? Before just create React app,

get me where I want to go or not. But for I think a lot of people where they're just trying to learn React or trying to pick something up, or you know, hey, I just want to build a web app. What they do is they go to their friend who looks like me, and they say what do I use? And so if I'm the guy that really likes next Jas, then I'm going to tell him to go pick that up because it's great and I love

it and it does all the things. And so I think that's where the conversation is, is what are the trade offs now between picking next jas or something else.

Speaker 2

There's another point, so I'll give I've been talking to various people who are building organizational applications, and these are applications that don't get ranked because they are either wholly internal or maybe they are external, but they're behind some authentication so they're not scanned by Google. Now, if you're building a website that needs to rank, that needs to

be indexed, you're going to need SSR. But for a lot of these internal applications, the guys working on the React stuff, they don't work, they don't necessarily do anything on the back end. They're connecting directly to RESTful end points implemented in Go or Java or whatever, and they're just building the front end and they don't care about SSR because it's, like I said, it's not that type of an application, and for them, next jes seems very much like overkill.

Speaker 3

Yeah, I'm writting down a note to myself because I just had an interesting ques A question this morning about using tan Sac start without SSR.

Speaker 2

Actually that's the interesting point. So when we had Tanner on the show and we had him as the first guest this year back in January, I literally asked him about that and what he conveyed to me or the way that I understood it that one of the biggest selling points of ten stack start versus next JS is

that next JS is back end first. Everything starts on the back end and then some of the stuff happens on the front end, and ten stack Start, even though it supports that full stack configuration, the whole mindset is front end first, and you can reach out to the back end to get stuff to do stuff, but the but the architecture is first and foremost on the front end.

So with a ten stack start, you might start with a totally front end type of application and then say, hey, I actually think I need to do some of the stuff on the back end, and then you can add that capability into that into the application. Whereas with next gys, that's where you start pun nothing.

Speaker 3

It's worse when you bring like solid starts. They but yeah, I know you mean. And the interesting thing was, so this guy was saying exactly that, but he was saying, I don't even need SSR. All I want from start is just API routes and server functions because I want to have my essentially my BFF. Right, you're saying you're connecting to go, Well, what if those things don't have cores? Right, You're gonna need some sort of BFF to go between your your UI and your your GO services on the

back end, or clean up whatever. We've all done that sort of thing. It's basically middleware, right exactly. And so he wants the middleware ability but doesn't want SSR, which I thought was an interesting variant. So I gotta go check with the guys and see if there's some way.

Speaker 4

To like, you know, SSR falls.

Speaker 2

According to Tanner, that should be the basic approach. So for example, talking about and we're kind of digressing off of the original topic, but interesting so the way that so their their outlook or view on how to work with React server components. So for next thing, yes, everything starts at the React server component and the props flow down from their server, so the rendering always starts on the server and then at a certain point in time

switches over to the client. What Tenner explained is that in his approach, you invoke server functions. The server functions can respond with some data which you render on the client, or they can actually respond with virtual dam with JSX as it were, and then that gets directly rendered.

Speaker 3

So as the approach is not I don't think one that I was going to have that, but it's going to be a fast hopefully a fast follow up to like a one point one where you can return our basically r sse uh and then you've got like something on the client to basically allows you to say, cool, I got an RC payload and then convert that into VIDAM just drop that in and that's really really cool.

And I think that's actually like an interesting alternative to the next JAS model, and I believe that's what remix is going to do. At least that's what they demonstrated.

Speaker 2

Reactn Tanner indicated that he and the remix guys had similar a similar, apparently a similar take on how to do these things. Yeah, yeah, it'll be interesting to say. But going back to the topic at hand, So we so we were talking about the fact that you can use next gs as a replacement for Create React app.

I'm just going to say CRA because yeah, you can't use next js as a replacement for CRA, but you probably won't, and that there are a lot of organs you're going to use next gs as a next GS yeah, uh, and which is fine, but you know, and that there are a lot of organizations and so first of all, and there are a lot of people for whom they just want to play with React and for them, next

gs is too much, too soon. And there are a lot of organizations that just want to build a client rendered application, and for them, a full stack type of a framework is beyond an overkill. It's it's it's a it's detrimental to their needs. Yeah, they don't want to do stuff on the back end. They just want the JavaScript developers to do stuff on the front end.

Speaker 3

Yeah, And because if I'm here's a concrete example, if I'm building like a dashboard and I find some you know, I'm getting asked by product to put up some really cool graph and the only thing that I can find is this one obscure library that does this graph.

Speaker 4

And I'm like, yeah, great, awesome, right.

Speaker 3

And I drop it in my app in vat land or in create React app land. That's probably going to work hundred percent of the time. It's gonna it's gonna drop in there just fine. But if you drop that into a next app, and I've seen this quite a bit, actually, those kind of libraries might invoke or might hit document or window unconditionally as part of their setup, and those bang, those blow up an SSR because there's no document, there's no window on the server.

Speaker 4

And so now I've.

Speaker 3

Got this awesome thing that I can use, except that I can't because I'm a next JAS But I'm not using any of the features of next jas anyway, right, and so I any end up doing that lazy imports or craziness or whatever, or hacking your package.

Speaker 2

Or yeah, you can't assume just to say, you can't assume that the third party React up library supports SSR, right, you cannot assume.

Speaker 4

That even in twenty twenty five.

Speaker 1

Yes, true, So so I is, And I'm going to pull up another comment by our friend Burrott here who's on the live stream.

Speaker 2

But.

Speaker 1

He's saying, so, yeah, back end teams create the s APIs the front end and mobile, you know, so they don't want to deal with the server stuff, which makes sense. But is so is that the essential of what we're talking about here is whether or not people want to worry about SSR or deal with SSR or deal with the server on the back end. Is that the flexibility you lose with next JAS that you might get with something else.

Speaker 4

Well, next Das is going to push you to the ext to the end end game right away, which is here, you're going to do SSR, You're gonna have server functions, You're gonna have API stuff, even if you don't need or want them, you're going to have them, and you're going to have to play in a compatible you know, sandbox because of those decisions that we made. Whereas the unless a hard shift to.

Speaker 3

Tan stack here, So tan stack actually has a much smoother migration from going a full on just spa app that has a router in it. So you can have multiple pages, milk pages or routes whatever to a file based writer where you define those by file names and

it gets a lot easier. And then into start where you can start to add API requests and AAPI endpoints and server functions, so you can actually kind of as you as your application grows up and starts to need that stuff, then you can start to bring those things in. And if and if we can disable SSR, it's even it's an even smoother ramp because you can still have those kind of funky libraries and stuff, but now you can also still have a p I, n points and server functions if you need to have those.

Speaker 4

So yeah, so, and I'll.

Speaker 2

Say it again. If you're building an e commerce website, you you must have SSR, yeah, because otherwise you won't rank well, you won't perform well, and overall it'll be a bad experience for everybody all around, your users, yourself and whatnot. If, on the other hand, you're building a dashboard in front that that say even requires authentication, and it's in front of all several back end services, there's a good chance that you just don't need a CISAR.

You don't want a star a SESAR will just make your life harder and get in the way.

Speaker 4

Yeah, exactly.

Speaker 2

So and with next yes, you kind of don't have a choice. You can't just saw whether you like it or not.

Speaker 4

Yeah, exactly.

Speaker 3

And here, like I was working at Nike for a long time or three years, and yeah, our front end teams they all use next JAS. It was all SSR, and then our the teams would manage the CMS stuff, which we all we drove the whole product catalog as a content management system.

Speaker 1

Right, those are all one.

Speaker 3

Hundreds and SPA hundreds and SPA you know, all the authors, SPA, all the all clients side requests, they went through their own little BFF.

Speaker 1

But yeah, so just to clarify because I'm liking kind of the incremental Yeah, they we're going to add this feature. We're going to add that feature, you know, right, And so yeah, if you would never get to the place where I have to have SSR, right, it's not public on the web, it's not going to get indexed by Google, right then, Yeah, it's nice to have the option, But it also seems to me that if I'm starting a new application, a lot of times I don't want all

of the bells and whistles in there. I want to just kind of explore and figure these things out, and then what you're saying is, then I can turn around and say, Okay, I know that this app does need SSR, right, it is going to be public facing. You know, maybe it backs up onto Shopify if you're doing e commerce, or it backs up onto and I've seen people do this right, or it backs up onto some headless cms, right. But I'm thinking, you know, I do need some of

these other features. Then I can pull those in once I've kind of gotten the shape of the app figured out, and I can approach it from that end without complicating it with all the other things that, yes, something eventually need, but right today, I just need to figure out what this thing even looks like.

Speaker 3

Yeah, exactly, Yeah, totally yeah, And that's that's what we're trying to do with this create ts Router app. So we were saying to folks, cool, you know cra is now deprecated, and literally you know, that was on Friday from the team, and then on Monday we dropped this

create ts rider app. And the idea is it'll give you exactly the same content in the exact same locations, except that it's built on top of VAT and tan sac router, so off out of the shelf you get a router built in, which is what a lot of people want to add almost right away to their application.

Speaker 2

So basically it's compatible with create React app in the sense that it's a CLI tool that it doesn't require anything on the back end. What's just totally front end. I think even much of the command line options and switches are the same.

Speaker 4

As exactly the same yep.

Speaker 2

Yeah, And it creates the essentially the same or very similar or as close as possible, the same file structure.

Speaker 3

Yeah, exactly exactly like the app like app dot jsx file that they tell you or app dot tsx file isn't exactly the same location. It has exactly the same contents. It just happens to be like the main. There's also like so the source app, which is your your component, and then there's source main, which in the original CRA was basically a little thing that did the you know,

the render root and all that stuff. This one just adds in tansack rider into that and then makes that the app your home route.

Speaker 4

Yeah.

Speaker 2

And uh, also, instead of being built on top of what packet's built on top of VAT because we are in twenty twenty five.

Speaker 4

Right exactly, no more nightmares.

Speaker 3

Yeah, and everybody literally like that was a lot of the reaction to all the stuff that happened with the deprecation of Cray and then the follow up blog and the blog, and then also the documentation that basically says, you know, it kind of alludes to like you can use VT, but our recommended thing is you use a framework, and the frameworks include next Day, Yes and Remax.

Speaker 4

But I really felt bad.

Speaker 3

I knew that, like there would be a massive pain point here for folks that were trying to learn or just expecting that, you know, their workflow was, Hey, I'm going to spin up a SPA. I'm going to use create React app. I no, it's not the greatest, but like it works for me. I need a replacement and that. And there was nobody who is coming out with a replacement like that, and so I was like, cool, let's deal it with es Rader because it's.

Speaker 2

A good thing. We literally had this exact situation where I work. We were starting a new relatively small project React project that had these essential requirements, and I literally and I kind of told them, hey, you know, these are the technologies you need to use. You need to use, VT, you need to use and so forth. And I literally came to them and said, hey, there's this new tool that dropped. It's called create ts Router app CTA.

Speaker 4

Use that called action.

Speaker 2

Yeah, and literally, and you know why messed around because they were doing VAT directly and they ran into all sorts of issues. And of course they immediately ran into the problem of of hey, which router are we going to use and how are we going to configure it and whatnot. So I said, hey, you know, just use this.

Speaker 3

Yeah, so right away we supported multiple ways you could do routing. So there with CRA, you have this like you give it the name of the app that you want, you know, app, my app, my dash app order, and then you can optually give it a template and that temple would be either would generally be typescript that will give you the typescript flavor of CR And so what we did with CTA is we have it so a template you could say typescript and get exactly the same

kind of deal. But you can also do template as file router, and we would give you a typescript app same thing, but defined using routes with a file router, So if you wanted to start moving towards a file routing setup, this is just a really nice segue into that.

Speaker 2

So the file router basically means that the router automatically matches your directory structure in terms of the pages that you're using.

Speaker 3

Right exactly, you get like a sourcelash slash sorts slash source slash routes, and then within that all the files and directories define the structure of your URLs, and different routers do it different ways. You know, next JS has their syntax for it. It varies between pages, Rider, nap Writer, Remax has like, I don't know, like three different ways you can do it, and TS writer has a couple of a couple of flavors, but they're they're fairly similar.

Speaker 2

So for those of our listeners who don't know, again, I highly recommend listening to our episode that we did with Tenor Lindsley at the beginning of the year where we talked that length about TS router and why it's so great. The thing that makes it so great is that it's type safe, yes, which means at the simplest level means that if you put in a wrong route, you'll get the reds quickly, yeah, telling you that, and you'll get automatic completion for routes and it just works

and taking it to the next stage. It also gives you type safe URL parameters or querry parameters, so you can actually store states safely in the URL itself, which is I think awesome because that means you can actually copy the URL and send it to somebody and they will be in the same place in the app. That you don't just share the app, you share your state in the app, which is super useful.

Speaker 3

Yeah, And so one of the really really in kind of building on that, last week we released a tan sac rider for Solid that exactly yeah, exactly the same API surface between the two. Uh you know solidifide I guess, so I guess. And then this this week we actually released a CLI update, so create cus Rider app got better. So now you can actually give it framework Solid as part of the command line and it it'll actually build a Solid app with exactly the same contacts, except with

a spinning React logo. It's now a spinning Solid logo, but pretty much the same thing. And then it also has two other really cool new features, ones called add ons that will allow you to add on things like centry and clerk and tan stack state to our store to manage the state management tandstack query everybody's favorite, React Query, a bunch of integrations which is really cool, and then also some really cool and a cool AI feature.

Speaker 2

By the way, I don't know if you do this or not, but you should when you give the people, when you give developers the option to install ten Sta query in parentheses, you should probably say React query because that's the way a lot of people still know it.

Speaker 4

Yeah, I know.

Speaker 3

Actually, like as a description when you're when you're going through the kind of there's you can either go uya the command line or you can just kind of just get it like a full on like experience or that we prompt you for the name and all that, and when you kind of glide over it in that section, it actually says, you know, it's reacting, it's rec query, So I.

Speaker 4

Know what you mean.

Speaker 3

Though it's weird things like tanzac query, but it makes more sense as you start to think about what Tanzak is trying to do, which is to have like a cross platform set of libraries that work across like react and solid and view and all that.

Speaker 4

It makes more sense to them for sure.

Speaker 2

By the way, you should add another option right now, which is react scan.

Speaker 3

I think, I know, I know, I was gonna I was gonna do a fast follow this morning and that reacts.

Speaker 4

It's really cool. Aiden's doing something aid.

Speaker 2

On the show recently as well. Yeah, if we're having all the cool people on the show, and we really need to get Ryan Carniato on the show again.

Speaker 1

Oh yeah, I need to get Ryan back for sure.

Speaker 2

I've been speaking with him. He's kind of busy, but I'm sure we'll find a way.

Speaker 3

I gotta say, we're getting a little bit of a PNW brain trust up here, got Aiden, you know, starting to get.

Speaker 4

Some some cool folks coming up with the PNW.

Speaker 1

Yeah right. Ryan's always busy, but he's always such a delight just to talk to.

Speaker 3

Oh my god, he knows everything like here't like gone into like every single framework, understands like in detail.

Speaker 2

Yeah, oh yeah, mister he's the CEO of Signals and mister Frameworks.

Speaker 1

Yeah. I did want to kind of ask about with create, tan Stack or ts router app man, I'm going to trip over that every time I.

Speaker 4

Say, I know, wish we could get that create tansec app, right.

Speaker 1

But so so just kind of walk me through. Okay, you know, looking at stuff, I decide this is what I want to use, Like, well, what's the experience it's like as I build my app? Right, So I just use the command line to to create the app and then you know, I advance. What does that look like?

Speaker 3

Yeah, so the command line at this point is a straight just builder, and then it's passive.

Speaker 4

It's gone.

Speaker 3

You know, you're you're on your own at that point to add new stuff if you haven't. So that's why I kind of added that ad on stuff is we wanted to just make it really easy to just like set if you're in a new shad CN for example, right, so many people want to do that. I just wanted to add an ability to say, hey, I want chatsy in and an automatically installs tail end automatically installs chatsy in and gets you up and running.

Speaker 2

And which you also need to say which set chatsand components you want to use?

Speaker 3

You do that later, you'd say, you know, and you use their CLI to add components. But the app that you create is compatible with their their gotcha, although it is the Canary build because the appzon Tailwind v four and only the Canary build of Shatsien is U currently supporting that.

Speaker 1

Yeah, that's another person we need to get on, and is we need to get what's his name from?

Speaker 4

Oh that?

Speaker 3

Oh yeah yeah yeah yeah yeah right. I feel bad I'm forgetting this is real fun. I talk with him over at rayt Comf's he's a hoot.

Speaker 1

Yeah yeah, but uh yeah so so so literally I it it kind of auto rejects you to use the parlor.

Speaker 3

Yeah yeahct A lot of a lot of folks are like, oh, it's by default ejected.

Speaker 4

I'm like yes, yes, so so.

Speaker 1

Then I decide I want these other things, right, So it's like I didn't put in tense dea query now and so now I want it. It's pretty easy to just add in and it just is happy.

Speaker 4

Yeah.

Speaker 3

I mean you could if you wanted to just see kind of how it's done, Like you can go and spin up another app and another dripory and add that in and be like, oh, okay, I see where it's It's basically two files. And then what we do is this is actually kind of it was driven my knee really.

But when we install something like React sorry with reactquer or tanse querier, however we want to say it certainly, we do the INFRASTARFF, which is to go and build a provider, build a client, and then put the provider on it. But we also build a demo page so you can see how it's used in either you know, React or Solid. But everything that we do that's a demo. Anything will go and put demo in the file name

and that way. Later on if you're just like, hey, I would just want to sweep it out of my app because I don't need that, then you can just literally like do a fine demo star x r XRM and it's gone, and you know you could you have to like, you know, change it to the routes are you know, like header just room from a head or two. But it's very very clean. I want to make sure that like as we added like boilerplate code in it was it was identified solidly as like this is boilerplate.

Speaker 2

Oh yeah, that's that's awesome.

Speaker 4

Yeah.

Speaker 3

I hate it when boiler plates are like the kind of integrated all over the place and it's like the mass.

Speaker 2

By the way, one more point about ten stack router. I believe that in most cases you will want to use the file bass file based routing. Is that correct?

Speaker 3

Yeah, it does auto splitting of bundle splitting, so that's a nice advantage right there.

Speaker 2

So unless you have a good reason, that's the way that you should probably want to go.

Speaker 4

Yeah.

Speaker 3

Cool, it's not the default because of the CRA connection, and that's wanting to like really give you that CRA experience out of the box. But I would strongly recommend starting with a fire Runner. But it's not a hard migration literally it is, you know, it's a couple of lines that can fig and then just moving some files around.

Speaker 2

Yeah, but why not start the right place? Yah?

Speaker 4

Yeah, for sure.

Speaker 3

But I'm just saying, like, it's not like you're stuck if you if you create like a code runner app, you're not stuck at that. You can you can actually work your way up the chain, which is not going back to that jazz thying. That is not an option there. It's like you kind of you start at the end and to start the most most advanced setup for sure.

Speaker 1

So one thing I'm wondering is it seems like you know, you're talking about it like you're contributing to create a ct I'm just going to say CTA, and then I market lost. You know, you're you're contributing to CTA. You're pretty involved. You know, you've got some courses. So what's your relationship with with tan Stack? Are you working for them or you just a fanboy or you know, I contribute to whatever or yeah, I'm just curious, like where where do you land here?

Speaker 3

It was a new Year's resolution of mind to get more intimately involved in open source. Like I was noticing as I was going from a conference conference and you kind of get like the influencer folks and the talkers, and then there was the OSS folks, and I'm like, I kind of groove vibe more with the SS folks and I want to be part of a project like that. And the one the project that spoke to me was

was tan Stack. So I started, I guess, yeah, really just in beginning of the month, it'd be kind of like, hey, Tanner, you know, can I can I contribute on this? And He's like cool, yeah, you know, we got some docs. So I went through the docks and all that, and then it really picked up when on I Guess Friday a couple of weeks ago, I was like, Okay, we need a replacement for a CRA that gives you a CRA style experience.

Speaker 4

And I pitched it to Tanner and I'm like he's like, okay, yeah, build it.

Speaker 3

And so literally I built it in like one dot O or it was zero dot one in like three hours and then he's like, that's awesome, let's go and and that that's it. I mean basically I was working on it pretty much almost full time last week, which is probably not great because I don't really get paid all that much. But yeah, like adding the it was really fun. Adding in that add on stuff, the AI integration, that was really fun.

Speaker 4

You know, our kids out of school, she's you.

Speaker 3

Know, they're off on their own, you know, an apartment or whatever, and you know, she's got shows to watch and everything. I can just like hang out code and I actually I'll code a lot when we're watching TV.

Speaker 4

And I was like, wait, a suit are these people again?

Speaker 3

Like you have been you have been paying attention, you have no idea who cares?

Speaker 2

Like whatever, Now what does Cita built on?

Speaker 4

By the way, what do you mean?

Speaker 2

Like like you quoted it. What did you code it in?

Speaker 3

Well, it's typescript, it's a node package. It's it uses Commander for the art processing. It uses uh clark for prompts. It seems to be the new hotness, and I agree because it is.

Speaker 4

It is really cool. Actually, it's really great. It uses e j s for a lot of the templating.

Speaker 3

So we we have a lot of like templates where our files like depending on the combinatorics of what you've asked for code router, file, router, you know this and that, tailwind versus not versus.

Speaker 4

You know, all that kind of stuff.

Speaker 3

We need like special like changes in the actual like code that we write, so we use EJS for that. And then just recently I added the MCP stuff, so the MCP server and then also express.

Speaker 2

So yeah, so you mentioned MCP, and I think that's a really cool thing to talk about.

Speaker 4

Yeah, I'm really psyched about it.

Speaker 2

So I don't think you know what that is chuck.

Speaker 3

Nope, Okay, Well remember TRON it's the Master control program, not just Actually I thought that was one is when I first heard it, because I remember like way back, I don't know, like late twenty twenty four Anthropic came up with this idea of this model context provider. So it's a standard that you can write to and there's two different protocols and I'll get to that in a second, that you can then give claw. At the time, the Claude desktop was the only thing that supported this.

Speaker 4

But you could tell.

Speaker 3

Claude Desktop, hey, cool, I've got this MCP server over here, and that MCP server will give you a set of tools and then anytime then they're self identifying tools, and then anytime it wants to do something like you maybe give it a tool for like change the hue lighting my house, or you know, make coffee or go through this file system. Actually, most of it was like database integrations early on was like kind of okay, here's here's

a bunch of tools for a Postcrest database. Yeah, I can list tables, I can run a query all that.

Speaker 1

Yeah, and playing with building tools. I just didn't know that.

Speaker 4

Yeah.

Speaker 3

So the packages up those tools as well as resources and a really nice interface.

Speaker 2

So a question about that, So is MCP mostly about exposing capabilities or is it mostly about expanding the model itself, like with domain specific knowledge that might not be contained within the model B.

Speaker 3

The latter, I would say, yeah, so expanding the reach of the model usually into your own Yeah, your own space, because you're running the server like literally on your own machine, and so it's actually like it has access to everything inside of your intrenest So the.

Speaker 4

Model, maybe not Claude would have access to obviously.

Speaker 2

So the model was original. Sorry Chuck, just one second because I need to I want to better understand this. So the model was essentially trained on some global data whatever. But you want to ask questions that are pertinent to your data. But obviously your data is not part of the model. So MCP helps you do that by you expose your data to the model through this API. Obviously it's totally private because your data doesn't become part of the actual model. It's just an extension to that.

Speaker 3

Exactly, yes, one hundred percent. And the way that you do that is you give it tools, which are really just functions. Those functions can take parameters, right, and so you had two different ways of doing this in the past. You had the used to be that you just create a massive system prompt like hey, I want you to give product recommendations for our products, like you're an e

commerce company. You take literally all your products and drop them into the system context and be like, here are our products when you recommend them.

Speaker 4

Here they are.

Speaker 3

But let's just say that you've got a massive product catalog, Like how do you handle that?

Speaker 4

Like, so what you're doing. You could give the AI a search tool.

Speaker 3

Hey, given these parameters, you know, uh sneak your size or whatever, you know, give me back a list of products, and then it's it's a much better communication with the AI. The AI can then go, oh, okay, I see if the person wants like size eleven shoes for running, I'm going to run your search tool, and you're going to give me back, Jason with a list of products, and then I'll be able to get then go and give them recommendations.

Speaker 1

Yeah, it's in the AI parlance, what you're talking about is retrieval augmented generation, and so essentially, yeah, it's smart enough to be able to retrieve the data and then essentially augment its own response with what it got or what it retrieved from from the other end. But when you're talking about tools, a lot of times too, it's here's a function to update my Google calendar, or here's a function to send an email or and so it's both.

Speaker 3

You can make when you're talkings and you can also do queries right right.

Speaker 1

And so yeah, I mean, you know, and there are other RAG tools, you know, but yeah, this is one way of doing RAG. But it does both. You can add capabilities as well. So if it can touch an API somewhere, it can make things happen. And that's what you're talking about, like with your hue lights or your your other home automation stuff or you know, stuff over the internet where you need to make things happen. It's

not retrieving data necessarily anymore. It's actually causing an effect somewhere and doing anything.

Speaker 2

And MCP is basically a standard way to achieve this functionality.

Speaker 3

Right, So there's two different methods that you can use for building MCP server or communicating the protocol underneath it would be two different kind of transports.

Speaker 4

One is.

Speaker 3

Standard io, so basically you run this app and then you start you know, literally standard in. You give a Jason Blob saying this is my request for a tool or whatever, and then standard out it responds with whatever the data is, which is cool up to the point where you're like, wait a second, how do I actually, if I'm writing my MCP server on standard Io, how do I debug this thing? Like I usually use standard

in Standard out for my debugging. Like so you know, I guess you you know you're limited to standard or something. But like, I just find that kind of Jankye I've never been, like you a huge fan.

Speaker 4

Yeah, all right exactly.

Speaker 3

And then the other way, what I think is actually a little bit cleaner is they have an SSE transport or service service set Events transport, where you're basically running a server. Now you have a ur L and the well clawed desktop if that's the MCP agent that you choose to use, would then connect to that URL and then you can talk via a continuous connection using service set events.

Speaker 4

Yeah.

Speaker 3

I that one a little bit better, but I think for a lot of folks, the standard Io version it is nicer because then, like claude to be just it will just run your app or your little command line app for you handle all that and then kill it when it's done, that kind of thing, Whereas if you use the SEC approach, you actually have to run a server and then you give it to you r L.

Speaker 2

It's basically you're building a note you're using note.

Speaker 4

Yeah yeah, yeah yeah.

Speaker 3

So in this case, So the the fun thing we did with create ts writer app was now you can put dashdash MCP or now even this morning damage dash MCP Dash SZ and it will run an MCP server and then the tools that it gives the the MCP agent the thing using MCP are things like create a tansec writerer app and list all my ons and all that. And so if you've got an ID that is integrated, that has MCP integration, and nowadays wind Surf and z

and Cursor among amongst them, all have MCP integration. Cursor in particular has integration for both sc and also standard Io. I think winsurfhone supports standard Io, and I don't even know what Zed does. I don't mean whatever they get to like a rust thing for it. I'm like, I don't need I ain't got time for that.

Speaker 4

But it works conceptually, it works, but it's really cool.

Speaker 3

So basically what what what you can do now is you can go into your Cursor, bring up the agent mode panel and say I want to create a TAN sac ruder app and it should you know, do tic tecto or whatever, and you can literally see it, like it makes the calls to ask for you know, what are my capabilities, and makes the call to make the app, and then it starts editing the files in place, and you're like, dang, this is like v zero but like in my cursor, like it's just right.

Speaker 4

I don't even have to leave. I can just go make apps right away.

Speaker 3

And it's funny because like, yes, it is teaching it like new tricks, like the old Claud doesn't know about tan stak, the old Claud doesn't know like mpx A. Like when you try it up add shad cyn components, it still tries to use shaddy and dash y because that's what it is trained on, even though now we use shaddzy n.

Speaker 4

Thank you for that, even though you might say same command, but whatever.

Speaker 2

So within let's say cursor, you might say, give me a new React application called such and such that has these pages using tailwind using shad c N. I also need a single sign on and I want to deploy it there. Yeah, and enter and it.

Speaker 4

And start building it out. Yeah, it's really cool.

Speaker 2

And it opens within cursor and you're ready to go.

Speaker 3

Yeah, it might even work. I mean you're already in cursors. So, yeah, you created an app within within your exacting with your system. Yeah, and it actually it has a decent chance.

Speaker 4

Will work it.

Speaker 1

Yeah, I've just found the AI models. They're getting better, but they're still kind of hit, hit or miss sometimes. So but it'll get you a waist down the road at the very least. Right.

Speaker 2

Yeah, But in this case, well, you can either tell it and have the app do this such and such, in which case it will start writing the app. Or you can just get the basic skeleton and you've avoided dealing with command line switches.

Speaker 4

Right, and then you can continue on.

Speaker 3

You can create another session with the agent and say, well, now that my apps set up, now go and add this and that and the other thing, and it'll it'll start doing that.

Speaker 2

Cool.

Speaker 4

Ye, it's really cool.

Speaker 2

It's very cool. Yeah.

Speaker 4

And I was kind of surprised by that one too.

Speaker 3

It's like there's been two things where they've done stuff that I was surprised that other people haven't. The one was, you know, CRA being deport Like, why didn't VAT come up with a template that was a CRA template?

Speaker 2

I don't even know, Like, well, I think I told you I think we talked about it. I think the main issue that people forget is that VAT was created by uh Avenue evenue and avenues about view.

Speaker 4

Yeah, but you.

Speaker 3

Know there's marketing, right. I think that a marketing is underplayed in our place. So particularly when folks who are building their own libraries and stuff, they kind of think that like the tech is everything, Like I'm going to make this awesome library and it's going to do some amazing stuff, and people are just if you build it, they will come kind of thing, and no, you actually have to market stuff, and so understanding marketing opportunities is

really important. And when I saw like that cra deprecation, I'm like this and in fact, this is the words that I told Tanner. I'm like, this is a moment. You you've got to get after it. In that moment. And when people are starting to talk about what do we do, it's like, Okay, instead of just saying use an extras, which is kind of loomy tunes, no.

Speaker 4

Here you go.

Speaker 3

Here's here's a viable solution that has exactly All you need to do is change one word. Instead of create react app, you just say create tst router app and you're good to go.

Speaker 2

And are you seeing adoption?

Speaker 1

Oh?

Speaker 3

Yeah, yeah, we saw. I think the original solid router create module is at ten stack slash create router, and I think it had when I looked last time, it was like fifteen hundred downloads per week was its average.

Speaker 4

And this tool.

Speaker 3

Create test Router app in its first week had about eighteen hundred.

Speaker 4

So that's great adoption. That's that's like right off the bat, right there.

Speaker 2

So right off the bat you more than doubled it download.

Speaker 4

Yeah.

Speaker 3

And now the cool thing is because we added Solid and Ryan Carneado came in and said that now this is his like he this is the builder that he's been waiting for, Like now we're going to pick up the Solid folks too.

Speaker 4

And I'm digging it. I think this is really great.

Speaker 2

Yeah, for sure, that's really awesome. What I wanted to ask something some one of the.

Speaker 4

Most popular open source things I've ever been involved in. So I'm really.

Speaker 3

Happy that like the first time I went to the plate, you know, I swung and got a yeah, maybe a double or.

Speaker 2

It's all about it's all about the timing.

Speaker 4

It is, it really is.

Speaker 3

I think the last time I hit something like this was the compiler. The React compiler came out. The team gave me access about a week before it came out, and I spent that week like actually like trying it out, building a video around it, and that that video did super well because it was kind of like it dropped on the day that it was released and folks are like, oh, this is my In fact, I think even Prime was like, this is the official release React video.

Speaker 4

Like no, it's not, but like whatever.

Speaker 2

Let's also you know, you just make awesome video. Excited before I said it again, I really enjoy watching your content.

Speaker 3

I released one about reac scan first thing this morning, so go check that out. Because Aidan's doing some amazing stuff.

Speaker 2

Oh yeah, like I said, we actually had him on the show.

Speaker 1

Is that on the YouTube channel?

Speaker 3

That's not like, yeah, that's on the Blue Collar car or Jack Harrington YouTube channel. And yeah, actually just yesterday he released a news zero dot two version that has some really cool stuff in it.

Speaker 4

It's got able to.

Speaker 2

Do, like it's funny. So I was speaking with him on the show and I was telling him you should do this, you should do that, and he was like, well let me. I'm taking notes. So I'm wondering if some of my suggestions actually made it into this new version. I need to go and check it.

Speaker 3

Possibly one of the more intriguing ones, and maybe this was a you thing, was that now it will actually build a prompt that has all the information that it has about like why this is re rendering or whatever, and then you can literally take that there's a copy button, paste that into a claud or chat GBT and maybe.

Speaker 4

Claude will help you figure it out, like why that's happening.

Speaker 2

I didn't suggest that, I just basically anyway. I basically suggested that within the tool you could click on things and get additional information.

Speaker 4

Oh yeah, no, you can never do that.

Speaker 2

Yeah, so previously you couldn't.

Speaker 4

Well there you go.

Speaker 3

Yeah, now you can like lock into a component and see why is that and then force a whatever whatever it is, to force a renderer that you don't want, and it'll tell you, oh, the reason that particular component is re rendering is because this hook you know in there fired and that is just super cuock, super handy.

Speaker 4

Yeah.

Speaker 2

Yeah. Well, to be fair, this information was previously already available within the React tool developer tools, so it's not like you couldn't get at this information before. It's just that Aiden is making this information much much more accessible and more actionable as a result.

Speaker 3

Yeah, and now it's also he's into slower components as well, so it's not just avoiding excessive rerenders or unnecessary rerenders, it's also hey, your FPS dropped, and now we can actually tell you why it was this component it was taking It was really you know, taking too long.

Speaker 4

And yeah, that's it's just great.

Speaker 2

Very cool. Like I said, we had him on the show. I recommend our listeners checking that episode out as well and also looking at your video. Yeah, uh, I wanted I wanted, Oh I wanted to ask you. I now remember what I wanted to ask you. I'm just curious, what's your own personal idea of choice these days.

Speaker 3

I've just recently switched back from Windsurf to Curser and that was primary around the MCP integration. The MCP integration into Windsurf just was a little kind of janky, like it is just like literally if you got the config file wrong or your server or your MCP server fell over, you just get this like blank white panel that was like.

Speaker 4

Boom, couldn't couldn't you couldn't deal, you.

Speaker 3

Know kind of thing, and the MCP integration into a cursor is at least marginally more robust. But you know, I gotta tell you, like, I've been talking to the other folks about this, and it's like I just don't get, Like I understand as an investor why these companies.

Speaker 4

Would want their own IDEs.

Speaker 3

But from a technical perspective, these could just be plugins and the codium was just a plug in. Everything is there, But like, is it just that your investors are like, come on, man, I'm going to give you one hundred and fifty million dollars if you're not going to build an app.

Speaker 4

Well, yeah, do you really need to fort real coe?

Speaker 2

Yeah, that's that's an interesting question. Whether there's anything that they do which could not have been done.

Speaker 4

Which I actually think yeah, and I actually think the integration is poor.

Speaker 3

Like, as an example, like the whole setting system in PS code I believe is extensible, and yet if I go in a cursor, they've got their own additional setting system which is totally non standard. It doesn't actually show up in the command panel. You can't like say bring up command shift P and then say like add an MTP server they don't integrate at that level. It's just kind of like this kind of like not particularly well integrated integration, and yet they've forked vs code to add it.

Speaker 4

I'm like, good.

Speaker 2

Well, to be honest, I'm still I'm still using vs code and I'm hardly even using co pilot.

Speaker 3

Wow, okay, I'm old school. Yeah, i'd us lately and I've been pretty happy with it. Yeah, the tab stuff, the tab when then when when Curser came out with the tab completion, that was.

Speaker 4

Like, whoa, that's next level. That's what.

Speaker 3

Well, So as you're as you're editing, it's trying to figure out what you're doing, and then it just literally says, oh, I got.

Speaker 4

A completion for you. Hear it.

Speaker 3

Here's kind of a preview of it. Hit tab and you'll get it. And it just seems me like spookly good and understanding what I'm trying to do, Like if I'm changing I don't know, some like I'm adding some demo data or something like that. I'll add like one example and it'll be like, oh, here's five more.

Speaker 2

You're like, I wish, I wish, I wish I was writing that amount of code right now I'm the current I think I told you that the current project that I'm struggling with is trying to add Typescript into a huge legacy web application and it's really tough going for me.

Speaker 3

Well yeah, but you beave a surprise like if you're if you actually, like you mentioned in this and I mentioned that, like you probably want to extricate the code into its own package and then upgrade it. But like if you're doing that, that kind of work of like, oh, I've got these fifteen functions. They all take the first you know, they all take a parameter which is I don't know, whatever options or whatever is their first parameter.

You fix it on the first one, and it's like, hey, if you hit tab, I'll just fix all other furs for you.

Speaker 4

Do you want me to do that?

Speaker 3

And you're like hmm, well yeah, I guess, like just do for me what you've got.

Speaker 4

Yeah, exactly. Yeah, that's the thing.

Speaker 1

The other the other thing I've seen is like if I'm changing the name of a function or a method or yeah, change the signature or anything like that, it goes in and it says you want me to fix like everything that uses this. I mean, it's like hmm.

Speaker 3

Let me think about that second. Yeah, well, yes, yes, you could do that for me. And it's just it's like it is, it is the co pilot that you wanted. Yeah, it's just really good for that, really really good. Yeah, and it is fast, like I was actually talking to behind this. And so there's the side panel that uses like clawed or deep sea or whatever and does my almost ever touch that, to be honest, rights, that's when

you actually like the long sort of things. And then then there's a tab integration, which is at least on Windsurf it was their own custom l M, and I'm guessing that it's probably the same for Cursor and it is wild fast.

Speaker 2

Yeah, well there's a reason. And VideA is worth what it's worth.

Speaker 4

Yeah. I think it's running locally, I guess hmmm yeah, probably not.

Speaker 2

Yeah, but you still got to train the models.

Speaker 4

Yeah, that's true, that's true.

Speaker 3

Yeah, And as we saw deep Seek right on, one thing is training and another thing is actually you know, running it and being hyperperforming or cacheing and things like that, and so there's a lot of a lot of ground be made up to run it locally.

Speaker 1

Yeah. Well, and that's the chink in the armor the deep Seek exposed. I mean, if if they're what we've been told about it is honest, is that they didn't need the big fat GPU to do it or the set of GPUs. I don't know. But at the same time, if we can get away with training models without yeah, without that, then you know, maybe in NVIDIA isn't as valuable. But still, I mean, the things that we can do with AI these days is just.

Speaker 2

No, it's beyond it's beyond that. You know, we are Chinese attack away from AI being delayed by a decade. What I mean is if if China decides to go for Taiwan, oh yeah, there goes AI. Yeah, unless indeed something like deep Seek can work around the GPU shortage that will arise.

Speaker 3

Yeah, that's why we needed the Chips Act was to go in. But the probably, yeah, the fabs are the issue. And then a fantastic book that I read last year I think called chip Wars, which is all about like the evolution of the chip and the fact that we now live in this amazingly fragile ecosystem where there's literally one country in the world. I think it's like Denmark where they build the uh the machines that are capable of actually like doing the printing on and the lithography.

And it's literally that one company like nobody else in the when the world mixed up.

Speaker 2

You know, we're totally digressing. But yeah, you know, it's shades of the Bronze Age collapse. And you know about that what the Bronze Age collapse was. No, so back in like the twelfth century BC, the entire they had this very sophisticated ancient world. You had Egypt, and you had the Assyrian empires and Babylonia and the Hittites and whatnot, and then it all collapsed within within uh something like a century, the whole world more or less came crumbling down.

The Minoa, the Mycenean me know, and Mycenian cultures for example in Greece they died. It took four hundred years for them to get writing again.

Speaker 4

Wow.

Speaker 2

So yeah, it's like the full.

Speaker 4

Copper.

Speaker 2

No, it had to do with the sophisticated network of commerce that when when they started to fall, they felt like dominoes. So so basically, you know, you think about the modern world where everything is interconnected, where like a pencil gets made in like parts with five different countries or something like that. You're thinking, if you pull one country or one domino, one falls. If it's sufficiently large domino at least the entire system, can you know, collapse.

Speaker 4

Yeah.

Speaker 2

Anyway, we totally digressed going back to CT are You're still You're you're still So we talked about this fantastic AI integration that's built in. So now if you're using an AI by the way, you can't get this functionality within VS code with the Copilot. They don't have support for that.

Speaker 4

Yet, I don't think. So.

Speaker 3

I googled around for Copilot and MCP, and I didn't find that they had any integration currently. But I wouldn't I would expect. I mean, this is like an arms race here. You know, you got Microsoft going and they're they're constantly adding new stuff on a Copilot and kind of compete, so I would I think, Actually, Copilot does have now the tab completion and stuff, so I would expect that MCP wouldn't be far behind.

Speaker 2

Cool.

Speaker 3

I'm glad that it's actually like there's an awesome MCP GitHub as you usually have for this sort of thing, like with the list of all the potential servers and it's growing fast.

Speaker 1

The MCP environment. I did just quick Google search and I did find a vs code MCP server extension.

Speaker 4

Oh there you go.

Speaker 1

Well, so I don't know, I don't know how far that gets you down the road, but.

Speaker 3

Right because co pilot itself had extension has extensions, which was good, which was Microsoft's original answer pre MCP. So I wonder if they're putting this is like a shim to basically connect the githubs the co pilot extension mechanism to an m CP server could.

Speaker 4

Be Yeah, so good luck a bugging that one.

Speaker 2

What's what's the so, what's the version of ct A is it? Is it like it's well obviously or we were talking about downloads, so it's officially released, but what's the version around it?

Speaker 4

It's currently zero four two so yeah.

Speaker 2

So that counts as alpha beta.

Speaker 3

I would say that the I mean, the main part of it, like what just build an app is is fully released. That's that's cool. But the add ons and the AI stuff, I'm still getting some bugger I'm getting bug reports, which is great. Some folks are finding that

there's issues. I was running into one just this morning where folks are one part the chassy En add on actually runs the shadzy En in it as part of the setup process, and folks are seeing some issues of that, and I think it was primarily around like older node versions things like that.

Speaker 2

So you know, you know what, you know, what might be awesome if maybe it's already in your plans, if people could add add ons without having to involve you.

Speaker 3

Yes, yeah, So the long range thing here, there's two big things that I want to do that I want to go after, and I don't know if it's going to fit in to create ts rout or app or it's just going to be part of like something that's different. But the idea is to kind of work on the shadzy En model where shadzy En now has this thing called blocks and I've actually talked with the chazy and

guy and he's totally had more to this. But if you go to if you like, take a shadzy En app and or an app that has shedsy in it, and you say like mpx shedsy En at latest ad.

Speaker 4

And then you give it you could.

Speaker 3

Normally do like button or input or one of those, but you could you can give it a URL and that URL points to a Jason blob that has like all of the information, here's the files that you need to put in where they need to go, here's the package you need to add all that stuff. And I actually built an app that makes it really easy to

build these these Jason Delta files. But the idea is like, if I'm a clerk or whatever, I can just go and build like a start setup dot Jason file and then you just do MPX Chad cy N, here's my UL start set up blah blah blah, and it goes

and bo drops all those files down. It'll tell you if it's going to overwrite files, it'll add all the package of Jason stuff, it'll change all the CSS variables and everything, and now you've got an integration for I don't know, clerk or whatever it is, right, And I thought that, man, that's cool.

Speaker 4

That's really cool and.

Speaker 3

Does exactly what Dan was saying, which is basically it it opens up the door for anybody to go and make these add on templates, and that that was fascinating.

Speaker 2

So scary to an extent, you don't know where your template is coming from.

Speaker 3

Yeah, but I mean how many times I maybe you don't do this but like, how many times have you gotten instructions for installation that are like curl this ur l into my in my shell And it's like, ill, I don't know, right, right's a pseudo curl And you're like, I don't know what you're doing, but I trust you

and it totally gives me malware. But you know, at the end of the day, if you use get just you know, if you're going to do that, if you're going to say mpx chancy, and just make sure that you're on a clean branch right, like you're not, like there's no existing work or anything, and then you can just be like, well get status, like what.

Speaker 4

What did you change? And you can literally see like here I added this file here.

Speaker 2

That sand is a huge topic that's beyond the scope certainly of the time we have left, because I do have look, I really like the on the one hand, I really love the headless approach, oh yeah, But on the other hand, I'm really wary about the fact that it's literally embedding code in your project rather than taking the package approach, because then I keep thinking, what if a new version comes out?

Speaker 3

Yeah, have you looked at well one? They do have kind of a song for that. But two, have you actually looked at the code that it's putting in.

Speaker 2

No, to be honest, I have done.

Speaker 3

I think you'll be a lot better if you look at the code, because the code is really like in most cases, it is a very light wrapper around a rad x component that basically just says, here, use this rad ex component which is headless, and here are the classes that you want to put on it.

Speaker 2

And so the red x component itself is still an external.

Speaker 3

Component exactly, and it is and it is big, and it's doing all the work of all the ITN and or the accessibility and all the rest of it it. So it really is if you were to go and use like a rat X in your app, you'd probably be building these files this way. That's how I look

at it. And you know, again like so cool, like that whole infrastructure of blocks is so cool for like an infrastructure like I always look at like my past experience and like what would I do if I was using this at Nike right or at Walmart labs where we're working the past, and I've been on in for teams at those companies, and it is so cool that as in like a Nike can go and create like an internal GitHub repo that has those Jason files for like our version of a button and our version of

an input, and then instead of just doing you know, shad see in add button, you use shad c in add a r L for our button and you get all of our styling and all of our stuff as opposed to that, which I think is just super cool.

Speaker 4

Yeah, all right, so that's that's one thing we want to do.

Speaker 1

Sorry, I was just gonna I have one more question than I think when you to get a picks, but go ahead and finish with Okay, well.

Speaker 3

That that ability to have external templates and then also to do those add ons. That's what we'd be looking to do next when it comes to this tis routter stuff.

Speaker 1

So yeah, so you know related to that, and you know the things that you would like to do. So is version one dot ZHO just going to be a stable version of what you have now or is it going to include some of this stuff or there are other things that you want to see in it.

Speaker 4

I don't know, you know, I think it's stable as is.

Speaker 3

I know that like I guess one we could we could bump into one dot oh it's fine, but I I'm just enjoying getting feedback from folks.

Speaker 4

I think that's one of the cool things.

Speaker 3

We were kind of like before this happened, we were talking about that that Chadsia M block system and just kind of hypothesizing about it, and having done this has really helped inform what that needs to be, and it needs to be, unfortunately a lot more complex because you know, there's multiple ways that you can build an app in multiple places that code can go, and so it's it's really helping, like the existence of great test writer app is kind of helping inform the next generation of test

writer app that will allow this ability to create like public integrations or your own custom integrations, your own custom templates.

Speaker 4

I really want for people to be able.

Speaker 3

To say, hey, I've built my app, I've set it up the way that I want it. It's got all the stuff that I need in it. For any time I want to literally go and just like frost this as a template, and then next time I want to build an app, I just want to use that and the but it would be an active template where where the versions would change and that sort of stuff. So that's where I kind of want to get.

Speaker 2

To have we has Jack frozen for YouTube?

Speaker 1

Yes?

Speaker 2

Sorry, No, I do have one final question on my end before we go to picks Picks. By the way, just so you know, I remind you, I don't know if you had it when you were on on the on you know, the react ground up round. It's basically shouting out your whatever you want to shout out.

Speaker 4

Okay, cool, all right.

Speaker 2

So my question is about the deployment story. Uh, is there a deployment store, Like if if I want to employ deploy to Netlify or to versell or to a WS is that part of ct A or do I need the ten sax start for that? Like? What's the story around deployment.

Speaker 3

So Netlifi is a partner with Tansac and we have a pretty early days add on for Netlify in the package that basically just goes and kind of sets up adds a little bit of deployment information to the REMDIA. We didn't do all that much, but that's one thing I definitely want to do is start working with Netlifhi to see if we can strengthen that to the place where if you build a straight SPA that can be just statically deployed. Then we'll set it up that way.

And if you build a start app and then we'll go and set up your netle file so that it'll actually go and run a server and give you all that.

Speaker 2

Start kind of has it built built in, doesn't it?

Speaker 4

I don't think, though maybe it does.

Speaker 2

I think it does. I would check with tenor. I think one of the key things about meta frameworks or full stack frameworks is the deployment story. Oh for sure, you expect like three things from a full stack app, or maybe four things, depending how you count. You expect bundling, you expect routing, and you expect deployments.

Speaker 4

That's three things.

Speaker 2

Here four well fourth I was hesitant about the fourth.

Speaker 3

Yeah, okay, but I mean there's really two different things, right if you if you're building a static app, then and that is one type of deployment you can go and deploy out to S three or CDNs or whatever, and then there's another level of deployment when it comes.

Speaker 2

To That's why about SSR, because SSR is on the is like half of it is part of the bundling story and half of it is part of the deployment story, and half of it is part of the routing story. So there are three halves to SSR.

Speaker 3

But you know, I don't want to bag on again. I haven't a course for next JS. We would, you know, go check it out here into that and and it's great, and we do talk about deployments, but I guess say, the easiest way to deploy next JS is and probably always will be Brissel. And yeah, and if you try to deploy it on like a Docker or an s.

Speaker 4

ST, I mean it is, it's it's not easy.

Speaker 3

It's not easy, particularly if you want to really use the really like cutting edge features like the ISR stuff or any of that.

Speaker 4

It's it's a lot.

Speaker 3

Rom had a really good like video going through it, and it's it's not trivial.

Speaker 2

Yeah. Cool, Well I'm done on my end.

Speaker 1

Cool, Well let's do picks. Awesome, Dan, do you want to get a start with the picks.

Speaker 2

I'm really hesitant about my pick today. I'll be intentionally brief. I thought about talking more at length, but I'll be intentionally brief. Today was a really sad day in Israel. The country kind of stood still because today the was the funeral of the Bebas family. I don't know if you've heard about the story. I again, I don't want to go into the details because they're there. I don't

think it's appropriate in this context. I'll just mentioned that the mother and the two babies were murdered while in captivity, and the bodies were finally returned and today they were buried. Uh, and everybody. Basically a lot of people wore orange because the two babies wore redheads, and so they kind of were known for that, and the whole country just came out and you know, paid the respects and so forth. Yeah. Sorry, that's that's my unfortunate pick for today.

Speaker 1

All Right. I don't want to follow that, but I'm gonna.

Speaker 2

This is not this is not the first time I've been doing it recently. This has not been this is not we talked about this, Jack. This has not been a good year.

Speaker 4

Yeah no, yeah, I feel.

Speaker 2

Well, twenty twenty four was a really unfortunate year.

Speaker 1

Yeah. Yeah, I'm gonna go ahead with the card game first it. I need to just make a list so I know whether or not I picked these games, because I do a board game pick every time, and I'm not I'm not sure if I picked this one or not. But it's one that I played recently with some friends, and I might have picked it last week and if I did, or the last episode, and if I did, I'm sorry. It is the groundhog Day game. So if you've seen the movie groundhog Day, you know he who hasn't, Yeah, yeah right.

Speaker 4

My sister was born on your birthday. Was was a friend.

Speaker 2

We see it and then we go to bed, then we wake up and we see it again.

Speaker 1

Right, So, so the card game is based on the movie, and the idea is that you go through each day and you're trying to have that perfect day, right so that you can get out of the time loop. And the way that the way that the game is played, so Board game Geek waits it at one point too, too, which means it's a pretty simple game that you know, you kind of pick up and play. I could play with this with my you know, with my nine year

old and she'd be fine playing it. But you are out a hand of cards and then it's kind of everybody jumps in and plays when they think it's appropriate. So you know, there are no turns, they're just rounds, and you have gray cards which are worth zero herds. You have blue cards which are worth one heart. You have orange cards which are worth two, Yellow is worth three, and red is worth four.

Speaker 4

I'm guessing you get all the hearts to win and get a lot of hard Yeah.

Speaker 1

So to have the perfect day, you have to have all red cards on your day, and they're all numbered, and so you can only play a number that is higher than the last number played in the day. And there's seven cards in a day or six cards in a day, and so you deal out the cards and then everybody starts. So initially you're starting, you're playing all your gray cards or blue cards because each day has to be better than the last day in hearts, and so you know, and you can't talk at all about

what you've got in your hand. So we're ribbing each other, but we're not you know, we're not discussing the game. We're playing, me and my buddies. But anyway, so yeah, so that, I mean, that's essentially the game. Some of the yellow cards unlock red cards that get then get shuffled into the deck each round, and you get fewer cards each round. And so you know, every time we've played it, we've it's taken us five or six rounds

to beat it. I don't think we ever lost, but we're all experienced board game people, so you know, we did kind of discuss strategy before we started playing, but that was it. And anyway, it's a fun game.

Speaker 4

You're kind of guessing, you're.

Speaker 1

Trying, you're basically guessing, especially on the round where you want to start playing red cards, because you just don't play them until you you know, you think you have enough among all of you to play it out, but then somebody has to guess that everybody has enough and play that first red card. And so anyway, it was fun, very fun. It takes about twenty minutes. Yeah, so you just you know, if you're playing those those quick hit games, you know you're sitting in an airport and you're not

sure when you're gonna be done. It's a fun game. Or for us, you're right, we were just you know, we played like four or five times. It was really fun.

Speaker 4

Nice.

Speaker 2

By the way, speaking about the movie Groundhog Day, it's it's funny how many movies were inspired by that movie. Oh yeah, and and and you know, not a lot of them were necessarily good movies. But actually, actually one that was is Edge of Tomorrow.

Speaker 3

Is great yeah, thank you asking those two if they're going to ever make an Edge of Tomorrow Too, it was just such a oh I love that movie, and.

Speaker 1

Yeah, just just don't make a sequel. That's terrible that you're just cashing in on, because yeah, the movie studios do that all the time. And it's like, it's like, you had such a good thing and it wouldn't have been that hard to make another good thing based on it.

Speaker 3

Yeah, you know, the same be said of Done Too, though Two is phenomenal.

Speaker 4

I love that movie.

Speaker 2

Yeah, I don't know it was. I didn't get it two.

Speaker 4

Yeah, all right, part three when it comes out.

Speaker 2

Look, I tried to three. Yeah, yeah, I tried to watch the prequel series. Yeah, and I couldn't make it.

Speaker 4

The first Yeah.

Speaker 3

We went all the day throughism that it wasn't great.

Speaker 4

I'm doing freak man. I loved doing even I read I read the book.

Speaker 2

I read the books years ago and I loved them as well. I reread the book like a few years ago as well. So I really liked the lore. It's just that for some reason, by the end of I had few To be honest, I had like two problems with doing two. First of all, they deviated from the books and and that was hard for me. And the second thing was kind of, well, what was the point of all this?

Speaker 1

Yeah, that's where my wife came down on it too, but she hasn't read the books or anything.

Speaker 4

Yeah. I think three.

Speaker 3

Will pay it off, because what both Deni and also Frank Herbert were trying to say was don't fall in love with one of these these you know, kind of charismatic profit types, right that to that way.

Speaker 4

Lines doom and so don't do that. Yeah yeah, all right, but you throw down on some picks.

Speaker 3

I got too, and I think it can be real fast. So the first one is ghost t t Y. It's a replacement for the terminal on Mac.

Speaker 4

It's it's really good.

Speaker 3

It's really fast, and I think just recently they added support for shaters so you can put in a custom shader. It can be really fun. I was playing around. I added like a Matrix inspired shater.

Speaker 4

You know. It was really cute. So that was that was really fun. I'm really enjoying Ghosty.

Speaker 1

Is this a Mitchell hat your motto?

Speaker 4

Yeah?

Speaker 3

Yeah, yeah, yeah, yeah yeah. I just got a lot of money that guy. Chill out make make a terminal was my second pick.

Speaker 2

My second Oh man, so it's a replacement for it term and whatnot.

Speaker 4

Yeah, yeah, I mean, to be honest, I.

Speaker 2

Mostly run the terminal inside PS.

Speaker 4

I'm with you, I'm with you.

Speaker 3

Yeah, so I've heavily altered my my terminal with you know, the prompt and all that sort of stuff. There's actually I'll make that my second pick. There's another thing that you can do called I think it's like a transient prompt or something like that.

Speaker 4

I'll find it.

Speaker 3

But it's basically a switch where if you turn it on, then if you have one of those elaborate prompts that gives you like the path name and all that sort of stuff, what it'll do is as you enter a command and then go, it will essentially remove that and so you don't see that in your history, just repeated

over and over and over again. You just see command response, Man responseman response, and then you're a big ass prompt and then you know what you're currently working on, and at the moment that you hit enter, that big ass propt will go away and you'll.

Speaker 4

Just see like LS or whatever.

Speaker 2

It is.

Speaker 3

Interesting, Yeah, transitive transient basically yeah, essentially.

Speaker 1

Yeah, and that's in ghost or is that no.

Speaker 3

For me, that's in ZSH So that's in okay, Yeah.

Speaker 4

I don't know.

Speaker 1

Oh my the s h.

Speaker 3

Yeah yeah, and I use like I think, oh my posh to go and do my prompt.

Speaker 2

Yeah, I'm the same.

Speaker 4

Yeah all right.

Speaker 1

Cool. Well Jack, if people want to connect with you, find you on the internet, watch your courses they're.

Speaker 3

In there with go through the tubes. Well you can find me, uh primarily on YouTube. That's a great spot to go and check out all my content. And then of course I'm on blue Sky and X and LinkedIn.

Speaker 2

Blue Color Coder. How are you still using that Moniker kind of?

Speaker 3

I mean I like the Moniker but actually I was just throwing it around just recently, like should I get rid.

Speaker 4

Of it or what?

Speaker 3

And people are like, yeah, it's okay, but I mean it's in like the banner graphics and stuff like that. But I don't really it's not the name of the channel, but I think if you if you do Google for it, you will find it anyway. I'm also Jhard at dev that's you know whatever. Yeah, I'm around and you know fairly.

Speaker 2

I said it before, said it again. You know your stuff is awesome and everybody should be watching it. I've learned every time I watched one of your videos, I've learned something.

Speaker 4

There you go, thank you.

Speaker 1

All right, well we're gonna go ahead and wrap it up here.

Speaker 4

It's been a real pleasure, guys. Thank you. It's good. It's been great to be back.

Speaker 1

Max Out

Transcript source: Provided by creator in RSS feed: download file
For the best experience, listen in Metacast app for iOS or Android