Say No To Complexity With AlpineJS

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.

So the first thing, those slides that I just showed you, that's just an Alpine component. This is the entirety, a simple HTML page. So I'm actually going to get rid of that, and we're going to start from a totally blank slate. This is a simple HTML page loaded in a browser with a few base styles, so there's no magic happening here at all. So the first step is going to be installing Alpine.js. To go with that simplicity mantra, there's no NPM anything. You can NPM installed if you want, but personally, I love the good old days of a simple CDN, dropping it into a page and then getting up and running. So you can go to the Alpine repository on GitHub and just yank this CDN out, and then we'll paste it in, and now we are ready to go. Alpine is totally installed. It's 7.5 kilobytes of JavaScript minified, so it's extremely small.

Okay, let's get to it. So our first component, I'm just going to write a counter component. This is like the hello world of JavaScript frameworks. A counter, meaning we just hit a button, plus and minus, and see a number update, and then we'll kind of backfill some of the knowledge, but I just want you to see what Alpine looks like, a basic Alpine component. So we're going to create a div, and we'll create a button that's a plus, a button that's a minus, and a span tag for the actual number.

So here's our button, plus and minus. And to turn this into an Alpine component, everything is in the markup. So we'll add this xdata property. xdata tells the markup, like here's going to be the Alpine component. Then inside of it, you put a JavaScript object literal of your state for the component. So for us, it's going to be count is zero.

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.

So now we need to wire up the plus and the minus buttons so that when we click them, we mutate that state. So here's the next directive. X on. So it's similar to Vue. V on. X on. You can specify any browser event. In our case, we want to listen for a click and then it'll run this JavaScript when you click. And just to be super clear, what's going inside of these quotations, this is just a JavaScript expression. So you can put any valid JavaScript, even stuff that needs the window or document object. So we can say, alert, hey, when we unclick that button. And, oh, let me refresh the page. We hit plus and then we get hey. Okay? So we also have access to the state inside this button. So we can say count plus plus to increment the state.

And we'll also add an X on click, count minus minus, to decrement that state. And if you're familiar with Vue.js and V on, you can also use the shorthand syntax that Vue makes available to you. Just at click, count plus plus and count minus minus. Okay? We refresh and now we hit plus and we hit minus. And that's it. That's the hello world of Alpine components. It's extremely simple. You express some data that the component is going to use as its state and then you can listen for events and run JavaScript inside of it. And you can also bind pieces of the template to that data and it will all react automatically. I should note that Alpine is a really lightweight framework. I meant it to be extremely robust. So it doesn't actually use a virtual DOM or anything. It uses mutation observer and simple DOM manipulations to make this stuff happen.

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.

And the idea with Alpine is that it's behavior mixed into your markup, similar to how like a library, a CSS library like Tailwind or I'm trying to think of the other utility libraries where you basically compose your styling directly in your markup, where before you were extracting classes to separate files. So Alpine is a similar concept. It's like Tailwind for JavaScript where you're putting your behavior directly inside your markup.

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.

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.

And also, to reiterate that inside of these expressions, this is plain JavaScript. So we can say Tweet.toUpperCase, refresh, and now everything is going to be toUpperCased. I think that's something that takes a little bit of time to sink in. That even in Vue.js or another framework like that, you're used to extracting things to separate methods or computed properties and just referencing those inside these expressions. With Alpine, you're totally free to put in any JavaScript you want inside of these expressions, and you're encouraged to. All right. So instead of Tweet.toUpperCase, we're going to say Tweet.length to get the length of this Tweet. So we start off with say something, as we change this, the length updates. So there it is. Super simple.

Now let's take it a little bit further and say that we want the Tweet to be limited to 20 characters. But if you type over 20, the Tweet count turns red, okay? So let's make a class to make that Tweet count red. Just going to add a style tag up at the top, and inside the style tag a class called red that turns the color to red, okay? And now if we apply this class to this div, so class equals red, and refresh the page, we then have our red character count. But what we want to do is conditionally add and remove this red class depending on the Tweet length. So to change attributes, here's our next property or our next attribute in Alpine, XBind. You can XBind any attribute in HTML. Could be class, could be style, could be disabled, whatever you want. So you can XBind class, and then here is just another JavaScript expression, so we could concatenate re plus d and refresh, and it's going to be red because it's a JavaScript expression that gets evaluated. And of course, you can use the data from the component inside of these expressions. So let's say Tweet.length. If Tweet.length is greater than 20, then we want to make this the red class.

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.

So there we go. Let's move on to another example. The next directive that I want to show you is called Xinit. This is basically the only lifecycle hook in Alpine. So any Alpine component, let's say we add X data. And then an empty object. And then we'll say Xinit. Now anything inside Xinit is just going to get run on initialization of Alpine. So we can say alert. Hey. Okay. And now we refresh the page and you guessed it. Hey is just going to show up. So it's very simple. It's just a nice little hook to run JavaScript when Alpine is initialized.

So one of the common areas that I do things like this, like Xinit, notice I don't even have a stateful data object. Alpine is like, it's like a Swiss army knife for JavaScript. For me, I use it for all sorts of things. And one of the really common use cases for me is using it to control and initialize other third-party libraries. So let's say that I wanted to take an input element and turn it into a date picker. So right now let's get rid of that. Hey, so we don't have to see that every time we refresh. So we have this input element and let's say that we want this to be a date picker, but we want to pull in a library to make that happen.

So we don't have to build it ourselves. So here's Picaday. It's a fantastic, a refreshing JavaScript date picker. Super lightweight, no dependencies. I love it.

So to install it, I already have a snippet so that I don't have to copy and paste it. So Picaday just has some JavaScript and CSS. And then to initialize it, normally, this is what you would do. You would add a script tag, or maybe this would be in your JavaScript bundle. And you would say new Picaday, pass in an object with a value called field, and then document.querySelector, you know, that element that you want to turn into a date picker out of the DOM like this.

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.

So let me introduce you to the next attribute, xref. So we're using document.querySelector, which is fine, but input, you know, obviously in any other app, there's multiple inputs. This isn't going to be deterministic. So maybe you would end up doing something like date picker, like use an ID, but then maybe you want to have multiple on the same page and you run into ID collisions, whatever. I loved the concept of refs from views. So I brought it over to Alpine. In view, you could do something like this ref input. And then from any JavaScript expression, you could say refs.input and access that element without doing the whole query selector thing. So in Alpine, it's xref input and then refs.input. And now let's refresh and make sure that worked. Okay, there we go. So I use this all the time.

Like sometimes I'll make an Alpine component just to use refs so that I can pull things out of the DOM more predictably, programmatically, whatever you want to call it. All right, so let's clean this component up a little bit. If you're not actually using the data property, you can get rid of the value and just use xdata to shorten it up a bit. And I'll say that we don't even need this div. We can take this entire expression and we can pop it inline right here, okay? And that cleans it up. Now, it's just a one liner. And finally, we can also get rid of this xref completely because there's another magic property in Alpine called $L. And $L is going to give you the current element of the Alpine component. So here we go. Let's make sure this works. Refresh, hit, and there we have our nice little date picker in one line of code. It's directly inline. The behavior is entirely co-located with the markup that it's concerned with. And we added literally this much JavaScript to initialize a date picker. So I use Alpine for all sorts of little JavaScript tasks like third-party libraries like this date picker. Awesome.

So the final directive that I wanna show you is called xshow. So naturally a good example for xshow is a dropdown. And honestly, I wrote Alpine because dropdowns and modals are actually surprisingly hard with vanilla JavaScript. I got so used to using vue.js, I had forgotten what it's like, and then you go to create something simple and you realize that it's just harder than you want it to be. And then you go back to something like vue. So Alpine initially started that, I want a framework that I can easily make dropdowns and modals and toggles and things like that. And then it turned into this, of course.

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.

So what we want to happen is we want dropdown contents hidden by default. So let's first initialize this component. So xdata, and this is going to be open, is false. And now, dropdown contents, we can bind to that Boolean with xshow. We'll say xshow, open. And remember, this is just another JavaScript expression. You could put, you could literally hard code true in here. You could do whatever you want. Call a method, doesn't matter. So xshow, open. So now, if we refresh, this should actually go away, and it does.

So now we want to listen for a click on show dropdown, set open to true, and it should just react. So let's do that. So we'll listen for a click and then we'll say open equals true. Okay, refresh. And now, if I hit show dropdown, it opens. Perfect. Next question is how do we hide the dropdown? So we could make this a toggle, so that when we click this again, it hides it. But in a lot of cases like this, with dropdowns and modals, you want to be able to click away from the thing that's shown as a way of hiding it. And so to do that is actually kind of annoying. So I added a little helper inside of Alpine. If we listen for a click on the dropdown content itself, we can add a modifier called away. So we can say add click dot away. And now we're saying when we click away from this element, run this JavaScript and we'll set open equal to false. So check it out. Refresh, we show 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.

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.

Okay. So that's XShowDropDownContents. The final step here is, let's say you're repeating things around your expressions and maybe you want to extract some of this logic into a separate JavaScript file. Maybe the markup mixed with behavior is a little bit too much for you. Although, I'd love a good expression right in line. Let's say that that's the case. You can always extract this JavaScript into a separate file or a script tag by exposing a function. So let's expose a function called dropdown that returns a piece of data. And that piece of data is open, false. Okay. And so here we can actually run this function, dropdown, and that is going to give that component the data. And additionally, you can create methods. So we could say show, and then this.open equals true. And now open equals true could then just reference the show method. And if we refresh, we hit ShowDropDown, and there we go.

So that is Alpine. We've only gone through eight of the directives. But there's also XIF, there's X4. There's lots of other power for you. It is my ode to simplicity and minimalism. It's my JavaScript Swiss army knife. It's seven and a half kilobytes of JavaScript and as simple as a CDN link. So if you're interested, go over to the Alpine.js repository and dig around all the documentations right in there. There's a bunch of helpful examples. And that's it.

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.

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.

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.

No, no, that's good. So file size aside, you're not going to, I'm not going to give my users a performance hit if I choose to use Alpine for its better developer experience. Yeah, no. And the majority of things people are doing is toggling stuff. Like you're making a drop down and a modal and a little slider. And this is great for that. That's sort of the Alpine ethos is Alpine isn't a full front end. It's not an SPA tool. You're not going to build your entire front end system with Alpine. You're going to do it with, you know, whatever a static site generator or a Rails app or Laravel app or Django or Express or something that produces HTML from the backend. And in that case, you're sprinkling in behavior. It's JavaScript sprinkle. So performance is one of those things that I love to geek out on. But in reality, I could get away with murder. And people wouldn't even really know unless they were doing things that maybe Alpine is not even good for, like subbing out your entire front end template for Alpine. So I don't know if you heard in my intro, I was extolling the virtues of jQuery, but would it be fair to say this is kind of like that? I can use PHP or whatever to produce my HTML and then sprinkle in as much or as little jQuery as I want to do the grunt work of toggling things and mucking about with individual DOM elements. Exactly. Yes. And that's where it was born out of is me being a Laravel developer, kind of going back to those ways. So if you're in a back end context MVC type framework, like Rails or Laravel or something like that, Alpine is just that.

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.

You mentioned there's no vDom, Virtual Dom. So Vlad Stavisky asks, how does it work for rendering if you mutate a few Dom elements at the same time? Does Alpine re-render them all at the same time or successively? Yeah, so there's a couple of different answers to this. I guess, what do you mean by mutate two different elements at the same time? Because I think in general, the Alpine paradigm is you're mutating the data and then the Dom updates with the data. Does that make sense? So like in our counter example, you would change count and then the Dom would update. So right now, I crawl the Dom. For that initial render, I'm crawling the Dom. And I'm setting things as I crawl through it. The next version of Alpine, I'm pretty pumped about, because that first initial render, as I crawl, I perform actions. So when I get to, let's say, a div with xtextcount, whatever, when I get to that, I wrap that expression where I actually execute .innertext where I set it in a observable function. So now anytime data that was used to drive out that .innertext changes, only that will execute. So only those pieces of JavaScript will execute. There's no virtual Dom rendering or anything like that. Then I use mutation observer to reinitialize things that are added after the fact or remove things that are removed. It's robust.

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.