Laravel Livewire—A Game Changer
Livewire’s technique is simple. Basically, this is how we work with it:
- Create a component called Livewire component, which consists of a PHP class and a view/blade file (blade.php).
- Write a public function inside the PHP class that renders the view.
- Write another public function in the PHP class that changes the state or value of its public properties.
On the first page load, the PHP class will render the view file in its initial state as the view’s HTML is injected into the page. When a user does some action on the input elements, such as click a button, Livewire scripts will trigger the click event that will make an AJAX call to invoke the function written on the PHP class. As mentioned earlier, this function changes the state of the public properties of that class. Livewire renders the view file again with the updated value of the property and returns the HTML instead of JSON. It then compares the returned HTML with what’s on the page. If there is a change, it updates the DOM with the returned HTML. All this happens, as you guessed, without reloading the page.
On a freshly installed Laravel, install Livewire using composer.
In the main layout file of the Laravel application, include Livewire styles and scripts.
Create the Livewire component using Laravel artisan command.
The above command will generate the following files in the Laravel folder structure:
- A PHP class in the Http folder (app/Http/Livewire)
- A view/blade file in the views folder (resources/views/livewire/quotes.blade.php)
Livewire components are just like blade templates. We can insert it like
<livewire:example-component /> anywhere in a Blade view and it will render.
Next, add the “quotes” functionality to the component. We are essentially wiring the view file to PHP class by calling the public function via an AJAX call. The function changes the value of quotes property and will return HTML instead of JSON as response. This HTML is intelligently injected into the DOM, thus completing the round trip.
wire:model and this can be attached to any element that dispatches an
This concept eliminates performance constraints. Normally, Livewire makes an AJAX call after every
change event. This may prove costly on text fields that fire rapid updates every time there is a user input (for example, a search input). In such cases, we can use the lazy directive modifier, which will make sure that the AJAX call will only be made after the user clicks away from the input.
To cut down network usage, we can use
.defer .defer batches data and action to perform only in the next network request.
Sticking with the search example:
No requests will be sent if the user types or clicks away from the text field. A single request will be sent only when the user clicks the Search button.
Debouncing, like Lazy Updating and Deferred Updating, is another way to improve browser performance. This will basically introduce a time gap between keystrokes, say, two seconds. Browsers will make AJAX calls only if the time between two keystrokes exceeds two seconds. Thus too many requests to the server are avoided. Livewire, by default, applies 150ms debounce to text inputs. However, we can override this by using
With these features, Livewire efficiently deals with all performance-related issues that cropped up after v1 release.
Actions allow listening to page interactions and calling appropriate methods in the main Livewire component (PHP class). Livewire offers a handful of directives that makes listening to browser events easier. A common format for all of them would be
wire:[dispatched browser event]="[action]".
The common events that can be listened to and their use are given below:
In addition to events, Livewire offers event modifiers that add extra functionality to an event. There are four event modifiers offered by Livewire:
- stop – Same as event.stopPropagation()
- prevent – Same as event.preventDefault()
- self – You have to make sure that outer elements are not catching events triggered from a child element
- debounce – To add X ms of debounce
On top of all this, Livewire provides some magic functions:
- $refresh – To re-render the component without firing any action.
- $set(‘property’, value) – To set value of a property.
- $toggle(‘property’) – To turn boolean properties on or off.
- $emit(‘event’, params) – Emits an event from the template.
- $event – A special variable that holds the value of the event that triggered the action.
There are plenty of other characteristics of Livewire that I haven’t included in this short post, my purpose being to introduce you to a framework that will take the pressure off you in your transition to a full-stack developer. The official documentation covers all the bases.