If you can't get behind the big JavaScript frameworks or like using tools with a philosophy similar to Tailwind, then you may find interest in Alpine.js.
What is Apline.js?
Alpine.js is, as described on their GitHub repo, a rugged, minimal framework for composing JavaScript behavior in your markup. In other words, Apline offers reactive and declarative functionality of the big frameworks in a smaller package.
Alpine doesn't offer everything, however it offers the in-HTML features of the big frameworks. There is no built-in component engine like with Vue or Angular. There is no router. It's a minimalist framework.
Let's look at some code!
Alpine is heavily influenced by Vue, so if you know basic Vue.js, then Alpine will be immediately familiar to you.
Dropdown
Here's how you could implement a drop down menu with Alpine:
<div x-data="{ open: false }">
<button @click="open = true">Open Dropdown</button>
<ul
x-show="open"
@click.away="open = false"
>
Dropdown Body
</ul>
</div>
Let's examine this to understand how this works.
In the div
element, you'll notice the x-data
attribute. The x-data
attribute is similar to the data
property in Vue. It takes a JavaScript object. x-data
is available to all elements within the div
. In this case, there is a property called open
, which is set to false
by default.
In the button
you'll see the @click
attribute. This works the same as in Vue. This can also be written as x-on:click
. It's pretty simple, when the button is clicked, it will execute the expression given. So, when the button is clicked, it resets the value open
from x-data
to true
.
Finally, in the ul
, when have two attributes to cover. First, x-show
. x-show
receives an expression. In this case, it's just open
. If open
resolves to true
, then it will show, if false
, it won't. Second, @click.away
(also written as x-on:click.away
). Also very simple. If/when the mouse clicks outsude of the ul
, it executes the expression. In this case, it sets open
to false
, in turn, closing the dropdown.
You'll notice that there is no JavaScript. That is because Alpine initializes itself.
Using JavaScript
For more complex tasks, we won't want to be writing our JavaScript in our HTML. So let's take a look at our previous example again:
<div x-data="{ open: false }">
<button @click="open = true">Open Dropdown</button>
<ul
x-show="open"
@click.away="open = false"
>
Dropdown Body
</ul>
</div>
Instead of having everything in our HTML, we can move things into our JavaScript. For example, we can move our x-data
into a function in a JavaScript file:
<div x-data="dropdownData()">
<button @click="open()">Open Dropdown</button>
<ul
x-show="isOpen()"
@click.away="close()"
>
Dropdown Body
</ul>
</div>
function dropdownData(){
return {
open: false,
open() { this.open = true },
close() { this.open = false },
isOpen() { return this.open === true }
}
}
In this situation, it's not very practical, but you can see how it can be done.
Conclusion
Apline.js is a simple, useful JavaScript framework that gives you the basics. Just what you need, nothing you don't. For a large project, you would probably appreciate the extra utility of the big frameworks. But maybe all you want is a simple, no-nonsense, small framework for your project. That's where Alpine comes in.
If you want to read the docs for Alpine, head over to their GitHub repo.
Top comments (0)