Livewire Performance
Playing
01. A fresh project with Laravel Debugbar

Episodes

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

Transcript

00:00
So let's do a little bit of pre-setup just so we've got a nice base to start creating out Livewire components and testing out some of the performance things we're going to look at. First thing that we're going to do is create out a fresh Laravel project,
00:12
then we're going to go over and install the Laravel Breeze starter kit, which is going to give us a nice foundation with templates, authentication if we need it, then we'll go ahead and of course install Livewire because that's what we're looking at, and then finally we'll finish off with Laravel Debug Bar, and if you've not worked with that,
00:28
we'll have a really, really quick look around it. Okay, so the first thing is just a fresh Laravel project. Let's go ahead and say Laravel new, and let's call this Livewire performance, and we'll just wait for that to finish.
00:40
Okay, now that's done, let's go into the Livewire performance directory, and let's go ahead and set up our database. So I'm going to open up this project in our text editor, and we're going to head straight over to EMV and change over the database connection.
00:52
I've already created out a Livewire performance database table here, and I'm just going to switch this over to Postgres because that's what I'm using, and I'm just going to change the username over to my username. So now what we should be able to do is run phpartisan migrate,
01:08
and just have all of the default tables created for us. There we go, we've got users and everything we need. Okay, so I'm going to go ahead and start this up using phpartisan serve, that'll be good enough for this, and we should be able to now open that up in our browser,
01:22
and at the moment we're on dashboard, but there we go, there's the home page. Okay, so if we go ahead and create our new tab here, we can get started with installing Laravel Breeze. So let's come over to the installation section here,
01:32
and let's go ahead and pull this in with Composer. Just while that's finishing, let's go ahead and see what else we need to do. So we need to run Breeze install to create all of our controllers for our authentication, that's done.
01:45
Next, we just need to do an npm install and npm run dev. So let's run npm install, and side by side we'll do npm run dev as well. Okay, now that's done, we should be able to come over to our app and hit register up here and create our own account.
02:01
So let's go ahead and do that now. And let's use a password here, and just go ahead and hit register. There we are, we're into our dashboard. This is where we're going to be adding the majority of our Livewire components,
02:13
just dumping them out on this dashboard so we can check them out. Okay, so next up, of course, is Livewire. So let's head straight to the docs, let's go down to the installation section, and let's get Livewire installed.
02:26
And we'll create an example component just so we know we have it installed properly. So let's do a composer require on Livewire. And now we just need to include the assets and we're pretty much done. So I'm going to go ahead and use the tag syntax here.
02:37
I want to pull the styles in at the top of our main template, which is app.blade.php over in resources, views, and layouts. So let's just pull this in at the top just below our styles here. And then let's go ahead and include the scripts at the very bottom.
02:52
So let's go down to the bottom of this template and pull them in just before the body. That is Livewire installed. So we can test out that Livewire is working and installed by running php artisan livewire make. And let's just create out a hello component just so we know this is working.
03:08
Okay, so we'll open up the hello.blade.php template in resources, views, and Livewire. And we'll just go ahead and write hello. That will have also created a hello.php component, if we spell that correctly, in app.http and Livewire, which we won't touch because we just want to make sure
03:25
this is rendered on the page. So let's go over to dashboard.blade.php, which is the page we have open in our browser. And where it says you are logged in, let's go ahead and say Livewire hello. And we should see hello rendered out on the page.
03:38
Let's go over and check this out. There we go. So Livewire is successfully installed. Okay, last but not least is Laravel Debug Bar.
03:46
We're going to use this to monitor things like the memory of our page, how many components are being pulled in, as well as really importantly query counts as well. So this is going to be really helpful. And it'll also give us information about each Ajax request that Livewire makes.
04:01
So we can monitor not only the initial page load, but subsequent requests to our backend as well. So let's go ahead and pull this in. It's pretty straightforward. We just want to go ahead and use the composer command to pull this in
04:15
on our development environment. Really important. And then it's pretty much done and it's installed. So let's go ahead and wait for this to finish.
04:21
And let's come over to our app, give this a refresh. And there we go. We have Laravel Debug Bar installed. If we just open this up a little bit, you can see we've got our queries tab just here.
04:32
That, of course, gives us any queries that are being run on our app, which at the moment is just pulling in the user that is currently signed in, which is the one we registered with. We're going to spend most of our time inside of queries.
04:44
And we're going to spend a lot of our time looking at the request duration and really importantly, the memory usage as well. So that's a really, really quick look around here. We've also got our views here, which tells us how many views are rendered,
04:57
including Livewire templates as well. So that is pretty much what we're going to be using for Laravel Debug Bar. We also do have a Livewire tab here where we can see what kind of data is being passed through to components,
05:12
what kind of data is within components, this hello component that we have already created. Like I mentioned, we'll also see any subsequent Ajax request in a list here so we can see them as they roll in.
05:24
OK, so that is pretty much our app set up ready to go. We can start to create out some Livewire components, see where things go a little bit wrong and where things are a bit slower, and we'll improve them in every single episode.

Episode summary

In this episode, we're setting the stage for all the cool Livewire stuff we’ll be building! We start from scratch by spinning up a brand new Laravel project. Next, we add Laravel Breeze, which gives us all the basic authentication and templates we'll need – super handy so we don’t have to waste time building this from the ground up.

Once that's done, we sort out our database connection (switching over to Postgres in this demo), run our migrations, and make sure our environment is good to go. Then, we install Livewire itself, pull in its assets, and test things out by dropping a quick "hello" component on the dashboard to make sure everything’s wired up properly.

But we’re not done yet! To help us dig into performance and understand what’s happening under the hood with Livewire, we install Laravel Debugbar. We take a quick look at what Debugbar tracks for us, like queries, memory usage, view renders, and even Livewire-specific info like which data and components are being used. This is going to be super helpful for diagnosing and improving the performance of our app as we go.

Now our app is all set up, and we’re ready to dive into building and profiling Livewire components in the next episodes. Let’s go!

Episode discussion

No comments, yet. Be the first!