Transcript:

Hey friends, lots of new things are going on in my life and I don't have time to tell you about all of them, so I'm just going to pick one. You know what, I'll preview all of them and then I'll tell you specifically about one Alpine is popping off. Um, I think it's hilarious how I put a year of my life, like full time weeks into Livewire.

And worked so hard on this thing. And then Alpine, I just kind of like farted out and it's probably going to be way more popular than live where it's like the universe is cruel joke on me. Um. But it's not, it's not entirely accurate because a, I basically wrote Alpine for Livewire. You know, like I, I had already learned how to write a front end framework, so it was really easy for me to write.

And it came out of months and months and months and months of just kind of like chipping away at a problem. And then, I don't know, the solution just kinda hit me all at once. Um, and Alpine is in the JavaScript community and who doesn't love a new JavaScript framework? Like, Oh, it's crazy. You want to be rich and famous.

Just build a JavaScript framework and everybody will think it's the hotness for awhile. We'll see if it stands the test of time. I mean, I think it will, um, because it is different than it's been. It's the stimulus killer. Like if you've used stimulus, I hate stimulus stimulus sucks. Um, I'm sorry that that was rash of me.

Stimulus is great in its, uh, ethos and philosophy, but if you ever wrote it, it was LA, LA, LA, LA, LA LA. I do not like it. So Alpine in my mind is the stimulus killer. Um, so I've been refactoring people's stimulus code to Alpine and haven't really run across any shortcomings yet. I mean, stimulus is so simple and dumb anyway.

Like it's, it does even more than it. So. Anyway, enough trashing stimulus and hyping my own thing. If you're interested in Alpine, go check it out. It's pretty exciting. Okay. That's Alpine. Um, Oh. Which by the way, is the new name for project decks. If you didn't follow that at some point, cause I realized I didn't record any episodes since I talked about project ducks, but that's that.

So live wire onto Livewire. Um, I am very excited about live where I'm going to be launching 1.0 at Laracon us in fee or lyric on online in February, and that's going to be pretty great. And, uh, but basically, so what I want is to get it, I want to build an app with it personally and get it to where I want it to be.

Um. And then launch 1.0 so now I'm in that phase where like, okay, I have to start building things myself with it and putting them out there. So I'm going to create like inertia has pink CRM. It's like a little sample app you can download. It's written with inertia. Livewire needs, something like that for sure.

And I've wanted to do it for a long time, but I've just, you know, kicked the can down the road. Well, I'm, I'm now, I'm drinking from the can. Is that the proper metaphor? So that's what we're going to do. I'm going to create an application. And it's going to be open sourced and it's going to be my idea of what a perfect application written or what perfect live way or whatever.

How I would write an application with live where it, my goal is to make it your everyday average layer of El app with tables and forms and modals and dropdowns and slide outs and. Date pickers and blah, blah, blah. Maybe some comments, maybe some real time chat, maybe some infinite scrolling, maybe some deferred loading.

There are tons of opportunities there, and I may a record screencasts about the whole process and put them into a course or a paid subscription thing like Livewire casts. Because, uh, your homeboy has to make some loot on Livewire pretty soon before he goes broke, or his wife kicks him out of the house and makes him get a real job at a local Costco.

Um, so barring that event, uh. We'll see what I'm going to do with that. So keep your eye out for that. It's actually been really fun already. Um, I haven't the master branch open in one tab of Livewire and then I have the app. I'm building, I'm calling it project L, by the way, because I punted on the name again.

Um, and I have project L open in another tab. And as I work on it, basically my, my goal is like, I want it to be perfect. So anytime I encounter anything that's imperfect, whether it's Livewire or Leora, Vel I will attack the problem. So that's what I've been doing. So if I already like made a ton of changes to my local Livewire installed to make the whole experience just better and to, you know, hone it, um, because now I'm using it.

And I want it to be perfect. So, uh, also Laravel I encountered something I wanted and Caravel I hit up Taylor and he liked the idea. So I PRT it to the framework. It's a tiny, tiny thing. But, um, he's totally on board with, with, uh, terraforming of Vela. That's a big word. I'll just say with making changes to layer Velda support live wire and make it better.

So that is huge that I have his support. Oh, I haven't even got to the trail apart, so. The other day I met a bear and his name was Jonathan Renick. Um, so Jonathan running can I paired the other day and he was kind of showing me around his SAS app that he has. We were talking about like if it even be possible to do something that like that in Livewire.

He's like, yeah. You know, uh, like how would you do something like this? And he did some really heavy Java script stuff. I mean, this app, that dude's nuts, like he's, he's doing some crazy stuff. This app, he's got like this data table of, of data and you can just like drag and drop on any kind of like an Excel, like in any comp column, um, in a row and like drag rows and edit in batch and really not so stuff.

And then he's got this report builder where you can like, drag. There's like a column order thing on the left and you can like sort the columns just by dragging them in a different order and the whole page refreshes. So right now it's not written an inertia. It's mostly VJs. And I think turbo links. Um, but I imagine that's probably why he built inertia was basically to like, it's, I remember talking to him in the early days and he was like, should I call it turbo view and restrict it to view or should I open it up?

And then he named it turbo links and opened it up. But basically, uh, so I started messing with this drag thing. We were pairing on it, how I could make a plugin for live, where to do this, this drag ability. Long story short, I ended up writing Trello in it last night, um, with live foyer in this little draggable utility that we created and the thing, so that, that's pretty cool.

And it really just kind of showed me like, Whoa, okay. So I, in my mind, I thought live foyers good for like form submissions and little stuff where you'd normally write an Ajax request and then the really nitty gritty fancy stuff. You gotta use Java script or view or something like that. Well, I think I'm changing my tune, especially with Alpine coming out, and here's the route, the revelation I had.

I'm like, why is it, why is it that this sorting thing is so clean? So here's what we're achieving with sorting, using this JavaScript sorting library. I can have three rows of HTML and I can, let's say that those are stored, they're generated from blades, they're stored in an array in Livewire, like. Called, let's say they're two dues, they're called two dues.

There's three two dues, and I looped for each them in blade, and I show those three to do's in their own span tags, or maybe their own ally tags within a UL. And if you can drag them around and the JavaScript library while you're dragging, won't really touch the order of the Dom. But then when you let go, or maybe it does, who knows, whatever, when you're dragging, you're messing with the Dom.

And then when you let go, the Dom is in its final state, right? So if I have FUBAR, Baz and I drag bar. In front of Fu and I drop it, the HTML has changed. And now the first ally is bar, and then food, and then BAS. Okay. So you can hook into these drag stop events so that when you let go of the mouse, there's an event and I can fire off a Livewire request that says, Hey, here's the new order of the two dues.

It can update the data, re-render the blade, and when the blade comes back to the front end to do, it's Dom diffing. There's no difference. Because it's all data-driven. So I don't know if you're following this, but this is the key, basically. Okay. Here's what it was. I thought Livewire was good for pessimistic UIs.

That means like you why's that hang on the server before they update. So let's say you're adding a card to a Trello column. When you hit enter to add the card, if you want a stored in the database, and this is even with VJs, like a pessimistic approach is to wait for the Ajax request to finish. Then reload all the columns, which will have your new card.

An optimistic UI is one where you type into, uh, uh, the add card thing. You hit enter, it adds a immediately with JavaScript, and then it makes the server round trip. So I thought Livewire is no good for Pesach, for optimistic UIs. It's more for pessimistic wise, but it's totally not at all. And this is why, if you think of your HTML as a.

Data transfer is a transport protocol, data transfer protocol, I don't know, whatever. This is something DHH talks about with turbo links. He's like, why does, why is Jason the only transport? The only valid transport protocol? HTML is a fine transport protocol. So if you think about about HTML as if it's your data.

So take the same pattern of an optimistic UI like Trello written in view. You'd have some piece of data that is your schema of the columns and the cards and everything. Then when you, when you add a card, you update that schema so you're, you know, you push to some array or something and then your template automatically refreshes and then in the background, you send off an Ajax request to the backend and you get it back and maybe it has the exact same.

Jason payload on its way back, and then you swap it into the object so that when you refresh the page, you can get, you know, a fresh, a fresh schema. So basically what I'm saying is live wire can do the same thing with HTML. If you make an HTML change with JavaScript, and if the state is driven from the backend, you can then, then on the next refresh, if you laser only update the state right.

Livewire won't find any issue with the Dom diff. Oh, I know nobody's tracking this cause I'm barely tracking it, but it is a revelation and it's huge and live where it can be used for so many more things than I thought it would. It's 10 10 bye. Thank you for listening.