Caleb Porzio

Laravel Lightwire (LiveView): Taking Shape

Jan 2019

The goal of this screencast series is to catch you up on the progress of the project and demo some dope new features I'm working on.

I decided to break this screencast up into five parts for easier consumption. 25-minute videos are something I rarely commit to watching, so hopefully, this eases some of that pain for you.

Note: This is OLD content. Some of what I demo may no longer be available in the framework. The docs are the source of truth for the project:

First, let's walk through the new “component” architecture I decided to go with. Instead of each class representing a view, each class now represents a component, allowing you to isolate the state to a smaller part of each view, as well as add and compose multiple per page.

Before we move on to the fun stuff, let’s rebuild the “Todos” component from the last blog post. This will serve as a good refresher for where we left off last time.

The original demo only included one-way updates. That’s cool, but we weren’t using the other half of WebSocket’s power: sending updates from the server to the client. In this video, we’ll wire up real-time client updates based on server changes, like updating models.

I’ve been toying with another cool feature that will keep a server-side piece of data in real-time sync with the value of an input field. This allows us to do some cool things easily, like real-time validation. Check it out.

This final video might be the kind of thing you would assume is possible, but it actually was a little more complex to implement than you' think: nesting components inside other components.

So there you go. That’s what I’ve been up to. If you are digging the direction of this, let me know on Twitter. I think I’ll want another week or two of playing around on my own before I open source it, but expect more updates like this in the meantime.

Thanks for tuning in!

My Newsletter

I send out an email every so often about cool stuff I'm working on or launching. If you dig, go ahead and sign up!