LiveWire

Story time: I left Tighten six months ago, went on sabbatical, climbed mountain top, no mountaintops nearby though, so went to Orlando instead

Two days into sabbatical, Chris McCord did tweet about Phoenix LiveWire, being able to update front-end from server-side

Sort of like...

<div>
  <div>{{ thing }}
  <a laravel-click="update-thing">Thing</a>
</div>

And doing that reaches into Laravel to update the thing

How does it work?

Adds an event listener, axios thing with method and initial value, then in the response, puts the response into container's outerHTML

Why is this better?

Blade is objectively better than Vue (🔥 Take)

In Blade, you can access Laravel helpers, string helpers...simple workflow, access to Laravel, fast stable tests

This is not new for Rails. While it seems old school, I think not. I mean, GitHub queues. Everything you do in GitHub, it swaps in HTML, not JavaScripty

Introducing...

livewire

All you need to do in your blade is @livewireAssets. Weird hybrid thing between Blade components and Blade includes. Reference a new thing in @livewire('playground'), then php artisan make:livewire Playground.

Creates two files: app/Http/Livewire/Playground.php and resources/views/livewire/playground.blade.php

Livewire components are like mailables; public properties get passed along automatically

<button wire:click="decrement">-</button>
<span{{ $count }}</span>
<button wire:click="increment">+</button>

Implement in the Livewire component, aaaand works like a champ!

Data Binding

<input type="text" wire:model="foo">
<span>{{ $foo }}</span>

Wire it in the component, and it works!

You don't have to worry about v-if from Vue, since you can just use Blade directives!

Transitions...wire:transition.fade.1s, wire:transition.slide. Easy!

Example...WUPHF.com

Making a new NewBark class and new-bark.blade.php.

Properties demonstrated:

wire:keydown

NewBark with submit function...might normally look like having a validate function, but since you're not in a regular request cycle, it won't work. You can do $this->validate([]) though, and it'll work. Real-time validation! Neat!

You also can't redirect(), but you can $this->redirect('/') to go to any route

You can nest livewire components. Doesn't necessarily inherit the scope of nested, though, but you can pass data into Component. Instead of redirect, you can emit('new-bark'), then listen for the event in another component and add it to $listeners

What if you wanted a letter counter?

Well, this wouldn't be great for LiveWire and replace the full HTML. But you CAN still use JavaScript and Vue.js! Vue and LiveWire talking to each other!

wire:loading, no v-cloak needed! wire:poll

Can do tests as well!

Livewire::test('new-bark')
  ->set('title', 'foooooooooooooooo')
...

https://livewire-framework.com

We won! 0 loading states, 0ms build time, 9.6KB Javascript, fast and simple tests. It's v0.1, not ready for prime-time yet, but submit issues, play with it, and hit the red button!

Aaaand https://github.com/calebporzio/livewire is live!