Playing
01. Introduction and demo

Transcript

00:00
First we're going to talk about reactivity and real-time updates within LiveWire by building out what you can see here. This is basically an infinite scroll list of posts where we can post something, edit
00:11
it, delete it, like it, and everything is kept up to date in real-time. Before we do this, we're going to talk about reactivity in LiveWire because while we're building this, we're going to come across some issues. So basically with this example here, we're going to push this as far as we possibly can
00:29
with LiveWire. Remember, LiveWire isn't like a traditional JavaScript application where we can keep state and then just re-render a list of things. We need to be really careful about what we're re-rendering and how fast that is.
00:42
So let's take a look at the demo just to see what we're going to end up with and then we'll go ahead and get started with the basics of reactivity. Okay, so we've got a timeline here. I've already got some posts in here.
00:52
You can see that we've got authorization. So Mabel is logged into this side and I am logged in to this side. So I'm going to go ahead and just write a post out here and sure enough, that's updated in real-time.
01:05
So I can like these posts and again, everything is kept up to date in real-time and I can go ahead and edit this as well and you guessed it, this is kept up to date in real-time. Same thing for deleting as well, so I can delete things off of this timeline and they are removed for all users who are currently on this app as well.
01:24
Now I said we're going to push this as far as we possibly can. This is a list that introduces infinite scrolling. So as we scroll down, this just loads more posts in and this can be a really tricky thing to get right even just with a standard pure JavaScript application.
01:42
So if we're going to go all the way down to the bottom here, we'll just use the last post as an example. This works in exactly the same way, so I'm going to go ahead and add an exclamation mark here and you can see that even though we're loading more things in, the reactivity here
01:56
is still working and I can just go ahead and like this. It works in exactly the same way. I can delete this last post and sure enough, the last post gets deleted. So all of these items are kept up to date despite the fact that we're not initially
02:09
loading all of these in. So we're going to look at a technique of how we can introduce really fast infinite scrolling within Livewire, which is a little bit of a challenge in itself. And then we're going to start to add on this real-time updates and take a look at the reactivity.
02:24
We are going to come across problems as we go through the course, but we're going to solve them as we go. Okay, so now that we've had a look at the demo app, let's jump over, get a fresh project set up and talk a little bit about the basics of reactivity in Livewire.
12 episodes1 hr 43 mins

Overview

Livewire can react and re-render anywhere you need it to. But what if we have a infinite scrolling timeline of user posted content with updates in realtime? With added reactivity, we need to be a bit more careful about performance.

Let’s build this together, making sure we keep things running smoothly along the way.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!