Hello Laravel Livewire

Laravel Livewire

This is first tutorial of Laravel Livewire series.

You may view second tutorial here .

Officially : “Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.”

What does it mean ?

Creating UI using React or Vue or Angular adds next level of complexity to application. Livewire insulates you from this complexity, allowing you to use the same Laravel stack for both backend and frontend. Instead of writing a separate UI App, Livewire components are used to create UI and handle XHR interactions transparently by keeping all the interaction logic on the server side.

Another interesting fact is that Livewire components are SEO friendly.With Vue/React/Angular we have to use something known as SSR to achieve SEO optimization. Livewire is SEO friendly, as it renders Livewire components as any Laravel Blade template.

How does Livewire render web pages?

Livewire components are stateless and each UI interaction makes an XHR request to the server and the generated response is used to update the UI.

Get set go.

Let’s create A Simple component to display inventions and their inventors.

When ever a new item is selected , it makes XHR request in the background (we do not have to write XHR code for that) there by updating UI.

Our Livewire App In action

Create a Laravel Application

laravel new hello-live-wire

Install Livewire

cd hello-live-wire
composer require livewire/livewire

Create Livewire component

php artisan make:livewire inventors

This will create a Laravel component class and its associated balde view

CLASS: app/Http/Livewire/Inventors.php
VIEW:  resources/views/livewire/inventors.blade.php

Let’s see component class : App\Http\Livewire\Inventors.php

Livewire component class: App\Http\Livewire\Inventors.php

Our component has 3 properties, data to be used by component.

public $inventor;
public $invention;
public $list;

We also have mount() lifecycyle hook, a method which is called exactly once before component is rendered for first time. We have used it to initialize component properties. Note the use of fill() method. This is one way of initializing one or more proerties.

public function mount(){
$this->list = [
            'Aeroplane' => 'Wright brothers',
            'Computer' => 'Charles Babbage',
            'Fountain Pen' => 'LE. Waterman',
            'Microscope' => 'Z. Jansen',
            'Refrigerator' => 'J . Harrison and A. Catlin',
            'Typewriter' => 'C. Sholes'
        ];
        $this->fill([
            'invention'=>'Aeroplane',
            'inventor' => $this->list['Aeroplane']

        ]);
}

Another method is updatedInvention(). It follows the pattern updated<PropertyNameInCamelCase>(). This method is called automatically whenever property ‘invention’ changes in view. It simply updates the inventor according to the invention name.

public function updatedInvention(){
        $this->inventor = $this->list[$this->invention];
}

Here we have associated view : resources/views/livewire/inventors.blade.php

Note the usage wire:model=”invention” , it binds property invention to dropdown. Thus whenever a new element is selected, it calls updatedInvention() of Component using XHR.

View for Livewire component class: resources/views/livewire/inventors.blade.php

Make sure to add @livewireStyles and @livewireScripts in resources/views/welcome.blade.php as it is required to run live wire components. We have added our component to normal balde view using <livewire:inventors />

resources/views/welcome.blade.php

So Livewire is

Easy to learn
Allows us to use same Tech stack (Laravel) for both backend and frontend Manages XHR calls by itself
SEO friendly

You may download source code from this repo.

Happy coding.