Exclusive look into Livewire and Alpine.js with their creator Caleb Porzio

Agiledrop is highlighting active members of different open-source communities through interviews focusing on their projects and initiatives, as well as trends and innovations in the digital sphere.

We had the great pleasure of speaking with Caleb Porzio, the creator of Livewire and Alpine.js which are both rapidly growing in popularity. Read on to find out more about the origins of these two projects, how they’re evolving, and what other projects and trends in web development Caleb is excited about.

 

1. First tell us a little about yourself - what’s your role in the Laravel community and what do you do professionally?

My role in the Laravel community has changed over time; I think at one point it was just random new guy fanboying on all the top dogs and listening to all the podcasts, and then at some point it became “the string king” which is a weird one, but I had made a few pull requests to Laravel for string helpers. I forget which ones were mine, str between maybe was mine, things like that, and so Taylor called me “the string king”.

So at one point that was my claim to fame. I worked at Tighten for a while, and then ever since I guess I’m the Livewire guy, and the No Plans To Merge guy. It’s a podcast we started with a friend when we were both at Tighten, initially called Twenty Percent Time, and then we changed the name when we left Tighten.

 

2. How and when did you first discover Laravel? What drew you to it?

PHP was my first real programming language; I’d done some vanilla PHP, and then Yee, and then I kind of landed on CodeIgniter for a while. Maybe it’s not so common anymore because it’s been so long, but there used to be stories of all these CodeIgniter developers coming over to Laravel.

I remember starting a new project for a client and googling “what’s the best PHP framework” - I knew and liked CodeIgniter, but I just wanted to check and see what’s out there.

And a lot of people on StackOverflow were recommending Laravel; so I checked out the site and it said “a framework for web artisans”, I think, and I was like, ooh, I’ll take that. And the rest is history - that was in 2012 or 2013 or so, with Laravel 4.0, and I basically never stopped since then.

As for your other question, it actually probably took me a little bit of time to get involved in the community. I was really into Laravel and Laracasts, using it at my job and everything, but never really interacting until I went to my first Laracon.

We went together with a friend, and it was a huge deal for us. I think it was my first real conference, and everybody was talking about Twitter and asking me what my handle was, and I didn’t even have a Twitter handle at the time, or at least I wasn’t using it.

And that’s what changed for me, engaging in the Twitter community is how I got involved and it was kind of what spurred me on to engage and then naturally build stuff, and then it just snowballed after that.

 

3. Now let’s talk more about Livewire; how and when did the idea for Livewire come to you? What was the initial inspiration or vision for it?

So, for a few years now I’ve spent the winter in Florida, which is the southernmost tropical part of the US (I’m from Buffalo, New York, where it’s like 15 degrees fahrenheit). This is the third year that I’ve done this.

And the first year, I think I started Livewire on day one or two of this Florida trip. I had just quit my job at Tighten, to go on “sabbatical”, I was just kind of going to go find myself for a few months and go get another job. But just a couple days into it I started working on Livewire.

Actually, let me back up - I saw a tweet by Chris McCord, the creator of Phoenix Liveview, it was a blog post which is still really popular that sort of introduced this idea of real-time web apps with only back-end code and it clicked immediately, it’s right up my alley.

About a year before I did a talk at Laracon called “Embrace The Backend” where I did a whole thing in Vue.js, the way we all do things in Vue.js, and then I deconstructed it piece by piece. It was like, well, do we need this piece? And what about this piece, this add this, and I just basically worked my way back to plain old Blade, that was the whole talk.

Anyway, I sort of began this crusade, and then I saw this Phoenix Liveview thing and was really impressed by it. I made a proof of concept in Laravel, I did it in like a day and then I tweeted it. 

I made a little counter, just like Chris made a thermostat, it was just a page and I showed how it’s using web sockets, it’s all real-time, you click + and there’s a real PHP object on the server that rerenders and swaps it in the page.

So, the proof of concept took off, I started an email list and I never stopped. That’s basically how it all started, and since that moment my life has been on that trajectory. I just kept working on Livewire for a long time until it paid the bills and I’m still working on it.

 

4. Can you give us a sneak peek into the future plans and goals for Livewire? Where do you see it in, let's say, one year?

It’s come quite a long way. For the longest time I kept thinking that it’d just be a little pet project, a little package that nobody would use, and then the scope would expand and I’d go, okay, well, maybe more people could use this, maybe this’ll be more than just a little niche. And the scope just kept expanding and it never stopped.

I remember having conversations in the early days of, like, what it could be and thinking “Nah”, but it has all come true. I’m really proud of how far it has come in the two years since I’ve been working on it; it can accomplish much more on the front end than I thought it could.

I have some plans for the next year, even the next two years, and the things I’ll be focusing on are real-time web sockets. It’s tough in PHP, there are solutions available for it, but it’s kind of not PHP’s nature per se, so I’d like to incorporate web sockets and have a first-party real-time offering.

I should note that you can currently use Pusher with Livewire, but I want something more first-class. So, I want to do that and I want to offer an SPA plugin type deal, kind of like Turbolinks. You can use Turbolinks with Livewire right now, but again, I want to bring all these things into the project itself so that you don’t have to adapt third-party packages.

My ultimate goal is that this is the tool that you use to build your entire front end, from desktop to mobile. I’d like to have a mobile offering that uses webviews, real-time, everything. 

 

5. How do you see Livewire as a competitor to big JavaScript-based libraries like React and Vue?

I had spent three or four years working full-time on Vue and Laravel apps. So I’d gotten in on the ground floor of Vue when Jeffrey put it on Laracasts, and I started building apps with it for clients and then when I worked for Tighten and everything.

I remember when I first encountered Vue thinking “Oh my gosh this is so powerful, this is such a step up from jQuery and Blade where I’d come from. And I went full on into it - but I think I went too far. 

I remember having this feeling of, like, with every app I created there were specific instances where simple tasks would take me a week because I had to learn everything about Vue’s specific way of doing things.

And I just had this really overwhelming sensation that all of this was way too much for the things I was actually needing to build, and so I started to step back. 

And that’s really my pitch for Livewire; Livewire is my ode to simplicity, to empowering the back-end developer to get a lot of stuff done and removing boilerplate, because in those setups you’re working with two different frameworks and two different languages, and you have to do a lot of work to get them to talk well together.

So I guess in my mind Livewire is a competitor to those big frameworks, in the sense that my goal is to provide an experience that is much more integrated than those frameworks. But I do think there’s a place for them, I’m not against those frameworks at all, but of course, this is just my thing.

 

6. In addition to Livewire, you also recently released and are working on Alpine.js. Can you tell us more about that?

Alpine’s an interesting one. I was using Livewire for a lot of things and there would be little interactions on the page that I felt didn’t warrant a full server-round trip, like toggling a dropdown or lots of these little ephemeral UI widgets and doodads, and I felt like it wasn’t a good experience to be whacking the server every time you need something simple on the front end.

And I thought, I wish there was a framework that was just for JavaScript sprinkles. You know, just like jQuery, but not, like, jQuery. Because that’s old history, I wanted something declarative that was more reactive than that.

I read up in Stimulus which I’ve been following for years in the Rails community, and judging from the pitch on their website, Stimulus was exactly what I wanted to pair with Livewire. But in reality, when I used it, it just wasn’t a pleasant experience for me, coming from Vue.

Then one day I was sitting down with a friend at a coffee shop. I’d already talked to a few other people about trying to design the perfect JavaScript framework in my brain and I couldn’t really come up with it.

And I was sitting down with this friend, and I’m just brainstorming and I close my eyes - I know this is a weird story but, really, this is how it happened - I close my eyes, and I’m just thinking about the API and then it hits me - x-data. This one attribute where you could put the data itself right in an HTML tag and then everything inside of it would be just like Vue and it would use that data and react to it.

And I reached my hands out and said “I got it!” It’s funny, because it really was a eureka moment, like, that’s it! And from then on it never stopped being that eureka moment, that’s basically what Alpine is, it’s not different at all from that vision I had.

So I’d created this little project called Project X. I wanted it to be really minimal, like the smallest package with the most minimal API, and I didn’t even want a logo or a name, because I’d put so much into Livewire for so long, and for Alpine I wanted to do the opposite, and see if it could just kind of grow on its own - but if not, fine, I’ll just use it for myself.

But, you know, I tweeted it out and people dug it immediately. Like, Livewire was a hard sell; it’s not anymore, but since it’s so different from anything that existed, you had to really convince people.

With Alpine, there was no convincing needed at all. People were coming out of the woodwork going, this is such a cool project, I love it. So, yeah, I grew it, I gave it a name and a logo, and I’m learning every day about more stuff where it’s being used. 

People are into Alpine at a really high level - and not just from the Laravel community, also people outside the Laravel community. It even got attention on the State of JS, it’s crazy.

The same itch that I had and I needed scratched, I guess a lot of other people have the same itch; sometimes we don’t need the whole big front-end framework thing, we just need a nice utility-oriented library to get stuff done, kind of like Tailwind is as opposed to Bootstrap, or something like that.

And that basically answered that part of the equation with Livewire - now I have Livewire for the big stuff and then Alpine for this little stuff. And because I wrote them both I can make sure they work really well together.

I was actually going to just make Alpine part of Livewire but I decided to call it something else, and I guess that was a good move because now everybody else can use it. Now it’s taken on a life of its own. I’m working on a new version that I’m releasing in a few months, and I have a website in the works, and a course and all this stuff.

As for the name, I stressed about it for a while, cause I remember wanting something that communicated minimalism and zen. And I remember talking about x-zen and all these different names, that’s why I put off naming for so long, I just called it project X for a while.

So I thought, where did Vue get its name? I don’t even know, but there’s a car brand, I forget which one, where one of the models is Vue. And I was like, car names? That’s great! So I went to Wikipedia, searched for cars and found the page where they list every model and name, and I just started scrolling.

Clearly, I didn’t get very far, cause they’re alphabetical, and I saw Alpine and - again, this is grandiose of me - but, really, I saw it and thought, that’s it, that’s exactly what I want.

I also do a lot of hiking in the local mountains in New York and when you get to the summit, it’s dead quiet, the air is thinner and all the vegetation is really tiny, it’s all alpine vegetation which is very small and rugged to withstand these conditions, and this was the perfect visual for me - small, rugged, sprinkling, yeah, perfect.

7. How would you say that Laravel and being part of its community have impacted you and your work on these two projects?

I think a lot of the success of these projects is just from me absorbing the styles of Jeffrey, Adam and Taylor. The simplicity and elegance of Laravel are the reason it’s so popular, that’s why everybody uses it, it’s this public statement that robustness, scalability, all these things are important, but if you make something that’s really enjoyable and easy for a developer to use, they’re going to use it.

And that’s just something that’s been a guiding light and my north star for these packages. I want the experience to be like when I first encountered Laravel and went, wow, I can just declare a route and a callback, I can just say that when I visit/test something in your browser, I do something right here, that blew my mind.

It’s the same thing that I try to accomplish with my packages, basically a really slim API that’s really expressive and intuitive, so I put a lot of stress on that stuff. And that I lean from the community, I am totally made of these people that I followed and really absorbed for so long, and so I totally owe it to them and their style.

Taylor especially blows my mind. The more I work on this Livewire project and have to constantly deal with Laravel’s core at the deepest levels, the more I’m dumbfounded by Taylor’s attention to detail and his dedication to elegance at the lowest levels.

The Livewire config file attempts the 3 lines and 3 characters fewer that Taylor uses for comments in Laravel, I tried to do that myself for all the comments in the Livewire service provider, to make them beautiful just like Taylor does, as kind of my ode to Laravel.

And, let me tell you, it’s so much work! I don’t know how he does that for every single comment in Laravel, that’s insane. So, I have huge respect for Taylor, and things like that are totally what has drawn me and kept me here, just this otherworldly attention to aesthetics in programming.

 

8. Are there any other open-source technologies or specific projects that you’re excited about and would like to give a shout out to?

The creator of ReactPHP recently tweeted something like, I had no idea what PHP was capable of, or something like him totally underestimating PHP. I’m super excited about that, whatever it is.

Anything real-time PHP is stuff that I’m really interested in, I would love to see a project come out that makes PHP really synchronous in real time in a real way, and also backs it up with a good answer to the infrastructure problem.

Swoole, Symfony Mercure, all these real-time PHP projects I’m really excited about. Swoole seems awesome, but I think it requires a PHP extension and that’s usually a deal breaker for me, it’s just that little extra bit of hard to get up and running easily for the masses.

In the JavaScript world, I’ve been using the Vite JavaScript bundler and I think it’s awesome. Snowpack is awesome, esbuild is crazy, I’ve been following esbuild and using it and loving it.

So, all these new things coming out of the JavaScript ecosystem that take advantage of ES modules and make loading stuff just lightning fast. I should also give a shout out to Vue Reactivity, the reactivity core in Vue 3. I used it for the next version of Alpine, which is built on that reactivity core from Vue, and it’s a dream.