Building Reactive Realtime Applications with Livewire
Playing
02. The basics of Livewire reactivity

Episodes

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

Transcript

00:00
Okay, so I've gone ahead and created out a fresh Laravel project here with Laravel Breeze, just using the blade option. I've gone ahead and installed Livewire.
00:07
Really importantly, I have cleared out any Alpine stuff that we have in AppJS, otherwise we'll get a conflict. And I've run my database migrations, which are just the default ones. So we've just got a completely fresh project here, and I've signed in and I'm on my dashboard. So the first thing that we'll do is look at the basics of reactivity in Livewire by creating out two components.
00:27
The first one is going to be a list of things, so pretty much like what we're going to be building. The second is going to be a component which counts those things. And this is actually a direct example from the Livewire documentation. So you can go ahead and check that out as well.
00:41
So we're going to look at how reactivity works in Livewire here. We're going to inspect our network tab and see what's being refreshed here and re-rendered. Okay, let's go and just create out a couple of Livewire components here. So let's make out a component here called sumList.
01:00
And then we're going to have a separate component called sumListCount, which is going to live within that component, which is going to give us the count of the items. Now, obviously, this is a really silly example, and you wouldn't do this in reality. But it's a really good way to demonstrate reactivity and how we get around that. Okay, so we're going to go ahead and open up our sumList component here.
01:21
And this is going to store a list of things. So let's create out an array in here of things. And that's just going to be an empty array. And then we're going to have a method inside of here, which will add a thing to this list.
01:33
So all that's going to do is just take the things, and it's going to push onto anything. And I'm just going to choose a random string in here. And let's just choose 10 characters. Okay, so over in our sumList blade file, let's go ahead and iterate over these things.
01:52
So we just do a standard forEach things as thing. And in that forEach, and then inside of here, we'll just output that thing. And then down here, we'll have a button, which will add a thing. And then, of course, we'll hook that up with a click event to add a thing.
02:11
Okay, let's head over to our dashboard, put this on here, and see what we've got. So let's output this live wire sumList component. And let's check it out. Okay, great.
02:22
So this just pushes to this list. And, of course, we see all of these details. And if you are new to live wire, and if we head over to our network tab, what's actually happening here, when we call this action, we are re-rendering this list.
02:36
We get the markup back that we should be seeing, and it will hydrate what we see on there. So that's the basics of what's happening there. Okay, so now we want to come over to our sumList count component. And into here, it will just accept that array of things, and then it will dump the count out on the page.
02:53
So into here, let's accept in an array of them things. Like I said, you wouldn't normally do this in reality, because you could just output the count directly within that component. But let's go ahead and do this anyway.
03:05
So sumList count. And inside of here, we're just going to say, there are, and then we're going to count on them things. And then just say things. Okay, so now over in our sumList, we can output this just up here.
03:21
So let's say live wire sumList count. And there we go. So we're going to pass through the things into here, and bind that in. So of course, we can extract the count out from here.
03:36
But let's check out what happens. So obviously, by default, we get there are zero things. When I click on this, notice that this is not being rehydrated. So inside of the markup here, we're just not refreshing what we see in here.
03:49
It's not rehydrating. It's not re-rendering what we see in here. And there's a good reason for that. A lot of the times, you're going to have live wire components within other components.
03:58
You do not want all of your components to automatically re-render, because then you're going to end up with some really long network requests. So at the moment, obviously, the time is very little, because we're not building out anything significant. But if you had lots of components here, and they were all reloading,
04:15
you're going to end up with huge network requests. And that's really going to slow down the page interactions, and just the page speed itself. So how do we get around this? Well, we need to be really careful.
04:25
And that's exactly what we're going to be doing throughout the course. We're just going to be looking at how this sort of fits together, and how slow things actually get. So over in our sum list count, what we can do is specifically, and let's open up the actual component, we can specifically say that we want this to be reactive.
04:42
All that means is, when we are over in our sum list, and things changes, we can say, well, when this changes, which is what we're passing through, then I want to go ahead and re-render this. So how do we do this? Well, very easily, we just add an attribute here.
04:58
There's not really much more to this. Now, this can be really dangerous. So I'm going to just add this to everything. And that's what we're going to be looking at in the course.
05:05
So I'm going to go ahead and add in this reactive attribute, which just comes here from live wire attributes and reactive. And let's see the difference. So let's head over to here.
05:14
We've specifically said that we want this to be reactive and keep up to date with the new value that gets passed in. So I'm going to say add thing, and there we go. Sure enough, you can see this is now updating. So if we look at the difference in the markup that's being rendered here, you can see that we've got two snapshots.
05:34
So let's pull this up a little bit. You can see that the snapshot here, which is for our list, is just being rendered because we always need to re-render that. But we also have a snapshot here for there are four things. So we have that being rendered onto the page and put into the right location.
05:52
So this is where things start to get dangerous because if you had lots of components that you wanted to be all reactive, which is probably not a good idea, you would end up with a huge amount of markup in these requests. More data in these requests means slower requests, and it's just going to slow everything down. So this is what we need to think about when we're building out what we saw in the last episode in the introduction.
06:14
We have a huge list of posts, and we don't want to be re-rendering everything all the time. And we also need to be careful because when we have our infinite scroll, we're going to have chunks or batches of posts that come through. And if we make all of them reactive, then when we update one item, every single list is going to be updated, which is not what we want. So this is the kind of stuff we're going to think about.
06:37
But if you were not aware of reactive or the reactive property attribute that you can use in LiveWire, that's pretty much how it works. So hopefully that makes sense. Now that we've got this down, let's start to build out the application that we saw in the introduction, see what problems we come across and try our best to solve them.

Episode summary

In this episode, we start with a brand new Laravel project set up with Laravel Breeze and Livewire installed. We make sure to remove any Alpine.js leftovers, just to avoid conflicts, and confirm our database is migrated with the default tables. Then, logged in and on our dashboard, we dive into the basics of Livewire reactivity.

To show how reactivity works, we set up two Livewire components: a SumList component that manages an array (our 'things'), and a SumListCount component that simply counts how many items are in the array. We follow a simple example from the Livewire docs—all for the sake of demonstrating how component state by default is isolated and what that means for interactive UIs.

We wire up the list so you can add new "things" (just random strings), and display them as you click a button. As we play around with adding items, we peek at the network tab to see what Livewire sends back and forth on every button click. Then, we nest our counter component inside for displaying the count, but quickly notice the count doesn't update along with the list! That's because nested components in Livewire aren't reactive by default—there's actually a good performance reason for this, so not every change ripples through every child component.

To make the count update along with the list, we introduce Livewire's reactive attribute to the child component and show how it solves the problem. We do a quick side note on the danger of abusing this feature—if you make everything reactive, you're going to blow up your requests and slow down your app, especially once you start dealing with things like infinite scrolling and large lists.

By the end of the episode, you should have a good feel for what "reactivity" means in Livewire, where it comes in handy, and why you shouldn't just throw it everywhere. Next up, we'll start applying these concepts to a bigger app, and see how to keep things snappy as our UI gets more complex!

Episode discussion

No comments, yet. Be the first!