Building Reactive Realtime Applications with Livewire
Playing
01. Introduction and demo

Episodes

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

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.

Episode summary

In this first episode, we're diving into a really fun project to explore everything about reactivity and real-time updates in Livewire. We kick off by building an infinite scroll list of posts – a timeline where you can add, edit, delete, and like posts, with every change showing up instantly for everyone who's online. Before we get hands-on, we talk through what makes reactivity in Livewire different from your typical JavaScript frontend, especially when it comes to keeping things fast and efficient.

You'll see a demo of the final app, which features real-time updates for every action you take: whether it's posting something new, liking, editing, or deleting. This works for all users logged in, with instant changes no matter who's interacting. We also walk through how infinite scrolling is set up, so more posts load automatically as you scroll, while still keeping everything reactive and up-to-date (which is seriously tricky even if you're using only JavaScript!).

Throughout the series, we'll push Livewire to its limits with the features we build, tackle any issues that come up, and solve them together. Now that you've seen where we're headed, in the next steps we'll get a fresh project set up and start talking about the core concepts of reactivity in Livewire.

Episode discussion

No comments, yet. Be the first!