JavaScript is crazy these days. We pull heaps of code and complexity into a project for simple things like modals and loading spinners. It doesn’t have to be this way...

Ok, I'm listening...

Say hello to Livewire.

Hi Livewire!

Livewire is a full-stack framework for Laravel that makes building dynamic front-ends as simple as writing vanilla PHP (literally).

Consider my interest piqued

It's not like anything you've seen before, the best way to understand it is just to look at the code. Strap on your snorkle, we're diving in.

...I'll get my floaties

Ok, let's see some code

Consider the following "counter" component written in VueJs:

<script>
    export default {
        data: {
            count: 0
        },
        methods: {
            increment() {
                this.count++
            },
            decrement() {
                this.count--
            },
        },
    }
</script>

<template>
    <div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>

        <span>{{ count }}</span>
    </div>
</template>

Now, let's see how we would accomplish the exact same thing with a Livewire component.

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}
<div>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>

    <span>{{ $count }}</span>
</div>

Are you still with me? I know, it's bonkers, but just go with it for now.

How the he*k does this work?

Livewire's not that different from frameworks like Vue/React actually. Here's what happens when you click the "+" button in the Vue component:

  1. Vue hears the click because of @click="increment"
  2. Vue calls the increment method, which updates count
  3. Vue re-renders the template and updates the DOM

Livewire works nearly the same, but with 2 extra steps behind the scenes.

  1. Livewire hears the click because of wire:click="increment"
  2. Livewire sends an ajax request to PHP
  3. PHP calls the increment method, which updates $count
  4. PHP re-renders the Blade template and sends back the HTML
  5. Livewire receives the response, and updates the DOM

Cool huh?

Can I replace all my Vue components with Livewire components now?

Not exactly. Livewire will hopefully replace a bunch of them, but because every interaction requires a roundtrip to the server, it's better to use JavaScript for things that need to be instant (like animations).

A good rule of thumb is: any JavaScript components that rely on ajax for server communication, will be better off as Livewire components. There's lots of other good use cases, but this gives you a basic idea of where to start.

When can I use it in my projects?

Right now, the project is still in pre-release. Sign up for my email newsletter to get notified when It's ready for prime-time.