WEBVTT 00:00:00.020 --> 00:00:05.060 You love building web apps with Python, and HTMX got you excited about the hypermedia approach. 00:00:05.720 --> 00:00:10.220 Let the server drive the HTML, skip the JavaScript build step, keep things simple, right? 00:00:11.020 --> 00:00:16.780 But then you hit that last 10%. You need AlpineJS for interactivity, or your state gets out of sync, 00:00:16.810 --> 00:00:20.780 and suddenly you're juggling two unrelated libraries that weren't really designed to work 00:00:20.960 --> 00:00:26.660 together. What if there was a single 11-kilobyte framework that gave you everything HTMX and 00:00:26.680 --> 00:00:31.760 AlpineJS did, and more with real-time updates, multiplayer collaboration out of the box, 00:00:31.760 --> 00:00:36.480 and performance so fast, you're actually bottlenecked by your monitor's refresh rate. 00:00:37.120 --> 00:00:37.840 That's Datastar. 00:00:38.420 --> 00:00:43.240 On this episode, I sit down with its creator, Delany Galan, core maintainer, Ben Crocker, 00:00:43.780 --> 00:00:50.320 and Datastar convert, Chris May, to help explore how this backend-driven, service-sent event-first 00:00:50.720 --> 00:00:55.160 framework is changing the way full-stack developers think about the modern web. 00:00:55.820 --> 00:01:01.900 This is Talk Python To Me, episode 537, recorded January 15th, 2026. 00:01:19.600 --> 00:01:24.360 Welcome to Talk Python To Me, the number one Python podcast for developers and data scientists. 00:01:24.880 --> 00:01:26.280 This is your host, Michael Kennedy. 00:01:26.720 --> 00:01:30.200 I'm a PSF fellow who's been coding for over 25 years. 00:01:30.860 --> 00:01:31.960 Let's connect on social media. 00:01:32.280 --> 00:01:35.440 You'll find me and Talk Python on Mastodon, BlueSky, and X. 00:01:35.610 --> 00:01:37.560 The social links are all in your show notes. 00:01:38.320 --> 00:01:41.840 You can find over 10 years of past episodes at talkpython.fm. 00:01:42.020 --> 00:01:45.260 And if you want to be part of the show, you can join our recording live streams. 00:01:45.560 --> 00:01:46.040 That's right. 00:01:46.250 --> 00:01:49.500 We live stream the raw uncut version of each episode on YouTube. 00:01:50.060 --> 00:01:54.500 Just visit talkpython.fm/youtube to see the schedule of upcoming events. 00:01:54.730 --> 00:01:58.380 Be sure to subscribe there and press the bell so you'll get notified anytime we're recording. 00:01:59.380 --> 00:02:01.000 This episode is brought to you by Sentry. 00:02:01.380 --> 00:02:02.620 Don't let those errors go unnoticed. 00:02:02.900 --> 00:02:04.420 Use Sentry like we do here at Talk Python. 00:02:04.920 --> 00:02:07.780 Sign up at talkpython.fm/sentry. 00:02:08.300 --> 00:02:13.600 And it's brought to you by CommandBook, a native macOS app that I built that gives long-running 00:02:13.800 --> 00:02:15.240 terminal commands a permanent home. 00:02:15.640 --> 00:02:17.640 No more juggling six terminal tabs every morning. 00:02:18.020 --> 00:02:22.900 Carefully craft a command once, run it forever with auto restart, URL detection, and a full CLI. 00:02:23.260 --> 00:02:26.380 Download it for free at talkpython.fm/command book app. 00:02:27.180 --> 00:02:29.900 Ben, Delaney, Chris, welcome to you all. 00:02:30.380 --> 00:02:31.560 Thanks for being here on Talk Python To Me. 00:02:31.680 --> 00:02:32.120 Thanks for having us. 00:02:32.320 --> 00:02:33.020 Hey, how are you doing? 00:02:33.060 --> 00:02:34.060 Doing well, doing well. 00:02:34.280 --> 00:02:42.040 Very excited to talk about Datastar and some cool web frameworks for Python people and beyond, of course. 00:02:42.220 --> 00:02:44.940 But, you know, most people listening doing Python web frameworks. 00:02:45.140 --> 00:02:46.980 So talk about how that all integrates. 00:02:47.160 --> 00:02:52.400 And if you like the HTMX vibe, which we've talked a lot about on the show, I think there's 00:02:52.500 --> 00:02:54.140 going to be a lot to like here as well. 00:02:54.190 --> 00:02:54.960 And maybe more. 00:02:55.140 --> 00:02:55.420 We'll see. 00:02:55.530 --> 00:02:56.860 A case to be made. 00:02:57.380 --> 00:03:02.280 But, you know, before we get into all of that, though, let's just talk about a quick introduction 00:03:02.660 --> 00:03:06.840 for everyone here and like go around the squares of Ben, I'll let you go first. 00:03:07.300 --> 00:03:07.760 Who are you, Ben? 00:03:08.320 --> 00:03:09.920 Based in Costa Rica at the moment. 00:03:10.260 --> 00:03:14.140 I'm based in Europe most of the year, but half of the year my wife and I spend here. 00:03:14.640 --> 00:03:26.280 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. 00:03:26.840 --> 00:03:37.320 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. 00:03:37.320 --> 00:03:44.220 I'm just a web developer, a backend web developer, primarily that also writes TypeScript and maintains a front end. 00:03:44.560 --> 00:03:49.120 framework. There's a lot of stuff going on and ways in which you can write code for the web these days. 00:03:50.420 --> 00:03:52.900 Well, thanks. Awesome to have you here. Delaney, hello. 00:03:53.060 --> 00:03:58.180 Hi, how you doing? Yeah, I have kind of a weird checkered background into web development. I was 00:03:58.380 --> 00:04:04.280 originally in the circus, then I became a 3D artist, then I became an engineer. I've worked in 00:04:04.780 --> 00:04:10.720 games, video games, slot machines, military applications, all kinds of crazy things. 00:04:11.140 --> 00:04:13.880 I tend to work on really highly optimized, fast things. 00:04:14.480 --> 00:04:16.459 I love the ideas of the web, 00:04:16.820 --> 00:04:20.600 but I got really tired of how you actually implement things in that. 00:04:20.600 --> 00:04:24.420 And I was doing very large applications with millions of updates a second. 00:04:24.900 --> 00:04:27.120 And the tools that were out there just weren't good enough. 00:04:27.320 --> 00:04:29.580 So I ended up going down many, many rabbit holes 00:04:30.060 --> 00:04:32.920 and finally found something to make it better for everybody else. 00:04:33.470 --> 00:04:34.400 So yeah, that's really cool. 00:04:34.480 --> 00:04:36.200 And wow, what a really interesting issue. 00:04:36.300 --> 00:04:38.120 I know you got some crazy stories. 00:04:38.420 --> 00:04:38.920 Yes, I do. 00:04:39.080 --> 00:04:42.400 I always have a funny, weird outcome of something. 00:04:42.820 --> 00:04:44.860 Ironically, people talk about things being a circus, 00:04:45.140 --> 00:04:47.500 but like circuses are very well run logistic machines 00:04:48.100 --> 00:04:50.020 compared to most developer situations. 00:04:50.090 --> 00:04:50.700 So it's kind of funny. 00:04:50.800 --> 00:04:52.060 Yeah, it's an insult to circuses. 00:04:52.140 --> 00:04:52.640 Yes, it is. 00:04:52.640 --> 00:04:53.260 It really is. 00:04:54.220 --> 00:04:54.560 Amazing. 00:04:55.040 --> 00:04:55.200 Okay. 00:04:55.540 --> 00:04:57.980 And what we're going to talk about, 00:04:58.100 --> 00:05:02.220 Datastar has this amazing ability to update many things 00:05:02.570 --> 00:05:05.020 really quickly in real time, which we'll get into, 00:05:05.260 --> 00:05:06.980 but yeah, sort of foreshadowing there. 00:05:07.160 --> 00:05:09.820 And Chris May, welcome to the show. 00:05:10.380 --> 00:05:12.600 I've known you for a long time and I'm really happy to have you here. 00:05:12.740 --> 00:05:13.980 Great to be here. Thank you so much. 00:05:14.180 --> 00:05:14.380 Yeah. 00:05:14.520 --> 00:05:25.120 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. 00:05:25.700 --> 00:05:30.220 Picked along the way, became technical coach and just loved making single page applications. 00:05:30.560 --> 00:05:32.220 I loved, I just love the web. 00:05:32.400 --> 00:05:36.340 You know, I love that we can publish something from our computer and anybody around the world can see it. 00:05:36.620 --> 00:05:40.800 And then what, maybe a little over a year ago, I, oh no, it was more than that. 00:05:40.860 --> 00:05:46.300 I remember I was on a trip and I was listening to a podcast of HXPod, the HTMX podcast, 00:05:46.820 --> 00:05:50.220 and heard about this crazy, cool tool, Datastar. 00:05:50.220 --> 00:05:54.520 And I was like, I even put in my DjangoCon presentation, like you should, everybody else 00:05:54.640 --> 00:05:55.120 should try it out. 00:05:55.150 --> 00:05:56.820 And finally I did and I'm converted. 00:05:56.910 --> 00:05:57.560 I love it. 00:05:57.770 --> 00:06:00.200 So I'm excited that the three of us get to talk about it. 00:06:00.240 --> 00:06:05.919 The reason that we're having this podcast is because I read your article about switching 00:06:05.940 --> 00:06:10.760 to Datastar. And I'm like, okay, this is interesting. You made the case very well. Of 00:06:10.760 --> 00:06:18.000 course, I'll link to the article. And so I thought, hey, I need to have Chris here as my Tony Romo to 00:06:18.120 --> 00:06:24.520 my Al Michaels or Nico Rosberg to my Crofty or whatever, right? So I'm happy to have you here. 00:06:24.760 --> 00:06:30.380 Exactly. Awesome to have you here. So let's just start with what is Datastar, right? I mean, 00:06:30.420 --> 00:06:37.220 we've hinted that it has some similarities to htmx but also not so ben and delaney give us the 00:06:37.430 --> 00:06:41.920 overview what is datastar so i can give a little bit of history and then ben's probably better at 00:06:42.140 --> 00:06:47.720 saying what it is now i have a background in like low-level stuff um even though i was a 3d artist 00:06:47.900 --> 00:06:52.660 first i'm much more comfortable in like shader development and that kind of thing like so glsl 00:06:52.770 --> 00:06:57.939 web thing like i'm a c guy that knows some other things but the thing is that i was working on 00:06:57.960 --> 00:07:03.140 some military applications where I needed really fast updates of a browser. And the reason why you 00:07:03.300 --> 00:07:09.240 in this military situation is that getting things approved is really hard, like executables to go 00:07:09.400 --> 00:07:13.060 into deployment. But having a browser means that you have this nice little sandbox that things can 00:07:13.070 --> 00:07:17.160 go in. So it's actually more of a deployment platform in my background than, you know, just 00:07:17.160 --> 00:07:21.700 the regular web. But I was doing things that were pushing the browser really, really far. I was using 00:07:21.840 --> 00:07:26.300 Vue and Spa. And I basically was like, well, these are the smartest people out here, but it's not 00:07:26.320 --> 00:07:31.160 fast enough. So I was using crazy WebSocket stuff, all this binary stuff. And then I tried doing, 00:07:31.620 --> 00:07:36.440 you had someone on last week talking about LiveView and like they have a Python version of that. I went 00:07:37.180 --> 00:07:40.820 hard in making a binary version of that, like going down to the protocol level, changing, 00:07:41.180 --> 00:07:44.600 optimizing that 10 different ways. I had an entire framework for doing this. And basically, 00:07:45.030 --> 00:07:48.840 in my opinion, that's a complete dead end. It is untenable. We can go into the reasons why, 00:07:49.080 --> 00:07:53.319 but the thing is, long story short, I ended up seeing what was happening in HTMLX in the hyper 00:07:53.340 --> 00:07:58.060 media space. And I completely discounted all of that because I said, like, I'm doing low level 00:07:58.200 --> 00:08:02.420 binary stuff. There's no way this other approach can be faster. And then my thing is always check 00:08:02.430 --> 00:08:07.000 the metrics, always don't take your assumptions and do the work. And the thing is, there's things 00:08:07.070 --> 00:08:11.080 that are wrong in the implementation, but there's things that are 100% right in the overall ideas of 00:08:11.360 --> 00:08:15.520 how to use that. So I went and I took a year and a half work and just threw it in the trash 00:08:16.100 --> 00:08:21.839 and said, okay, I'm starting over and like ended up doing some basic things would probably get into 00:08:22.160 --> 00:08:27.120 and ended up with this thing that is a backend diagnostic backend framework that has a 10 00:08:27.280 --> 00:08:33.140 kilobyte shim that is the fastest, smallest thing out there by orders of magnitude. So it's not just 00:08:33.190 --> 00:08:37.039 a slightly different thing. It is literally a different paradigm shift. It's a crazy shift. 00:08:37.070 --> 00:08:41.940 So the difference between reacts to something like HTMX is different from HTMX to the data 00:08:42.080 --> 00:08:46.620 start way. So I'll let Ben actually explain what that is. But the thing is from a low level C 00:08:46.680 --> 00:08:51.120 guys point of view, it is one of the fastest things in your stack now, which is crazy to think 00:08:51.120 --> 00:08:52.940 Yeah, like a 10K shim can do that. 00:08:53.000 --> 00:08:53.600 That's incredible. 00:08:54.180 --> 00:08:58.340 And also, it sounds like your advice comes from somebody who's done a lot of profiling. 00:08:59.120 --> 00:08:59.760 Very much so. 00:08:59.880 --> 00:09:00.660 Like, that's the only thing. 00:09:00.760 --> 00:09:02.900 You got to measure, not guess. 00:09:03.160 --> 00:09:03.260 Yeah. 00:09:03.370 --> 00:09:06.940 In fact, there's funny things that we've had things on Twitter fighting with people and 00:09:06.940 --> 00:09:08.880 they're like, oh, this one situation was really slow. 00:09:09.350 --> 00:09:14.420 We actually looked at their flangraphs and it was a bug in the Safari GPU stuff. 00:09:14.770 --> 00:09:17.500 Because we were actually at the level where the JavaScript doesn't even show up. 00:09:17.580 --> 00:09:20.580 It's actually a GPU issue of it rendering fast stuff. 00:09:20.940 --> 00:09:22.640 in the browser, nothing to do with the JavaScript. 00:09:23.030 --> 00:09:25.320 Because the fastest JavaScript you can write is no JavaScript. 00:09:25.860 --> 00:09:28.140 So we really lean into what the browser can already do. 00:09:28.540 --> 00:09:30.220 And we're just making it so that that's easy to do 00:09:30.270 --> 00:09:32.380 so that the average person with the average website 00:09:32.960 --> 00:09:34.540 doesn't have to write any JavaScript at all. 00:09:34.810 --> 00:09:36.320 And they get to be a full stack developer 00:09:36.370 --> 00:09:37.340 in whatever language they choose. 00:09:37.780 --> 00:09:39.980 And I'll let everyone else talk from there. 00:09:40.040 --> 00:09:40.760 Awesome. Ben? 00:09:41.020 --> 00:09:43.560 Yeah, my version is going to be quite different to Delaney's 00:09:43.800 --> 00:09:45.800 because we care about different things. 00:09:45.980 --> 00:09:48.260 Fortunately, we do care about some of the same things. 00:09:49.000 --> 00:09:51.620 We work well together because I think we complement each other. 00:09:52.270 --> 00:09:57.280 But coming from a PHP background, I want the backend to be driving the front end. 00:09:57.290 --> 00:09:58.640 And it naturally does, right? 00:09:58.840 --> 00:10:02.580 Because even your HTML is being produced by your backend. 00:10:02.610 --> 00:10:04.280 And that's what's being served to the front end. 00:10:05.100 --> 00:10:08.420 I describe Datastar as a hypermedia framework. 00:10:09.240 --> 00:10:16.660 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. 00:10:16.740 --> 00:10:21.440 And everybody should know what hypertext is because it's the H in HTTP and HTML. 00:10:22.060 --> 00:10:33.840 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. 00:10:34.340 --> 00:10:39.060 We get a lot of people coming into the Discord asking us, you know, how should I do this the Datastar way? 00:10:39.080 --> 00:10:44.860 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. 00:10:45.280 --> 00:10:46.940 We call it the tau of datastar. 00:10:47.110 --> 00:10:49.160 So it's kind of like the way of datastar. 00:10:49.520 --> 00:10:54.300 And if there's one thing to take from that, it's use as little datastar as possible. 00:10:54.720 --> 00:10:58.100 Like leverage the browser, because the browser is an incredible thing, right? 00:10:58.100 --> 00:11:01.920 Like it's basically an operating system, our operating system as web developers. 00:11:02.580 --> 00:11:05.500 So, and everything happens at the C level, super optimized. 00:11:06.100 --> 00:11:08.120 We're not going to be able to build something faster. 00:11:08.400 --> 00:11:11.480 So leverage the browser as much as possible on the browser APIs. 00:11:12.280 --> 00:11:19.200 And where HTML kind of lacks or where there are some gaps, that's essentially what Datastar is trying to fill. 00:11:19.680 --> 00:11:21.380 So I did a lot of work. 00:11:21.580 --> 00:11:26.760 So just to relate this, I guess, to something that other people might be familiar with, which is HTMLX. 00:11:27.380 --> 00:11:33.440 I was an early contributor to HTMLX, actually, and I was sold on the idea of hypermedia from the very beginning. 00:11:33.800 --> 00:11:35.740 So HTML is the language of the web. 00:11:36.100 --> 00:11:38.340 Why are we trying to replace it with JavaScript? 00:11:39.000 --> 00:11:46.740 And the problem that I ran into after several years of thinking HTMX is all I need is that last 10%, right? 00:11:46.910 --> 00:11:49.980 Because it'll get you 90% of what you're trying to do. 00:11:50.290 --> 00:11:56.280 But that last 10%, which we all know is the hardest piece that takes the most work, just isn't covered. 00:11:56.680 --> 00:12:02.059 So with HTMX, for example, you will very often reach for another library like AlpineJS, 00:12:02.760 --> 00:12:09.300 or you'll start writing vanilla JS perhaps to fill in those gaps to interactivity to the page, 00:12:09.390 --> 00:12:12.860 because HTMX is really just going to the back end, replacing the DOM. 00:12:13.270 --> 00:12:15.240 But now you have two dependencies. 00:12:15.820 --> 00:12:19.920 Now you have HTMX and Alpine, for example, and you're trying to make those play well together. 00:12:20.420 --> 00:12:24.880 And because I think that might be a little bit of the missing sauce from HTMX. 00:12:24.980 --> 00:12:28.200 I've had Carson Gross on and I really admire HTMX. 00:12:28.700 --> 00:12:34.920 But as I've worked with it over a couple of years, I feel like it's really good as salt or seasoning, 00:12:35.020 --> 00:12:38.200 something you sprinkle on to really make a website better. 00:12:38.660 --> 00:12:41.300 But if you try to make a meal out of salt, you're not going to want to eat it. 00:12:41.480 --> 00:12:46.940 And what I mean is, you have three different disjointed parts of the page, 00:12:47.030 --> 00:12:51.280 and you're like, this is so amazing to update this with HTML and partials, and so is that. 00:12:51.980 --> 00:12:55.940 But then you start talking about AlpineJS and connecting different things, 00:12:56.140 --> 00:12:59.340 and then the JavaScript gets out of sync with this server response. 00:12:59.590 --> 00:13:02.880 And it just, you start to feel constrained by it. 00:13:03.260 --> 00:13:05.400 And I think you all have a really nice solution. 00:13:05.560 --> 00:13:08.560 It's something a little bit like how you, we're going to talk about it, 00:13:08.560 --> 00:13:13.040 but sort of how you specify the HTML to be updated by the server, 00:13:13.580 --> 00:13:16.380 but then also connecting different parts of the pages. 00:13:16.940 --> 00:13:20.900 Chris put it in his article that like the problem is AlpineJS and HTMX 00:13:20.930 --> 00:13:24.220 are just two unrelated different things that happen to go together a lot. 00:13:24.280 --> 00:13:26.600 And so they're not cohesive in a sense, right? 00:13:26.760 --> 00:13:28.540 Well, and that's one thing that's definitely an issue. 00:13:28.880 --> 00:13:30.520 Like, for example, this was my thing 00:13:30.680 --> 00:13:33.500 because I actually tried to fix HTMX back in the day. 00:13:33.760 --> 00:13:35.040 And like the things that I wanted to fix 00:13:35.440 --> 00:13:37.280 were the problem that I see at least 00:13:37.400 --> 00:13:39.060 is that you have HTMX, you can add, 00:13:39.200 --> 00:13:41.340 it has extensions, so you can add stuff to it. 00:13:41.700 --> 00:13:43.900 But it fundamentally was built to be like, 00:13:44.200 --> 00:13:45.660 here's our way of doing it. 00:13:45.920 --> 00:13:47.540 And then you can do your own stuff on top of it. 00:13:47.740 --> 00:13:51.040 The problem is, is that I thought that's broken. 00:13:51.260 --> 00:13:52.180 I've done enough game development 00:13:52.240 --> 00:13:53.200 to know that you need to be agile. 00:13:53.300 --> 00:13:55.100 I need to be able to like be able to move quickly. 00:13:55.560 --> 00:14:01.180 So I wanted it so that nothing was basically like the core of data star is like 300 lines 00:14:01.270 --> 00:14:01.380 long. 00:14:01.670 --> 00:14:06.580 And it is basically setting up data dash star elements, hooking up plugins, and then everything 00:14:06.690 --> 00:14:07.220 else is a plugin. 00:14:07.530 --> 00:14:12.160 So if you don't agree with us, or if someone's better than I am, great, that's wonderful. 00:14:12.470 --> 00:14:15.120 We will be able to just pop that part out, put the new part in. 00:14:15.500 --> 00:14:17.060 But plugins can now depend on each other. 00:14:17.110 --> 00:14:17.520 They can understand. 00:14:17.800 --> 00:14:18.500 It's an ecosystem. 00:14:18.960 --> 00:14:20.660 Ironically, that's what happens under the hood. 00:14:21.080 --> 00:14:23.140 But the ideas of that make it so much more powerful. 00:14:23.200 --> 00:14:34.120 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. 00:14:34.320 --> 00:14:36.700 So it's just a different way of thinking about the problem. 00:14:36.840 --> 00:14:46.720 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. 00:14:47.160 --> 00:14:52.420 So you have this very thin core and then everything else pretty much is a plugin. 00:14:52.480 --> 00:14:58.680 And all Datastar core is a way for registering plugins and having Datastar attributes. 00:14:59.130 --> 00:15:00.380 And that's pretty much it. 00:15:00.600 --> 00:15:03.580 Everything else is an add-on that you, is a plugin that you can take away. 00:15:03.710 --> 00:15:08.020 So we even have a bundler on the site that allows you to just, well, you can just download 00:15:08.560 --> 00:15:11.660 Datastar core or you can just select what plugins you want. 00:15:12.060 --> 00:15:16.160 Now, that in and of itself is not that interesting because we're, at the end of the day, we're 00:15:16.200 --> 00:15:19.300 talking about a 10 kilobyte JavaScript file with all of the plugins. 00:15:19.840 --> 00:15:21.720 But it is open source, which we didn't mention. 00:15:21.760 --> 00:15:24.580 And so anybody can go just kind of look at it if you're interested. 00:15:25.080 --> 00:15:29.700 But that approach means that everything is modular and everything is there for a reason. 00:15:30.320 --> 00:15:32.180 And we'll get into this later, I guess. 00:15:32.230 --> 00:15:36.760 But like deciding what plugins go in and what stay out is one of the challenges. 00:15:36.890 --> 00:15:38.940 And we just try to keep it as lean as possible. 00:15:39.400 --> 00:15:43.860 My way of thinking about it is that Datastar gives you everything you need and nothing you don't. 00:15:44.240 --> 00:15:47.400 And that's how we try to kind of keep it lean and fast. 00:15:48.680 --> 00:15:51.060 This portion of Talk Python Maze brought to you by Sentry. 00:15:51.400 --> 00:15:56.500 I've been using Sentry personally on almost every application and API that I've built for 00:15:56.660 --> 00:15:59.120 Talk Python and beyond over the last few years. 00:15:59.480 --> 00:16:02.400 They're a core building block for keeping my infrastructure solid. 00:16:03.000 --> 00:16:04.300 They should be for yours as well. 00:16:04.580 --> 00:16:04.960 Here's why. 00:16:05.620 --> 00:16:07.060 Sentry doesn't just catch errors. 00:16:07.140 --> 00:16:09.840 It catches all the stuff that makes your app feel broken. 00:16:10.160 --> 00:16:14.580 The random slowdown, the freeze you can't reproduce, that bug that only shows up once 00:16:14.880 --> 00:16:15.660 real users hit it. 00:16:15.940 --> 00:16:19.440 And when something goes wrong, Sentry gives you the whole chain of events in one place. 00:16:19.680 --> 00:16:22.640 errors, traces, replays, logs, dots connected. 00:16:22.980 --> 00:16:24.860 You can see what's led to the issue 00:16:25.100 --> 00:16:26.820 without digging through five different dashboards. 00:16:27.640 --> 00:16:29.660 Seer, Sentry's AI debugging agent, 00:16:30.180 --> 00:16:32.120 builds on this data, taking the full context, 00:16:32.800 --> 00:16:34.840 explaining why the issue happened, 00:16:35.360 --> 00:16:37.720 pointing to the code responsible, drafts a fix, 00:16:37.800 --> 00:16:40.780 and even flags if your PR is about to introduce a new problem. 00:16:41.620 --> 00:16:42.660 The workflow stays simple. 00:16:43.100 --> 00:16:44.860 Something breaks, Sentry alerts you, 00:16:45.020 --> 00:16:46.820 the dashboard shows you the full context. 00:16:47.160 --> 00:16:49.640 Seer helps you fix it and catch new issues 00:16:49.660 --> 00:16:55.400 before they ship. It's totally reasonable to go from an error occurred to fixed in production in 00:16:55.600 --> 00:17:01.160 just 10 minutes. I truly appreciate the support that Sentry has given me to help solve my bugs 00:17:01.320 --> 00:17:06.620 and issues in my apps, especially those tricky ones that only appear in production. I know you will 00:17:06.640 --> 00:17:12.020 too if you try them out. So get started today with Sentry. Just visit talkpython.fm/sentry 00:17:12.540 --> 00:17:19.620 and get $100 in Sentry credits. Please use that link. It's in your podcast player show notes. If 00:17:19.640 --> 00:17:25.839 our code talkpython26, all one word talkpython26 to get $100 in credits. 00:17:26.740 --> 00:17:28.300 Thank you to Sentry for supporting the show. 00:17:29.600 --> 00:17:29.760 Cool. 00:17:29.800 --> 00:17:33.240 That's a super interesting philosophy to say you should be able to take, even take 00:17:33.310 --> 00:17:35.580 stuff out of what we're giving you by default, right? 00:17:35.850 --> 00:17:42.100 Now, before we move on from sort of introducing Datastar, I do want to point out at data-star.dev, 00:17:42.220 --> 00:17:45.420 which of course I'll link this notes, there's some cool examples on here. 00:17:45.720 --> 00:17:53.260 You've got a really nice space 2001 sort of theme with Hal and all that, which is great. 00:17:53.920 --> 00:17:56.260 I like the aesthetic here, which is very fun. 00:17:56.800 --> 00:18:00.620 It's got a little bit of a retro gaming feel, which is nice. 00:18:00.880 --> 00:18:03.400 But what I want to point out is I want to encourage people to go watch your little video. 00:18:03.960 --> 00:18:04.800 Your video is fun. 00:18:05.520 --> 00:18:06.360 It's really fun. 00:18:06.480 --> 00:18:11.160 This video is all about how Datastar fits in the world of SPAs. 00:18:11.920 --> 00:18:16.480 And one thing we didn't really mention is that Datastar is a full-fledged SPA replacement. 00:18:17.020 --> 00:18:26.140 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. 00:18:26.340 --> 00:18:34.640 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. 00:18:34.680 --> 00:18:41.620 it's on the contrary. I think Datastark, we think Datastark can do more than SBAs because we are 00:18:42.180 --> 00:18:46.300 driven by the backend and we are focused on hypermedia, which is the language of the web. 00:18:46.640 --> 00:18:51.480 So this, yeah, so this video is kind of throwing, yeah, anyway, everybody should watch it. 00:18:51.800 --> 00:18:56.840 I'd also like to, if you can scroll back up to the top of the page, the Starfield animation was 00:18:57.040 --> 00:19:02.460 one of the things like when Delaney and when everybody who worked on this published it, 00:19:02.780 --> 00:19:04.700 Like I didn't realize how amazing this was 00:19:04.810 --> 00:19:07.460 because if you like right click and inspect that thing, 00:19:07.960 --> 00:19:08.740 it's a web component. 00:19:09.230 --> 00:19:11.100 And so all the JavaScript that's required 00:19:11.300 --> 00:19:13.540 for making all the stars go faster and slower 00:19:13.760 --> 00:19:16.180 and tracking your mouse where, you know, wherever you do it, 00:19:16.600 --> 00:19:18.280 it's all within that web component. 00:19:18.520 --> 00:19:21.180 And data star is essentially subscribing to like, 00:19:21.260 --> 00:19:22.020 where's the mouse pointer 00:19:22.440 --> 00:19:24.120 and passing it into the web component. 00:19:24.380 --> 00:19:26.520 Yeah, in fact, if you go to more examples, 00:19:27.220 --> 00:19:29.260 you will see that there's, 00:19:29.360 --> 00:19:31.240 and then go scroll down to, 00:19:31.720 --> 00:19:32.780 or use the hamburger thing. 00:19:32.850 --> 00:19:35.200 Yeah, go down to the rocket. 00:19:35.980 --> 00:19:37.740 There's the actual star field. 00:19:38.110 --> 00:19:39.940 So you can see the entire, the star field, 00:19:40.010 --> 00:19:41.700 the entire component is there. 00:19:41.790 --> 00:19:43.020 So if you scroll down from there, 00:19:43.320 --> 00:19:45.100 you'll see how it actually gets hooked up 00:19:45.460 --> 00:19:46.680 and the entire component, 00:19:46.900 --> 00:19:48.200 that's the whole thing, it's right there. 00:19:48.340 --> 00:19:48.840 - That's incredible. 00:19:49.200 --> 00:19:50.580 - And the thing is if you start moving around, 00:19:51.060 --> 00:19:52.820 like if you scroll up just a little bit more, 00:19:52.870 --> 00:19:54.280 so you can see the sliders, 00:19:54.690 --> 00:19:56.160 you'll see that they're live, everything's, 00:19:56.360 --> 00:19:57.080 if you move it around, 00:19:57.540 --> 00:19:59.240 like you move your mouse around the canvas, 00:19:59.460 --> 00:20:00.860 you'll see everything's live editing, 00:20:01.040 --> 00:20:01.820 everything's thing. 00:20:02.040 --> 00:20:03.800 It's the irony of Datastar. 00:20:03.800 --> 00:20:05.840 And this is the part that I don't think people quite get. 00:20:06.260 --> 00:20:08.100 And it's not that you're trying to like, 00:20:08.500 --> 00:20:10.160 we love what Carson has done with HCMS. 00:20:10.320 --> 00:20:11.680 We love that all the things they've done, 00:20:11.800 --> 00:20:13.120 but it does not do everything. 00:20:13.460 --> 00:20:13.980 It doesn't do enough. 00:20:14.080 --> 00:20:15.140 It is a library, not a framework. 00:20:15.560 --> 00:20:16.120 And the thing is, 00:20:16.360 --> 00:20:18.180 the irony is that Datastar actually has 00:20:18.520 --> 00:20:19.880 the fastest reactive signal, 00:20:21.060 --> 00:20:21.860 like reactive signals. 00:20:22.200 --> 00:20:23.700 We are the fastest thing out there. 00:20:23.980 --> 00:20:25.420 So it's not just like we did something 00:20:25.520 --> 00:20:26.300 that's kind of like VDOM, 00:20:26.360 --> 00:20:26.980 or we are like, 00:20:27.180 --> 00:20:28.160 we can compete with React. 00:20:28.220 --> 00:20:30.220 We demolish them with actual numbers. 00:20:30.860 --> 00:20:35.160 So we have the fastest morphing strategy and we also have the fastest signals, which means doing these kinds of things. 00:20:35.420 --> 00:20:35.980 It's just a non-issue. 00:20:36.010 --> 00:20:37.960 Like this star field thing is 1K. 00:20:38.460 --> 00:20:42.740 Like it's just these are the kinds of things that are just a non-issue in this if you do things our way. 00:20:42.860 --> 00:20:52.320 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. 00:20:53.000 --> 00:20:57.380 Like once I realized like you can do these things, it just made, it just clicked. 00:20:57.540 --> 00:21:03.900 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. 00:21:04.180 --> 00:21:06.200 Let's talk through some of the core examples. 00:21:06.450 --> 00:21:11.600 I feel like there's some similarities to the example section of the HTMX place. 00:21:11.700 --> 00:21:14.520 But, you know, HTMX doesn't have a star field, certainly. 00:21:14.880 --> 00:21:16.840 Best place to start is on the homepage. 00:21:17.470 --> 00:21:26.720 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. 00:21:26.880 --> 00:21:29.100 but it is a good maybe starting point for some people. 00:21:29.370 --> 00:21:31.220 We have a hello world example there, 00:21:31.640 --> 00:21:32.300 if you could find that. 00:21:32.360 --> 00:21:33.680 Yeah, let's scroll down just a little bit more. 00:21:33.840 --> 00:21:34.520 Yeah, you got it. 00:21:34.820 --> 00:21:38.200 One of the maybe differences between HTMX and Datastar 00:21:38.200 --> 00:21:40.900 is that Datastar can receive HTML responses, 00:21:41.050 --> 00:21:42.400 but it also by default, 00:21:42.720 --> 00:21:45.520 or the recommendation is to use server sent events. 00:21:46.020 --> 00:21:47.260 So if you hit start there, 00:21:47.660 --> 00:21:50.240 you're going to see kind of the network response tab, 00:21:50.310 --> 00:21:51.580 and those are server sent events. 00:21:51.840 --> 00:21:55.179 And SSE server sent events are an old technology 00:21:55.200 --> 00:21:56.740 that work just over HTTP. 00:21:57.480 --> 00:22:00.120 And essentially what happens is that the server 00:22:00.360 --> 00:22:01.960 holds a connection open to the browser 00:22:02.140 --> 00:22:03.520 and it's unidirectional. 00:22:03.820 --> 00:22:05.720 So you send a request to the server 00:22:05.960 --> 00:22:08.820 and then the server can stream events back down, 00:22:08.980 --> 00:22:09.980 which is what you're seeing here. 00:22:10.300 --> 00:22:12.160 Now, this is obviously a trivial example, right? 00:22:12.240 --> 00:22:12.900 We're sending one, 00:22:13.360 --> 00:22:16.040 or we're updating the message one character at a time. 00:22:16.600 --> 00:22:19.300 But when you see how simple this is, 00:22:19.320 --> 00:22:22.600 then you can perhaps see potential for this, right? 00:22:22.660 --> 00:22:29.720 And SSE or service end events have had kind of a renaissance in recent years with all of the LLMs, right? 00:22:29.750 --> 00:22:33.740 All the chatbots are streaming the responses back to you. 00:22:33.970 --> 00:22:42.680 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. 00:22:43.660 --> 00:22:50.940 And Delaney kind of tapped into that and said, well, because I also always thought, well, if I want pure reactivity or true reactivity, 00:22:50.960 --> 00:22:52.840 I need two-way communication. 00:22:53.020 --> 00:22:53.720 So I need web sockets. 00:22:53.720 --> 00:22:54.560 You need web sockets. 00:22:54.650 --> 00:22:56.660 You need binary and all that kind of stuff. 00:22:56.820 --> 00:22:56.940 Yeah. 00:22:57.120 --> 00:22:57.220 Yeah. 00:22:57.460 --> 00:22:59.440 There's problems with those, which we can get into. 00:23:00.200 --> 00:23:01.240