I've gone through all the stages of Laravel in the recent years. From plain blade with Jquery, to sprinkling VueJs, to full InertiaJS apps, and now I've landed on livewire. In this short post I'll tell you why I think livewire is the best option for solo developers that just want to get something done.
Since InertiaJS is the other big choice for "advanced" front ends with laravel, there will be a lot of comparisons to it throughout this article. I'm not saying that one is objectively better than the other. I'm simply providing some insight into the advantages of livewire for a solo developer.
When I first started making web applications, I was using raw php with no framework and some jquery here and there when I needed interaction. It was dirty, not very maintainable, and a little bit fragile. But boy was it fun.
Over time as my skills got more advanced I started delving into the world of front end frameworks. React seemed like a pain to use just from
the installation page, so I went with VueJS. I started including the Vue
<script> import tag on my pages and hacking away. My apps started
feeling more "professional" and I was loving it.
By this time I was already using Laravel and Vue was pretty much a first party in the ecosystem in terms of support. So everything was working out.
Eventually the concept of single file components came around and it sounded like a good idea to me. I didn't want to set up a whole build system though. But Laravel already did it all for me so I decided to take the dive and start using a full Vue front end with InertiaJS. It was cool at first but over time having to keep two entire frameworks in my head when I was just trying to make something simple started becoming really daunting. After a while I didn't even want to work on personal projects anymore.
Then I found livewire
Livewire sets you up to make what you want to make and only use what you need when you need it.
- Need a static page? Just use a good ol' blade file.
- Need a simple dropdown toggle? Just use some alpine JS and you'll have it done in zero time.
- Need a form component that syncs some values to the back end. You have livewire to take care of that.
But we haven't even gotten to the good part yet. Let's get into the details of what makes Livewire a great option.
1. The power of laravel
If I had a date I wanted to format in a specific way, on the back end I could just use the Carbon library. But if I
wanted to show that date on the front end I now had to make it an attribute on the model and add it to the
$appends array so that it would be present
on the json data that would be passed to my vue components.
It's little things like this that make livewire so nice to use. You can get all the reactivity you want and still get the power of laravel on your front end just as if you were using blade.
Like I said in the introduction, Livewire is more of an extension to blade rather than an entire ecosystem you have to be constrained to. This means that you can start working on your app using blade and only use livewire for when you need that extra reactivity or just extra functionality in your front end. This reduces how much you have to think about since you can just reach for livewire when needed without having to plan ahead.
A really cool concept that livewire introduces by providing an easy connection between the back end and front end is that you can consolidate logic in an easy and clean way.
For example, if you wanted to make a form to create a new resource you would usually have to:
- Make a route
- Make a controller or add a function to an existing one
- Point the route to the controller function
- Pass the right data in your request
- Make sure your controller function returns to the right place.
Now with livewire it can look like this:
- Create a component for your form
- Add a
savemethod that creates the record with the data from the component.
Much easier. And if you use Volt you can make it even easier by just having one file.
One of my recent projects releasethatsong.com is just 8 volt components. All the logic I needed was able to be consolidated into the component that needed that data. I was able to finish this project in 3 days. With InertiaJS it would have taken me double if not triple the time.
Overall livewire provides a great developer experience by:
- Not constraining you to a framework
- Allowing you to use the full power of laravel in your front end
- Making your app feel modern while still using the tools and language you know
- Reducing the amount of work and files it takes to get basic CRUD functionality working
In a future article I'll go more in depth about other aspects that make livewire great. But hopefully this was enough for you to at least consider giving it a try in your next project.
If you enjoyed this article consider giving me a follow on twitter @javierfelizweb