Where datastar fits in (for me, right now)
So this might be a little bit of a rambling one, but I've been working this week on, I'm working with Datastar this week, which is not HTMX, but was sort of inspired by HTMX in the beginning. And, I've talked to the creator of it, Delaney, and, Ben Croker is also working on it now. So I've I've kind of been curious how it works and where it fits in, not just in web development in general, but also just in my specific workflow. And my experiments with it this week, I'm I'm building something, and I'm gonna put a video out on it. But, basically, I'm building, you know, essentially a a chat, interface because the big thing with DataStar is that, well, there there's a lot of things with DataStar.
Speaker 1:It it builds itself builds itself as a replacement for something like HTMX, but also something like Alpine. So Alpine is kind of front end in in which includes, you know, just being able to do those things, the back end, the front end, marry them together. You use these signals that are used by both. So this is, like, working from the back end. You're now replacing, and you have this front end reactivity.
Speaker 1:So this is also like a React replacement. This is also, you know, a Vue replacement, all those things. So the promise is big. And I think on the tech side of it, it seems to, deliver. It it does what it says it does, which is cool.
Speaker 1:The part that I am sort of trying to figure out is where it fits in. So it's very different from HTMX in some ways. The most the key difference or or one of the things that sort of jumps out to me immediately is that it sort of takes over your requests. So whereas with HTMX, every request is basically just a standard, you know, Ajax request to a route. You set up the route.
Speaker 1:You set up what gets returned. You know, usually, that's HTML. If you're using DataStar, you can't quite do it just like that. Your your requests are going to be routed through the DataStar controller, and they are you know, you can still send back what you wanna send back. You just need to you need to do it in a slightly different way.
Speaker 1:So that's been the biggest hurdle, I think. Not just kind of the actual coding hurdle, but also the mental model hurdle because I didn't realize that was the case with DataStar. My my so and the other big thing is that it uses these server sent events as a possibility. So, you know, you have the the capability to keep the server open, like, keep the connection open, your HTTP connection. When you make a request, you it doesn't necessarily close it.
Speaker 1:You can close it if you want to, but you can also keep it open, so that the server can then send additional data. So the classic example of a server sent event is like what you see nowadays with OpenAI and all the chat interfaces. Like, the the text response is being streamed back to you. Right? So it's, it's not coming back all in one big chunk in the way that something if it were built with, you know, some front end JavaScript framework that needed to take all that information and process it and convert it to a virtual DOM.
Speaker 1:And, you know, it basically, all that stuff, it can't convert it to a virtual DOM until it's all there. It needs to be all there to make the models, to make the objects, to do all the stuff behind the scenes that it needs to do to make it reactive, to build all its sort of steps between the things. So if you change something, something else changes. That's all that doesn't really work with server sent events. And and with sort of your data coming through as it's updated through the server because it needs to have all the data there in in a completely front end client side framework, before it can really organize it.
Speaker 1:So with Datastar, you get this kind of, the ability to do sort of things that you just cannot do with HTMX in my you know? Or with other not just HTMX, just web development in general. The server sent events is is a big change. So I'll just go through a tiny bit on some more thoughts. And like I said, this is kinda gonna be a rambling one.
Speaker 1:But the front end side of DataStar, the client side stuff, what you do is you basically just create variables, and you can call they call them signals. So you do a data dash signals dash and then the name of the signal. And that's just creating a variable name that you can then reference later. So and let and you can bind it to inputs. So let's say you create a variable name, and then you bind it to an input.
Speaker 1:Then as you type, you could do something like make it uppercase because you you you have that value, that signal, now store stored with DATA STAR. You can then, change it, move it around, do stuff with it, you know, in the JavaScript. So that is actually extremely powerful. I think just that on its own, even if there are no server side events, like, is a full Alpine replacement. And Alpine works differently.
Speaker 1:Alpine does sort of move stuff into a into the JavaScript realm, a little more so. So I just I I think Datastar just using it for the front end, for the client side, is a very good match for HTMX. So now, of course, that's not the purpose. The purpose of Datastar, the the promise is that you can build your whole app with it and that you'll want to build your whole app with it. And I would say that is true for, some people.
Speaker 1:Some people are gonna want to build their full app, and they're gonna be able to with Datastar because you're just kind of using you can use your signals on the back end, so you can set your signals. And the creators of DataStar have made a bunch of SDKs for different, you know, I use one for Laravel, for PHP, so that you can kind of do the things you need to do with DataStar in in easy kind of built in way. But the difference is, you know, between DataStar and other so HTMX so far has played really nicely with all of my existing all my existing routes, all my existing, you know, HTML fragments. So there isn't there's no mental model switch between a standard MPA, you know, multi page application and HTMX. You know, it's just kind of taking that, splitting it up into little bits.
Speaker 1:With Datastar, there there's a different, you know, because the way the events work and the way that it sort of takes over the routes, the way that so so you declare the routes inside each one. So you do, like, data star, get, and then it takes the routes, and it does all the magic inside there. And it can figure out the signals, and then it sends out, you know, merges your fragments of HTML in different ways. So there is a world where you can use it very similarly to HTMX and and other things like HTMX. But it does require a little bit of a departure from probably the standard MPA because you're gonna be all your routes are gonna be just sort of going through DataStar.
Speaker 1:So you're gonna look at them differently. You're not gonna see the same information necessarily when you inspect element. It's not sort of a standard just, okay, Ajax to this route on your app returns this HTML. You know, you're gonna have some different so that there's a learning curve there. So I would say it's one of the best it may be the best client side reactivity for just adding little bits of reactivity, that I've ever used.
Speaker 1:So just that by itself, worth adding to a project. Whether I would use HTMX or DataStar after that, I might, by default, still go to I would I would go to HTMX for a default setup like most of the apps that I'm doing because I don't you know, the the mental model of that, it fits in very nicely with with how I'm already working. Now there's some things with HTMX that you just cannot do, and that's what I'm working on right now. I'm working on a video. I'm gonna try to try to release this soon, but I'm gonna add it to HypeCP also just so it's kind of part of this building in public HypeCP thing.
Speaker 1:But it is, you know, basically a chat. It's gonna be a chat, with, like, a little twist just to kind of highlight the sort of things that that Datastar lets you do. But it's a real time application, so, like, very fast where you can get information from multiple people all at once. They're all seeing the exact same thing. So a collaboration tool that is, you know, updated in real time for everybody who's using it.
Speaker 1:And that's you could do that with polling sort of in HTMX, but it's not really what HTMX is meant for. So having server sent events, opening your browser, letting it stay open, letting your page just receive information from DataStar, this is extremely powerful. So I wanted to get a flavor for it. I wanted to get a test for it. So I'm gonna I'm gonna work on that video, and I'll post that later.
Speaker 1:But I just kinda wanted to give a little idea of where Datastar is is, you know, going into how it's sort of fitting into the picture of this sort of hypermedia, you know, this podcast, the HTMX podcast, the HTMX world, how it's sort of fitting in for me. Because I do think using HTMX, you sort of need a couple extra things. Right? You generally need to have some form of client, you know, client behavior, client state, where if you want something fancy to happen on the front end that the back end doesn't need to know about. You know, this is all data that's real where you pull stuff.
Speaker 1:The back end needs to know about that. That's good. But that's not always everything. Sometimes you just say, let's just wanna move stuff around on the page or something like that. And you want to be able to have client state that doesn't ever touch the back end.
Speaker 1:So HTMX doesn't handle that, and that's fine. It's not supposed to, but you need something. So in this case, I would actually reach for DataStar over Alpine at this point. The other thing that HTMX doesn't handle is these kind of server sent events. Not many things handle that.
Speaker 1:So, I mean, you can just do that on your own, but DataStar gives you the option. So if you're trying to do real time data and delay and the the creators of Datastar have some really good examples of just kind of speeds you wouldn't believe. And and I did a talk you know, I I did a conversation with him. You know, was hypermedia at a 44 frames per second. So just imagine your server sending you constant updates on something all the time, and it's fast and it's efficient.
Speaker 1:So that's the project I'm gonna be I'm gonna be showing soon, and that's kind of where I think Datastar fits in. You probably could, if you got if you really liked it, if you really got into the syntax and got into how things work, you could replace HTMX fully and then have those things on top. Right now, my inclination is that HTMX is not going to say simpler because simple things are different to different people, but HTMX matches exactly with how I envision doing requests and responses and, you know, for for most parts of the site. If I had to do, like, a, you know, a lookup or some details or a modal, which I did before, I would probably stick to that. But if I start to move into client stuff, if the project starts to, you know, need something real time, that's when I would sort of I wanna have this as it's like any gaps that you have with HTMX.
Speaker 1:If you feel like there's no way to fill that, that's gonna pause. That's gonna make you stop and say, well, wait a minute. Maybe I need to use an SPA or something. There aren't really those gaps is basically what something like DataStar is proving. You can have a hypermedia approach.
Speaker 1:You can have this kind of back end server state. You don't need to push everything to your client state. You can fill those gaps using Datastar. So I would say it's a it's can be a very important, tool to use along alongside HTMX as well. So that's where I'm at right now, and I'll try and post that I'll try and post that video soon, maybe today, maybe Monday.
Speaker 1:Kinda tough to post a video, like, Friday 5PM because, you know, YouTube doesn't really like that. People aren't really watching tech videos from Friday 5PM until you know the weekend and stuff. I may wait till Monday.
