First impressions with Alpine.js

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.