Why Alpine is the new jQuery and Why that is an Awesome Thing
Why Alpine is the new jQuery and Why that is an Awesome Thing ź“ė Ø
Back in the old days, when I was building web sites by hand, in the snow, uphill, both ways,Ā jQueryĀ was my default tool when building any kind of interactivity on a web page. Way before I even considered building apps, jQuery was the workhorse that made cross-browser web development easy, or at least a little less painful. In 2024, itās still in use on the vast majority of web sites. (Iāve seen various numbers, but all point toĀ at leastĀ roughly three fourths of the web sites in use today.)
I think part of the reason jQuery was so successful is that, along with patching browser incompatibilities (looking at you,Ā Safari & Internet Explorer), it was a laser focused set of utilities for common things developers needed to do. Mainly:
- Making network requests (without the pain of
XMLHttpRequest) - Listening for events in the DOM
- Making changes in the DOM
It did a lot more than that, but those three items are part of every interactive web page Iāve built since the introduction of JavaScript. This is why Iāve been so enamored of late withĀ Alpine.js. Alpine.js is lightweight (44kb minified, around half of jQueryās size) and simple enough that the entire thing (at a high level), is documented on the home page. Letās quickly go over the basics, and hopefully youāll fall in love as well!
Installation and Setup
You can do aĀ npm install alpinejsĀ if you want, but itās easier to drop the CDN link in the head of your web page:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
The next part requires a bit of thought. jQuery, once installed, was available everywhere and you could do just about anything. If you ever used Vue.js for progressive enhancement (versus as your entire application), you might remember that you had to specify the part of the DOM that Vue would work with. Basically, āThis area of the DOM will make use of variables, have event handlers I track and so forth.ā This usually was the main block of your web page, not the header and footer.
Alpine is the same way. To keep things simple, Iāll be using one mainĀ <div>Ā block for this purpose. This is done with anĀ x-dataĀ attribute:
<div x-data="stuff here in a bit...">
</div>
OK, ready to get started?
Setting and Displaying Variables
Letās begin by initializing a few variables and showing how Alpine renders them. First, to define variables, you can set them as an object insideĀ x-data:
<div x-data="{
name:'Raymond',
age:51,
cool:false
}">
</div>
To display these values, you can use two different directives.Ā The x-textĀ attribute will bind the text value of a variable to the DOM whileĀ x-htmlĀ will bind HTML. Which you use depends on the data. Hereās this in action:
<div x-data="{
name:'Raymond',
age:51,
cool:false
}">
<p>
My name is <span x-text="name"></span>.
I'm <span x-text="age"></span> years old.
</p>
</div>
Unlike Vue, Alpine.js doesnāt have a āmustache-likeā language built in, but instead relies on attributes applied to your DOM itself. In this case,Ā spanĀ tags. You could bind them to any element, butĀ spans make sense here for simple values. I will admit, itĀ isĀ a bit verbose, but itās nice that itās easy to spot in code. You can see this in action below (and feel free to edit the values of course):
CodePen Embed Fallback
Thatās basic ārender data from JavaScript in the DOMā, but letās now show how toĀ conditionallyĀ show information. Like Vue, Alpine provides two methods. The first,Ā x-show, will hide or display items in the DOM based on their value:
<div x-data="{
name:'Raymond',
age:51,
cool:false
}">
<p>
My name is <span x-text="name"></span>.
I'm <span x-text="age"></span> years old.
</p>
<p x-show="cool">
Oh, and I'm so darn cool!
</p>
</div>
The other method,Ā x-if, will add and remove the contents of your DOM based on the value. Because of this, it requires you make use ofĀ templateĀ andĀ use one top level root element, like aĀ divĀ orĀ p. Iāll admit this tripped me up from time to time, but Alpine does a good job of reporting the issue if you screw this up. Hereās the same example as above, re-written withĀ x-if:
<template x-if="cool">
<p>
Did I mention I'm cool?
</p>
</template>
You can test this below. Switch the value ofĀ coolĀ to see it in action:
cfjedimaster/pen/VwoQNXK Alpine Article 1
Finally, what about looping? Alpine provides theĀ x-forĀ directive. LikeĀ x-if, youāll use aĀ templateĀ tag with one root element. Hereās an example:
<div x-data="{
name:'Raymond',
age:51,
cool:false,
hobbies:['building cat demos','star wars','cats']
}">
<p>
My name is <span x-text="name"></span>.
I'm <span x-text="age"></span> years old.
</p>
<ul>
<template x-for="hobby in hobbies">
<li x-text="hobby"></li>
</template>
</ul>
</div>
Note the use of āvariable in arrayā syntax. You can use whatever you want here, but name it something sensible. Also, in the example above Iām looping over an array of strings. You can loop over an array of objects as well. Check it out in the embed below:
cfjedimaster/pen/YzmLyzv Alpine Article 3
Two-Way Binding
How about binding form fields to your data? Once again, Alpine provides a directive,Ā x-model. This works on any form fieldĀ exceptĀ file inputs (although, like in Vue, thereās a workaround).
For example:
<label for="firstName">First Name:</label>
<input id="firstName" x-model="firstName">
<br />
<label for="lastName">Last Name:</label>
<input id="lastName" x-model="lastName"><br/>
<label for="cool">Cool?</label>
<select id="cool" x-model="cool">
<option>true</option>
<option>false</option>
</select>
The embed below demonstrates this, along with conditionally showing content based on the dropdown:
cfjedimaster/pen/MWNGabj Alpine Article 4
Binding Attributes
Closely related to two-way binding of form fields is the simpler act of binding an HTML attribute to your data. Alpine, again, provides a directive for this,Ā x-bind, as well a shortcut.
Given your data has a value forĀ catPic, we can bind it like so:
<img x-bind:src="catPic">
Because this is something folks may use quite a bit, Alpine provides a shortcut:
<img :src="catPic2">
I feel like a live embed of this would be gratuitous given how simple this is, but as itās pictures of cats, sorry, youāre getting an embed:
CodePen Embed Fallback
Events
As you can probably guess by now, events are supported by a directive, this time theĀ x-onĀ directive where you specify the event and the handler to call. As with attribute bindings, thereās a shortcut. Hereās a simple example:
<div x-data="{
catPic:'https://placecats.com/400/400',
flipImage() {
if (this.catPic.includes('/g')) this.catPic = this.catPic.replace('/g', '');
else this.catPic = this.catPic.replace('/400', '/g/400');
}
}">
<img :src="catPic" x-on:click="flipImage">
</div>
Iāve defined a click handler on the image that runs a method,Ā flipImage. If you look up in theĀ x-dataĀ block, you can see Iāve defined the function there. In Alpine, your data can consist of various variablesĀ andĀ methods interchangeably. Also note thatĀ flipImageĀ uses theĀ thisĀ scope to refer to the variable,Ā catPic. All in all, this flips out a static picture of a cat with a grayscale version.
The shorthand removesĀ x-on:Ā and simply usesĀ @:
<img :src="catPic" @click="flipImage">
You can play with this below:
CodePen Embed Fallback
Alpine also supports various modifies for event handling including the ability to run events once, prevent default behavior, throttle, and more. Check theĀ modifiersĀ docs for more examples.
Letās Discuss the Smellā¦
I can still remember the first presentation I sat in discussing Alpine. I remember thinking: this looks really simple and practical, but thereās no way in heck Iām going to write a bunch of JavaScript code all inside an HTML attribute on a div. Surely I thought,Ā surely, the libraryās not going to require me to do that?
Of course there is! To begin, you switch theĀ x-dataĀ directive from a block of variables and code to simply a name. That name can be anything, but I usually go withĀ app. If for some reason I had multiple unrelated Alpine blocks of code on one page Iād use something more descriptive, butĀ appĀ is good enough:
<div x-data="app">
<img :src="catPic" @click="flipImage">
</div>
In your JavaScript, you first listen for theĀ alpine:initĀ event. This is an event thrown when Alpine itself is loaded, before it tries to interact with the page:
document.addEventListener("alpine:init", () => {
// stuff here...
});
Then you can useĀ Alpine.dataĀ to initialize your application. Hereās the complete code block:
document.addEventListener("alpine:init", () => {
Alpine.data("app", () => ({
catPic: "https://placecats.com/400/400",
flipImage() {
if (this.catPic.includes("/g"))
this.catPic = this.catPic.replace("/g", "");
else this.catPic = this.catPic.replace("/400", "/g/400");
}
}));
});
This isĀ muchĀ cleaner and lets you keep your HTML and JavaScript separated as it should be. (IMO anyway!) You can see this version below:
cfjedimaster/pen/qBeYqGX Alpine Article 7
Note
Notice Iām including the Alpine <script> tag in the HTML instead of using CodePenās JavaScript settings so you can clearly see it and so that I can add the defer attribute.
With our logic now separated in code, it becomes easier to add new features. For example, by adding anĀ initĀ function, Alpine will automatically run the method when the application is loaded. In theĀ incrediblyĀ simple application below, theĀ initĀ method is used to request a Dad Joke immediately:
cfjedimaster/pen/qBeYymp Alpine Article 8
When not to use Alpine
I just spent the last two thousand or so words explaining the basics of Alpine and raving about how much I love it so it would be crazy for me to tell youĀ notĀ to use it, right? Years ago, when I was much younger and foolish, IĀ alwaysĀ reached for a JavaScript framework. First Angular, than Vue. Now that Iām much more mature and rarely make mistakes (ahem), my default is vanilla JavaScript, and by that I mean, no framework. If I just need a few lines of code, it would be silly to load anything I donāt need, even Alpine. That being said, when Iām building something that is doing a lot of DOM manipulation, needs proper two-way binding, or just feels like, mentally, I need an āassistantā, Alpine is what I go to first.
With that, let me leave you with not one, but two Alpine examples Iām particularly proud of. The first isĀ IdletFleet, a simple āidle clickerā game where you work to build a space trading empire. Emphasis on the simple.
Next isĀ Cat Herder, another āidle clickerā game but since it involves cats, you canāt be quite as idle.
Both games have links to their respective repositories where you can dig into the code and how Alpine helped, but I encourage you to play both a bit before you peek behind the curtains.
Also be sure toĀ peruseĀ the Alpine docs as I didnāt cover quite everything, but you can easily read the complete docs in less than an hour.
