If you haven't been following along, I've been working on a little tool I'm calling Laravel Livewire. The basic idea is allowing developers to stay in PHP land, but write snappy, SPA-feeling front-ends. It's inspired by Phoenix LiveView, and you can catch up by reading my first post.
These days I’ve been hard at work on this Livewire project (BTW, I decided to call it “Livewire” instead of “Lightwire”). I’ve developed a handful (or more) features that I think you’ll dig. Here they are:
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: https://livewire-framework.com/docs/quickstart/
I’m proud to say Livewire now has some really nice testing features. It supports both Unit testing components AND end-to-end testing (like you would with something like Dusk). This is kind of a huge deal because you get the benefits of being able to run acceptance tests, without the sluggishness and fragility of actual end-to-end testing solutions like Dusk, Cypress, or Selenium.
Testing the "Counter" component
Testing the "Todos" component
One shortcoming of the Livewire approach over traditional page reloads, is having to manually wrangle validation errors instead of Laravel automatically handling them for you. This just felt like too much friction to me. So I designed an API that more closely mimics the validation error handling you’re used to in Laravel. Check it out!
WebSockets are cool and all, but because Livewire relies on them so heavily, it’s my biggest area of concern for the viability of this project. I made a BUNCH of behind the scenes changes to hopefully handle some unfortunate things that might go wrong with your app in production. I think the solutions are pretty clever actually if I do say so myself.
What started as me making a file-watcher to restart the livewire server, turned into a kick-ass hot-reloading feature. It’s a better hot-reloading experience than any other I’ve used, to be honest. Give it a chiggidy-check:
Livewire feels “snappy”. However, I often like to add CSS transitions, like a “fade”, to elements that appear and disappear so that page interactions don’t feel jarring. Livewire has a new directive called: wire: transition now that allows you to really easily add CSS transitions to elements that come and go. It’s very fun.
Welp, there ya go. A bunch of cool little things I’ve been hacking on over the past week. I’m starting to develop my vision for the tool as I go and I’m pretty happy with where it’s headed.
It’s turned out to be quite the undertaking and I’m still nowhere near happy with it. I’ve thought about open-sourcing it soon to get help from the community, but am not sure I want to give up the tight focus I have right now. If enough people are super-duper interested, I'm open to it.
If this concept is exciting to you, I’d love any feedback you can give me (twitter is best).
Peace, Caleb
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!