I Finally Feel Great About Livewire

Hello friends. I am back with another episode after a little break. Ah, episode 31 I finally feel great about Livewire. It is very true. Uh, so tomorrow I'm going on virtual stage at Laracon online to release live where 1.0 and demo sort of the state of Livewire, how I am building things with live wire these days to everybody.

And also Alpine. And I've got to say, I feel fricking great. I really do. Um, I don't know if I've ever felt this way about Livewire. So Livewire is one of those things that, it's controversial, it's radical. It's very different than any other way of building apps. And it all started with that little seed of that Phoenix live view post where I just saw this, this basic concept of like.

Making a click handler in the front end, run a method in the backend, rerender some HTML and swap it into the page. That was the seed. And then basically fast forward one year on this journey of me pushing this paradigm as far as I can and seeing if I, if seeing if it's a good pattern, if it's something that that is beneficial, is better.

There's obviously some clear advantages, but, but is it workable that that question always lingered for me. It's like, is it a, is it too much magic? Is there too much magic going on? Is this like not going to be, I don't know, future-proof or whatever? I don't know. All the things that you've, you feel when, when something is, is really magical.

Is it too much magic? Is it, is it too slow? That was the biggest one. That is by far the biggest one. All right, so we're using WebSockets pretty fast. I type into the browser, sends a WebSocket request to the backend, comes back, it's pretty darn fast. Um, you know, I click a button and a modal shows fairly fast, feels pretty much instant.

Can't use WebSockets PHP suck. Sorry. Use Ajax now. Clicking a button to show modal could be anywhere from instant to laggy, like 250 milliseconds or something. Oh, maybe Livewire is not. Is not the tool, but I kept pushing and I kept pushing and the thing that I would always come back to that I for myself is like, all right, if I throw live wire out the window, I'm basically going to end up rebuilding it myself.

I never threw it out the window. The way that I love to build apps is really, really simple. Plain blade, and if I need some complex interaction, I try to push this server fetched partials pattern as far as I can where you're sending an Ajax request to get HTML and swapping it into the page. And so basically, I've gone to this thought process a hundred times where I doubt myself so much that I throw it out mentally.

Like really go there. Like, like a stoic, like, like a really like put yourself in the place of the worst possible outcome in your mind. Put yourself in that place. Livewire is not good. Um, the, you know, inertia or whatever, other ways to build apps are much better. And then honestly, uh, you know, once I shed that, that I don't know if it's fear, uh, defensiveness.

When I shed those emotions, I end up recreating Livewire anyway for myself. That's what's kind of kept me going. And honestly, at the end of the day when it's dark and it's quiet, I love writing things with Lifewire. It's a really fun tool. I have so much fun doing it. It removes a lot of the pain and annoyances, um, of any other paradigm that I've used.

Okay. So is it slow? Yeah, yeah, yeah. It might be too slow, but here's, so here's the big revelation that that started to really hit me. The last episode that I published called building, I think I published it. It's at least sitting in the app I'm using to record these things. Episode 30 building, building Trello.

I can't even see the rest of the title. Something about building Trello with Livewire and that realization, I had that like, Whoa, you if live wire works well enough with JavaScript. Then it you can use it. It doesn't have to be any less efficient than any other paradigm. It doesn't have to be any less efficient than using pure view because a lot of your view components are sending requests to the server to do stuff and it gets stuff.

So the same can be done with your Livewire components and then the parts that you wouldn't want to make a whole request. That's fine. You know, use, use JavaScript for that. So I made that Trello thing where I had sortable and draggable and I was basically building an optimistic UI with live wire in. It kind of blew my mind.

It was like, Whoa. So Livewire is more of an API interface for me mentally than like a full on front end framework. Or at least you can think of it that way. Anyway, this is a lot of high level talk, but, uh, Alpine was born out of Livewire because I had this need for like, all right, but what about drop-downs and modals and tabs?

Those are like the three things that bootstrap always gave you out of the box. And they got, you know, they, they got you pretty far and now we're using tailwind and BOMA and those things don't exist. So what do we do? And Alpine JS is my answer to that. And it started out as, you know, I, people recommended to me that I like, maybe you could solve this, just Livewire, maybe you could make you know some, because basically the syntax you want on the front end is Livewire, but you just want it to react instantly instead of going back to the server.

So maybe you have like two kinds of data in a Livewire component, like reactive front end data and like back end data. I don't know. I never liked it, so I'm glad I made this decision. But early on I was like, no. Alpine is a completely separate tool from Livewire. I want to make life work right. And I wanna make Alpine great.

And I want to make them both great in their own right and follow those paths separately. And then if there's, if, if the paths converge, that would be, that would be grand. Um, so I did that with Alpine. I just basically focused on the tool itself. On an Island and focused on making it, uh, you know, a really, really good tool.

And that's a whole other fun story that Alpine is becoming pretty darn popular. It's like 4,000 stars on get hub. People are contacting me about podcast. People are launching courses about it. Um, it's definitely has a ton of potential. And it's, yeah, it's really exciting. So anyway, Alpine is great. Alpine is great.

Great, great, great, great, great. Livewire Alpine. Where are we? I'm so live and JavaScript. Y'all have a script. Um, yeah, so I started using Alpine in my Livework components. And you know, it seemed like, Oh, this could be really awesome, but it kind of presented the same hangups that, that using view in your live where components does, it's, it's a little bit hard to integrate.

Um, but over time I'll say that, that I cracked the code, I cracked the Alpine Livewire code and that that is really the good news. That is the thing that, that makes me feel great about live where now is Alpine and Livewire right now, work really well together in 1.0 locally on my computer. But by the time you're hearing this, it's probably going to be public.

So the integration is so freaking cool. I wish I could sit and describe it to you. I probably should. That's what this, this whole podcast was supposed to be about. Maybe the next episode will be. On Alpine Livewire integration, how it works, cause it's pretty cool. I really wanted it to be a fantastic integration.

So I reached for the stars. Basically for me, I reached for, for the, what would I, what in my gut, I know would be the most foolproof way of integrating Alpine and Livewire. There's lots of hacky ways you could do it, but I wanted the pure way I wanted, the way that that led to more flexibility and more, um, capabilities.

And, uh, and I landed on that. So anyway, you can use Livewire components, sorry. You can use Alpine components in your Livewire components, wherever you want. No problem. And they're not go...