Say No To Complexity With AlpineJS
AI Generated Video Summary
1. Introduction to Caleb Porzio and Alpine.js
I am Caleb Porzio, a full-time open source maintainer and developer. I maintain LiveWire, a full stack framework for Laravel. I also host the No Plans to Merge podcast. Alpine.js is my ode to simplicity, perfect for projects that don't require Vue.js or React. Let's start from a blank slate and install Alpine.js via a simple CDN. Our first component will be a counter. Let's see what Alpine looks like with a basic component.
Hey, there. I am Caleb Porzio. I'm a full-time open source maintainer, developer. I maintain a few packages. One of them is LiveWire. It's a full stack framework for the Laravel framework for PHP. I also host a podcast called No Plans to Merge with my buddy Daniel. Every Friday we hang out and we talk about code and just hang out every Friday, so give that a listen if you care. And then also the other project I maintain is Alpine.js, which I'm here to talk to you about today.
Alpine.js is my ode to simplicity. It's basically for a lot of projects that I work on, like full stack framework type, like Rails, Laravel projects, and even static sites and small things. I don't always want something as big as Vue.js or React, but Vanilla.js just isn't enough. It doesn't give me the reactivity and the things that I've come to love with these bigger frameworks. So I basically wrote Alpine, and that's what I'm going to show you. We're just going to live code it, and I'll show you exactly how it works.
2. Creating an Alpine Component
Think of this like the data object inside of a view component. And the first directive we're going to see outside of xdata is x text. So x text, if you're familiar with Vue.js, a lot of these should be very familiar. This is V text in Vue. X text is saying, hey, whatever you put in here, we're going to put count in here. Whatever you put inside of this expression bind to the text value, the inner text value of this element. So if we refresh the page, we should now see a zero. Okay? And there we go. We refresh, we have a zero.
3. Introduction to Alpine.js Components
4. Introduction to Alpine Directives
Okay. So we just introduced you to three different directives. The X data directive, I also introduced you to X on for listening for events. And I also introduced you to X text. So Alpine is just this. Alpine is a collection of attributes that you can add to your HTML to basically compose behavior directly in your markup.
So there's actually 13 directives. That's the entirety of Alpine. If you go to the docs, the entirety of Alpine is 13 directives and 6 magic properties that we'll get to in a little bit. We're not going to cover the entirety of Alpine today, but we'll cover the basics.
Okay, so let's keep going. Let's look at our next directive is going to be xmodel. So xmodel, if you're familiar with Vue, is very similar to vmodel. And we're going to create a different example. We'll make a text area. And this is going to be kind of a like world's simplest Twitter clone ever. The idea is that we're going to have like a little Tweet box. And then as we type in, sorry, here we go. What is happening to my computer. Okay, so here's our Tweet box. And then as we type into it, we want a character counter, just like on Twitter.
Okay, so here's our div. Let's make this a Alpine component with x data. And we're going to have our property. Our data property is going to be tweet. And we'll start off with the value of, say, something. Okay? Now, if we say x model Tweet, what we're telling Alpine is to bind the value of Tweet to the value of this input element and vice versa.
5. Introduction to Alpine.js Expressions and XBind
When the text area changes, the data will change. So this is two way data binding that you're familiar with from old Angular and also Vue.js. So if we refresh, there we go. The text area now says, say something. And we can use our x text from before to bind the value of Tweet to this div. So let's say x text Tweet. Okay? Refresh. And now we have say something and say something. And if we change it, it's going to update in real time because it's completely reactive.
6. Introduction to Alpine.js Directives and XInit
If not, we want to make it an empty class, okay? So we have 14 characters, and as we type, we get to 20, and bam. Now it's red and it's totally reactive. And just like in Vue.js, like in Vue, there is V bind. In Alpine, it's x bind. And in Vue, you can leave off the V bind and just use the colon. Same thing here. If you want to use the shorthand syntax, you can just use colon, class.
7. Introduction to Picaday and xref Attribute
Okay. And now if we refresh our page, we click in the input, and now we have a date picker. So that's really nice. But because we want this to run on initialization, we can just stick this inside of our alpine-xinit property. One of the benefits of this is that you don't have to, normally you would have to do something like document.addEventListener, DOMContentLoaded, or onReady or something like that. And because it's running when alpine is initialized, it's just going to run in the right order anyway. Okay. So we new pick a day and that totally works, but we have this document.querySelector right here.
8. Cleaning Up an Alpine Component
9. Introduction to xshow Directive
10. Creating an Alpine Dropdown
Let's create a dropdown with Alpine.js. Initialize the component with the dropdown contents hidden by default. Listen for a click on the show dropdown button to open the dropdown. To hide the dropdown, add a modifier called away and set open to false when clicking away from the element.
So let's create our little dropdown. This is going to be our show dropdown button, and then this is going to be our dropdown contents. Let's take a look at those on the page. Show dropdown and dropdown contents.
11. Handling Dropdown Events and Transitions
Now we click away and dropdown is now hidden. Let's say we can listen for a key down event. I love listening for key down events in Alpine and Vue because they make it so easy. We can listen for the escape key to hide the dropdown at the whole document level. Another handy modifier is transition, which provides a nice transition in and out for the dropdown.
Now we click away and dropdown is now hidden. Perfect. So you get this complex event delegation behavior. If you've ever tried to implement this yourself, it's a little bit complex and you just get it out of the box.
So there we go. Let's do another one. Let's say we can listen for a key down event. I love listening for key down events in Alpine and Vue because they make it so easy. You can say at key down dot escape. And now we're listening for the escape key to hide that modal. Or sorry, the dropdown. It could be modal, whatever. Let me show it.
Now I want to hit escape and hide it. So if I hit escape, notice that while nothing happens and then show dropdown gets kind of this focus outline. So that's because we're listening for the escape key on this element. And what we really want to do is listen for the escape key at the whole document level so that when we hit escape anywhere on the page, it's going to hide it. So we can do that with another really handy modifier called a window. You can add dot window to any event listener and it will then listen at the window level. So let's refresh. We show dropdown, we hit escape and now we hit it.
So let's keep going with these convenience modifiers. For X show, I also added another one called transition. So we can say X show dot transition and now when we show dropdown, we get a nice transition in and transition out. And we're on zoom so it's possible you didn't even see that. You can configure it with more modifiers. So let's say we'll make this 2,000 milliseconds long. So it's gonna be a full two second transition show dropdown. And now it transitions in with opacity and scale for two seconds and then it'll transition out. And I really sweated the details over this transition system.
12. Alpine.js Customization and Final Thoughts
It's pretty robust and I used all the defaults of Material Designs motion specifications. So it's really well thought out. You can also customize. You can say only transition in, only transition the opacity, all sorts of stuff like that. And if you're from view and you're used to V transition and using like tailwind utility classes, there's also X transition which works the exact same way and gives you the full power.
13. Conclusion and Course Announcement
I work on Liveware and Alpine full-time. If you use Alpine and you're really into it, head over to my sponsor page and give me a sponsorship. It means the world to me. I'm going to be launching a course on VS code. I started an email list at makevscodeawesome.com where I share VS code workflow tips. This has been Alpine JS. Thank you for watching. Happy coding!
Hopefully you really like it. And I should say that I work on this stuff full-time. I work on Liveware and Alpine full-time. And I basically rely entirely on GitHub sponsors for my income. So if you use Alpine and you're really into it, head over to my sponsor page and give me a sponsorship. It means the world to me. It's what allows me to do these things.
And also as another form of generating revenue so I can build this stuff all day is I'm going to be launching a course on VS code. So I do a lot of screencasting and a lot of people say, you know, I love your setup, your key bindings, all this stuff. How do you set it up? What extensions do you use? And it turns out I'm pretty opinionated about my VS code setup. So I started an email list. And if you care, go to makevscodeawesome.com and you can sign up for this email list. I basically start off like, here's VS code out of the box. It's kind of an eyesore, very distracting. And here's how we get to something more minimal and clean. And I go deep on a lot of VS code workflow tips. So if you give me your email, I'll send you stuff right away. You'll get a bunch of tips right away. And then eventually I'll put it into a course. So if you're interested in that, check that out.
Again, this has been Alpine JS. Thank you for watching. I hope you use it. And happy coding. Thank you. Excellent stuff, Caleb. Amazing. You can't see me, but the viewers can. I've got a microfiber thing on my head. Yeah, because my brain literally exploded.
14. Caleb Portheo's Perspective on Alpine Performance
Caleb Portheo mentioned smaller file sizes as Alpine's main selling point, but he believes that the most important thing is developer experience and productivity. He is currently working on the next major version of Alpine, with performance as the main goal. The current version is already fast, as it utilizes native browser APIs instead of virtual dom compiling and patching.
All the goodness there. Thank you. Luckily, I had so much brain that even though it exploded, I can still continue.
Caleb, please join me on the stage of interrogation where I shall mercilessly interrogate your questions until you weep or beg for mercy. Perfect.
So, viewers, folks, that was Caleb Portheo because I have rechristened him. That's right. So every time you call him by his new name Portheo, I'm on 10%. I'm going to be a millionaire.
Caleb, lots of questions from the community for you. I'm trying to make sure I don't ask all the performance related ones so you don't end up repeating yourself too much. But you mentioned smaller file sizes as Alpine's main selling point. How does it compare with React and Vue performance-wise? I don't think it's its main selling point. I will say that. I think in general, the whole file size thing is a bit of a distraction and I fall prey to it totally, because I idolize that too. But in reality, the most important thing to me is developer experience and productivity. What is it like to use the tool? Does it make you more productive? Does it feel good? Does it feel simple? Is it aesthetically pleasing? Those are the things that I care about. Top priority. That's its selling point. File size is a fun little side effect that I get to say, one single character file size, minified and g-zipped. So I will say that. That's the disclaimer. How does it compare performance wise? I started digging into this. I'm working on the next major version of Alpine and performance is going to be the main goal in the next major version. The goal of this version was to get the API where I wanted it. And I will say that it is pretty darn fast because what's under the hood of Alpine, there's no virtual dom compiling and patching or anything like that. It's all native browser APIs. I don't know how to create a virtual dom framework, so I started the most minimal that I could. I was like, well, so an xtext directive, that would take the element and set its dot intertext to that value. So I started there and then built up.
15. Caleb Portheo on Alpine Performance
The prototype version for v3 is faster than view 2. Alpine isn't a full front end. It's not an SPA tool. You're sprinkling in behavior. Performance is one of those things that I love to geek out on. You can use PHP or whatever to produce your HTML and then sprinkle in as much or as little jQuery as you want to do the grunt work of toggling things and mucking about with individual DOM elements.
I will say that the prototype version for v3 is faster than view 2, which I imagine who knows what view 3. And I don't mean to compare, at this level of performance comparison, I made an x4, which is the same as v4, of like, I don't know, however many thousands of rows, like 30 or 40,000. And then you start to really notice the difference. And yeah, because I have the advantage of not dealing with a template compiler. So that's nice. It allows me to kind of only update the pieces of the dom that need to update when a piece of data changes. So the next version of Alpine, I'm super excited to get really nerdy and see how far I can push the performance gains. And I think it's pretty far. Yeah, so that would be my answer. Pretty vague, but yeah.
16. Alpine.js Rendering and Mutation
And it's a lot of... So it kind of sits in between jQuery and something like Vue, where it gives you some of the fancy reactivity of Vue, but it gives you the simplicity of jQuery CDN. There's no need to compile. There's no webpack. There's nothing like that. You don't have to do that stuff. And it's not even recommended that you do it because you're sprinkling in behavior here and there.
So yeah. Interesting you talked about Laravel because here in my home city of Birmingham in the UK there's a really nice web shop called Jump24. I'm not trying to push them. It's just I drink a beer with their chief execs at times. And when I tweeted about this Smashing Mag article, he said, oh, we love that framework. It works so well with Laravel. I think not realizing that you were connected to the Laravel project. But enough about my personal beehing on it. Let's move on to another question.
17. Robustness and Localization in Alpine.js
I built Alpine.js to be robust and resilient, allowing for manipulation of the DOM without issues. When discussing it, it's better to say you sprint over the DOM rather than crawl. As for internationalization and localization, Alpine.js primarily focuses on composing behavior within the HTML, while the backend, such as Laravel, handles the actual localization. Unfortunately, we're out of time for more questions. Thank you for your participation!
I built it to be really robust. It uses mutation observer. A lot of things are computed at runtime, so you can use it with something else. You can manipulate things, and it's not all going to blow up in your face. That's kind of a goal for me. I want it to be something that's a little more resilient than an entire virtual Dom-driven thing that owns the Dom. I want it to be something that manipulates the Dom as it needs.
Gotcha. Interesting you say when you crawl, you do actions, because my lady friends tell me that when I'm drunk, I'm much the same, actually. Is that right? Yeah. A little bit of a PR tip. Don't say you crawl over the Dom. Say you sprint over the Dom. Give the idea that you're not slow, like straight from the outside. Yeah, right. Good call. Good marketing tip. Yeah. No worries. Again, 10% for that. Of course.
Another interesting question, not about deep tech or performance. Naomi Meyer says, great talk, Caleb, with an emoji that looks like a carrot, but I suspect it might be some kind of party thing. I've got terrible eyesight. And then she says, does Alpine support internationalization and localization functionality or components? Yeah, I guess I'll say no. I'll say that, like, I'm using Alpine with Laravel most of the time, and Laravel has really good localization support, so that's kind of taken care of with Laravel. Is that the question? Does that answer the question? Yeah. Yes, I think it does. So what you're saying is no, it doesn't, because that's not its goal, it's the thing that produces the HTML is the actual goal. Is that a reasonable pattern? Yeah, so like the backend is the thing producing the HTM... Alpine is the thing composing behavior within that HTML, so let's say if I'm in Laravel and I want to localize a string, I would do that on the backend and then I could toggle that string with Alpine on the frontend, but the actual localization would have happened further upstream. And we have many more questions, but the voice of God in my head is telling me we're out of time, Caleb. Thank you so much for answering the questions, and please, if you could go to the Zoom Room paid ticket holders, you get a chance to interrogate Caleb. I hope I didn't make you cry with my ruthless questions there, Caleb. I'm holding it back. Thank you so much. Good man, good man.