The vanilla web needs an A+ ui kit
So I just wanted to record kind of a quick one today. I bought something that I saw on Twitter today. And this is, Twitter user Sahil, the the founder of Gumroad mentioned that he had, he was rebuilding his site or I don't know, maybe it's some new part of the site, but he's doing a big rebuild and he's switching from rails to react. And part of what he mentioned was that he had considered h t m x and actually gone so far as to try it out and give it kind of a, you know, kick the tires and see if we could do it, and had considered it and then rejected it. And the reason that he had rejected it, he actually went into a little bit of detail.
Speaker 1:He said this a while ago that he tried it and didn't, you know, didn't have success with it. And and I had actually asked at the time, but there wasn't, you know, he wasn't didn't respond to that. But, he mentioned that, it was just more natural to build the sort of UI's. Like they tried to build they tried to use HTMLX, and the UI was just kind of clunky, and it was hard to do this sort of nice fancy sort of front end stuff that they wanted to do. So fair enough, maybe, so far.
Speaker 1:You know, I'm I. Then they show, you know, he he posted a screenshot, and on the left is the HTMLX version, and on the right is the react version or Next JS, I think it is. So you can see from that, the h t m x one is like this bootstrap form with like a submit and an update, and, you know, it looks like kind of web 1 point o. It really it looks like bootstrap. You know, I don't know if they were using bootstrap, but that's that was the look and feel of it.
Speaker 1:And this was the one they built with rails and h t m x. And then over on the right was this very nice kind of modern tailwind UI style, a left hand menu, and then these kind of and and I'll include a link to this, to this tweet just so you can sort of see it yourself. But, and then it had these kind of nice looking, UI that was much more clear. Like you had a delete button, you had, an add new, which presumably would like pop open either a modal or some new sort of, a little form. So it didn't look like a really ugly form where you couldn't tell what was going on.
Speaker 1:It looked like what you'd expect. So he went with obviously that one as pretty much anybody in their right mind would have nowadays. And then his explanation was that there you know, the path for creating this, was much easier with next, and it wasn't very easy with HTMLX. It all their stuff they were doing by default had this kind of clunky web 1.0 crud look and feel as the screenshot showed. Now, I the problem with this is that this has nothing to do with h t m x, this look and feel and this UI.
Speaker 1:This is a product of the rails defaults, you know, you could say the Laravel default also maybe is like that or or was back when, you know, there wasn't really a good option for a nice UI, whereas next and react, like they just have spent enough time on dealing with the front end that they have these default UI experiences, which is what we've all come to expect. And that's the kind of UI stuff that I build or that, you know, a lot of people build anyway using HTMLX, but the default for something like rails has always been these kind of, really sort of simplistic UI setups. Does not need to be. So it just got me thinking, like, so what happened here? You know, it's like h t m x was kind of associated I think, you know, they tried to sort of do this this rails thing, and the things that whoever was working on it looked up, looked like this.
Speaker 1:They kind of had this this crud, you know, just kind of form setup. So why is that? I think the answer is that there isn't really a good default web UI kit. Right? That doesn't you you know, there's a really good, react UI kit.
Speaker 1:I just like I don't really know them that well, but like shad cn and, the ones that are built off shad cn, Radix, I think it is. There's now, Caleb Porzio, who created Livewire, just created Flux, which is, you know, I've already I've purchased it, but I haven't even had a chance to play with it yet because it's been busy. But they have flux now over in, you know, in in the live Laravel Livewire world. That's that's new though. Even like Laravel hasn't really had, you know, there there are all these UI kits out there.
Speaker 1:There's an alpine components, you know, component libraries, you could call them UI kits. There's tailwind UI, which is also set up for next react. You sort of choose your your front end JavaScript framework when you want to use these. And I have used them, and I ended up, you know, having to install and and figure out node and next just to and have a build process just to kind of use this one little UI thing. And I didn't like that experience at all.
Speaker 1:And the problem was not that this stuff can't be done using just JavaScript. The problem is that, you know, there isn't one. As far as you know, maybe there's, like, web components, which I haven't used, maybe there's attempts out there. Maybe there's stuff I don't know about. But I do think that, you know, there's money to be made in the UIKit world.
Speaker 1:Maybe UIKit's not even the right word. Just, you know, these kind of, component libraries. Take a look at flux UI. You know, that just launched to a huge amount of fanfare and and money, and they solved a lot of problems with forms and with all this kind of stuff. Take a look at tailwind UI.
Speaker 1:You know, they're they're doing layouts and models and and they're making a ton of money off this. All the the react components and UI kits. Like that's someplace where you can go copy the code and paste it in, and your stuff's gonna look great, work great, all this kind of stuff. So I think, you know, this is what happened, I think, in that sort of scenario with this gumroad and sahil, where there was nothing there's nothing about HTMX that makes it so you have to choose this kind of like really poor bootstrap style UI with a form setup and like your save button, and then you're like, you know, create new button and form. Like, you can do that, obviously, if you want to, but there's nothing about HTMLX that says that needs to be the way it happens.
Speaker 1:They could have taken that UI from the right hand side of the screenshot and created it perfectly with HTML. It was very clear, like that's not a HTML was nothing with the issue. But how would you where would you find those components that sort of have that nice UI default, that have that sort of suggested layout for a form. If you're in the rails, maybe even Laravel world, maybe you just wouldn't find that right away. You'd find some like, you know, I keep saying bootstrap, but, you know, you'd find something, maybe you'd find some tailwind stuff, but even tailwind, unless you're using a front end framework, the defaults for tailwind, you can't really do their whole layout section.
Speaker 1:You have to kind of go all in on one of these front end frameworks. If you get alpine components, you can use that, but there just isn't this really clear, UI kit to make really nice stuff if you're not using a JavaScript framework. And the fact of the matter is you don't need a JavaScript framework to do any of it. You can use what the browser gives you. And I think that's what flux UI has done, just from listening to Caleb Porzio's podcast, his notes on work podcast.
Speaker 1:You know, he's gone deep into exploring the browser and kind of leaning into that, which is great. The problem with flux UI, like, you have to install Laravel. And eventually, you know, I don't know how much of it is going to also be dependent on Livewire, which are both great amazing tools. But where is that really nice generic web component library, UI kit, whatever you want to call it, that has everything you need that suggests, you know, layouts for different forms, lets you copy paste. That I think is something that the HTMX community, just based on the Sahil tweet and sort of some of the responses to it, like, oh, wow.
Speaker 1:That's like, you know, that that's what you have to do with HTMX. And it I kind of like, you know, I'm like, well, wait a minute. Like, I don't know. The layout has nothing to do with HTMX, but the truth is if you're using HTMX, you don't have an easy place to go and look out look at, you know, which which UI kit am I going to use? Right?
Speaker 1:You're finding those. You're cobbling stuff together. You're building your own. You're learning about the dialogue, in in the brow you know, the dialogue tag, which by the way is amazing. But what people want I think is like a nice place to just go and copy and paste.
Speaker 1:So, who's building that?
