Laravel Livewire is a new package developed by Caleb Porzio which really changes the approach of how you do front end development. It is a composer package which allows you to create components in PHP which are reactive as well similar to Vue or React. The entire component code is inside PHP and blade files but you get a feeling of and SPA. Initially, everything will look very magical as you are writing only PHP code but getting JavaScript behaviour. But, once you start getting hold of things you will understand the beauty of this project and how it really speeds up your development time. How a user interacting with the component can directly trigger a server side function. How it can re-render pieces of data inside a website, so on and so forth.

Working with Livewire, you create components like any other JavaScript frameworks. Every component has two files – the first one is a PHP class file which is where all your business logic for the component goes. Any public property inside that class is automatically available inside your component’s view (in this case the blade file). And, that public variable is reactive. Which means, if that element is bound to a text field inside your blade file. Any change made to the input text will change the value of that field inside your class as well. It also allows you to handle all the typical JavaScript events and you can hook into them and trigger functions that are executed on the server.

And, now with the new File upload feature, things are become a lot more interesting. You get a very clean API to work with file uploads. Unlike handling a lot things in Ajax for Vue and React, in Livewire the thing is very simple. You just use the file field in your form. And then, handle the file upload like you do in a normal Laravel controller from the Request object. And now, this is what I call a clean API. People had found a lot of ways to upload file using Livewire. However, the creator understood the pain point and created something which is really awesome. You get the option to show an image preview which the user is trying to upload. This is a very neat feature and it also allows you to directly upload files to S3 in case your disk is S3. So, overall I am very happy and highly recommend exploring it.

Working with Livewire does give us certain advantages like:

1. We can use secret configurations directly inside components (not the public properties). There have been so many instances, where let’s say the front end application uses an API just to get a secret key / token to poll some service. Or many times, the API server works as a proxy because we can’t share the key. However, with Livewire, that is not a problem.
2. We don’t need to switch between programming languages. Yes, I work on PHP and JavaScript. Although, it doesn’t make too much of a difference doing development. However, having to work on just one technology is always an easier options.
3. You can test your front end code using PHPUnit and this is really a nice thing. I have used other JavaScript testing frameworks for React, Vuejs etc. However, I always feel at home when I am writing tests inside PHPUnit.
4. With the new File upload, it has become even more interesting. You can upload file along with preview before uploading to the server
5. Most important, because this is a PHP based package, you can slowly introduce this pacakge in any running application without too much refactor.

So yes, all in all I think the package looks very promising. I have a whole video series where I build a Laravel application using Livewire components. You can check out the playlist by clicking on this link.