Livewire Performance
This episode is for members only

Sign up to access "Livewire Performance" right now.

Get started
Already a member? Sign in to continue
Playing
10. Use AlpineJS for some things

Episodes

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

Transcript

00:00
Sometimes we can get so wrapped up in using Livewire that we forget that we have AlpineJS. So in this episode, we're just going to have a look at a very simple component, which we could easily switch out for some AlpineJS functionality. This is going to be a very, very basic example, but if you keep in the back of your mind that
00:21
AlpineJS might be a better solution, then go ahead and use that instead. So if you've not worked with AlpineJS before, it's a very, very minimal front-end framework. It's by the same creator as Livewire, so it also plays really nicely with Livewire, which is something else we're going to take a look at in this episode.
00:40
So we're going to go ahead and create our really, really simple component here. Let's use Livewire make and let's go ahead and just call this toggle and I'm sure you can guess what that's going to do. So this toggle component, this Livewire component is going to have a public property on it,
00:54
maybe just called open. By default, that's set to false. So this will be automatically available in our template. So let's go over to toggle.blade.php and let's show something on the condition that this toggle value is true.
01:08
So let's go ahead and end that if and in here, we'll just say you can see me. Great. So we're going to come over to our dashboard and just add this component in here. And there we go. We see, well, we see toggle on the page. That's not what we wanted. Open. And there we go.
01:26
So we don't see anything at the moment, of course, because by default over in toggle here, it's set to false. So let's go ahead and create our method to toggle this and that's just going to set this open to the opposite of what open currently is.
01:42
Remember, this could be for something like a modal window that's being displayed, any kind of dialogue that you want to open. It could be for a notification that pops up, pretty much anything that appears, but can also be closed.
01:57
So over here, we're going to go ahead and create a button now and let's go ahead and say wire click and we're going to say toggle. So toggle me. Great. Let's have a look. So when I click toggle me, you can see me. When I click it again, it disappears.
02:13
Now, you'll be pretty used to this by now if you've watched the rest of the series, but we've got two additional AJAX requests here to our server, which isn't a massive deal for a small piece of data like this, but still we can replace out this functionality that we've just built with Alpine.
02:30
Now, if you have not worked with Alpine before, we installed Laravel Breeze in this course. If we come over to app.blade.php and look at our script section, so it's actually inside of our script. So if we go over to scripts or JS and I think it's under app,
02:48
you can see that Alpine is being pulled in here. So go ahead and check out Alpine in the documentation. Essentially, it's kind of like a mini Vue. So if you've worked with Vue.js before, you'll very easily get used to it.
03:00
Okay, so we're going to go and create another Livewire component. We are going to create this as a Livewire component, even though we're going to be using Alpine JS because I'm going to show you something a little bit later
03:11
how we can hook into our Livewire components from Alpine. But let's go ahead and make out a component here called toggleAlpine, just to differentiate that. Okay, so over on the dashboard, I'm going to go ahead and change this to toggleAlpine
03:26
and let's go ahead and open up toggle.blade.php and pretty much grab all of this functionality and rewrite this in Alpine. So we're going to open up toggleAlpine, pop this in here. Of course, this isn't going to work at the moment
03:37
because we don't have a variable called open inside of toggleAlpine. We're going to leave that empty. And let's go ahead and figure out what we need to do. So the first thing is the overall wrapper needs to be initialized as an Alpine component.
03:50
We can do that with X data. And in here, we're going to provide an object with a value, open, false. So this now can be changed and we can toggle this div based on this value and from this button, we can open this.
04:04
So let's go ahead and get rid of the if statement in there and let's attach a V show or an X show, that would be for view, and just say open. So this will be shown in the browser or rendered if this is true. Of course, that's not going to work at the moment.
04:21
I'm going to get rid of the toggle button here just for now so we can look at that and you can see we can't see that component just here or this element. So now for the toggle, we're going to say X on click or we can use the at click handler and then we're just going to set open to not open.
04:40
So the opposite of open. So if we give that a refresh, there we go. We have exactly the same functionality, but we have not used Livewire. So this is a super simple example.
04:50
Of course, you won't often create toggles like this. But like I said, bear this in mind with things like modal windows or anything where you're toggling or showing certain data based on certain things. Okay, so now we're going to look at how this hooks into Livewire.
05:08
We can create this functionality within Alpine, but we're going to go ahead and say, well, maybe we have some sort of open one or modal open inside of our query string, which will automatically trigger the modal. That's a perfectly acceptable thing that's probably going to happen at some point.
05:26
Maybe you want to show this to the user when they land on the page. Well, how are we going to take this value here on the back end, which we might need for certain usage, depending on what this was, and toggle this state based on this value?
05:40
Well, let's take a look at that over in the Livewire Alpine component or the toggle Alpine component and see what we can do. So we're going to do pretty much the same thing as we did before. We're going to have an open value in here, which is set to false
05:53
and we are going to hook this in in here using entangle. So this is like a hook between Livewire and this Alpine component. So we're going to go ahead and use this with at entangle and then in here we're going to pass in the value of the property inside of our Livewire component.
06:14
Now what this means is whatever the value of this is, that's going to be put here. But not only that is when we do click on this, that's going to also update Livewire as well. And we'll look at a way we can get around making additional AJAX requests with this method. So at the moment we don't see anything,
06:34
but let's just prove this point by going over and setting open to true. When I give this a refresh, you can see it is already toggled because the Livewire component has that true value that's being pulled into here and we can see it. Now entangle, of course, is beneficial
06:52
because when we update this in the Alpine component, it updates the Livewire backend. Otherwise, you would just go ahead and do something like open or do some sort of ternary in there. So now that we've got entangle in there, let's look what happens in terms of our AJAX requests. So we've assumed that this thing needs to be shown.
07:10
Maybe we've done something within our Livewire component to fetch some data based on this open being true, which is perfectly normal thing to do. And then if we just toggle this, you can see we're now making additional requests. Now that might be fine for you.
07:25
But if you didn't want this to happen, so for example, if you just wanted the initial open functionality to hit the backend with Livewire on the first page load and then subsequent toggles to not actually hit the backend, you can use something we've already looked at, which is defer.
07:41
So you can actually defer an entangled value. So we just use the defer modifier. Let's go over and just have a look. So when I refresh this, we get open one.
07:50
When I click this, you can see it still works. The whole thing still works. However, we're not making any additional requests. We're just doing maybe closing a modal window or hiding some information.
08:02
Now at the moment, open one is not actually functional. I was just proving the point of the AJAX requests. But if you did want this to happen over in toggle Alpine, you could just as easily implement the mount function and then set this value based on the request data.
08:17
So let's say that by default this was false, but we wanted to check the request data. So for example, we could say request and get open. And we want to make sure or check that is equal to one or true or whatever. But we're going to go ahead and cast that to an integer before we check it.
08:37
Probably not the best way of doing this, but you kind of get the idea. And in that case, we're going to go ahead and set open to true. So mount is a lifecycle hook within Livewire, which will be run when this component is mounted or on mount. And then here we're just checking that in the query string directly using Laravel's request helper and then setting open to true.
08:56
So if we come over and get rid of this, it's hidden. So maybe that modal window. But if open is set to one, that's going to go ahead and toggle that. And then because we added the defer to the entangle, you can see that we don't send any more requests.
09:09
So we've got some pretty nice functionality here where we can control this through the back end, not necessarily relying on the client side and having to pick apart the URL and doing this just in Alpine. We've also done this in Livewire, but then made sure that we don't send any additional AJAX requests to our server if they're not necessary.

Episode summary

In this episode, we take a step back from our usual deep-dive into Livewire and talk about mixing in a bit of AlpineJS! Sometimes, those little UI tasks—like toggling a modal or displaying/hiding elements—are better off handled with AlpineJS instead of reaching for Livewire right away. It's all about finding the right tool for the job.

We start by building a super basic toggle component with Livewire, the kind you might use for modals or notification popups. But here's the catch: every time you use it, you're sending extra AJAX requests to the backend—probably unnecessary for something this simple.

To prove the point, we then rebuild the same toggle functionality using AlpineJS, which is already included with Laravel Breeze. Alpine gives us a lightweight, reactive way to handle front-end state right in the blade—no backend requests needed for every user click.

But what if you need Alpine and Livewire to stay in sync? That's where Livewire's @entangle directive comes in, letting your Alpine component and Livewire property stay connected. We even look at how to use the defer modifier so you only make backend requests when it matters.

This episode does a great job showing when you should opt for AlpineJS and how to blend it nicely with Livewire—saving bandwidth, keeping your UI snappy, and your code clean. If you've ever wondered where Alpine fits into a Laravel/Livewire stack, this is the episode for you!

Episode discussion

No comments, yet. Be the first!