Michael Kennedy: You love building web apps with Python, and HTMX got you excited about the hypermedia approach.
Michael Kennedy: Let the server drive the HTML, skip the JavaScript build step, keep things simple, right?
Michael Kennedy: But then you hit that last 10%. You need AlpineJS for interactivity, or your state gets out of sync,
Michael Kennedy: and suddenly you're juggling two unrelated libraries that weren't really designed to work
Michael Kennedy: together. What if there was a single 11-kilobyte framework that gave you everything HTMX and
Michael Kennedy: AlpineJS did, and more with real-time updates, multiplayer collaboration out of the box,
Michael Kennedy: and performance so fast, you're actually bottlenecked by your monitor's refresh rate.
Michael Kennedy: That's Datastar.
Michael Kennedy: On this episode, I sit down with its creator, Delany Galan, core maintainer, Ben Crocker,
Michael Kennedy: and Datastar convert, Chris May, to help explore how this backend-driven, service-sent event-first
Michael Kennedy: framework is changing the way full-stack developers think about the modern web.
Michael Kennedy: This is Talk Python To Me, episode 537, recorded January 15th, 2026.
Michael Kennedy: Welcome to Talk Python To Me, the number one Python podcast for developers and data scientists.
Michael Kennedy: This is your host, Michael Kennedy.
Michael Kennedy: I'm a PSF fellow who's been coding for over 25 years.
Michael Kennedy: Let's connect on social media.
Michael Kennedy: You'll find me and Talk Python on Mastodon, BlueSky, and X.
Michael Kennedy: The social links are all in your show notes.
Michael Kennedy: You can find over 10 years of past episodes at talkpython.fm.
Michael Kennedy: And if you want to be part of the show, you can join our recording live streams.
Michael Kennedy: That's right.
Michael Kennedy: We live stream the raw uncut version of each episode on YouTube.
Michael Kennedy: Just visit talkpython.fm/youtube to see the schedule of upcoming events.
Michael Kennedy: Be sure to subscribe there and press the bell so you'll get notified anytime we're recording.
Michael Kennedy: This episode is brought to you by Sentry.
Michael Kennedy: Don't let those errors go unnoticed.
Michael Kennedy: Use Sentry like we do here at Talk Python.
Michael Kennedy: Sign up at talkpython.fm/sentry.
Michael Kennedy: And it's brought to you by CommandBook, a native macOS app that I built that gives long-running
Michael Kennedy: terminal commands a permanent home.
Michael Kennedy: No more juggling six terminal tabs every morning.
Michael Kennedy: Carefully craft a command once, run it forever with auto restart, URL detection, and a full CLI.
Michael Kennedy: Download it for free at talkpython.fm/command book app.
Michael Kennedy: Ben, Delaney, Chris, welcome to you all.
Michael Kennedy: Thanks for being here on Talk Python To Me.
Michael Kennedy: Thanks for having us.
Michael Kennedy: Hey, how are you doing?
Michael Kennedy: Doing well, doing well.
Michael Kennedy: Very excited to talk about Datastar and some cool web frameworks for Python people and beyond, of course.
Michael Kennedy: But, you know, most people listening doing Python web frameworks.
Michael Kennedy: So talk about how that all integrates.
Michael Kennedy: And if you like the HTMX vibe, which we've talked a lot about on the show, I think there's
Michael Kennedy: going to be a lot to like here as well.
Michael Kennedy: And maybe more.
Michael Kennedy: We'll see.
Michael Kennedy: A case to be made.
Michael Kennedy: But, you know, before we get into all of that, though, let's just talk about a quick introduction
Michael Kennedy: for everyone here and like go around the squares of Ben, I'll let you go first.
Michael Kennedy: Who are you, Ben?
Ben Crocker: Based in Costa Rica at the moment.
Ben Crocker: I'm based in Europe most of the year, but half of the year my wife and I spend here.
Ben Crocker: In terms of background, I've been primarily working with PHP for well over 20 years and got involved with Delaney and Datastar, been a core maintainer on that project ever since.
Ben Crocker: And I looked at my commit history for last year, and it turns out now I write more Go code than PHP, so I don't want to call myself a PHP developer anymore.
Ben Crocker: I'm just a web developer, a backend web developer, primarily that also writes TypeScript and maintains a front end.
Michael Kennedy: framework. There's a lot of stuff going on and ways in which you can write code for the web these days.
Michael Kennedy: Well, thanks. Awesome to have you here. Delaney, hello.
Delaney Gillilan: Hi, how you doing? Yeah, I have kind of a weird checkered background into web development. I was
Delaney Gillilan: originally in the circus, then I became a 3D artist, then I became an engineer. I've worked in
Delaney Gillilan: games, video games, slot machines, military applications, all kinds of crazy things.
Delaney Gillilan: I tend to work on really highly optimized, fast things.
Delaney Gillilan: I love the ideas of the web,
Delaney Gillilan: but I got really tired of how you actually implement things in that.
Delaney Gillilan: And I was doing very large applications with millions of updates a second.
Delaney Gillilan: And the tools that were out there just weren't good enough.
Delaney Gillilan: So I ended up going down many, many rabbit holes
Delaney Gillilan: and finally found something to make it better for everybody else.
Michael Kennedy: So yeah, that's really cool.
Michael Kennedy: And wow, what a really interesting issue.
Michael Kennedy: I know you got some crazy stories.
Delaney Gillilan: Yes, I do.
Delaney Gillilan: I always have a funny, weird outcome of something.
Delaney Gillilan: Ironically, people talk about things being a circus,
Delaney Gillilan: but like circuses are very well run logistic machines
Delaney Gillilan: compared to most developer situations.
Delaney Gillilan: So it's kind of funny.
Michael Kennedy: Yeah, it's an insult to circuses.
Michael Kennedy: Yes, it is.
Delaney Gillilan: It really is.
Michael Kennedy: Amazing.
Michael Kennedy: Okay.
Michael Kennedy: And what we're going to talk about,
Michael Kennedy: Datastar has this amazing ability to update many things
Michael Kennedy: really quickly in real time, which we'll get into,
Michael Kennedy: but yeah, sort of foreshadowing there.
Michael Kennedy: And Chris May, welcome to the show.
Michael Kennedy: I've known you for a long time and I'm really happy to have you here.
Michael Kennedy: Great to be here. Thank you so much.
Chris May: Yeah.
Chris May: Yeah. So about me, I started writing websites back in 1995 and then picked up Python about 10 or so years later and just have really enjoyed the ride since then.
Chris May: Picked along the way, became technical coach and just loved making single page applications.
Chris May: I loved, I just love the web.
Chris May: You know, I love that we can publish something from our computer and anybody around the world can see it.
Chris May: And then what, maybe a little over a year ago, I, oh no, it was more than that.
Chris May: I remember I was on a trip and I was listening to a podcast of HXPod, the HTMX podcast,
Chris May: and heard about this crazy, cool tool, Datastar.
Chris May: And I was like, I even put in my DjangoCon presentation, like you should, everybody else
Chris May: should try it out.
Chris May: And finally I did and I'm converted.
Chris May: I love it.
Chris May: So I'm excited that the three of us get to talk about it.
Michael Kennedy: The reason that we're having this podcast is because I read your article about switching
Michael Kennedy: to Datastar. And I'm like, okay, this is interesting. You made the case very well. Of
Michael Kennedy: course, I'll link to the article. And so I thought, hey, I need to have Chris here as my Tony Romo to
Michael Kennedy: my Al Michaels or Nico Rosberg to my Crofty or whatever, right? So I'm happy to have you here.
Michael Kennedy: Exactly. Awesome to have you here. So let's just start with what is Datastar, right? I mean,
Michael Kennedy: we've hinted that it has some similarities to htmx but also not so ben and delaney give us the
Michael Kennedy: overview what is datastar so i can give a little bit of history and then ben's probably better at
Delaney Gillilan: saying what it is now i have a background in like low-level stuff um even though i was a 3d artist
Delaney Gillilan: first i'm much more comfortable in like shader development and that kind of thing like so glsl
Delaney Gillilan: web thing like i'm a c guy that knows some other things but the thing is that i was working on
Delaney Gillilan: some military applications where I needed really fast updates of a browser. And the reason why you
Delaney Gillilan: in this military situation is that getting things approved is really hard, like executables to go
Delaney Gillilan: into deployment. But having a browser means that you have this nice little sandbox that things can
Delaney Gillilan: go in. So it's actually more of a deployment platform in my background than, you know, just
Delaney Gillilan: the regular web. But I was doing things that were pushing the browser really, really far. I was using
Delaney Gillilan: Vue and Spa. And I basically was like, well, these are the smartest people out here, but it's not
Delaney Gillilan: fast enough. So I was using crazy WebSocket stuff, all this binary stuff. And then I tried doing,
Delaney Gillilan: you had someone on last week talking about LiveView and like they have a Python version of that. I went
Delaney Gillilan: hard in making a binary version of that, like going down to the protocol level, changing,
Delaney Gillilan: optimizing that 10 different ways. I had an entire framework for doing this. And basically,
Delaney Gillilan: in my opinion, that's a complete dead end. It is untenable. We can go into the reasons why,
Delaney Gillilan: but the thing is, long story short, I ended up seeing what was happening in HTMLX in the hyper
Delaney Gillilan: media space. And I completely discounted all of that because I said, like, I'm doing low level
Delaney Gillilan: binary stuff. There's no way this other approach can be faster. And then my thing is always check
Delaney Gillilan: the metrics, always don't take your assumptions and do the work. And the thing is, there's things
Delaney Gillilan: that are wrong in the implementation, but there's things that are 100% right in the overall ideas of
Delaney Gillilan: how to use that. So I went and I took a year and a half work and just threw it in the trash
Delaney Gillilan: and said, okay, I'm starting over and like ended up doing some basic things would probably get into
Delaney Gillilan: and ended up with this thing that is a backend diagnostic backend framework that has a 10
Delaney Gillilan: kilobyte shim that is the fastest, smallest thing out there by orders of magnitude. So it's not just
Delaney Gillilan: a slightly different thing. It is literally a different paradigm shift. It's a crazy shift.
Delaney Gillilan: So the difference between reacts to something like HTMX is different from HTMX to the data
Delaney Gillilan: start way. So I'll let Ben actually explain what that is. But the thing is from a low level C
Delaney Gillilan: guys point of view, it is one of the fastest things in your stack now, which is crazy to think
Delaney Gillilan: Yeah, like a 10K shim can do that.
Michael Kennedy: That's incredible.
Michael Kennedy: And also, it sounds like your advice comes from somebody who's done a lot of profiling.
Delaney Gillilan: Very much so.
Delaney Gillilan: Like, that's the only thing.
Michael Kennedy: You got to measure, not guess.
Delaney Gillilan: Yeah.
Delaney Gillilan: In fact, there's funny things that we've had things on Twitter fighting with people and
Delaney Gillilan: they're like, oh, this one situation was really slow.
Delaney Gillilan: We actually looked at their flangraphs and it was a bug in the Safari GPU stuff.
Delaney Gillilan: Because we were actually at the level where the JavaScript doesn't even show up.
Delaney Gillilan: It's actually a GPU issue of it rendering fast stuff.
Delaney Gillilan: in the browser, nothing to do with the JavaScript.
Delaney Gillilan: Because the fastest JavaScript you can write is no JavaScript.
Delaney Gillilan: So we really lean into what the browser can already do.
Delaney Gillilan: And we're just making it so that that's easy to do
Delaney Gillilan: so that the average person with the average website
Delaney Gillilan: doesn't have to write any JavaScript at all.
Delaney Gillilan: And they get to be a full stack developer
Delaney Gillilan: in whatever language they choose.
Delaney Gillilan: And I'll let everyone else talk from there.
Ben Crocker: Awesome. Ben?
Ben Crocker: Yeah, my version is going to be quite different to Delaney's
Ben Crocker: because we care about different things.
Ben Crocker: Fortunately, we do care about some of the same things.
Ben Crocker: We work well together because I think we complement each other.
Ben Crocker: But coming from a PHP background, I want the backend to be driving the front end.
Ben Crocker: And it naturally does, right?
Ben Crocker: Because even your HTML is being produced by your backend.
Ben Crocker: And that's what's being served to the front end.
Ben Crocker: I describe Datastar as a hypermedia framework.
Ben Crocker: And some people get tripped up on what hypermedia is, but it's essentially hypertext with other media like images and CSS and that kind of thing.
Ben Crocker: And everybody should know what hypertext is because it's the H in HTTP and HTML.
Ben Crocker: There is an expectation for people coming into Datastar that you have a basic understanding of the web and web browsers and the web browser API because we lean as heavily as possible on the browser API.
Ben Crocker: We get a lot of people coming into the Discord asking us, you know, how should I do this the Datastar way?
Ben Crocker: And it got to the point where I'd heard that question so often I decided, OK, I'm going to write a page in the Datastar docs.
Ben Crocker: We call it the tau of datastar.
Ben Crocker: So it's kind of like the way of datastar.
Ben Crocker: And if there's one thing to take from that, it's use as little datastar as possible.
Ben Crocker: Like leverage the browser, because the browser is an incredible thing, right?
Ben Crocker: Like it's basically an operating system, our operating system as web developers.
Ben Crocker: So, and everything happens at the C level, super optimized.
Ben Crocker: We're not going to be able to build something faster.
Ben Crocker: So leverage the browser as much as possible on the browser APIs.
Ben Crocker: And where HTML kind of lacks or where there are some gaps, that's essentially what Datastar is trying to fill.
Ben Crocker: So I did a lot of work.
Ben Crocker: So just to relate this, I guess, to something that other people might be familiar with, which is HTMLX.
Ben Crocker: I was an early contributor to HTMLX, actually, and I was sold on the idea of hypermedia from the very beginning.
Ben Crocker: So HTML is the language of the web.
Ben Crocker: Why are we trying to replace it with JavaScript?
Ben Crocker: And the problem that I ran into after several years of thinking HTMX is all I need is that last 10%, right?
Ben Crocker: Because it'll get you 90% of what you're trying to do.
Ben Crocker: But that last 10%, which we all know is the hardest piece that takes the most work, just isn't covered.
Ben Crocker: So with HTMX, for example, you will very often reach for another library like AlpineJS,
Ben Crocker: or you'll start writing vanilla JS perhaps to fill in those gaps to interactivity to the page,
Ben Crocker: because HTMX is really just going to the back end, replacing the DOM.
Ben Crocker: But now you have two dependencies.
Ben Crocker: Now you have HTMX and Alpine, for example, and you're trying to make those play well together.
Michael Kennedy: And because I think that might be a little bit of the missing sauce from HTMX.
Michael Kennedy: I've had Carson Gross on and I really admire HTMX.
Michael Kennedy: But as I've worked with it over a couple of years, I feel like it's really good as salt or seasoning,
Michael Kennedy: something you sprinkle on to really make a website better.
Michael Kennedy: But if you try to make a meal out of salt, you're not going to want to eat it.
Michael Kennedy: And what I mean is, you have three different disjointed parts of the page,
Michael Kennedy: and you're like, this is so amazing to update this with HTML and partials, and so is that.
Michael Kennedy: But then you start talking about AlpineJS and connecting different things,
Michael Kennedy: and then the JavaScript gets out of sync with this server response.
Michael Kennedy: And it just, you start to feel constrained by it.
Michael Kennedy: And I think you all have a really nice solution.
Michael Kennedy: It's something a little bit like how you, we're going to talk about it,
Michael Kennedy: but sort of how you specify the HTML to be updated by the server,
Michael Kennedy: but then also connecting different parts of the pages.
Michael Kennedy: Chris put it in his article that like the problem is AlpineJS and HTMX
Michael Kennedy: are just two unrelated different things that happen to go together a lot.
Michael Kennedy: And so they're not cohesive in a sense, right?
Delaney Gillilan: Well, and that's one thing that's definitely an issue.
Delaney Gillilan: Like, for example, this was my thing
Delaney Gillilan: because I actually tried to fix HTMX back in the day.
Delaney Gillilan: And like the things that I wanted to fix
Delaney Gillilan: were the problem that I see at least
Delaney Gillilan: is that you have HTMX, you can add,
Delaney Gillilan: it has extensions, so you can add stuff to it.
Delaney Gillilan: But it fundamentally was built to be like,
Delaney Gillilan: here's our way of doing it.
Delaney Gillilan: And then you can do your own stuff on top of it.
Delaney Gillilan: The problem is, is that I thought that's broken.
Delaney Gillilan: I've done enough game development
Delaney Gillilan: to know that you need to be agile.
Delaney Gillilan: I need to be able to like be able to move quickly.
Delaney Gillilan: So I wanted it so that nothing was basically like the core of data star is like 300 lines
Delaney Gillilan: long.
Delaney Gillilan: And it is basically setting up data dash star elements, hooking up plugins, and then everything
Delaney Gillilan: else is a plugin.
Delaney Gillilan: So if you don't agree with us, or if someone's better than I am, great, that's wonderful.
Delaney Gillilan: We will be able to just pop that part out, put the new part in.
Delaney Gillilan: But plugins can now depend on each other.
Delaney Gillilan: They can understand.
Delaney Gillilan: It's an ecosystem.
Delaney Gillilan: Ironically, that's what happens under the hood.
Delaney Gillilan: But the ideas of that make it so much more powerful.
Delaney Gillilan: And the irony is that if you build it in that kind of plugin style way, in the more game developer style way, we are smaller than HTMLX and Alpine alone, let alone combined, let alone Hyperscript and all these other things.
Delaney Gillilan: So it's just a different way of thinking about the problem.
Ben Crocker: When I first encountered Datastar and looked at the source code, it looked very foreign to me because Delaney coming from game development, he built Datastar like a game engine.
Ben Crocker: So you have this very thin core and then everything else pretty much is a plugin.
Ben Crocker: And all Datastar core is a way for registering plugins and having Datastar attributes.
Ben Crocker: And that's pretty much it.
Ben Crocker: Everything else is an add-on that you, is a plugin that you can take away.
Ben Crocker: So we even have a bundler on the site that allows you to just, well, you can just download
Ben Crocker: Datastar core or you can just select what plugins you want.
Ben Crocker: Now, that in and of itself is not that interesting because we're, at the end of the day, we're
Ben Crocker: talking about a 10 kilobyte JavaScript file with all of the plugins.
Ben Crocker: But it is open source, which we didn't mention.
Ben Crocker: And so anybody can go just kind of look at it if you're interested.
Ben Crocker: But that approach means that everything is modular and everything is there for a reason.
Ben Crocker: And we'll get into this later, I guess.
Ben Crocker: But like deciding what plugins go in and what stay out is one of the challenges.
Ben Crocker: And we just try to keep it as lean as possible.
Ben Crocker: My way of thinking about it is that Datastar gives you everything you need and nothing you don't.
Ben Crocker: And that's how we try to kind of keep it lean and fast.
Michael Kennedy: This portion of Talk Python Maze brought to you by Sentry.
Michael Kennedy: I've been using Sentry personally on almost every application and API that I've built for
Michael Kennedy: Talk Python and beyond over the last few years.
Michael Kennedy: They're a core building block for keeping my infrastructure solid.
Michael Kennedy: They should be for yours as well.
Michael Kennedy: Here's why.
Michael Kennedy: Sentry doesn't just catch errors.
Michael Kennedy: It catches all the stuff that makes your app feel broken.
Michael Kennedy: The random slowdown, the freeze you can't reproduce, that bug that only shows up once
Michael Kennedy: real users hit it.
Michael Kennedy: And when something goes wrong, Sentry gives you the whole chain of events in one place.
Michael Kennedy: errors, traces, replays, logs, dots connected.
Michael Kennedy: You can see what's led to the issue
Michael Kennedy: without digging through five different dashboards.
Michael Kennedy: Seer, Sentry's AI debugging agent,
Michael Kennedy: builds on this data, taking the full context,
Michael Kennedy: explaining why the issue happened,
Michael Kennedy: pointing to the code responsible, drafts a fix,
Michael Kennedy: and even flags if your PR is about to introduce a new problem.
Michael Kennedy: The workflow stays simple.
Michael Kennedy: Something breaks, Sentry alerts you,
Michael Kennedy: the dashboard shows you the full context.
Michael Kennedy: Seer helps you fix it and catch new issues
Michael Kennedy: before they ship. It's totally reasonable to go from an error occurred to fixed in production in
Michael Kennedy: just 10 minutes. I truly appreciate the support that Sentry has given me to help solve my bugs
Michael Kennedy: and issues in my apps, especially those tricky ones that only appear in production. I know you will
Michael Kennedy: too if you try them out. So get started today with Sentry. Just visit talkpython.fm/sentry
Michael Kennedy: and get $100 in Sentry credits. Please use that link. It's in your podcast player show notes. If
Michael Kennedy: our code talkpython26, all one word talkpython26 to get $100 in credits.
Michael Kennedy: Thank you to Sentry for supporting the show.
Michael Kennedy: Cool.
Michael Kennedy: That's a super interesting philosophy to say you should be able to take, even take
Michael Kennedy: stuff out of what we're giving you by default, right?
Michael Kennedy: Now, before we move on from sort of introducing Datastar, I do want to point out at data-star.dev,
Michael Kennedy: which of course I'll link this notes, there's some cool examples on here.
Michael Kennedy: You've got a really nice space 2001 sort of theme with Hal and all that, which is great.
Michael Kennedy: I like the aesthetic here, which is very fun.
Michael Kennedy: It's got a little bit of a retro gaming feel, which is nice.
Michael Kennedy: But what I want to point out is I want to encourage people to go watch your little video.
Michael Kennedy: Your video is fun.
Ben Crocker: It's really fun.
Ben Crocker: This video is all about how Datastar fits in the world of SPAs.
Ben Crocker: And one thing we didn't really mention is that Datastar is a full-fledged SPA replacement.
Ben Crocker: So again, like that last 10%, often people will think, oh, well, I need to go to React or Vue.js or some single page application framework.
Ben Crocker: Whereas we're saying that, no, no, no, Datastar will not only, it's not like a subset or like SPAs are not a superset.
Ben Crocker: it's on the contrary. I think Datastark, we think Datastark can do more than SBAs because we are
Ben Crocker: driven by the backend and we are focused on hypermedia, which is the language of the web.
Ben Crocker: So this, yeah, so this video is kind of throwing, yeah, anyway, everybody should watch it.
Chris May: I'd also like to, if you can scroll back up to the top of the page, the Starfield animation was
Chris May: one of the things like when Delaney and when everybody who worked on this published it,
Chris May: Like I didn't realize how amazing this was
Chris May: because if you like right click and inspect that thing,
Chris May: it's a web component.
Chris May: And so all the JavaScript that's required
Chris May: for making all the stars go faster and slower
Chris May: and tracking your mouse where, you know, wherever you do it,
Chris May: it's all within that web component.
Chris May: And data star is essentially subscribing to like,
Chris May: where's the mouse pointer
Chris May: and passing it into the web component.
Delaney Gillilan: Yeah, in fact, if you go to more examples,
Delaney Gillilan: you will see that there's,
Delaney Gillilan: and then go scroll down to,
Delaney Gillilan: or use the hamburger thing.
Delaney Gillilan: Yeah, go down to the rocket.
Delaney Gillilan: There's the actual star field.
Delaney Gillilan: So you can see the entire, the star field,
Delaney Gillilan: the entire component is there.
Delaney Gillilan: So if you scroll down from there,
Delaney Gillilan: you'll see how it actually gets hooked up
Delaney Gillilan: and the entire component,
Delaney Gillilan: that's the whole thing, it's right there.
Michael Kennedy: - That's incredible.
Delaney Gillilan: - And the thing is if you start moving around,
Delaney Gillilan: like if you scroll up just a little bit more,
Delaney Gillilan: so you can see the sliders,
Delaney Gillilan: you'll see that they're live, everything's,
Delaney Gillilan: if you move it around,
Delaney Gillilan: like you move your mouse around the canvas,
Delaney Gillilan: you'll see everything's live editing,
Delaney Gillilan: everything's thing.
Delaney Gillilan: It's the irony of Datastar.
Delaney Gillilan: And this is the part that I don't think people quite get.
Delaney Gillilan: And it's not that you're trying to like,
Delaney Gillilan: we love what Carson has done with HCMS.
Delaney Gillilan: We love that all the things they've done,
Delaney Gillilan: but it does not do everything.
Delaney Gillilan: It doesn't do enough.
Delaney Gillilan: It is a library, not a framework.
Delaney Gillilan: And the thing is,
Delaney Gillilan: the irony is that Datastar actually has
Delaney Gillilan: the fastest reactive signal,
Delaney Gillilan: like reactive signals.
Delaney Gillilan: We are the fastest thing out there.
Delaney Gillilan: So it's not just like we did something
Delaney Gillilan: that's kind of like VDOM,
Delaney Gillilan: or we are like,
Delaney Gillilan: we can compete with React.
Delaney Gillilan: We demolish them with actual numbers.
Delaney Gillilan: So we have the fastest morphing strategy and we also have the fastest signals, which means doing these kinds of things.
Delaney Gillilan: It's just a non-issue.
Delaney Gillilan: Like this star field thing is 1K.
Delaney Gillilan: Like it's just these are the kinds of things that are just a non-issue in this if you do things our way.
Chris May: And you're leaning into the web ecosystem by leveraging web components instead of having to like build, have a build time pipeline to, you know, do all the custom JavaScript.
Chris May: Like once I realized like you can do these things, it just made, it just clicked.
Chris May: And I just make it's I feel like it's so much more fun now to work on the web now that I understand these things.
Michael Kennedy: Let's talk through some of the core examples.
Michael Kennedy: I feel like there's some similarities to the example section of the HTMX place.
Michael Kennedy: But, you know, HTMX doesn't have a star field, certainly.
Michael Kennedy: Best place to start is on the homepage.
Ben Crocker: Before we get into those examples, just just to kind of take a step back and say, OK, we've mentioned HTMX a few times and we don't we don't even like to compare ourselves to HTMX.
Ben Crocker: but it is a good maybe starting point for some people.
Ben Crocker: We have a hello world example there,
Ben Crocker: if you could find that.
Ben Crocker: Yeah, let's scroll down just a little bit more.
Ben Crocker: Yeah, you got it.
Ben Crocker: One of the maybe differences between HTMX and Datastar
Ben Crocker: is that Datastar can receive HTML responses,
Ben Crocker: but it also by default,
Ben Crocker: or the recommendation is to use server sent events.
Ben Crocker: So if you hit start there,
Ben Crocker: you're going to see kind of the network response tab,
Ben Crocker: and those are server sent events.
Ben Crocker: And SSE server sent events are an old technology
Ben Crocker: that work just over HTTP.
Ben Crocker: And essentially what happens is that the server
Ben Crocker: holds a connection open to the browser
Ben Crocker: and it's unidirectional.
Ben Crocker: So you send a request to the server
Ben Crocker: and then the server can stream events back down,
Ben Crocker: which is what you're seeing here.
Ben Crocker: Now, this is obviously a trivial example, right?
Ben Crocker: We're sending one,
Ben Crocker: or we're updating the message one character at a time.
Ben Crocker: But when you see how simple this is,
Ben Crocker: then you can perhaps see potential for this, right?
Ben Crocker: And SSE or service end events have had kind of a renaissance in recent years with all of the LLMs, right?
Ben Crocker: All the chatbots are streaming the responses back to you.
Ben Crocker: So this type of technology, while it's not old, sorry, it's not new, it's actually been around a long time, has kind of been underused.
Ben Crocker: And Delaney kind of tapped into that and said, well, because I also always thought, well, if I want pure reactivity or true reactivity,
Ben Crocker: I need two-way communication.
Ben Crocker: So I need web sockets.
Michael Kennedy: You need web sockets.
Ben Crocker: You need binary and all that kind of stuff.
Ben Crocker: Yeah.
Ben Crocker: There's problems with those, which we can get into.
Ben Crocker: SSE is much simpler.
Ben Crocker: It works over HTTP 1, 2, and 3.
Ben Crocker: And as you can see, it's just plain text.
Ben Crocker: There is no complicated handshake.
Ben Crocker: If you change the interval to zero and hit start,
Ben Crocker: you're going to see a different type of response, which is,
Ben Crocker: and I don't know if you saw the content type change,
Ben Crocker: but content type now is text HTML.
Michael Kennedy: Oh, intro.
Michael Kennedy: Oh, interesting.
Ben Crocker: Yeah.
Ben Crocker: So this is what HTMLX would do by default.
Ben Crocker: You send back HTML responses, whereas here the content type
Ben Crocker: is text event stream.
Ben Crocker: And this allows you to hold that connection open
Ben Crocker: for as long as you want.
Ben Crocker: It can be open and closed, or it can stay open until the words
Ben Crocker: hello world have been spelled out.
Ben Crocker: Or you can keep it open indefinitely.
Ben Crocker: So we're going to see some more advanced examples
Ben Crocker: where the SSE connection is held open for longer.
Ben Crocker: So I think wrapping your head around this example
Ben Crocker: taps you into the potential of Datastar.
Michael Kennedy: MARK MANDEL: Yeah.
Michael Kennedy: And one of the things that--
Michael Kennedy: well, when I looked at Datastar, I'm like, OK,
Michael Kennedy: there's some interesting aspects here.
Michael Kennedy: And we'll get into them, how you can set up--
Michael Kennedy: when I click the Start button, it might replace
Michael Kennedy: a piece of the page-- hey, that sounds familiar--
Michael Kennedy: with HTML, not through JavaScript, right?
Michael Kennedy: but it didn't specify anywhere what part of the page to replace or not.
Michael Kennedy: Like, how does it know?
Michael Kennedy: And so with Datastar, you lean more on the server for many things,
Michael Kennedy: including deciding what part of the page that the server created in the first place to update.
Michael Kennedy: I really like that.
Michael Kennedy: I think that that's super neat.
Michael Kennedy: It lets you not just have sort of closer to one source of truth,
Michael Kennedy: but also just you can pass down multiple things.
Michael Kennedy: is like, we need to update this pane on the right,
Michael Kennedy: this text, and this element all in one response.
Michael Kennedy: There's a lot of interesting aspects
Michael Kennedy: to what you're talking about here.
Ben Crocker: JOHN MCWHORTER: Anyone who's familiar with out-of-band swaps
Ben Crocker: in HTMX, well, guess what?
Ben Crocker: Datastar is out-of-band by default.
Ben Crocker: So it's matching currently based on the ID.
Ben Crocker: So you see h3 id equals message.
Ben Crocker: And every event that's coming back has an ID of message.
Ben Crocker: But guess what?
Ben Crocker: you can use any ID you want, right?
Ben Crocker: So you can use actually any CSS selector you want.
Ben Crocker: But yes, we put the onus more on the backend
Ben Crocker: because that is where we believe state should live
Ben Crocker: or that's the source of truth for state.
Ben Crocker: And you send and you work with state on the front end
Ben Crocker: only when and where it makes sense to,
Ben Crocker: which is more the web component aspect.
Delaney Gillilan: And I'll caveat what Ben said there
Delaney Gillilan: in that like state mostly lives in the backend.
Delaney Gillilan: And that's the problem is that like state lives where it lives.
Delaney Gillilan: Like if the user is actively able to move their mouse cursor,
Delaney Gillilan: they own that state of the mouse cursor.
Delaney Gillilan: You don't own that,
Delaney Gillilan: but most of the state from your database should be in the backend.
Delaney Gillilan: The one thing that's interesting about the SSE compared to how most people
Delaney Gillilan: think this stuff, I will say I fell into this trap too, right?
Delaney Gillilan: Cause I did the live view crazy stuff is that your job as a web developer is to
Delaney Gillilan: get strings to the browser as efficiently, as fast as possible.
Delaney Gillilan: Cause like the browser is going to deal with that,
Delaney Gillilan: that into html and all that there's nothing faster than giving it html right so the thing that i i
Delaney Gillilan: know i lost for a long time is that sse i thought oh it's this big string thing how is that better
Delaney Gillilan: than binary but the irony is that because it's so regular because there's already things like
Delaney Gillilan: compression built into the browser there's streaming things there's things that are so
Delaney Gillilan: much easier to do here in an efficient way that the irony is if you if you you don't have to care
Delaney Gillilan: about all these things but if you just follow our way of doing it your python app will be faster
Delaney Gillilan: than most people's like compiled,
Delaney Gillilan: you know, like low level language thing
Delaney Gillilan: because you're getting orders of magnitude
Delaney Gillilan: in the algorithms
Delaney Gillilan: and how we're doing stuff from the hood.
Delaney Gillilan: So I don't know if you're interested
Delaney Gillilan: in like the deep down stuff
Delaney Gillilan: or just like how you use it as a Python developer.
Delaney Gillilan: But the irony is that you now have tapped into this.
Delaney Gillilan: It seems so simple.
Delaney Gillilan: You're like, oh, this is just a different text response.
Delaney Gillilan: How can this be orders of magnitude faster?
Delaney Gillilan: Like, again, I don't know how much
Delaney Gillilan: you want to get into the weeds of that
Delaney Gillilan: compared to just it's fun to use, right?
Michael Kennedy: Yeah, I really like the philosophy
Michael Kennedy: of having so much of it controlled by the server.
Michael Kennedy: It just felt disheartening.
Michael Kennedy: It's like, okay, so what you're going to do
Michael Kennedy: is you're just going to create some JSON responses
Michael Kennedy: on your server,
Michael Kennedy: and then everything is some crazy build series of steps
Michael Kennedy: to end up with, I don't know,
Michael Kennedy: Vue or React or something on the front end.
Michael Kennedy: And there's just so much power and flexibility
Michael Kennedy: to write really cool server code.
Michael Kennedy: But, you know, like a lot of the trends have been,
Michael Kennedy: yeah, that's kind of just there to support the rest of it,
Michael Kennedy: you know, and so I don't know, this really appeals to me.
Ben Crocker: question that comes up often is like, OK, well, how do I format this? Because it has its own syntax.
Ben Crocker: Very simple to read, obviously, right? An event name and then these data lines. And you can just
Ben Crocker: have as many data lines as you want. And that's your HTML. If you scroll up, though, we do have...
Ben Crocker: So you do need to format this, but we essentially have all of these SDKs, including Python, you'll
Ben Crocker: see there. And the Python SDK is actually, I would say, one of the most intricate ones we have.
Ben Crocker: Spatuel King, he's a member of the community, or Chase, I believe is his first name, his real first
Ben Crocker: name, and many other contributors did an amazing job on that. So lots and lots of Python frameworks
Ben Crocker: are supported. You can maybe speak more to this, Chris. And really, the SDKs are very simple,
Ben Crocker: because all they do is they take a function, a patch elements or patch signals function,
Ben Crocker: and you just dump in the HTML that you want swapped into the DOM or the signals you want
Ben Crocker: output on the page and it just does the formatting for you so so it's really just there's three
Chris May: functions i think in total that every sdk has to implement and it's such a time saver you know um
Chris May: i doved into service and events a lot with htmx and when you get the syntax wrong it is so painful
Chris May: to debug because pretty much can't it just doesn't work you know or whatever it's harder to debug and
Chris May: so to have the helper syntax it's just a dream well and also just so people are aware i like
Delaney Gillilan: because I was originally going to try,
Delaney Gillilan: the irony is I was trying to get server sent events
Delaney Gillilan: like their plugin up to snuff like years ago.
Delaney Gillilan: Like I would highly recommend not using SSE with HTMLX
Delaney Gillilan: because the problem is that the entire model
Delaney Gillilan: of how you build things is very poll based
Delaney Gillilan: and it's built out of band.
Delaney Gillilan: It's like a weird concept,
Delaney Gillilan: like the idea of updating,
Delaney Gillilan: like it is not built with that in mind.
Delaney Gillilan: So I know that they're trying to move towards that
Delaney Gillilan: in the future,
Delaney Gillilan: but the whole way that you interact with it
Delaney Gillilan: is based on polling.
Delaney Gillilan: And the thing about our way
Delaney Gillilan: is that not only are you doing push events,
Delaney Gillilan: But the thing is that really does change the semantics of the language.
Delaney Gillilan: So first of all, you get like 40X compression by doing our way.
Delaney Gillilan: But also you only send data when you need to instead of polling.
Delaney Gillilan: So now you're using less resources.
Delaney Gillilan: You're using less network.
Delaney Gillilan: It changes the whole dynamic in a deeper way that you can literally save 5,000X in your network bandwidth.
Delaney Gillilan: It sounds crazy, but it's just a reality.
Michael Kennedy: Right.
Michael Kennedy: Another thing, Delaney, that's really nice about that is the latency.
Michael Kennedy: That's something that drives me crazy about polling.
Michael Kennedy: general is just like okay well we don't want to hammer the server too hard so let's make this you
Michael Kennedy: know one second two second but then it's like well i click this button and then it updates and you're
Michael Kennedy: like ah if if something happens on the server it's sent right if it wants to one of the things that
Delaney Gillilan: ironically because i do a lot of like go or low level language stuff is that i tend to put a debounce
Delaney Gillilan: in my server to like five milliseconds so that i get i'm not updating more than you know 200 times
Delaney Gillilan: a second even on a monitor because the browser actually break after 500 fps so like the
Delaney Gillilan: interesting thing is not that it's basically data starts no longer the issue in your thing if you
Delaney Gillilan: are on a low low powered battery device like a mobile on a 3g this is it will just work like it's
Delaney Gillilan: stuff that you just don't have to worry about so it does change the semantics of how you build things
Delaney Gillilan: just so that you're aware because even things like for example built into the htmx they don't do
Delaney Gillilan: automatic exponential back off.
Delaney Gillilan: It doesn't have all the verbs.
Delaney Gillilan: There's caveats there that I would recommend
Delaney Gillilan: not doing it, honestly, if you're going to do it.
Michael Kennedy: It's crazy that you're talking about going below
Michael Kennedy: the monitor refresh rate.
Michael Kennedy: You're not going to see it. This is only
Michael Kennedy: 120 hertz.
Michael Kennedy: 120 times a second.
Michael Kennedy: So why would you pull
Michael Kennedy: faster than that? That's wild.
Michael Kennedy: This portion
Michael Kennedy: of Talk Python To Me is brought to you by us.
Michael Kennedy: I'm thrilled to announce a brand
Michael Kennedy: new app built for developers
Michael Kennedy: created by yours truly.
Michael Kennedy: It's called Command Book.
Michael Kennedy: You know that thing you do every morning?
Michael Kennedy: Open up six terminal tabs,
Michael Kennedy: CD into this directory,
Michael Kennedy: activate that virtual environment,
Michael Kennedy: run the server with --reload.
Michael Kennedy: Now, CD somewhere else,
Michael Kennedy: start the background worker,
Michael Kennedy: another tab for Docker,
Michael Kennedy: another one to tail production logs.
Michael Kennedy: Every tab just says Python, Python, Python,
Michael Kennedy: Docker tail.
Michael Kennedy: And you're clicking through them going,
Michael Kennedy: which Python was that again?
Michael Kennedy: Where my app is running?
Michael Kennedy: Then sometime later,
Michael Kennedy: your dev server silently dies
Michael Kennedy: because it tried to reload while you're in the middle of a code edit,
Michael Kennedy: unmatched brace, a half-written import, or something.
Michael Kennedy: Now you're hunting through tabs to figure out which process crashed
Michael Kennedy: and how to restart it.
Michael Kennedy: My app, CommandBook, gives all of these long-running commands a permanent home.
Michael Kennedy: You save a command once, the working directory, the environment,
Michael Kennedy: free commands like git pull, and from then on, you just click run.
Michael Kennedy: You can even group commands together to start and stop everything
Michael Kennedy: for a project with a single click.
Michael Kennedy: It also has what I call Honey Badger Mode, auto restart on crash.
Michael Kennedy: So when your dev server goes down mid-reload,
Michael Kennedy: Command Book just brings it right back up and does so over and over until the code is fixed.
Michael Kennedy: It also detects URLs from your output,
Michael Kennedy: so you're never scrolling through thousands of lines of logs
Michael Kennedy: just to figure out how to reopen your web app.
Michael Kennedy: And it shows you uptime, memory usage, and all sorts of cool things about your process.
Michael Kennedy: The whole thing is a native macOS app.
Michael Kennedy: No electron, no Chromium, just 21 megs.
Michael Kennedy: And it comes with a full CLI.
Michael Kennedy: So anything you've configured in the UI,
Michael Kennedy: you can fire off from your terminal with just a single command.
Michael Kennedy: Right now it's macOS only, but if there's enough interest,
Michael Kennedy: I'll build a Windows version too.
Michael Kennedy: So let me know.
Michael Kennedy: Please check it out at talkpython.fm/command book app,
Michael Kennedy: download it for free, level up your developer workflow.
Michael Kennedy: The link is in your podcast player show notes.
Michael Kennedy: That's talkpython.fm/command book.
Michael Kennedy: I really hope you enjoy this new app that I built.
Ben Crocker: Yeah, on the topic of latency and all that, if you go to the examples, there's some we could look at that I think really demonstrate this.
Ben Crocker: Well, maybe start with bad Apple just because we're talking about refresh rates.
Ben Crocker: OK.
Ben Crocker: What's happening is that the back end is streaming down just a bunch of symbols, but it creates this animation.
Ben Crocker: And if you were to open the network tab, you would see it actually would be interesting to see.
Ben Crocker: You probably have to refresh the page just to.
Ben Crocker: Yeah.
Ben Crocker: And you're going to see updates.
Ben Crocker: That one there.
Ben Crocker: Yeah, if you click that--
Ben Crocker: This one?
Ben Crocker: Yeah, that's the one.
Ben Crocker: You click Event Stream.
Ben Crocker: There's an Event Stream tab for Event Stream responses.
Ben Crocker: You're going to see these streaming.
Ben Crocker: I don't know what frames per second we have this set to,
Ben Crocker: but you see it streaming past, right?
Ben Crocker: Right.
Ben Crocker: The first time many people see this,
Ben Crocker: this is a surprise that the browser is capable of this.
Ben Crocker: But the browser can stream video, so why
Ben Crocker: can't it stream a bunch of text?
Ben Crocker: I mean, it's not that big of a leap of faith.
Ben Crocker: But you can see, it looks like it's about every 10, 20
Ben Crocker: milliseconds.
Delaney Gillilan: I think we're doing like 30 frames a second, but again, we can do like, we're doing this on a,
Delaney Gillilan: basically a free tier server. So like, this is just a non-issue and it's doing all the compression
Delaney Gillilan: stuff. So if you notice that your update, even though we're doing like full ASCII development at,
Delaney Gillilan: you know, thousands of characters, your updates are actually not updating that. Like you see how
Delaney Gillilan: it's transferring, but it's not transferring that much compared to how much it's actually coming out.
Michael Kennedy: I can see we got 1.9 megs for the whole page. Yeah. But do you see next to it? What, what was
Ben Crocker: actually like the resources so you see the compression well yeah we're probably not seeing
Ben Crocker: it there but in the bottom you'll see two two megabytes have been transferred but 10 megabytes
Ben Crocker: of resources and so that's oh yeah yeah so it's a 5x compression yeah it's going to be much more
Ben Crocker: on the stream i think because it's streaming uh normally you can hover over the size
Ben Crocker: and you'll see the uncompressed but i guess it's changing too fast that's pretty wild and you know
Chris May: in practical usage, like I have a status screen that I have from my production app at work. And
Chris May: it's just amazing to just constantly be seeing these things update. And I'm doing that by having
Chris May: the database tell my Python code, hey, refresh. I actually ask it to get all the entries from the
Chris May: database and send it down the pipe. And so it's not like I'm doing the optimized thing. I'm doing
Chris May: the simple thing and I get all these cool things just updating all the time. And it's just such a
Chris May: useful thing, especially for status screens, dashboards, stuff like that.
Delaney Gillilan: Speaking of that, go to the DB Mon example. This is one of my favorites because when React
Delaney Gillilan: first had their first conference, they said, look at what we're doing. We're able to update at a rate
Delaney Gillilan: that no one else can compete with us in how fast they could update the browser, right? If we
Delaney Gillilan: actually, yeah, you're still there. So the thing is, if you actually set the FPS to something like
Delaney Gillilan: 80, whatever. So that is how fast it's coming from the backend to you. So go ahead. Yeah,
Delaney Gillilan: because we just don't want people blasting the server.
Michael Kennedy: Yeah, you don't want to walk away.
Delaney Gillilan: Yeah, but the point is that this is coming.
Delaney Gillilan: See, we're doing stuff in microseconds on a potato.
Michael Kennedy: Yeah, let me just describe this a little bit for people listening.
Michael Kennedy: So it's like a database monitoring table
Michael Kennedy: that shows you how many transactions are the database overloads.
Michael Kennedy: So it's updating a grid of maybe 10 or 12 databases
Michael Kennedy: with five or six elements,
Michael Kennedy: and it's doing that in microseconds, 80 times a second.
Ben Crocker: A lot of people see these examples and they think, well, I'm not building this kind of stuff.
Ben Crocker: And me included.
Ben Crocker: I build crud apps most of the time.
Ben Crocker: And there are plenty of examples here that are just cruddy things.
Ben Crocker: They're kind of the more boring examples.
Ben Crocker: But one example that might be worth looking at is the to-do MVC.
Ben Crocker: And if you can figure out how to open that in split screen.
Michael Kennedy: Okay.
Michael Kennedy: What part do you want me to open up in split?
Michael Kennedy: Oh, just this, the example.
Michael Kennedy: Yeah, so I can do these two and then I can tile them.
Ben Crocker: How's that?
Ben Crocker: So this is a CRUD app, but what Datastar gives you is the ability to do multiplayer out of the box.
Ben Crocker: And that is like real-time collaborative apps are not easy to do and not easy to scale as well.
Ben Crocker: But as you'll see here, when you have like two sessions open, it's going to be near instant.
Ben Crocker: You're going to basically be observing the latency on your network connection,
Ben Crocker: which is going to be 50 milliseconds to 100, but barely perceivable.
Michael Kennedy: So just to describe to people, we've got this 2D MVC, which allows you to, well, it's like a
Michael Kennedy: to-do example, which is required to be a legitimate JavaScript framework. But I've opened it in two
Michael Kennedy: tabs and I've used Vivaldi's tile. So these are legitimately two browsers. They just appear to be
Michael Kennedy: kind of in the same window. And when I enter stuff into it, it literally looks like they update in
Ben Crocker: parallel, which is crazy. If you check a few of them, you'll see,
Ben Crocker: You can barely tell which one's updating which.
Ben Crocker: It happens almost instantly.
Michael Kennedy: Yeah, if I look at the other one and I click on one,
Michael Kennedy: it feels like that's responding to my click.
Ben Crocker: I need to correct myself that it is happening instantly
Ben Crocker: because when you click, when you check one of those,
Ben Crocker: it's not, and this is an interesting thing we can get into.
Ben Crocker: We're not doing optimistic updates.
Ben Crocker: It's actually sending a request to the server
Ben Crocker: and the server is simultaneously updating
Ben Crocker: both of your tabs at the same time.
Michael Kennedy: Even if I had just one open,
Michael Kennedy: it's still going round trip to the server.
Michael Kennedy: That's why it looks like it's simultaneous
Michael Kennedy: because it's effectively.
Delaney Gillilan: This is a thing that you can,
Delaney Gillilan: we can talk for like three hours
Delaney Gillilan: and I will yell at most spa developers
Delaney Gillilan: because there's this weird thing
Delaney Gillilan: that because it's easy,
Delaney Gillilan: people will actively lie to users in the spa world
Delaney Gillilan: and they'll do optimistic updates,
Delaney Gillilan: which means I'm going to make it
Delaney Gillilan: so that I'm making this change.
Delaney Gillilan: And then if there's a problem, then fix it.
Delaney Gillilan: Whereas we say you should do indicator saying,
Delaney Gillilan: I'm trying to make a change to this
Delaney Gillilan: and then fix it.
Delaney Gillilan: Because you don't want, like when you're playing a video game, you can do what's called dead
Delaney Gillilan: reckoning and you can do some stuff to net rollback code.
Delaney Gillilan: You can do some clever things to hide latency, but you don't want to hide latency when it
Delaney Gillilan: comes to like a bank transfer or did I buy that thing or did I get that theater ticket
Delaney Gillilan: or any of that stuff.
Delaney Gillilan: Like people just have the wrong mental model of how the web should work.
Delaney Gillilan: I'm actually going to send you another thing that this might blow your mind even more because
Delaney Gillilan: the three of us basically can play.
Delaney Gillilan: This is an example where all of us could be playing live with each other right now in an active shared state that's been at the top of the Hacker News and again, runs on a potato.
Delaney Gillilan: I don't know if you just put that in your...
Michael Kennedy: Yeah, let me drop it over.
Michael Kennedy: Hold on.
Michael Kennedy: I'm going to put it in the other tab.
Delaney Gillilan: So right now, don't touch anything.
Delaney Gillilan: I'm going to actively start.
Delaney Gillilan: I am purple.
Delaney Gillilan: I am literally starting to click right now.
Michael Kennedy: All right.
Michael Kennedy: So we're looking at a multiplayer game of life here.
Delaney Gillilan: I'm seeing that live here.
Delaney Gillilan: And if you open up that in the other tab, you would actively see the exact same state.
Delaney Gillilan: So everyone in the world, like if you open that up in the other tab,
Delaney Gillilan: you cannot get out of sync.
Delaney Gillilan: It's not faking it in the front end.
Delaney Gillilan: This is literally sending in.
Delaney Gillilan: What's even crazier about this, here's the crazy part.
Delaney Gillilan: It's actually a rendering demo.
Delaney Gillilan: The guy who wrote it is writing in a scripting language, Clojure,
Delaney Gillilan: and he's sending down 2,500 divs per frame styled, inline styled.
Delaney Gillilan: Now go to your network tab now and look at what's actually,
Delaney Gillilan: like look at your network tab and you'll see how little data we're actually sending over.
Delaney Gillilan: even though he's updating 2,500 divs per frame,
Delaney Gillilan: like if you go to wherever it's updated,
Delaney Gillilan: yeah, whichever one's the one that's updated,
Delaney Gillilan: there you go, yeah.
Delaney Gillilan: So if you look here and look at how much is being sent
Delaney Gillilan: versus how many is actually,
Delaney Gillilan: like try to, like, this is just a different paradigm
Delaney Gillilan: for how you build.
Delaney Gillilan: And the thing is, again,
Delaney Gillilan: not everybody has to care about these low level things,
Delaney Gillilan: but the thing is, is that once you do this,
Delaney Gillilan: the idea of CRUD kind of goes away
Delaney Gillilan: because in our opinion, you go to a multi,
Delaney Gillilan: you make a multi-page app like you would normally do
Delaney Gillilan: in HTMX or anything else,
Delaney Gillilan: but you keep an open stream
Delaney Gillilan: and you just update whatever's happening in your backend
Delaney Gillilan: as it's happening.
Delaney Gillilan: And it simplifies the world.
Delaney Gillilan: And what's also interesting
Delaney Gillilan: is because of how we do compression and all that,
Delaney Gillilan: you just send your entire page.
Delaney Gillilan: You don't need like out of band.
Delaney Gillilan: It doesn't even really make sense
Delaney Gillilan: because we're so fast that you can just,
Delaney Gillilan: you as a Python developer,
Delaney Gillilan: you just give us your entire page
Delaney Gillilan: and let us deal with it.
Delaney Gillilan: And we will come up with the fast stuff.
Delaney Gillilan: So Chris should probably talk a lot more to that
Delaney Gillilan: because the fat morpher stuff,
Delaney Gillilan: it's a fundamental change in how you build web apps, I think.
Chris May: Yeah, yeah.
Chris May: especially the kind of the mental shift of like,
Chris May: because I kept thinking, okay, I need to like send one row at a time.
Chris May: And I actually have one status screen that does that
Chris May: because we use a Firestore, Google's Firestore as our backend for this app.
Chris May: But for some reason, sometimes it just doesn't send every update.
Chris May: And so on another status screen, I actually, you know,
Chris May: query the whole database table or collection and send it down to Pipe.
Chris May: And because sometimes it doesn't send from Firestore,
Chris May: I get the entire latest state of all the things that are in flight and updated on my screen.
Michael Kennedy: And it just makes things easier.
Michael Kennedy: Yeah, it's amazing.
Michael Kennedy: Sounds like a good opportunity to subscribe to database query changes.
Michael Kennedy: I know some databases you can say, if this query updates, you know, trigger this event and then keep it flowing,
Michael Kennedy: like straight from events on the database, straight to your front end.
Michael Kennedy: Pretty cool.
Michael Kennedy: I do want to go back and just put a little bit of commentary, Delaney.
Michael Kennedy: Well, you said optimistic updates.
Michael Kennedy: So one of the things that's really common in JavaScript is I click this thing, it changes.
Michael Kennedy: I want to mark it as changed.
Michael Kennedy: And then I'm going to tell the server, hey, we made this change.
Michael Kennedy: It's very possible the server died, that you're not allowed to make that change or whatever.
Michael Kennedy: And then you've got to come back and go actually undo that.
Michael Kennedy: That really, you know, there's like a weird.
Michael Kennedy: So what you're saying is you don't have to worry about that kind of stuff.
Delaney Gillilan: We're a framework, not just a library.
Delaney Gillilan: The idea is that you have these indicators that not only basically your indicators drive a signal.
Delaney Gillilan: Like, again, the details don't really matter.
Delaney Gillilan: But the idea is that you have instantaneous,
Delaney Gillilan: like within the same frame updates of,
Delaney Gillilan: hey, I'm going off to do something.
Delaney Gillilan: Like usually you make a spinner or you say,
Delaney Gillilan: I'm going to do this to gray out the field
Delaney Gillilan: or I'm going to do,
Delaney Gillilan: like there's all kinds of things you can drive.
Delaney Gillilan: Because again, the state of what the local stuff is
Delaney Gillilan: while the change is there, that lives in the client.
Delaney Gillilan: Like that is part of Datastar.
Delaney Gillilan: It has all the right tools to make it
Delaney Gillilan: so that you can disable it or gray it out
Delaney Gillilan: or say, I'm going to put a spinner next to it.
Delaney Gillilan: Like you can do all those things.
Delaney Gillilan: But the thing is you're not lying to your user.
Delaney Gillilan: That's my whole thing.
Delaney Gillilan: And people say, well, that's not really a lie.
Delaney Gillilan: It's like, yes, it is.
Delaney Gillilan: You're literally lying to people.
Delaney Gillilan: Like, please stop.
Delaney Gillilan: It's a DX issue.
Delaney Gillilan: The reason why people do it is because it's convenient, not because it's correct.
Ben Crocker: And again, like you can do optimistic updates.
Ben Crocker: You can do SBA-like things using Datastar.
Ben Crocker: We don't recommend it because Datastar is more than just this tech.
Ben Crocker: It's also like a way of doing things.
Ben Crocker: What I wanted to point out here is that you might imagine that, you know, this is something that when you click edit,
Ben Crocker: it turns it into a form.
Ben Crocker: So you might like load the form into the page, hide the form,
Ben Crocker: and then just do a show hide approach.
Ben Crocker: But the hypermedia approach is kind of like the REST approach
Ben Crocker: where you can only take the next action at any given time.
Ben Crocker: So if you open the network tab,
Ben Crocker: I just want to kind of walk you through this briefly.
Ben Crocker: If you cancel that, when you hit edit,
Ben Crocker: you will see a network request to the server.
Ben Crocker: And what comes back is that form.
Ben Crocker: So it's real time as in like what you're seeing now
Ben Crocker: is the actual state reflected on the backend.
Ben Crocker: And when you save, you're also going to see the same thing.
Ben Crocker: You're going to see a network request to the server
Ben Crocker: and it gets the true current state
Ben Crocker: as it has been saved is now all comes back down.
Ben Crocker: So it's like you don't even need optimistic updates
Ben Crocker: most of the time.
Ben Crocker: And when you do use it,
Ben Crocker: it's because you're trying to cover up poor performance.
Ben Crocker: You're favoring perceived performance
Ben Crocker: over true performance.
Chris May: One of the things I hear a lot is people saying,
Chris May: but it's so much slower.
Chris May: But I think people are used to
Chris May: or think it's much slower than it is
Chris May: because the web, the spa life
Chris May: that we see around us feels so slow.
Chris May: But anytime I've seen people try to lean
Chris May: into just using the network,
Chris May: it's so much faster than you expect.
Delaney Gillilan: Well, and also you have so much less our way.
Delaney Gillilan: Your usage of network can be easily 100x less,
Delaney Gillilan: which means you have less contention,
Delaney Gillilan: which means when you do send something,
Delaney Gillilan: it's there immediately.
Delaney Gillilan: And also because you're not doing polling
Delaney Gillilan: with polling, you have to send to the server and the server sends back. If you just send from server
Delaney Gillilan: when something updates, now you've just halved your RTT, right? Your round trip has just halved.
Delaney Gillilan: So you half it and you're doing like a thousand less of something. All of a sudden, things opened
Delaney Gillilan: up for you in weird ways, right? It's a fundamentally different way of thinking about the problem.
Delaney Gillilan: Another example that we like to bring up a lot is there was a while back, someone did a million
Delaney Gillilan: checkbox demo and they had a whole write-up on it, right? And they basically had to take it down
Delaney Gillilan: because it was just too expensive to run.
Delaney Gillilan: We have a version that's not just checkboxes,
Delaney Gillilan: but color checkboxes.
Delaney Gillilan: So you can actually make ASCII art and stuff like that.
Delaney Gillilan: And it's a billion.
Delaney Gillilan: And it runs on the same server
Delaney Gillilan: that was running that Game of Life demo.
Delaney Gillilan: It's on the same server.
Delaney Gillilan: It's actively, and it's been on top of Hacker News.
Ben Crocker: It's a $5 VPS as far as I know.
Delaney Gillilan: Yeah, it's a $5 one.
Delaney Gillilan: It runs all these demos all the time,
Delaney Gillilan: active, top of Hacker News,
Delaney Gillilan: and it's never gone down.
Ben Crocker: What's really interesting about that demo
Ben Crocker: is that it becomes a backend optimization challenge, right?
Ben Crocker: You're no longer trying to optimize the front end.
Ben Crocker: You rely on the browser and the browser API to take care of that for you.
Ben Crocker: And now you're doing, I don't know, you're optimizing your database.
Ben Crocker: You're optimizing your queries.
Ben Crocker: I actually threw the link to that in there.
Ben Crocker: Because it's a nice demo to look at when you realize there are a billion of these being stored in a SQLite database somewhere.
Ben Crocker: So you can scroll anywhere on the board.
Ben Crocker: And it's like a 30,000 by 30,000 something grid
Ben Crocker: because the square root of a billion
Ben Crocker: is some weird number, as it turns out.
Ben Crocker: And obviously this is, or not obviously,
Ben Crocker: but this is multiplayer.
Ben Crocker: So if I was to view this
Ben Crocker: or you were to open a different browser tab,
Ben Crocker: then you would see the exact same thing.
Ben Crocker: The board is the same everywhere.
Ben Crocker: That is crazy.
Delaney Gillilan: The one thing that I will say that's hard,
Delaney Gillilan: I don't know, Chris can really probably speak to this more
Delaney Gillilan: and it sounds like a weird thing,
Delaney Gillilan: Like, Datastar ends up in reality being like five or six things on your page, and it just
Delaney Gillilan: gets out of the way.
Delaney Gillilan: All of a sudden, like, most Datastar, you're going to get to a point where you try it,
Delaney Gillilan: and you're like, that's it?
Delaney Gillilan: Like, you will feel weird about every other approach once you really try it.
Delaney Gillilan: Like, just try it, and you will see every other approach is wrong.
Delaney Gillilan: Like, it's not because I made it.
Delaney Gillilan: Like, I wish someone would have made this because it just, it's so simple.
Delaney Gillilan: It feels like cheating in a weird way.
Delaney Gillilan: That's hard to explain.
Delaney Gillilan: it really it's a weird like i don't know what we all were doing i was part of the problem like right
Delaney Gillilan: like i was like oh well google and everyone facebook and all the other guys have this figured
Delaney Gillilan: out like this has to be the best approach so that's the weird thing is it's so simple i don't know what
Delaney Gillilan: like crystal probably it sounds like i'm selling it but it's just i don't know it's weird it's so
Chris May: exciting it's so amazing and yet it's it's using all these boring technologies and like yeah like
Chris May: i remember i showed my wife this my status board and she's like oh yeah that looks really cool and
Chris May: I'm like, oh yeah, because you don't understand what everything is going on behind it, you know?
Michael Kennedy: Yeah, exactly.
Michael Kennedy: It's like, it used to be so complicated.
Michael Kennedy: So let's do, we got a little bit of time left.
Michael Kennedy: Let's do this.
Michael Kennedy: I think it might be fun to talk through kind of some of the attributes and what it looks like,
Michael Kennedy: kind of program with this a little bit and then what it looks like on the server.
Michael Kennedy: How's that sound?
Delaney Gillilan: Would it make sense?
Delaney Gillilan: Like there's a good example of a kind of a meta framework for Python called Stario,
Delaney Gillilan: which they just got their V2.
Michael Kennedy: Okay.
Delaney Gillilan: Just launched.
Delaney Gillilan: I don't know if that is a more Python-esque way of doing it.
Delaney Gillilan: It depends on how you want to.
Michael Kennedy: Let's start with some of the Datastar attributes,
Michael Kennedy: and then we could talk about that.
Michael Kennedy: How's that sound?
Michael Kennedy: Like, just, you know, what does it look like to say to,
Michael Kennedy: you know, I want to connect a button to Datastar actions
Michael Kennedy: on the back end or wired up and so on?
Michael Kennedy: We've talked about a lot about, you know,
Ben Crocker: the back end driving the front end through patching elements,
Ben Crocker: which is kind of the lower half of what you're looking at.
Ben Crocker: To access that, you need to have a click listener or some sort of event listener to trigger that.
Ben Crocker: And datastar, as the name suggests, uses data-star or asterisk attributes.
Ben Crocker: So these are part of the HTML spec data set.
Ben Crocker: And we just leverage that.
Ben Crocker: And we have a small grammar that you'd find on the reference page with all of the data-attributes.
Ben Crocker: And data on is just registering an event listener on the current element.
Ben Crocker: So data on colon click is just obviously registering a click event handler on the button.
Ben Crocker: And what's happening is that then Datasar also gives you actions.
Ben Crocker: So that at get is an action to send a get request to the server.
Ben Crocker: You pass in the path, which is slash endpoint there.
Ben Crocker: And then the server takes care of the rest.
Ben Crocker: So what you're seeing is a div underneath with an ID.
Ben Crocker: IDs are obviously unique in HTML, so they're ideal.
Ben Crocker: And Datastar just uses that fact.
Ben Crocker: And what Datastar is going to do from the backend is it's going to, yeah, just send back down that div with some text content inside of it.
Ben Crocker: And then what Datastar does is it mutates the incoming DOM into the existing DOM.
Ben Crocker: I'm sorry, it morphs.
Ben Crocker: So it uses a morphing strategy.
Ben Crocker: So rather than doing a straight swap, which is what HTMLX does, it will actually morph the incoming HTML into what's currently on the page.
Ben Crocker: That's kind of what opens up the door to these kind of broad, like where you send the entire document down, but only what changes get swapped in.
Ben Crocker: But in this case, it's more of a fine grained thing.
Ben Crocker: So only that div is going to get swapped out.
Delaney Gillilan: And the reason why that morph matters is because you, since you aren't replacing it, things like
Delaney Gillilan: focus and like where your input is and all that stays the same. So when you, even though you update
Delaney Gillilan: the whole page, you're actually not actually changing the state and that's really important.
Delaney Gillilan: So you do declarative development. You just say, I want it to look this way and it just does the
Delaney Gillilan: right things to do it. It's from a mental ball. It's almost like having the BDOM in the backend.
Delaney Gillilan: You just say, here's what I want this page to look like. And it does all the work, but we don't do
Ben Crocker: BDOM. We don't do any of that stuff. We do the fast thing. So in terms of what your backend would
Ben Crocker: send, if you can just scroll back up, it's that text that you were looking at. Let's look at the
Ben Crocker: raw version because, yeah, so that's the HTML. If you scroll down to the next text, it's a code
Michael Kennedy: field. Yeah. There's a section that has like event, data star, patch elements, and then what the
Michael Kennedy: elements are and so on, right? This is like the SSE stream. Yeah. And that would be the raw events
Ben Crocker: that you would send down.
Ben Crocker: But if you look at the next one
Ben Crocker: where we have a Python example,
Ben Crocker: you would see like,
Ben Crocker: well, how do you do that in Python
Ben Crocker: without actually writing,
Ben Crocker: you know, the raw format out?
Ben Crocker: And that's how you would do it there
Ben Crocker: using the Python SDK.
Ben Crocker: Let's dive in a little bit
Michael Kennedy: to the SDK itself.
Michael Kennedy: So I got so many things open.
Michael Kennedy: Hold on.
Michael Kennedy: We got another link for you.
Michael Kennedy: No, I'm kidding.
Michael Kennedy: You know what?
Michael Kennedy: I'm just going to go.
Michael Kennedy: I'm going from the homepage.
Michael Kennedy: There we go.
Michael Kennedy: There you go.
Michael Kennedy: Chris, maybe you could talk us through this.
Michael Kennedy: I think before I throw it to you, though, yeah, there's a lot of framework support here.
Michael Kennedy: So if you're a Django person, a FastAPI person, even fast HTML, it's interesting,
Michael Kennedy: LightSar, Quartz, SanEck, or Starlet.
Michael Kennedy: There's a bunch of different ones here, but maybe just talk us through this, if you'll, Chris.
Chris May: I'm trying to remember.
Chris May: I'm not as familiar with the example, but as you can see,
Chris May: this one method is, I think, where the magic happens.
Chris May: I'm trying to remember which tool.
Chris May: This is a Quartz.
Chris May: Yeah, the Quartz is the examples in Quartz.
Chris May: So, you know, they first define a route, a home route slash, and it returns HTML and it's just in the string there.
Chris May: Right. And then that.
Chris May: This could be a Ginget or Chameleon or whatever template.
Chris May: Like it's just whatever. It doesn't matter.
Chris May: But somehow they get it. Yeah.
Chris May: Makes the example easier to see in one go.
Chris May: And obviously you see that it's pulling Datastar from the CDN and then it on the load, it gets it sends a request to the slash updates endpoint.
Chris May: See what comes from that.
Chris May: And so down below that, you have the slash updates endpoint, which has a decorator called data, data star underscore response.
Chris May: And that just does a couple of nice things like sets the HTTP headers and whatnot to be the service and event protocol.
Chris May: And then what I like to the first line says signals equals await read signals.
Chris May: And so that's another helper that essentially says when I have a request coming in,
Chris May: data star has a specific way of sending the state of the front end to the back end.
Chris May: So the back end can do whatever it needs.
Michael Kennedy: Right. We haven't even talked about signals yet. They're like kind of a data binding set of JavaScript data that loads, you know, reactive data loads on the front end, right?
Chris May: In some ways, the Alpine JS kind of,
Chris May: I don't want to say equivalent,
Chris May: but it covers similar functionality.
Chris May: And so if you have data on the front end
Chris May: that the backend would like to know,
Chris May: that's an easy way to get it.
Chris May: And then essentially what happens
Chris May: is we get into this loop, this while true loop,
Chris May: and Datastar will just start sending down
Chris May: server sent events in text
Chris May: by using the sse.patchElements function,
Chris May: or I guess it's a method technically.
Chris May: And all it's doing is sending a string
Chris May: that has the current date time dot now in ISO format down.
Chris May: And then we wait, we sleep for a second,
Chris May: or is it a second?
Chris May: I guess it's a microsecond.
Chris May: I keep forgetting which one.
Chris May: Yeah, that's a millisecond.
Michael Kennedy: No, no, it's second.
Michael Kennedy: And sleep is seconds.
Michael Kennedy: Sleep is seconds.
Michael Kennedy: It takes a float.
Chris May: So once it sleeps, it sends another server sign event.
Chris May: With this time, it's instead of sending the HTML down,
Chris May: we're sending a signal.
Chris May: So essentially changing, say, you can say,
Chris May: like the JavaScript value or script data
Chris May: onto the front of the page.
Michael Kennedy: Right, right.
Michael Kennedy: So it's showing that you can send the HTML and let Datastar patch it, or you can basically
Michael Kennedy: from the server set one of these signal things that will be reactive on the front end, right?
Ben Crocker: Yeah.
Ben Crocker: You said it much better than I did.
Ben Crocker: Thanks.
Ben Crocker: It's a long way of saying it's a clock, right?
Ben Crocker: Yeah.
Delaney Gillilan: Also the thing, just for people that aren't used to thinking about this way, especially
Delaney Gillilan: if you're doing Python, like all a signal is, is instead of saying that here's, I'm
Delaney Gillilan: setting a variable, you're saying I'm setting a relationship that says like, kind of like
Delaney Gillilan: in an Excel document when you set a formula for a cell,
Delaney Gillilan: it's the same idea.
Delaney Gillilan: You're setting up a relationship saying,
Delaney Gillilan: when this thing and this thing changes, update this.
Delaney Gillilan: And it does smart things to do that efficiently.
Delaney Gillilan: But the idea is it's a relationship.
Delaney Gillilan: It's declarative.
Delaney Gillilan: So kind of like with SQL,
Delaney Gillilan: you think of SQL as a declarative language, right?
Delaney Gillilan: You don't care how it creates an index.
Delaney Gillilan: You just say, create index.
Delaney Gillilan: Same thing happens here.
Delaney Gillilan: You just say, hey, I want when this thing changes,
Delaney Gillilan: this other thing to change.
Delaney Gillilan: And the problem is that declarativeness
Delaney Gillilan: is not built into JavaScript.
Delaney Gillilan: It's not built into the browser,
Delaney Gillilan: but we just made the web a little bit more declarative.
Delaney Gillilan: That's all we did, basically.
Michael Kennedy: Right.
Michael Kennedy: Declarative is generally pretty good.
Michael Kennedy: It's a good way to work.
Michael Kennedy: It keeps things simple
Michael Kennedy: and lets the underlying system have at it.
Michael Kennedy: So a couple of things,
Michael Kennedy: well, we still got a little bit of time,
Michael Kennedy: but to wrap things up a little bit.
Michael Kennedy: Editors.
Michael Kennedy: I think having good editor support
Michael Kennedy: is really important for adoption.
Michael Kennedy: You know, drives me crazy
Michael Kennedy: when I go and try to work with JavaScript, CSS,
Michael Kennedy: attributes or whatever,
Michael Kennedy: and I'm like, they're not here.
Michael Kennedy: No help.
Michael Kennedy: So you all have nice extensions and plugins for common editors Python people might use, right?
Ben Crocker: Yeah, we have VS Code, which you're seeing here, and PHP Storm.
Ben Crocker: Or sorry, I use PHP Storm, but all JetBrains editors.
Ben Crocker: PHP Storm, PyToram, WebStorm, all of them things.
Ben Crocker: So it's in the JetBrains marketplace, so it'll work for, I believe, all JetBrains IDEs.
Ben Crocker: I believe so.
Michael Kennedy: You also have the AI editors covered.
Michael Kennedy: Do we?
Michael Kennedy: In the OpenVSX registry, all the ones that have been kicked out from VS Code, this is where they all have to go to get their installs, right?
Michael Kennedy: That explains why people requested this from me.
Michael Kennedy: Yeah, if you're doing cursor, anti-gravity, windsurf, like all those things, they were all kicked out of the VS Code registry.
Michael Kennedy: That's not a complaint.
Michael Kennedy: I mean, it's a Microsoft product.
Michael Kennedy: They built it.
Michael Kennedy: They don't have to build all the other ones.
Michael Kennedy: But that's why they're here, right?
Ben Crocker: We keep those up to date.
Ben Crocker: We do those ourselves, the SDKs.
Ben Crocker: I mean, Delaney wrote the Go one, I wrote the PHP one,
Ben Crocker: and the rest are just community contributions.
Ben Crocker: We've had contributions to these too, to the IDE extensions.
Ben Crocker: We maintain these primarily.
Ben Crocker: Yeah, and these are great.
Ben Crocker: These just, you know, save on typing, but more importantly, save on making typos.
Ben Crocker: You know, they show you all of the available data attributes.
Delaney Gillilan: Maybe Chris can speak more to is that the irony is, though,
Delaney Gillilan: you won't need that many tags to actually do your work.
Delaney Gillilan: So it's not like a tailwind thing where you're like,
Delaney Gillilan: oh, I rely on it to autocomplete.
Delaney Gillilan: It's just...
Chris May: Yeah, absolutely.
Chris May: In fact, it's one of those things
Chris May: where I discover more things I can do with Datastar
Chris May: because as I'm typing data dash and I'm like,
Chris May: oh, I didn't actually remember
Chris May: that there's a attribute to do whatever it is.
Chris May: I don't remember.
Chris May: Like, I can't remember at this point.
Chris May: And then I went to the documentation like,
Chris May: oh, check this out.
Chris May: This is so much more I can do.
Chris May: But yeah, I find I love the plugin,
Chris May: but I find I don't use it too much
Chris May: just because I'm not writing as much HTML with it.
Michael Kennedy: While I'm sitting here on this open VSX registry,
Michael Kennedy: do you all have advice for making Datastar work well
Michael Kennedy: with Identic AI and Claude Code, Cursor, et cetera?
Delaney Gillilan: There's some active research going on
Delaney Gillilan: like in Oslo at a college
Delaney Gillilan: that's doing, ironically, using Datastar
Delaney Gillilan: to do some stuff around like how LLMs work with code bases.
Delaney Gillilan: And the reason why is because the entire code base
Delaney Gillilan: fits in basically every context, even the nano ones, like the entire code base fits there.
Delaney Gillilan: And what they found, we've gone back and forth a bit, is that almost all of them are completely
Delaney Gillilan: overfitted. So if you just want to make a website with agentic stuff, go do React,
Delaney Gillilan: because that's what it's built for. And it's overfitted to such a degree that if you try to
Delaney Gillilan: use the spec correctly and to say, here's all the sorts of data star, go use it to build websites,
Delaney Gillilan: it will fall over almost in every regard.
Delaney Gillilan: So it's one of those things where you don't need that much,
Delaney Gillilan: but it will ironically show you how bad things like Clawed and Codex and stuff
Delaney Gillilan: are at just using the current context to solve things.
Delaney Gillilan: Hopefully that gets better, but we have something around,
Delaney Gillilan: like we have a slash docs page that you can feed into your LLM,
Delaney Gillilan: but I'll say that we do not focus on that at all
Delaney Gillilan: because you're basically fighting against what the training already happened.
Delaney Gillilan: So you're better off, like if you want to use,
Delaney Gillilan: if you want to make better size,
Delaney Gillilan: you want to be fast and efficient
Delaney Gillilan: and all that stuff,
Delaney Gillilan: we're 100% the right thing to do.
Delaney Gillilan: If you just want to like one shot something,
Delaney Gillilan: go use React and stay in that world.
Michael Kennedy: You want to vibe code it?
Michael Kennedy: Hey, I've got something.
Michael Kennedy: I feel like this might resonate with you, Delaney,
Michael Kennedy: especially the way you just described it.
Michael Kennedy: Have you all seen the Kai Lintit Senior Engineer
Michael Kennedy: Tries Vibe Coding?
Michael Kennedy: This is an amazing video.
Michael Kennedy: And like half of the video is like,
Michael Kennedy: no, no, no, not in being installed.
Michael Kennedy: What are you doing?
Michael Kennedy: It reminds me very much of like, it's just like, nope, that's not what I told you to do.
Michael Kennedy: I know that's what you think the most common thing is, please stop.
Delaney Gillilan: Yeah.
Delaney Gillilan: And the thing is that it's not that I actually like a lot of the stuff, but I treat it as
Delaney Gillilan: an autocomplete or like it can write code faster than I can when it comes to like, hey, change
Delaney Gillilan: this in 27 different places.
Delaney Gillilan: And I forget which files I did it like.
Delaney Gillilan: There's value to it, but people are trying to use it to learn.
Delaney Gillilan: It's a complete, it actively is working against you.
Delaney Gillilan: Ben has done an amazing job with the guide.
Delaney Gillilan: Like, please, like, it's fine to use the LLMs to help, like, guide your process and to, like,
Delaney Gillilan: knock stuff out quickly once you have a baseline.
Delaney Gillilan: But you have to know when to say no.
Delaney Gillilan: And he has done it.
Delaney Gillilan: The guide takes half an hour, less than a half, like, probably 15, 20 minutes to read
Delaney Gillilan: and then, like, an hour to actually work through.
Delaney Gillilan: Please try it first before you try to throw it at the LLMs.
Delaney Gillilan: It's not because I hate them.
Delaney Gillilan: It's more that they are just overfit to the, like, the sea of badly written SPA code.
Delaney Gillilan: That's, unfortunately, that's the situation we're in.
Michael Kennedy: Yeah, especially with JavaScript, the agentic AI is very trained.
Michael Kennedy: It wants what it wants.
Michael Kennedy: All right.
Michael Kennedy: Let's talk, speaking of being near the guy,
Michael Kennedy: if I go over here to more, there's a pro section.
Michael Kennedy: I'll let you all give a shout out to pro.
Michael Kennedy: I know you have a really strong sales pitch here.
Michael Kennedy: You were talking about earlier.
Michael Kennedy: Now, what is this data, Datastar Pro?
Ben Crocker: It's been about a year since we released the beta one of Datastar.
Ben Crocker: We are taking our sweet ass time for a very good reason, which is that we want version one to be the last version or like the last major version.
Ben Crocker: We don't really want to force people through breaking changes and major updates because that's really just a pain.
Ben Crocker: And I think like Python has done a great job with that and Go as well.
Ben Crocker: And like there are some ecosystems where you just don't make breaking changes.
Ben Crocker: That's the norm. And that's what we want to be.
Ben Crocker: And the JavaScript ecosystem is, you know, the antithesis to that.
Michael Kennedy: They're like, here, hold my beer.
Michael Kennedy: I'll show you breaking changes.
Michael Kennedy: Yeah.
Michael Kennedy: Have you heard of LeftPad?
Delaney Gillilan: To give you an idea of how far we take that, we don't have npm.
Delaney Gillilan: Like we don't actually even submit to npm.
Delaney Gillilan: We have no package.json in our JavaScript framework.
Delaney Gillilan: We actually, like, there's none of that stuff.
Delaney Gillilan: It does not exist in our ecosystem.
Delaney Gillilan: So we take it very seriously when we say it's funny to have a JavaScript framework that
Delaney Gillilan: actively hates the JavaScript ecosystem.
Michael Kennedy: And you guys, I think also it's worth pointing out
Michael Kennedy: that you don't have a strong build step,
Michael Kennedy: tree shaking, web packing story, right?
Michael Kennedy: You just dropped-
Delaney Gillilan: No, we do.
Delaney Gillilan: The thing is that, like for example,
Delaney Gillilan: beat is kind of the well-known way to do this stuff.
Delaney Gillilan: But guess what?
Delaney Gillilan: Under the hood, it uses ES build.
Delaney Gillilan: And ES build is a go thing.
Delaney Gillilan: We build a lot of our stuff in go.
Delaney Gillilan: So it's literally embedded in our,
Delaney Gillilan: like we just use the ES build directly.
Delaney Gillilan: We don't need 20,000 things from npm.
Delaney Gillilan: We just use the go tools inside of our binary
Delaney Gillilan: because that's the fast thing to do.
Delaney Gillilan: So we don't need all of that.
Delaney Gillilan: So we have no dependencies, nothing,
Delaney Gillilan: and we don't even use npm or any of that at all.
Ben Crocker: Yeah, so the reason I mentioned the beta
Ben Crocker: is during the beta phase, which lasted about six months,
Ben Crocker: we, Datastar gained a lot of traction,
Ben Crocker: a lot of interest, and people had a lot of requests.
Ben Crocker: And we were like, yeah, we see,
Ben Crocker: and because it's plugin-based,
Ben Crocker: you can always just add another plugin.
Ben Crocker: You can add it yourself,
Ben Crocker: or we can build a plugin and add it to Datastar.
Ben Crocker: But we were very adamant about keeping the open source Datastar framework as tight as possible.
Ben Crocker: Like I said, it should do everything you need, but nothing you don't.
Ben Crocker: So how do we do that while adding plugins?
Ben Crocker: So during that beta phase, we started thinking about, well, do we have multiple versions of Datastar?
Ben Crocker: Do we have a marketplace of plugins?
Ben Crocker: Or how do we manage that?
Ben Crocker: And at the same time, we were also asking ourselves, because Delaney and I both, we have full-time things that we're doing.
Ben Crocker: And this is a side project, but we're almost doing it full time alongside our other full time things. So how do we make this project sustainable? Because it doesn't stop at Datastar. You probably see Rocket and Stellar CSS on that page in the navigation sidebar. Those are like projects that build on top of Datastar. So Datastar is just the foundation. And Rocket kind of takes it to web components and Stellar CSS is a CSS framework that builds on top of these concepts.
Ben Crocker: So we're trying to fix not only JavaScript web components, but also CSS.
Ben Crocker: So we have a long-term vision.
Ben Crocker: How do we make that sustainable when we're both busy people anyway, and this just takes
Ben Crocker: so much of our time and the project appears to be growing?
Ben Crocker: So at that point, we decided, well, how do we want to even run this?
Ben Crocker: So we decided we don't want to found some company and do VC like we're, if anything,
Ben Crocker: anti-VC funding.
Ben Crocker: So we founded a nonprofit organization in the U.S. called Star Federation, and that's what backs this project, including Rocket and Stellar CSS.
Ben Crocker: To help fund that organization, we decided let's have Datastar be the open source framework, but then something called Datastar Pro, which is like all those plugins that we think are good ideas, but that most people don't need.
Ben Crocker: We'll put those into Datastar Pro, and that can kind of grow over time.
Ben Crocker: It's a collection of plugins that you might want if you're using Datastar in a professional setting.
Ben Crocker: But, you know, if you're just using Datastar, you don't actually need it.
Ben Crocker: And so that's what we tell people.
Ben Crocker: Most people don't need it.
Ben Crocker: It's a collection of plugins and it's a Datastar inspector, which sits on your page.
Ben Crocker: You get access to the bundler and now you get access to Rocket and StadrCSS, which is a work in progress.
Ben Crocker: Yeah, that was, I think, a good decision.
Ben Crocker: Like there was definitely some uproar initially that, you know, some plugins were taken away, but those plugins were never taken away.
Ben Crocker: They still exist in the repo if anybody needs them.
Ben Crocker: What the result is, is that we have like some money coming into a bank account, which is not even used to pay maintainers.
Ben Crocker: We use that for running costs and like for, you know, podcasting software.
Ben Crocker: And if we need to travel to conferences, which we've yet to do.
Ben Crocker: But essentially, it's like a way of having some money into the bank so that we can justify all of the work that we do in maintaining Datastar and pushing that forward.
Michael Kennedy: But the V1 thing.
Michael Kennedy: 100% free sounds great until that means it becomes abandoned where, you know, and like people can't work on it anymore.
Michael Kennedy: And I think it's fair.
Delaney Gillilan: There's one thing that's kind of interesting about the model, because especially with the tailwind stuff that's been going on lately.
Delaney Gillilan: One of the things that we talked about, and people get very angry about this, but for example,
Delaney Gillilan: Rocket is a web component layer that you basically just write Datastar in a declarative way,
Delaney Gillilan: and it dynamically generates web components for you on the fly.
Delaney Gillilan: And it's a great way to build web components.
Delaney Gillilan: It'll save you tons of hours.
Delaney Gillilan: And people won't pay for features.
Delaney Gillilan: They pay for convenience.
Delaney Gillilan: So the thing is, people said, well, I want you to generate out the content and make that
Delaney Gillilan: open and available.
Delaney Gillilan: And we said no, because basically the way we look at it is that almost like Pico 8,
Delaney Gillilan: or any kind of game engine, you pay for the game
Delaney Gillilan: and then all the mods are free.
Delaney Gillilan: So all the rocket components and all this stuff
Delaney Gillilan: is gonna be free, but the core engine is not free.
Delaney Gillilan: It's a paid thing.
Delaney Gillilan: And the reason why is if it becomes successful,
Delaney Gillilan: if we do our job and we make it so it's easy for everybody,
Delaney Gillilan: the Star Federation will do better over time.
Delaney Gillilan: Whereas Tailwind's model of they're competing
Delaney Gillilan: against every other person in that space,
Delaney Gillilan: whereas it just does not work.
Delaney Gillilan: So our thing is if we do get successful
Delaney Gillilan: and we do get more people,
Delaney Gillilan: then it's self-sustaining as in you paid for this little engine
Delaney Gillilan: and now you get all the ecosystem around it of open source.
Delaney Gillilan: So you can do open source in a way,
Delaney Gillilan: but you have to find a core engine that is not open source.
Delaney Gillilan: Otherwise it will fail in the modern world.
Michael Kennedy: Let's close this thing out with two super quick things
Michael Kennedy: because I know we're over time.
Michael Kennedy: Roadmap.
Michael Kennedy: Ben, you talked about taking your sweet time to 1.0.
Michael Kennedy: Is there a forward-looking roadmap?
Michael Kennedy: Are you guys done or what are things?
Ben Crocker: The release counted RC1, I think it was about six months ago.
Ben Crocker: and like the release has just been slowing down, slowing down.
Ben Crocker: So that stagnation in like just releases with fixes
Ben Crocker: is a good sign to me that we're very, very close.
Ben Crocker: At this point, like the switch from release candidate to stable
Ben Crocker: is just literally like just, you know, dropping the RC.
Ben Crocker: There's no like features that are going into it.
Ben Crocker: There's no big changes.
Ben Crocker: We're taking our time because like I said,
Ben Crocker: it's easy to put something up slightly prematurely
Ben Crocker: and get some defaults wrong.
Ben Crocker: I mean, that's what happened with HMX 2 was just like fixing some defaults that they decided they got wrong in version one.
Ben Crocker: So we're trying to avoid a situation like that.
Ben Crocker: And the only way to do that is to just let it simmer, let people use it, let people dog food it.
Ben Crocker: And us, too, we're actively using for many projects using data ourselves and discovering every now and then, oh, this default is probably we're trying to avoid foot guns.
Ben Crocker: So we're trying to make it so that the defaults give you the best possible experience that you need zero configuration, ideally, but you can configure as needed.
Ben Crocker: But getting those defaults right is really the only thing stopping us from, not right, but locked down is the only thing stopping us from a V1 stable.
Ben Crocker: I don't like to give timelines.
Ben Crocker: In fact, it's one of our things that I tell Delaney, never promise a timeline.
Ben Crocker: But I could see us in the first half of this year,
Ben Crocker: just flipping the switch.
Michael Kennedy: But it sounds like you might be able to use the RC
Michael Kennedy: and you might more or less be safe, yeah.
Delaney Gillilan: In fact, we recommend people rename the RC
Delaney Gillilan: and they change the name to React-Foo
Delaney Gillilan: so that they just drop it in their React projects
Delaney Gillilan: because the entire framework is smaller than most components.
Delaney Gillilan: Just start hiding it places.
Delaney Gillilan: Yeah, don't even name it Datastar.
Michael Kennedy: A stealth takeover of the spa world.
Michael Kennedy: Awesome. I love it.
Michael Kennedy: All right, let's wrap up the show with a final call to action
Michael Kennedy: for people who want to use Datastar, learn more, get started.
Michael Kennedy: Chris, I'll let you go first so Ben and Delaney can have the final word.
Chris May: The first thing I was thinking of is because I get asked so much about
Chris May: how long it takes to connect to the server and things like that,
Chris May: there is a portion in the DjangoCon talk I gave in, I think it was 2023,
Chris May: where I showed a video of five phones, five Android phones, trying to do the same thing,
Chris May: shopping for eggs, I believe it was. And essentially one of them is an HTML driven
Chris May: multi-page app and it smokes the single page applications, the native apps and everything.
Chris May: And so I put a link in our chat. Maybe you'll be a part of the show notes. It's a deep link to go
Chris May: straight to that portion of the talk because it is like that video reminded me like, this is what
Chris May: I want to build. I want to build websites that are fun for people to use. And, you know, Datastar
Chris May: enables me to use real-time interactions with way less complexity than I ever thought
Chris May: possible. So I guess the two things I would say is, one, check out the deep link if you're at all
Chris May: interested. And number two, definitely try out something, you know, just even clone the Python
Chris May: repo and just try some of the examples and see what it's like. Yeah, I'll definitely link to that.
Chris May: Cool. Thanks, Ben.
Ben Crocker: I also gave a conference talk last year.
Ben Crocker: There's a recording, so I'll send you the link to that,
Ben Crocker: which really walks through my journey of Datastar
Ben Crocker: and how Datastar has truly opened my eyes to what's possible.
Ben Crocker: I feel like I talk a lot about how Datastar is a journey of unlearning
Ben Crocker: old and bad patterns, deeply rooted ones in what I think web development is.
Ben Crocker: And these days, as I mentioned,
Ben Crocker: I never would have thought that I'd be developing in Go,
Ben Crocker: but I see like all like the,
Ben Crocker: like I think even Python
Ben Crocker: is getting better concurrency support, right?
Ben Crocker: So I think you talked about that recently, Michael, here.
Ben Crocker: So now I'm seeing with Datastar,
Ben Crocker: I can do so much more on the backend.
Ben Crocker: I can be so much more creative on the backend
Ben Crocker: and that's what interests me.
Ben Crocker: So it's just fun.
Ben Crocker: What can I say?
Ben Crocker: It's fun.
Chris May: I'm still really jealous of that presentation too.
Chris May: Well done with it.
Michael Kennedy: Yeah, certainly send me the link.
Michael Kennedy: I'll put it in the show notes and well done.
Michael Kennedy: Delaney.
Delaney Gillilan: The irony is that like, I don't consider myself a web dev at all.
Delaney Gillilan: It just happens to be something I do a little bit of.
Delaney Gillilan: The thing that is the, when I first started making this public, I was like, Hey, I think
Delaney Gillilan: I'm onto something like someone proved me wrong.
Delaney Gillilan: I was, I'm a little bit more like kind of, I always say like in the jujitsu world type
Delaney Gillilan: stuff, like you want someone to roll with you, not because you're trying to up them.
Delaney Gillilan: It's that like, they're trying to help you find weaknesses in your game.
Delaney Gillilan: Right.
Delaney Gillilan: So I want there to be an active, like someone proved me wrong.
Delaney Gillilan: And I'm at the point now where I feel so confident.
Delaney Gillilan: I will put money on it.
Delaney Gillilan: I've tried going out to people out in the dev Twitter and all that.
Delaney Gillilan: I guarantee you, and I'm happy to put money up on this,
Delaney Gillilan: if you could do it the Datastar way,
Delaney Gillilan: whether you're using React or HTMLX or any other approach,
Delaney Gillilan: it will be less code.
Delaney Gillilan: It'll be faster.
Delaney Gillilan: It'll be cheaper.
Delaney Gillilan: And it'll be simpler to understand.
Delaney Gillilan: I will take up anybody anywhere on that thing.
Delaney Gillilan: Basically, it's not a boast.
Delaney Gillilan: It's just the facts on the table.
Delaney Gillilan: And it's a paradigm shift that I want the world to know about
Delaney Gillilan: just so that people understand,
Delaney Gillilan: hey, there's going to be someone
Delaney Gillilan: that comes up with something better than I did, right?
Delaney Gillilan: Like I'm standing,
Delaney Gillilan: the reason why we have the fastest signal library in the world
Delaney Gillilan: is because we listen to the people
Delaney Gillilan: that are really good at that.
Delaney Gillilan: We use alien signals.
Delaney Gillilan: The reason why we have the fastest morphing library
Delaney Gillilan: is that we listen to people and said,
Delaney Gillilan: hey, there's people that care about this stuff
Delaney Gillilan: and are working towards it.
Delaney Gillilan: It's not that there's anything special here.
Delaney Gillilan: It's that it's trying to build an ecosystem
Delaney Gillilan: of like people that care about performance
Delaney Gillilan: and people care about the details.
Delaney Gillilan: And if you do that,
Delaney Gillilan: then everything gets better.
Delaney Gillilan: So it's not just where are we at now,
Delaney Gillilan: but if anyone thinks they can do better,
Delaney Gillilan: please join us.
Delaney Gillilan: We want to hear it.
Delaney Gillilan: But like, I'm done having the vibe code,
Delaney Gillilan: or not the vibe code,
Delaney Gillilan: but like the vibes around like,
Delaney Gillilan: well, this doesn't feel like a spa
Delaney Gillilan: or like a spa has its place.
Delaney Gillilan: A couple of episodes ago,
Delaney Gillilan: there was a Cody from the Litestar stuff said,
Delaney Gillilan: there's a time and place for HTMX or Datastar.
Delaney Gillilan: And he's just, that's just not true.
Delaney Gillilan: It's just like hypermedia is the way to build things
Delaney Gillilan: for a hypermedia client, which is the browser.
Delaney Gillilan: So I will, anyone that can show that it's wrong,
Delaney Gillilan: please let us know.
Delaney Gillilan: Like we're here to help.
Michael Kennedy: I would love to see this paired with some Electron JS apps
Michael Kennedy: to make your desktop apps a little better too.
Michael Kennedy: So anyway.
Chris May: Seriously, oh my God.
Michael Kennedy: That's a different episode.
Michael Kennedy: So I just want to say thank you, Delaney, Ben and Chris.
Michael Kennedy: Thank you all for being here.
Michael Kennedy: And congrats on Datastar.
Michael Kennedy: It looks like a super project.
Michael Kennedy: I'm looking at some projects or an app running right over there
Michael Kennedy: on my left that I kind of wish I'd built Datastar.
Delaney Gillilan: Well, and the thing is to make sure to not think that it's just used, like, yes, we talk
Delaney Gillilan: about the real-time stuff, but it's better for even just normal crud stuff.
Delaney Gillilan: And that's kind of hard to, like, it's not as sexy to talk about, but it's better at
Delaney Gillilan: that too.
Michael Kennedy: Well, it's also 80% of what gets built.
Michael Kennedy: So it's important to like point it out, right?
Michael Kennedy: Yeah.
Michael Kennedy: All right.
Michael Kennedy: Bye everyone.
Michael Kennedy: Thanks for being here.
Michael Kennedy: Thank you.
Michael Kennedy: This has been another episode of Talk Python To Me.
Michael Kennedy: Thank you to our sponsors.
Michael Kennedy: Be sure to check out what they're offering.
Michael Kennedy: It really helps support the show.
Michael Kennedy: Take some stress out of your life.
Michael Kennedy: Get notified immediately about errors and performance issues in your web or mobile applications with Sentry.
Michael Kennedy: Just visit talkpython.fm/sentry and get started for free.
Michael Kennedy: Be sure to use our code talkpython26.
Michael Kennedy: That's Talk Python, the numbers two, six, all one word.
Michael Kennedy: This episode is brought to you by CommandBook, a native macOS app that I built that gives long-running terminal commands a permanent home.
Michael Kennedy: No more juggling six terminal tabs every morning.
Michael Kennedy: Carefully craft a command once, run it forever with auto restart,
Michael Kennedy: URL detection, and a full CLI.
Michael Kennedy: Download it for free at talkpython.fm/command book app.
Michael Kennedy: If you or your team needs to learn Python,
Michael Kennedy: we have over 270 hours of beginner and advanced courses
Michael Kennedy: on topics ranging from complete beginners to async code,
Michael Kennedy: Flask, Django, HTMX, and even LLMs.
Michael Kennedy: Best of all, there's no subscription in sight.
Michael Kennedy: Browse the catalog at talkpython.fm.
Michael Kennedy: And if you're not already subscribed to the show
Michael Kennedy: on your favorite podcast player,
Michael Kennedy: what are you waiting for?
Michael Kennedy: Just search for Python in your podcast player.
Michael Kennedy: We should be right at the top.
Michael Kennedy: If you enjoyed that geeky rap song,
Michael Kennedy: you can download the full track.
Michael Kennedy: The link is actually in your podcast blur show notes.
Michael Kennedy: This is your host, Michael Kennedy.
Michael Kennedy: Thank you so much for listening.
Michael Kennedy: I really appreciate it.
Michael Kennedy: I'll see you next time.
Chris May: I'm out.