New Livewire goodies: wire:text, wire:show, and $js()

Hello citizens of Livewire Land, If you got my last email, you know I've been thinking a lot about building optimistic UIs with Livewire. What in the name of Belsnickel is an optimistic UI? It's when the UI updates instantly, without waiting for a network roundtrip. Think of a like button that increments immediately, even before the server confirms it. Alright, back to business. Run composer update livewire/livewire, and you'll get these new goodies: ​ wire:text wire:show wire:cloak wire:transition $js(...) $this->js(...) Alright, let's dig in... First up, wire:text: ​ Binds text content directly to a Livewire property. Why not just in Blade? Because Blade needs a roundtrip to update, whereas wire:text reflects changes instantly (like with wire:model). ​Check out the wire:text docs →​ Okay, let's keep going. Next up, wire:show: ​ Shows/hides elements based on a property's state—without removing them from the DOM like Blade's @if. Perfect for toggling modals, popovers, etc. Plus: wire:transition adds smooth animations. wire:cloak prevents unstyled flashes on page load. ​Check out the wire:show docs →​ Mmmmkay, time for the juicy one: $js() ​ Finally, a dead simple way to write some JavaScript and call it from wire:click. Another powerful feature is calling JS from the PHP side: ​ Okay, pretty cool, but when will I actually use this? All the time. Trust me. Especially if you want to build optimistic interfaces like we were talking about earlier. Consider that like button example I mentioned. Here's how this API could allow you to build a like button that reacts instantly on click without waiting for a full network roundtrip to complete: (sorry for the pile of giant screenshots) You see it? We update a Livewire property the instant a user presses 'Like'. Then, we fire off a network request to perform the like on the server and re-synchronize the state of $likes with the database. ​Check out the $js() docs →​ --- Okay, that's all for now. I just wanted you to know these things exist and how much fun you can have with them. Happy Livewiring, -Caleb

Unsubscribe | Update your profile | 113 Cherry St #92768, Seattle, WA 98104-2205