Learn Livewire
This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
24. Using Alpine if you don’t need Livewire

Episodes

0%
Your progress
  • Total: 2h 52m
  • Played: 0m
  • Remaining: 2h 52m
Join or sign in to track your progress

Transcript

00:00
So I've mentioned quite a few times that one of the things that we want to be careful with when we're working with Livewire
00:05
is making too many network requests. Now, if you want to take this a step further, what you can actually do is transfer some of this load over from making requests to your Livewire component to doing everything just with AlpineJS.
00:21
This is completely optional. I'm going to give you an example of one way that we can improve this within the application that we've built. We're not going to directly change it, but we're
00:28
going to create a separate component to demonstrate how you could do this. So one of the things that we could do better in this application is the edit toggle. So we know that when we press edit, if we just
00:40
take a look at our code over in our book item, we have that edit here, which we are toggling. Now, we're toggling a Livewire property. And if we open up our book item, that is sending a network request
00:54
through because it has to set this value and get back a new state. Now, I'm not going to change it here because it's going to involve changing a little bit too much around. But if you were starting from scratch, here's an alternative.
01:07
So let's go ahead and create our new component. So I'm going to say phpArtisan Livewire make. And we're going to say we'll call this toggle example. OK, great.
01:18
So I'm going to pop this over on the dashboard just so we can demonstrate this Livewire toggle example. And let's just fix that up. OK, so our toggle example blade file will
01:31
have some sort of container which is hidden by default. And then we'll have a button which we can click to show this button or show this section. So let's do this in the standard way that we would do it, first of all.
01:46
So when we click on that button, we want to toggle. Let's call this editing because then it kind of relates to what we're doing. So editing state is here.
01:55
And let's go ahead and say edit. OK, great. So we'll head over to the toggle example file here. And we know that we're going to set a Boolean on here
02:06
called editing to false by default. So pretty much what we did before. And then we're going to toggle that. And then in here, we're going to have an if statement to check if editing is true and show that if not.
02:20
So we've already covered this. It should make sense. So if we come over and I hit Edit, sure enough, we toggle the editing state or, in this case, just our fake example.
02:29
OK, so how can we get away from sending a network request to Livewire to actually get this to work? So let's open up our Network tab and check this out. Hit Edit.
02:41
We send a request that gives us the new HTML back with this state. And then we render it. But we can do this without that. So the way that we do this is just use Alpine directly.
02:53
So that does not involve having a editing property in here. It doesn't involve doing an if statement here. And it doesn't involve a wire click because we're not doing anything to do with Livewire.
03:08
What we can do is we can have this editing state in here but have an overall component within Alpine.js to make this work. So for our data here, we're going to set editing to false. So kind of like what we're doing with our Livewire component,
03:24
we're just transferring this down to the client level only. And then with this, we're going to set this to only show when editing is truthy. And then with the button, what we can say is x on click editing.
03:40
And we can set that to true. Or we can set that to the opposite of the value it is, thus creating a toggle. So just moving this data down to the client level means we just don't need to make any requests to Livewire.
03:54
This isn't always desirable. But for something like this small toggling something, it can work. So when we refresh the page, you can see sure enough we don't see that. When I click on Edit, we see editing state popped up like we had down here.
04:08
But as you can see, we're not making any network requests. So this isn't the end of the world. It doesn't matter if you're toggling state with Livewire and sending an additional request down.
04:18
It's really not going to make that much difference to the performance of your page. But if you're doing a lot of this, or you really have a performance critical application where you need this to work,
04:28
or you need it to look a little bit smoother, or you need to introduce transitions, then using Alpine directly to toggle parts of your HTML is a really good solution. And this is how we do it.

Episode summary

In this episode, we talk about optimizing your Livewire applications by using AlpineJS for simple UI interactions instead of always relying on Livewire states and network requests.

We start by discussing how toggling a simple state like 'editing' using Livewire actually triggers a network request, which isn't always necessary—especially for basic UI behaviors. As an example, we go through creating a new toggle component the usual Livewire way, and then show what really happens under the hood: each toggle sends a roundtrip to the server.

To illustrate a better approach for these little bits of state, we rebuild that same toggle interaction but this time using AlpineJS. With Alpine, all the editing state is kept on the client, so toggling something like Edit mode becomes instant—no network calls, no waiting, and things stay super smooth.

You'll see exactly how to set this up with Alpine, and why it's worthwhile for things like toggling visibility or showing edit forms in-place. We also chat about where the line is: a couple Livewire toggles don't hurt, but if your app is heavy on interactivity (or needs buttery transitions), leaning on Alpine can really help.

Episode discussion

No comments, yet. Be the first!