Series Overview & Demos 0:00In this series, we'll take a look at using Livewire. Livewire is built and maintained by Caleb Porzio, and at this point, it's becoming, if not already, an essential tool when building Laravel apps. I already have a few videos here on Laracasts that make use of Livewire, but there's no dedicated series on it, so here we are. In this video, we'll take a look at a basic example which shows the main features of Livewire, then we'll take a brief look under the hood. The rest of the series will be dedicated to building practical Livewire components. So I have a project here with a bunch of Livewire components which we'll be building. So the first one is a contact form with real-time validation.So I have a project here with a bunch of Livewire components which we'll be building. So the first one is a contact form with real-time validation. So if I type in here, add an email, you'll see that there's real-time validation. And there's one here too for the message, it has to be at least five characters. We have a search dropdown here, which makes use of the iTunes API, so you can search for songs. So let's look for a song. And there it is, the dropdown updates as we type. We have a data tables component here, which also allows you to search. So if I search for Lonzo here, you'll see that it filters.We have a data tables component here, which also allows you to search. So if I search for Lonzo here, you'll see that it filters. We can also search by active or inactive users here. And there's also pagination. I also have another component with comments. So I have some blog posts here. And if I scroll down, you'll see a section for comments and we can add a new one. And this will add a comment and show a success message. So although it's not required, I think knowledge of view and using view within Laravel is important to get a full appreciation of what's going on and what Livewire is doing. Installing Livewire 1:40So although it's not required, I think knowledge of view and using view within Laravel is important to get a full appreciation of what's going on and what Livewire is doing. A lot of times Livewire can replace your view components, especially if you're using view to make Ajax requests. I'm also going to be mentioning view a lot throughout the series because they work in similar ways. Okay, let's go ahead and install Livewire and take a look at a very basic example. Let's go to the docs. And let's go to installation. So I already have a blank Laravel 8 app installed.And let's go to installation. So I already have a blank Laravel 8 app installed. So let's go ahead and add Livewire. Okay, let's copy that, paste it here. And let's open this up in VS code. So now we just have to install the assets. So we can make use of Livewire styles and Livewire scripts. I like using the tag syntax here. So let's do that. So I'm just going to make use of welcome blade.So let's do that. So I'm just going to make use of welcome blade. And let's just get rid of these styles. And let's put it in here and get rid of everything in here. Let's get rid of this too. And let's put the scripts right here. And this one's Livewire scripts. So Livewire is component based. So whenever you want to use it, you have to make a component. So if you use Laravel's blade components, it's very similar to that. Creating Counter Component 2:57So whenever you want to use it, you have to make a component. So if you use Laravel's blade components, it's very similar to that. So we're going to make a typical counter component, which we all know is not practical, but a good starting point when trying to understand what's going on with Livewire. So to make a component, we just have to do php artisan Livewire make. Let's call it counter. And this will create two new files for us, a class and a view. So let's go ahead and open those up. So I'm going to open the counter class here. And let's open the view in a split window here.So I'm going to open the counter class here. And let's open the view in a split window here. So I'll open counter.blade over here. So let me just put some text in here and then we can render it out. So counter component. And then let's go back to our welcome blade and let's just render it out in here. So we can say Livewire and then the name of the components of counter. And you can pass in data as well, but we don't have any data for this example. Okay, let's just see if this renders correctly. And there it is. How Livewire Components Work 3:57Okay, let's just see if this renders correctly. And there it is. So the way I like to look at Livewire is sort of like how I look at view. So we have a class and we have a blade view. So the class to me is like the script section of our view single file components. So this is where all of our logic goes. So things like state methods and even lifecycle hooks. The blade part is like the template section in a view component. And here you can set up directives like wire model or wire click to call the methods on the backend.And here you can set up directives like wire model or wire click to call the methods on the backend. So if your state changes, the front end will re-render automatically. So let's go ahead and make our counter. Let's start with the blade file here and let's just start with a span. And this is where the count is going to go. And let's make two buttons, one for increment and one for decrement. Start with decrement and increment. Okay, let's just see if this renders. Okay, okay, that's fine for now.Okay, let's just see if this renders. Okay, okay, that's fine for now. And let's go to our class and define that piece of state. So we only need one here. That's the count. So to define state, just make a public property. So let's say public count. And let's set it to zero by default. Oops, forgot the dollar sign. So again, to compare it to view, this is where you would put your state in your data function.Oops, forgot the dollar sign. So again, to compare it to view, this is where you would put your state in your data function. And this state is reactive. So if this changes, the view will re-render. And any public properties here are automatically passed into the view. So we don't have to pass it directly. Let's go ahead and make our two methods here for increment and decrement. So let's say increment. And this is just going to increment the count. So this count plus plus.And this is just going to increment the count. So this count plus plus. And the same for decrement. Okay. And this is minus minus. So now to interact between the class and the blade file, we can make use of Livewire's directives. So the most basic one is wire click, which we'll be using here. So we can do wire click. So this would be similar to view if we did add click and then call a method.So we can do wire click. So this would be similar to view if we did add click and then call a method. But in this case, we're calling the method on the PHP class. So this one is decrement. And this one is increment. And this, as you expect, should work. Actually, I forgot to change this. Now we can just make this the count. Okay. So let's go back to our browser, refresh, zero.Okay. So let's go back to our browser, refresh, zero. And this should be a counter. Cool. So that's definitely not the most exciting thing. But again, we'll get to the practical examples in the rest of the videos. But I hope you can at least start to see what's going on here. You can see that if any of the state changes, the front end will get re-rendered automatically. However, there are a few obvious changes. We're not writing any JavaScript, which can speed up your workflow as there is no longerHowever, there are a few obvious changes. We're not writing any JavaScript, which can speed up your workflow as there is no longer a need to set up a JavaScript framework and go through build steps every time you make a change. Also, we are now in the context of a back end. So oftentimes, when I'm doing this in view, I need something that's only accessible in the back end. So now I have to make a new API route, use Axios to grab that data and then pull it into view. Now we can just grab it directly in our class and use it right away. Request-Response Lifecycle 7:13view. Now we can just grab it directly in our class and use it right away. Okay, now I want to take a brief look at the request response lifecycle of a Livewire component. So if you look at the main page here, you'll see a brief description of this. So the first point is just saying that Livewire components are server rendered. So it's SEO friendly. So if we go back to our example, that would be the counter components. So this is rendered on the server. So it's SEO friendly. The next point is when interaction occurs, Livewire makes an Ajax request to the serverSo it's SEO friendly. The next point is when interaction occurs, Livewire makes an Ajax request to the server with the updated data. So let's take a look at that. So back to our app, let's open DevTools. And I have the network tab open, and I have Ajax requests highlighted. So let's see what happens when we press a button with wire click. You'll see that Ajax request called counter. So if you take a look at the headers here, you'll see a payload down here. And we have a fingerprint that has a name.So if you take a look at the headers here, you'll see a payload down here. And we have a fingerprint that has a name. So name of the component that needs to be updated. So we only have one here. So let's just counter the server memo, which has the data when it's sent to the server. So zero, in this case, when we clicked it. And then we have the updates we want to make to the underlying class. So in our case, we want to call a method. And the payload is the method increment, and there are no params. So if you take a look at the next point here, it says the server re-renders the componentAnd the payload is the method increment, and there are no params. So if you take a look at the next point here, it says the server re-renders the component and responds with the new HTML. So let's quickly take a look at the endpoint here and see what's going on. So the endpoint is LiveWire message counter. So if I do PHP artisan route list, we can see all the routes. And this is the one we're interested in. So LiveWire message and counter. So that would be in LiveWire controllers HTTP connection handler. Let's take a look at that.So that would be in LiveWire controllers HTTP connection handler. Let's take a look at that. So I believe my VS code ignores the vendor folder. So we have to go to it manually. So let's go to vendor, LiveWire, I already have it open here. So it's HTTP connection handler. And this has an invoke method, which gets called automatically. And then we call a handle method. So this handle method is on the connection handler right here. And as you can see, it takes in the payload and has a bunch of methods being called onSo this handle method is on the connection handler right here. And as you can see, it takes in the payload and has a bunch of methods being called on this lifecycle manager. So let's go to lifecycle manager. And that is in here. And let's start from from subsequent request. Let's take a look at that method method from subsequent request. You can see here that it's sort of just packaging up the instance and the request. So if we die and dump this instead of returning it, you can see it better. So let's just do this.So if we die and dump this instead of returning it, you can see it better. So let's just do this. Okay. And then we refresh this and hit plus. And there is the request. And you can see all the params like I showed you earlier. So the fingerprint updates and memo. So this would be call method, increment. And then we just have the the instance here. So the counter instance.And then we just have the the instance here. So the counter instance. And at this point, it's still zero, because we have not hydrated the class yet. So that's the next step. So if you look at this, let me just put spec back to here, you'll see that it's calling a hydrate methods. Let's look at that. So here is where it's hydrating the class. And if I die and dump the instance at this point, the count should be one. Because at this point, it should have already called the increment method here.And if I die and dump the instance at this point, the count should be one. Because at this point, it should have already called the increment method here. And the count should be one. So let's die and dump this. And let's see if the count is one. And let's see if the class has been hydrated. Try this again. And see the instance. And there it is. Cool.And there it is. Cool. Okay, so now let me just put this back. And let's see what's next. Next is render to view. So this method is just grabbing the view associated with the instance. So in our case, it's this view right here. So I'm not going to go into that. So let's see what's next. We have dehydrate, which again, I won't go into.So let's see what's next. We have dehydrate, which again, I won't go into. But the next thing I want to go into is the response. So before we go into this, let's take a look at the response we get in here. Let's do this again. Let's press increment. And let's see the response instead of the request. Let me do that again. So let's press plus. Here's the request like we saw, but the response is in here.So let's press plus. Here's the request like we saw, but the response is in here. And the response should have the HTML with the new data coming back. So if you go into here, there's the HTML. And there is that new piece of data. So back to the code. Let's go to two subsequent response in the lifecycle manager. So let's look for that two subsequent response. And if I dump the instance, we should get the same thing. So again, there's one.And if I dump the instance, we should get the same thing. So again, there's one. And there is the response here. And where's the HTML? Is it in memo? No, sorry. It's in effects. And there's the same HTML that you just saw. So let's just go ahead and put this back. And let's take a look at the last step here, which is DOM Diffing Updates 12:45So let's just go ahead and put this back. And let's take a look at the last step here, which is LiveWire then intelligently mutates the DOM according to things that have changed. So this is done with LiveWire's front end portion. So when we do LiveWire scripts on the main page, it's importing some JavaScript. And what this is going to do is compare that HTML that's coming back from the response with this. It's going to do a diff and see what changed. So in this case, our count changed from zero to one. And then it's going to change this and rerender or update this DOM element.So in this case, our count changed from zero to one. And then it's going to change this and rerender or update this DOM element. And at that point, you'll see the data update in your browser. So in this case, you'll see a change from zero to one. So yeah, that's a high level overview of what's going on under the hood. This lets us make use of LiveWire's magic to write reactive components without any JavaScript. Again, if you're new to LiveWire, this won't have much value. But we'll start taking a look at several practical examples in the next videos.But we'll start taking a look at several practical examples in the next videos.
